/*
Theme Name: Support Trust
Theme URI: https://support-trust.org/
Author: Support Trust
Author URI: https://support-trust.org/
Description: Custom WordPress theme for Support Trust — a rehabilitation and inclusive recreation centre at KMC Sports Complex, Karachi. Converted from the static HTML production bundle (v10).
Version: 1.2.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: support-trust
Tags: charity, nonprofit, one-page, custom-colors, custom-menu, responsive
*/

/* ── RESET & TOKENS ────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g1:#144540;--g2:#1E6B56;--g3:#4A9B7F;
  --g4:#EAF4EF;--w:#fff;--ln:#F6F4F0;--bd:#E2DED8;
  --c1:#1A1A1A;--c2:#3D3D3D;--c3:#6B6B6B;
  --ease:.45s cubic-bezier(.25,.46,.45,.94);
}
html{scroll-behavior:smooth;scroll-padding-top:160px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'DM Sans',sans-serif;background:#fff;color:var(--c2);line-height:1.7;overflow-x:hidden}
section[id]{scroll-margin-top:160px}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 48px}
.label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--g3)}
.label--w{color:rgba(255,255,255,.5)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:500;padding:13px 28px;border-radius:5px;border:1.5px solid transparent;cursor:pointer;transition:var(--ease);white-space:nowrap}
.btn svg{width:14px;height:14px;flex-shrink:0;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn-white{background:rgba(255,255,255,.96);color:var(--g1)}
.btn-white:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.2)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.78);transform:translateY(-2px)}
.btn-solid{background:var(--g1);color:#fff;border-color:var(--g1)}
.btn-solid:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 10px 28px rgba(30,107,86,.3)}
.btn-outline{background:transparent;color:var(--g1);border-color:var(--g1)}
.btn-outline:hover{background:var(--g1);color:#fff;transform:translateY(-2px)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ════════════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  height:68px;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,box-shadow .4s;
}
.nav::before{
  content:'';position:absolute;top:0;left:0;right:0;height:140px;
  background:linear-gradient(to bottom,rgba(3,8,5,.62) 0%,rgba(3,8,5,.26) 55%,transparent 100%);
  pointer-events:none;z-index:-1;transition:opacity .4s;
}
.nav.solid{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--bd);box-shadow:0 1px 22px rgba(0,0,0,.07);
}
.nav.solid::before{opacity:0}
.nav-row{
  height:68px;display:flex;align-items:center;
  justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:0 48px;
}
.logo-wrap{display:flex;align-items:center;flex-shrink:0;padding:0;background:transparent;border:none;text-decoration:none}
.nav.solid .logo-wrap{background:transparent;border:none;padding:0}
.logo-img{display:block;height:42px;width:auto;transition:height .4s}
.nav.solid .logo-img{height:36px}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{
  font-size:13.5px;font-weight:400;color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.3);
  position:relative;padding-bottom:2px;transition:color .25s;white-space:nowrap;
}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:currentColor;transition:width .3s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav.solid .nav-links a{color:var(--c2);text-shadow:none}
.nav.solid .nav-links a:hover{color:var(--g1)}
.nav-cta{
  flex-shrink:0;font-size:13px;font-weight:500;padding:8px 20px;border-radius:5px;
  border:1.5px solid rgba(255,255,255,.42);color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);transition:var(--ease);white-space:nowrap;
}
.nav-cta:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.8)}
.nav.solid .nav-cta{background:var(--g1);color:#fff;border-color:var(--g1);text-shadow:none}
.nav.solid .nav-cta:hover{background:var(--g2);border-color:var(--g2)}
.nav-ctas{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Nav responsive */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-row{padding:0 28px}
}
@media(max-width:640px){
  .nav,.nav-row{height:60px}
  .nav-row{padding:0 18px}
  .logo-img{height:34px}
  .nav.solid .logo-img{height:30px}
  .nav-cta{font-size:12px;padding:7px 14px}
  .nav-ctas{gap:8px}
}
@media(max-width:420px){
  .nav-ctas .nav-cta-ghost{display:none}
}

/* ════════════════════════════════════════════════════════
   HERO — CINEMATIC SLIDESHOW WITH PER-SLIDE COPY
════════════════════════════════════════════════════════ */
.hero{
  position:relative;width:100%;
  height:100vh;height:100svh;
  min-height:600px;max-height:940px;
  display:flex;align-items:flex-end;
  overflow:hidden;background:#050d08;
}

/* ── Slides ────────────────────────────────────────── */
.reel{position:absolute;inset:0;z-index:0}
.slide{
  position:absolute;inset:0;
  background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.4s ease-in-out;
  will-change:opacity,transform;
}
/* Each slide gets its own Ken Burns direction — applied when .active added */
.slide.active{opacity:1}

/* Unique Ken Burns per slide */
.slide:nth-child(1).active{animation:kb1 8.5s ease-out forwards}
.slide:nth-child(2).active{animation:kb2 8.5s ease-out forwards}
.slide:nth-child(3).active{animation:kb3 8.5s ease-out forwards}
.slide:nth-child(4).active{animation:kb4 8.5s ease-out forwards}
.slide:nth-child(5).active{animation:kb5 8.5s ease-out forwards}

/* S1: outdoor track — pull back gently from right */
@keyframes kb1{from{transform:scale(1.07) translateX(1%)} to{transform:scale(1.00) translateX(-.3%)}}
/* S2: pool, calm water — very slow zoom into centre */
@keyframes kb2{from{transform:scale(1.08) translateX(0)} to{transform:scale(1.01) translateX(0)}}
/* S3: girl with bubbles portrait — slow zoom-in, slight upward drift */
@keyframes kb3{from{transform:scale(1.09) translateY(1%)} to{transform:scale(1.01) translateY(-.3%)}}
/* S4: physio parallel bars — drift right toward child's face */
@keyframes kb4{from{transform:scale(1.07) translateX(-1.2%)} to{transform:scale(1.00) translateX(.4%)}}
/* S5: basketball — drift left, following action direction */
@keyframes kb5{from{transform:scale(1.06) translateX(1.5%)} to{transform:scale(1.00) translateX(-.5%)}}

/* ── Cinematic overlays ─────────────────────────────── */
/* Bottom vignette — heaviest weight, anchors text */
.ov-btm{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(3,8,5,.92)  0%,
    rgba(3,8,5,.80) 10%,
    rgba(3,8,5,.56) 25%,
    rgba(3,8,5,.30) 42%,
    rgba(3,8,5,.14) 58%,
    rgba(3,8,5,.05) 74%,
    transparent      100%
  );
}
/* Left push — content anchor */
.ov-lft{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(3,8,5,.46) 0%,rgba(3,8,5,.16) 38%,transparent 56%);
}
/* Teal atmosphere — brand warmth, bottom-left */
.ov-teal{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 40% 32% at 2% 97%,rgba(30,107,86,.20) 0%,transparent 100%);
}
/* Film grain */
.grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.020;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:150px;
}

/* ── Progress bar ──────────────────────────────────── */
.hero-progress{position:absolute;bottom:0;left:0;right:0;z-index:10;height:2px;background:rgba(255,255,255,.1)}
.hero-bar{height:100%;background:rgba(74,155,127,.65);width:0%;transition:width 5.2s linear}

/* ── Dots ──────────────────────────────────────────── */
.hero-dots{
  position:absolute;right:40px;bottom:20px;z-index:10;
  display:flex;gap:8px;align-items:center;
}
.hdot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.26);cursor:pointer;
  transition:background .35s,transform .35s;
}
.hdot.on{background:rgba(255,255,255,.88);transform:scale(1.65)}

/* ── Scroll cue ────────────────────────────────────── */
.scue{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:18px}
.scue-line{width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.32),transparent);animation:linePulse 2.5s ease-in-out infinite}
@keyframes linePulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.5)}}
.scue-txt{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.26)}

/* ── Location badge ────────────────────────────────── */
.loc-badge{
  position:absolute;top:82px;right:48px;z-index:10;
  display:flex;align-items:center;gap:8px;
  background:rgba(3,8,5,.44);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:7px;padding:10px 14px;
  opacity:0;animation:rUp .85s 1.0s forwards;
}
.loc-dot{width:6px;height:6px;border-radius:50%;background:var(--g3);flex-shrink:0}
.loc-txt{font-size:11px;color:rgba(255,255,255,.5);line-height:1.42}
.loc-txt strong{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.82)}

/* ── Hero body ─────────────────────────────────────── */
.hero-body{position:relative;z-index:5;width:100%;padding-bottom:56px}

/* Eyebrow */
.h-brow{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
  opacity:0;animation:rUp .8s .08s forwards;
}
.h-pill{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g3);background:rgba(74,155,127,.14);border:1px solid rgba(74,155,127,.28);
  padding:4px 12px;border-radius:20px;
}
.h-sep{width:18px;height:1px;background:rgba(255,255,255,.22)}
.h-loc{font-size:11px;color:rgba(255,255,255,.42)}

/* ── Per-slide copy block ──────────────────────────────
   This wraps headline + sub. JS fades it out/in on slide change
   using the .transitioning class.                              */
.slide-copy{
  transition:opacity .5s ease, transform .5s ease;
  margin-bottom:24px;
}
.slide-copy.transitioning{opacity:0;transform:translateY(8px)}

/* Headline
   Sizing: clamp(26px, min(3.4vw, 5.5vh), 52px)
   At 1366×768: min(46.4px, 42.2px) = 42.2px
   3 lines × 1.09 LH × 42.2px ≈ 138px — fits at 100% zoom ✓ */
.h-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px, min(3.4vw, 5.5vh), 52px);
  font-weight:500;line-height:1.09;letter-spacing:-.022em;
  color:#fff;max-width:min(700px, 88vw);margin-bottom:14px;
}
.h-it{font-style:italic;color:rgba(255,255,255,.65)}
.h-ul{position:relative;display:inline-block}
.h-ul::after{
  content:'';position:absolute;left:0;bottom:1px;
  width:100%;height:2.5px;
  background:linear-gradient(90deg,var(--g3),var(--g2));
  border-radius:2px;opacity:.72;
}
/* Subheadline */
.h-sub{
  font-size:clamp(13px, 1.2vw, 15.5px);font-weight:300;line-height:1.82;
  color:rgba(255,255,255,.56);max-width:min(480px, 86vw);
}

/* CTAs — separate from slide-copy so they don't fade */
.h-ctas{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;
  opacity:0;animation:rUp .9s .5s forwards;
}

/* Stats ribbon */
.h-ribbon{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.09);
  opacity:0;animation:rUp .9s .66s forwards;
}
.rib-item{display:flex;flex-direction:column;padding-right:26px;flex-shrink:0}
.rib-div{width:1px;height:28px;background:rgba(255,255,255,.1);margin-right:26px;align-self:center;flex-shrink:0}
.rib-n{font-family:'Playfair Display',serif;font-size:clamp(17px,1.6vw,22px);font-weight:500;color:#fff;line-height:1}
.rib-l{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.36);margin-top:4px}

@keyframes rUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════════════════
   BELOW-HERO STYLES (verbatim from v7, no changes)
══════════════════════════════════════════════════════ */
/* ─ CONTAINER 02 — EDITORIAL DREAM SECTION ─ */
.dream{
  background:#F7F4EF;        /* warm parchment — not white, not grey */
  padding:0;
  overflow:hidden;
}
.dream-inner{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  min-height:74vh;
  min-height:74svh;
}
/* Left — text content */
.dream-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 64px 80px 80px;
  background:#F7F4EF;
  position:relative;
}
/* Subtle top-left corner mark */
.dream-text::before{
  content:'';
  position:absolute;top:44px;left:80px;
  width:28px;height:28px;
  border-top:1.5px solid #8fae9a;
  border-left:1.5px solid #8fae9a;
  opacity:.6;
}
.dream-label{
  font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:#8fae9a;                /* muted sage green */
  margin-bottom:36px;
  display:flex;align-items:center;gap:14px;
}
.dream-label::after{
  content:'';flex:1;max-width:40px;height:1px;background:#8fae9a;opacity:.5;
}
.dream-headline{
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,2.8vw,44px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.018em;
  color:#1c2820;               /* deep forest, not pure black */
  margin-bottom:36px;
  max-width:480px;
}
.dream-headline em{
  font-style:italic;
  color:#2d6b50;               /* muted brand green */
}
.dream-body{
  font-size:clamp(14.5px,1.3vw,16.5px);
  font-weight:300;
  line-height:1.68;
  color:#445550;               /* warm muted green-grey, tightened */
  max-width:420px;
  margin-bottom:40px;
}
.dream-accent{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Playfair Display',serif;
  font-size:clamp(13px,1.1vw,15px);
  font-weight:400;font-style:italic;
  color:#2d6b50;
  letter-spacing:.01em;
}
.dream-accent::before{
  content:'';
  width:36px;height:1.5px;
  background:linear-gradient(90deg,#4A9B7F,transparent);
  flex-shrink:0;
}

/* Right — cinematic image */
.dream-image{
  position:relative;
  overflow:hidden;
  /* Image fills the entire right column */
}
.dream-image img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;
  transition:transform .9s cubic-bezier(.25,.46,.45,.94);
  display:block;
}
.dream-image:hover img{
  transform:scale(1.03);
}
/* Subtle inner vignette on image — left edge blends toward text */
.dream-image::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,
    rgba(247,244,239,.22) 0%,
    transparent 18%
  );
  pointer-events:none;
}
/* Floating caption badge */
.dream-badge{
  position:absolute;bottom:36px;left:36px;z-index:2;
  background:rgba(244,241,235,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(143,174,154,.45);
  border-radius:8px;padding:14px 20px;
  max-width:220px;
}
.dream-badge-label{
  font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#5a8a72;margin-bottom:6px;
}
.dream-badge-text{
  font-family:'Playfair Display',serif;
  font-size:13.5px;font-weight:500;font-style:italic;
  color:#1c2820;line-height:1.42;
}

/* Mobile */
@media(max-width:960px){
  .dream-inner{grid-template-columns:1fr;min-height:auto}
  .dream-text{padding:72px 36px 64px;order:2}
  .dream-text::before{left:36px;top:40px}
  .dream-image{height:56vw;min-height:320px;order:1}
  .dream-image img{position:relative;inset:auto;width:100%;height:100%}
}
@media(max-width:600px){
  .dream-text{padding:60px 26px 52px}
  .dream-text::before{left:26px}
  .dream-image{height:72vw}
}
/* ─ CONTAINER 03 — OUR WORK IN ACTION ─ */
.c03i{
  background:#F7F4EF;
  padding:128px 0 100px;
  overflow:hidden;
  scroll-margin-top:160px;
}

/* Single shared container — centred once */
.c03i-inner{
  max-width:960px;
  margin:0 auto;
}

/* ── ONE 2-column grid for the entire section ──────────────────
   LEFT:  label + heading + paragraph + image (stacked)
   RIGHT: tabs only
   No separate header row — everything is in one composed grid.  */
.c03i-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}

/* LEFT column wrapper */
.c03i-left{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-left:16px;   /* breathing room from container edge */
  padding-right:24px;   /* inset text from image edge */
}

/* Label */
.c03i-label{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#8fae9a;
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;
}
.c03i-label::before{
  content:'';width:28px;height:1.5px;
  background:linear-gradient(90deg,#4A9B7F,rgba(74,155,127,0));
  flex-shrink:0;
}

/* Heading */
.c03i-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,2.6vw,40px);font-weight:400;
  line-height:1.2;letter-spacing:-.018em;
  color:#1c2820;margin-bottom:16px;
  max-width:400px;
}
.c03i-h em{font-style:italic;color:#2d6b50}

/* Supporting paragraph — left side, above image */
.c03i-para{
  font-size:14px;font-weight:300;color:#6a7d72;
  line-height:1.82;
  margin-bottom:28px;
  max-width:380px;
}

/* ── Image window ── */
.c03i-visual{
  position:relative;border-radius:0;
  overflow:hidden;
  margin-left:-16px;   /* flush-left: cancels parent padding-left */
  /* Use aspect-ratio so image height tracks its column width naturally */
  aspect-ratio:4/3;
  min-height:320px;
  background:#1c2820;
  flex:1;   /* fills remaining left column height */
}
.c03i-frame{
  position:absolute;inset:0;
  background-size:cover;background-position:center 35%;
  opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.c03i-frame.on{opacity:1;animation:c03iKB 12s ease-out forwards}
@keyframes c03iKB{
  from{transform:scale(1.04) translateX(0)}
  to  {transform:scale(1.00) translateX(0)}
}
.c03i-visual-ov{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(
    to top,rgba(10,18,12,.82) 0%,rgba(10,18,12,.42) 30%,
    rgba(10,18,12,.12) 55%,transparent 75%);
}
.c03i-caption{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:24px 24px 20px;
}
.c03i-cap-label{
  font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:5px;
}
.c03i-cap-text{
  font-family:'Playfair Display',serif;
  font-size:14px;font-weight:400;font-style:italic;
  color:rgba(255,255,255,.72);line-height:1.4;
}
.c03i-visual-dots{
  position:absolute;top:18px;right:18px;z-index:4;display:flex;gap:6px;
}
.c03i-vdot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.28);
  transition:background .3s,transform .3s;cursor:pointer;
}
.c03i-vdot.on{background:rgba(255,255,255,.85);transform:scale(1.5)}

/* ── RIGHT column: tabs only ── */
.c03i-tabs{
  display:flex;flex-direction:column;
  gap:0;position:relative;
  /* Align tabs to start — they grow naturally */
  padding-top:8px;  /* subtle top nudge to optically align with label */
}
.c03i-tabs::before{
  content:none;   /* divider line removed */
}
.c03i-tab{
  padding:26px 0 26px 30px;
  cursor:pointer;
  border-left:1.5px solid transparent;
  transition:border-color .35s,background .35s;
  position:relative;border-radius:0 8px 8px 0;
}
.c03i-tab:hover{background:rgba(30,107,86,.04)}
.c03i-tab.on{border-left-color:#2d6b50;background:rgba(45,107,80,.05)}
.c03i-tab-num{
  font-family:'Playfair Display',serif;
  font-size:11px;font-weight:400;font-style:italic;
  color:#a0b4aa;margin-bottom:8px;transition:color .35s;
}
.c03i-tab.on .c03i-tab-num{color:#2d6b50}
.c03i-tab-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(17px,1.5vw,21px);font-weight:500;
  color:#4a5f54;line-height:1.2;transition:color .35s;
}
.c03i-tab.on .c03i-tab-title{color:#1c2820}
.c03i-tab-body{
  font-size:13.5px;font-weight:300;color:#7a8f84;
  line-height:1.78;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s cubic-bezier(.25,.46,.45,.94),
             opacity .4s ease,margin-top .4s ease;
  margin-top:0;
}
.c03i-tab.on .c03i-tab-body{max-height:120px;opacity:1;margin-top:12px}
.c03i-tab-accent{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Playfair Display',serif;
  font-size:12px;font-weight:400;font-style:italic;color:#2d6b50;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s .1s ease,opacity .4s .15s ease,margin-top .4s ease;
  margin-top:0;
}
.c03i-tab-accent::before{
  content:'';width:22px;height:1px;
  background:rgba(45,107,80,.45);flex-shrink:0;
}
.c03i-tab.on .c03i-tab-accent{max-height:40px;opacity:1;margin-top:14px}

/* Mobile */
@media(max-width:900px){
  .c03i-grid{grid-template-columns:1fr;gap:40px}
  .c03i-visual{aspect-ratio:16/9;min-height:auto}
}
@media(max-width:600px){
  .c03i{padding:80px 0 80px}
  .c03i-tab{padding:20px 0 20px 22px}
}

/* ─ CONTAINER 04/* ─ CONTAINER 04/* ─ CONTAINER 04 — COMMUNITY / SCHOOL OUTREACH ─ */
/*  Right-aligned cinematic layout — matching editorial reference.
    Text stacks on the right 50% with layered reveal animations.
    Image fills full bleed. Content anchored to centre-right.    */
.c04{
  position:relative;
  width:100%;
  height:90vh; height:90svh;
  min-height:580px;
  max-height:900px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:#060d09;
}

/* Background image */
.c04-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 28%;
  will-change:transform;
  animation:c04KB 28s ease-in-out infinite alternate;
}
@keyframes c04KB{
  0%  {transform:scale(1.00) translateX(0)}
  50% {transform:scale(1.03) translateX(-.4%)}
  100%{transform:scale(1.01) translateX(.3%)}
}

/* Overlays — cinematic grade
   Strong right-to-left push so right content is readable
   Left side of photo remains visible and emotional        */
.c04-ov1{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    to left,
    rgba(4,10,6,.72) 0%,
    rgba(4,10,6,.58) 22%,
    rgba(4,10,6,.36) 42%,
    rgba(4,10,6,.14) 60%,
    rgba(4,10,6,.04) 76%,
    transparent      100%
  );
}
/* Top & bottom edge darkening */
.c04-ov2{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(4,10,6,.38) 0%,
    transparent 22%,
    transparent 72%,
    rgba(4,10,6,.52) 100%
  );
}
/* Teal atmosphere — bottom right echo */
.c04-ov3{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(
    ellipse 38% 32% at 96% 92%,
    rgba(30,107,86,.16) 0%,
    transparent 100%
  );
}
/* Film grain */
.c04-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.024;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px;
}

/* Outer wrapper — full width */
.c04-body{
  position:relative;z-index:5;
  width:100%;max-width:1180px;
  margin:0 auto;padding:0 60px;
  /* Content lives in the right half */
  display:flex;justify-content:flex-end;
}

/* Content column — right-anchored */
.c04-content{
  max-width:540px;
  width:100%;
}

/* Programme label */
.c04-label{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g3);
  display:flex;align-items:center;gap:12px;
  margin-bottom:28px;

  opacity:0;
  animation:none; /* JS-triggered via IntersectionObserver */
}
.c04-label.revealed{
  animation:c04Up .8s ease-out forwards;
}
.c04-label::before{
  content:'';width:28px;height:1.5px;
  background:linear-gradient(90deg,var(--g3),transparent);
  flex-shrink:0;
}

/* Headline — 3 stacked lines */
.c04-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(32px, min(4vw, 5.8vh), 60px);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.025em;
  color:#fff;
  margin-bottom:26px;
}
/* Each line is a separate span for staggered reveal */
.c04-line{
  display:block;
  overflow:hidden;   /* clips the upward slide */
  padding-bottom:.06em; /* prevents descenders clipping */
}
.c04-word{
  display:block;
  transform:translateY(100%);opacity:0;
  transition:transform .85s cubic-bezier(.25,.46,.45,.94),
             opacity    .85s cubic-bezier(.25,.46,.45,.94);
}
.c04-line.revealed .c04-word{
  transform:translateY(0);opacity:1;
}
/* Italic third line — the emotional peak */
.c04-line.italic .c04-word{
  font-style:italic;
  color:rgba(255,255,255,.68);
}

/* Paragraph */
.c04-p{
  font-size:clamp(13.5px,1.2vw,15.5px);
  font-weight:300;line-height:1.82;
  color:rgba(255,255,255,.58);
  max-width:460px;
  margin-bottom:32px;

  opacity:0;transform:translateY(16px);
  transition:opacity .85s .55s ease,transform .85s .55s ease;
}
.c04-p.revealed{opacity:1;transform:translateY(0)}

/* Stats row */
.c04-stats{
  display:flex;gap:32px;flex-wrap:wrap;
  margin-bottom:40px;

  opacity:0;transform:translateY(14px);
  transition:opacity .8s .72s ease,transform .8s .72s ease;
}
.c04-stats.revealed{opacity:1;transform:translateY(0)}
.c04-stat-n{
  font-family:'Playfair Display',serif;
  font-size:28px;font-weight:500;color:#fff;line-height:1;
}
.c04-stat-l{
  font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.38);margin-top:5px;
}

/* CTA button */
.c04-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:500;
  color:var(--c1);background:rgba(255,255,255,.94);
  border:none;border-radius:8px;
  padding:14px 28px;cursor:pointer;
  text-decoration:none;
  transition:background .3s,transform .3s,box-shadow .3s;
  letter-spacing:.01em;

  opacity:0;transform:translateY(12px);
  transition:background .3s,transform .35s,box-shadow .3s,
             opacity .8s .90s ease;
}
.c04-cta.revealed{opacity:1;transform:translateY(0)}
.c04-cta:hover{
  background:#fff;transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(0,0,0,.22);
}
.c04-cta svg{width:14px;height:14px;flex-shrink:0;
  transition:transform .3s}
.c04-cta:hover svg{transform:translateX(3px)}

/* Authenticity tag — bottom left */
.c04-tag{
  position:absolute;bottom:36px;left:60px;z-index:5;
  opacity:0;animation:none;
}
.c04-tag.revealed{animation:c04Fade .9s 1.0s ease-out forwards}
.c04-tag-main{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.c04-tag-sub{font-family:'Playfair Display',serif;font-size:12px;font-weight:400;font-style:italic;color:rgba(255,255,255,.2);margin-top:2px}

@keyframes c04Up  {from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)}}
@keyframes c04Fade{from{opacity:0} to{opacity:1}}

/* Responsive */
@media(max-width:960px){
  .c04{height:auto;min-height:580px;align-items:flex-end;padding-bottom:0}
  .c04-body{padding:88px 28px 64px;justify-content:flex-start}
  .c04-content{max-width:100%}
  .c04-tag{left:28px}
}
@media(max-width:600px){
  .c04{max-height:none}
  .c04-body{padding:72px 22px 56px}
}

/* ─ CONTAINER 05 — HYDROTHERAPY / POOL ─ *//* ─ CONTAINER 05 — HYDROTHERAPY / POOL ─ */

/* The entire section is designed around one principle:
   the KMC signage, building, and water are all visible —
   nothing is cropped, nothing is hidden.                 */
.c05{
  position:relative;
  width:100%;
  /* Height tuned so full image (sign + pool) fits at 100% zoom
     on a standard 1366×768 laptop without cropping            */
  height:88vh; height:88svh;
  min-height:560px;
  max-height:820px;
  overflow:hidden;
  background:#0d1e24;
  display:flex;
  align-items:flex-end;
}

/* ── Background image ──────────────────────────────────
   background-position: center 8%
   This keeps the building and signage fully visible in
   the upper portion while the reflective water fills the
   lower portion — exactly what the image shows.
   background-size: 100% auto ensures no vertical cropping.
   Falls back to cover on very wide viewports.          */
.c05-img{
  position:absolute;inset:0;
  background-size:cover;
  /* Anchored toward top so sign is never cut */
  background-position:center 8%;
  will-change:transform;
  /* Ken Burns: purely horizontal drift, absolutely no vertical
     movement, max scale 1.03 — preserves sign visibility     */
  animation:c05KB 26s ease-in-out infinite alternate;
}
@keyframes c05KB{
  0%   { transform: scale(1.00) translateX( 0%)    }
  50%  { transform: scale(1.02) translateX(-.5%)   }
  100% { transform: scale(1.01) translateX( .4%)   }
}

/* ── Overlay system ────────────────────────────────────
   Deliberately lighter than C03/C04 — the pool image
   is bright and clean. We want clarity, not cinema noir.

   Layer 1: Very soft bottom gradient — text lives here
   Layer 2: Left-side wash — anchors content without
            obscuring the water reflection on the right
   Layer 3: Teal tint — bridges pool colour to palette
   No grain — the water texture is the texture          */
.c05-ov1{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(8,18,22,.88)  0%,
    rgba(8,18,22,.70) 16%,
    rgba(8,18,22,.42) 34%,
    rgba(8,18,22,.18) 52%,
    rgba(8,18,22,.06) 68%,
    transparent        84%
  );
}
.c05-ov2{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    100deg,
    rgba(8,18,22,.52) 0%,
    rgba(8,18,22,.22) 36%,
    transparent        56%
  );
}
/* Teal warmth from lower left — echoes water colour */
.c05-ov3{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(
    ellipse 50% 38% at 4% 96%,
    rgba(20,80,90,.18) 0%,
    transparent 100%
  );
}

/* ── Facility identity tag — top centre ───────────────
   Floats quietly above the building in the image,
   echoing the real sign below it.                      */
.c05-id{
  position:absolute;top:40px;left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;align-items:center;gap:10px;
  background:rgba(8,18,22,.38);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:20px;padding:7px 16px;
  white-space:nowrap;
  opacity:0;animation:c05Fade .8s .3s ease-out forwards;
}
.c05-id-dot{
  width:6px;height:6px;border-radius:50%;
  background:#4fc3d4;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(79,195,212,.18);
}
.c05-id-txt{
  font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}

/* ── Content block — bottom left ──────────────────── */
.c05-body{
  position:relative;z-index:5;
  width:100%;max-width:1180px;
  margin:0 auto;padding:0 60px 68px;
}

/* Eyebrow */
.c05-label{
  font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;
  /* Teal that echoes the pool's colour */
  color:#4fc3d4;
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
  opacity:0;animation:c05Rise .85s .15s cubic-bezier(.25,.46,.45,.94) forwards;
}
.c05-label::before{
  content:'';width:28px;height:1.5px;
  background:linear-gradient(90deg,#4fc3d4,transparent);
  flex-shrink:0;
}

/* Headline */
.c05-headline{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px, min(3.2vw, 5.4vh), 50px);
  font-weight:400;
  line-height:1.14;letter-spacing:-.02em;
  color:#fff;
  max-width:min(640px, 86vw);
  margin-bottom:20px;
  opacity:0;animation:c05Rise 1.0s .35s cubic-bezier(.25,.46,.45,.94) forwards;
}
.c05-headline em{
  font-style:italic;color:rgba(255,255,255,.65);
}

/* Divider — a single water-teal line */
.c05-rule{
  width:48px;height:1.5px;
  background:linear-gradient(90deg,#4fc3d4,transparent);
  margin-bottom:20px;
  opacity:0;animation:c05Fade .8s .55s ease-out forwards;
}

/* Body */
.c05-para{
  font-size:clamp(14px,1.25vw,16px);
  font-weight:300;line-height:1.82;
  color:rgba(255,255,255,.56);
  max-width:min(520px, 84vw);
  margin-bottom:30px;
  opacity:0;animation:c05Rise .9s .65s cubic-bezier(.25,.46,.45,.94) forwards;
}

/* Accent / closing line */
.c05-accent{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Playfair Display',serif;
  font-size:clamp(13px,1.1vw,15px);
  font-weight:400;font-style:italic;
  color:#4fc3d4;letter-spacing:.01em;
  opacity:0;animation:c05Rise .85s .82s cubic-bezier(.25,.46,.45,.94) forwards;
}
.c05-accent::before{
  content:'';width:28px;height:1.5px;
  background:linear-gradient(90deg,#4fc3d4,transparent);
  flex-shrink:0;
}

/* Facility credit stamp — bottom right */
.c05-credit{
  position:absolute;bottom:68px;right:60px;z-index:5;
  text-align:right;
  opacity:0;animation:c05Fade .8s 1.0s ease-out forwards;
}
.c05-credit-main{
  font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.28);
  margin-bottom:3px;
}
.c05-credit-sub{
  font-family:'Playfair Display',serif;
  font-size:12px;font-weight:400;font-style:italic;
  color:rgba(255,255,255,.18);
}

/* Animations */
@keyframes c05Fade{
  from{opacity:0}to{opacity:1}
}
@keyframes c05Rise{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Responsive */
@media(max-width:960px){
  .c05{height:80vh;height:80svh}
  .c05-body{padding:0 28px 60px}
  .c05-id{top:28px}
  .c05-credit{right:28px;bottom:60px}
}
@media(max-width:600px){
  .c05{height:86vh;height:86svh;max-height:none}
  .c05-body{padding:0 22px 52px}
  .c05-credit{display:none}
  .c05-id{left:22px;transform:none}
}

.facility{position:relative;width:100%;height:76vh;min-height:500px;display:flex;align-items:center;overflow:hidden}
.facility-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;transition:transform .6s}
.facility:hover .facility-bg{transform:scale(1.015)}
.facility-ov{position:absolute;inset:0;background:linear-gradient(to right,rgba(4,10,7,.84) 0%,rgba(4,10,7,.48) 52%,rgba(4,10,7,.14) 100%)}
.facility-body{position:relative;z-index:2;max-width:550px}
.facility-body .label{display:block;margin-bottom:16px}
.facility-h2{font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,52px);font-weight:500;color:#fff;line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.facility-h2 em{font-style:italic;color:rgba(255,255,255,.58)}
.facility-stats{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.fstat-n{font-family:'Playfair Display',serif;font-size:28px;font-weight:500;color:#fff;line-height:1}
.fstat-l{font-size:10px;color:rgba(255,255,255,.36);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.facility-p{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.52);line-height:1.82;margin-bottom:26px;max-width:400px}
.editorial{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.editorial.flip{direction:rtl}.editorial.flip>*{direction:ltr}
.ed-img{position:relative;overflow:hidden;min-height:460px}
.ed-img-inner{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
.ed-img:hover .ed-img-inner{transform:scale(1.04)}
.ed-img.teal-field{background:var(--g1);display:flex;align-items:center;justify-content:center}
.ed-img.dark-field{background:#0a1a12;display:flex;align-items:center;justify-content:center}
.ed-content{display:flex;flex-direction:column;justify-content:center;padding:68px 60px;background:var(--w)}
.ed-content.linen{background:var(--ln)}
.ed-content .label{display:block;margin-bottom:14px}
.ed-h2{font-family:'Playfair Display',serif;font-size:clamp(22px,2.5vw,36px);font-weight:500;line-height:1.17;letter-spacing:-.02em;color:var(--c1);margin-bottom:14px}
.ed-h2 em{font-style:italic;color:var(--g1)}
.ed-p{font-size:14px;font-weight:300;line-height:1.87;color:var(--c3);margin-bottom:12px}
.ed-list{margin:16px 0 24px;display:flex;flex-direction:column}
.ed-list-item{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--bd);font-size:13px;color:var(--c2)}
.ed-list-item:first-child{border-top:1px solid var(--bd)}
.ed-dot{width:7px;height:7px;border-radius:50%;background:var(--g3);flex-shrink:0}
.ed-link{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--g1);margin-top:8px;transition:gap .3s}
.ed-link:hover{gap:13px}
.field-art{text-align:center;padding:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.field-n{font-family:'Playfair Display',serif;font-size:100px;font-weight:600;color:rgba(255,255,255,.08);line-height:1}
.field-logo{width:160px;opacity:.12;filter:brightness(0) invert(1);margin-top:20px}
.field-lbl{font-size:11px;color:rgba(255,255,255,.26);letter-spacing:.15em;text-transform:uppercase;margin-top:16px}
.pool-section{position:relative;width:100%;height:68vh;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.pool-bg{position:absolute;inset:0;background-size:cover;background-position:center 55%;transition:transform .6s}
.pool-section:hover .pool-bg{transform:scale(1.015)}
.pool-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,10,7,.88) 0%,rgba(4,10,7,.38) 42%,rgba(4,10,7,.1) 70%,transparent 100%)}
.pool-body{position:relative;z-index:2;padding-bottom:68px;max-width:640px}
.pool-body .label{display:block;margin-bottom:12px}
.pool-h2{font-family:'Playfair Display',serif;font-size:clamp(24px,3.8vw,50px);font-weight:500;color:#fff;line-height:1.12;letter-spacing:-.02em;margin-bottom:14px}
.pool-h2 em{font-style:italic;color:rgba(255,255,255,.56)}
.pool-p{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.52);line-height:1.82;max-width:460px}
.community-section{position:relative;min-height:580px;display:flex;align-items:center;overflow:hidden}
.comm-bg{position:absolute;inset:0;background-size:cover;background-position:center top}
.comm-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,10,7,.18) 0%,rgba(4,10,7,.7) 100%),linear-gradient(to left,rgba(4,10,7,.82) 0%,rgba(4,10,7,.18) 50%)}
.comm-body{position:relative;z-index:2;margin-left:auto;max-width:500px;padding:80px 0}
.comm-body .label{display:block;margin-bottom:14px}
.comm-h2{font-family:'Playfair Display',serif;font-size:clamp(24px,3.5vw,46px);font-weight:500;color:#fff;line-height:1.13;letter-spacing:-.02em;margin-bottom:16px}
.comm-h2 em{font-style:italic;color:rgba(255,255,255,.56)}
.comm-p{font-size:14px;font-weight:300;color:rgba(255,255,255,.52);line-height:1.82;margin-bottom:26px}
.comm-stats{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.cstat-n{font-family:'Playfair Display',serif;font-size:34px;font-weight:500;color:#fff;line-height:1}
.cstat-l{font-size:10px;color:rgba(255,255,255,.36);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.csr{background:#060d08;padding:108px 0;position:relative;overflow:hidden}
.csr-orb{position:absolute;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(30,107,86,.2) 0%,transparent 70%);pointer-events:none}
.csr-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:88px;align-items:center;position:relative;z-index:1}
.csr-left .label{display:block;margin-bottom:20px}
.csr-h2{font-family:'Playfair Display',serif;font-size:clamp(26px,3.4vw,48px);font-weight:500;color:#fff;line-height:1.11;letter-spacing:-.02em;margin-bottom:20px}
.csr-h2 em{font-style:italic;color:rgba(255,255,255,.44)}
.csr-p{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.46);line-height:1.85;margin-bottom:30px}
.csr-btns{display:flex;gap:10px;flex-wrap:wrap}
.sdg-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07)}
.sdg-lbl{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-right:3px}
.sdg-chip{font-size:9px;font-weight:600;letter-spacing:.07em;padding:3px 9px;border-radius:20px;border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.36)}
.csr-steps{display:flex;flex-direction:column;gap:9px}
.csr-step{display:flex;gap:18px;padding:20px 22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;transition:background var(--ease)}
.csr-step:hover{background:rgba(255,255,255,.09)}
.step-n{font-family:'Playfair Display',serif;font-size:20px;font-weight:400;color:rgba(255,255,255,.13);flex-shrink:0;line-height:1;padding-top:2px}
.step-h{font-size:13.5px;font-weight:500;color:#fff;margin-bottom:4px}
.step-p{font-size:11.5px;color:rgba(255,255,255,.38);line-height:1.62}
/* ─ CONTAINER 07 — FUNDING MODELS (vertical card layout) ─ */
.funding{
  padding:112px 0 120px;
  background:#fff;
}
/* Section header — centred, generous breathing space */
.funding-head{
  text-align:center;
  max-width:560px;margin:0 auto 72px;
}
.funding-head .label{
  display:block;margin-bottom:18px;
}
.funding-head h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,3.5vw,52px);font-weight:400;
  color:var(--c1);line-height:1.16;letter-spacing:-.02em;
  margin-bottom:18px;
}
.funding-head h2 em{font-style:italic;color:var(--g1)}
.funding-head p{
  font-size:15px;font-weight:300;color:var(--c3);line-height:1.82;
}

/* 5-column card grid */
.funding-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  align-items:start;
}

/* Individual card */
.f-card{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:16px;
  padding:32px 26px 28px;
  display:flex;flex-direction:column;
  transition:border-color .35s,box-shadow .35s,transform .35s;
  position:relative;
}
.f-card:hover{
  border-color:rgba(30,107,86,.35);
  box-shadow:0 8px 32px rgba(30,107,86,.1);
  transform:translateY(-3px);
}

/* Featured card — leaf green, elevated */
.f-card.feat{
  background:var(--g1);
  border-color:var(--g1);
  /* Push it up and down to look taller than siblings */
  margin-top:-16px;
  margin-bottom:-16px;
  border-radius:18px;
  padding-top:44px;
  padding-bottom:36px;
  box-shadow:0 16px 48px rgba(30,107,86,.3);
  z-index:1;
}
.f-card.feat:hover{
  background:var(--g2);
  border-color:var(--g2);
  transform:translateY(-5px);
  box-shadow:0 20px 56px rgba(30,107,86,.4);
}

/* Card number */
.f-num{
  font-family:'Playfair Display',serif;
  font-size:11px;font-weight:400;font-style:italic;
  color:var(--c3);margin-bottom:20px;
}
.f-card.feat .f-num{color:rgba(255,255,255,.42)}

/* Icon container */
.f-icon{
  width:40px;height:40px;
  border-radius:10px;
  background:#EBF7F1;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  flex-shrink:0;
}
.f-card.feat .f-icon{background:rgba(255,255,255,.18)}
.f-icon svg{width:20px;height:20px;color:var(--g1)}
.f-card.feat .f-icon svg{color:#fff}

/* Card title */
.f-title{
  font-family:'Playfair Display',serif;
  font-size:18px;font-weight:500;
  color:var(--c1);line-height:1.2;
  margin-bottom:12px;
}
.f-card.feat .f-title{color:#fff}

/* Price badge */
.f-badge{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:600;
  color:var(--g1);background:#EBF7F1;
  border:1px solid rgba(30,107,86,.2);
  padding:4px 11px;border-radius:4px;
  margin-bottom:16px;
  letter-spacing:.01em;white-space:nowrap;
  align-self:flex-start;
}
.f-card.feat .f-badge{
  background:rgba(255,255,255,.2);
  color:#fff;border-color:transparent;
}

/* Body text */
.f-body{
  font-size:12.5px;font-weight:300;
  color:var(--c3);line-height:1.72;
  flex:1;margin-bottom:24px;
}
.f-card.feat .f-body{color:rgba(255,255,255,.68)}

/* CTA link */
.f-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;
  color:var(--g1);
  transition:gap .3s,color .3s;
  margin-top:auto;
}
.f-cta svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s}
.f-card:not(.feat):hover .f-cta{gap:12px;color:var(--g2)}
.f-card:not(.feat):hover .f-cta svg{transform:translateX(3px)}
.f-card.feat .f-cta{color:rgba(255,255,255,.9)}
.f-card.feat:hover .f-cta{gap:12px}
.f-card.feat:hover .f-cta svg{transform:translateX(3px)}

/* CTA arrow circle */
.f-arrow{
  width:32px;height:32px;border-radius:50%;
  background:#EBF7F1;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .3s,transform .3s;
}
.f-card:not(.feat):hover .f-arrow{background:rgba(30,107,86,.18);transform:translateX(2px)}
.f-card.feat .f-arrow{background:rgba(255,255,255,.2)}
.f-card.feat:hover .f-arrow{background:rgba(255,255,255,.3)}

/* Responsive */
@media(max-width:1100px){
  .funding-cards{grid-template-columns:repeat(3,1fr)}
  .f-card.feat{margin-top:0;margin-bottom:0}
}
@media(max-width:720px){
  .funding-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .funding-cards{grid-template-columns:1fr}
}
.involve{background:var(--ln);padding:108px 0}
.involve-head{margin-bottom:60px}
.involve-head .label{display:block;margin-bottom:14px}
.involve-head h2{font-family:'Playfair Display',serif;font-size:clamp(24px,3.2vw,46px);font-weight:500;color:var(--c1);line-height:1.13;letter-spacing:-.02em}
.involve-head h2 em{font-style:italic;color:var(--g1)}
.involve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bd);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.inv-card{background:#fff;padding:46px 38px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background var(--ease)}
.inv-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--g4);transition:background var(--ease)}
.inv-card:hover{background:var(--g4)}
.inv-card:hover::after{background:var(--g1)}
.inv-n{font-family:'Playfair Display',serif;font-size:52px;font-weight:400;color:var(--g4);line-height:1;margin-bottom:22px;display:block}
.inv-card h3{font-family:'Playfair Display',serif;font-size:23px;font-weight:500;color:var(--c1);margin-bottom:10px}
.inv-card p{font-size:13.5px;color:var(--c3);line-height:1.8;font-weight:300;flex:1;margin-bottom:30px}
.pull-quote{background:#060d08;padding:100px 0}
.pq-inner{max-width:820px;margin:0 auto;text-align:center}
.pq-mark{font-family:'Playfair Display',serif;font-size:84px;line-height:.38;color:var(--g1);display:block;margin-bottom:26px;opacity:.27}
.pq-text{font-family:'Playfair Display',serif;font-size:clamp(19px,2.8vw,38px);font-weight:400;font-style:italic;color:#fff;line-height:1.46;margin-bottom:32px}
.pq-text strong{font-style:normal;font-weight:600;color:var(--g3)}
.pq-attr{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.pq-attr span{font-weight:300;color:rgba(255,255,255,.16);letter-spacing:0;text-transform:none}

/* ─ GET INVOLVED ──────────────────────────────────────────── */
.involve{
  background:#F6F3EE;  /* warm beige — matches dream/space sections */
  padding:100px 0 0;
}
/* Header */
.involve-lbl{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g1);
  display:block;margin-bottom:22px;
}
.involve-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,3.5vw,50px);font-weight:400;
  line-height:1.14;letter-spacing:-.02em;
  color:var(--c1);margin-bottom:16px;
}
.involve-h em{font-style:italic;color:var(--g1)}
.involve-sub{
  font-size:15px;font-weight:300;color:var(--c3);
  line-height:1.82;max-width:440px;margin-bottom:56px;
}
/* 3-card grid */
.involve-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding-bottom:100px;
}
.inv-card{
  background:#fff;border:1px solid var(--bd);
  border-radius:14px;padding:36px 30px 32px;
  display:flex;flex-direction:column;
  transition:border-color .35s,box-shadow .35s,transform .35s;
}
.inv-card:hover{
  border-color:rgba(30,107,86,.28);
  box-shadow:0 6px 28px rgba(30,107,86,.08);
  transform:translateY(-3px);
}
.inv-card-num{
  font-family:'Playfair Display',serif;
  font-size:11px;font-weight:400;font-style:italic;
  color:var(--c3);margin-bottom:20px;
}
.inv-card-title{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:500;
  color:var(--c1);margin-bottom:12px;
}
.inv-card-p{
  font-size:13.5px;font-weight:300;color:var(--c3);
  line-height:1.78;flex:1;margin-bottom:28px;
}
/* CTA — first card gets solid green, others ghost */
.inv-btn-solid{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  padding:11px 22px;border-radius:7px;
  background:var(--g1);color:#fff;
  border:1.5px solid var(--g1);
  cursor:pointer;transition:background .3s,transform .3s;
  text-decoration:none;align-self:flex-start;
}
.inv-btn-solid:hover{background:var(--g2);border-color:var(--g2);transform:translateY(-2px)}
.inv-btn-solid svg{width:12px;height:12px;flex-shrink:0}
.inv-btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  padding:11px 22px;border-radius:7px;
  background:transparent;color:var(--g1);
  border:1.5px solid rgba(30,107,86,.3);
  cursor:pointer;transition:border-color .3s,color .3s,transform .3s;
  text-decoration:none;align-self:flex-start;
}
.inv-btn-ghost:hover{border-color:var(--g1);transform:translateY(-2px)}
.inv-btn-ghost svg{width:12px;height:12px;flex-shrink:0}

/* Quote section — flows straight from involve, different bg */
.involve-quote{
  background:#E8EDE8;  /* very soft sage — separates visually from beige */
  padding:80px 0 84px;
  text-align:center;
}
.involve-quote-mark{
  font-family:'Playfair Display',serif;
  font-size:56px;line-height:.3;
  color:var(--g1);opacity:.22;
  display:block;margin-bottom:28px;
}
.involve-quote-text{
  font-family:'Playfair Display',serif;
  font-size:clamp(20px,2.6vw,34px);
  font-weight:400;font-style:italic;
  color:var(--c1);line-height:1.5;
  max-width:700px;margin:0 auto 20px;
}
.involve-quote-text strong{
  font-style:normal;font-weight:600;
  color:var(--g1);
}
.involve-quote-attr{
  font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c3);
  opacity:.55;
}

/* Responsive */
@media(max-width:880px){
  .involve-cards{grid-template-columns:1fr}
  .involve{padding:80px 0 0}
}
@media(max-width:600px){
  .involve-h{font-size:clamp(26px,6vw,36px)}
  .involve-quote{padding:60px 0 64px}
}

/* ─ CSR & PARTNERSHIPS ─────────────────────────────────────── */
.csr-intro{
  background:var(--g1);   /* deep brand green — same as navbar CTA */
  padding:108px 0 112px;
  position:relative;overflow:hidden;
}
/* Subtle orb depth — keeps it rich not flat */
.csr-intro::before{
  content:'';position:absolute;
  right:-180px;top:-180px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
  pointer-events:none;
}
.csr-intro::after{
  content:'';position:absolute;
  left:-100px;bottom:-120px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%);
  pointer-events:none;
}
.csr-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
  position:relative;z-index:1;
}
/* Left */
.csr-lbl{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  margin-bottom:22px;display:block;
}
.csr-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,3.8vw,54px);font-weight:400;
  color:#fff;line-height:1.1;letter-spacing:-.022em;
  margin-bottom:24px;
}
.csr-h em{font-style:italic;color:rgba(255,255,255,.65)}
.csr-p{
  font-size:15px;font-weight:300;
  color:rgba(255,255,255,.58);line-height:1.85;
  max-width:440px;margin-bottom:36px;
}
.csr-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.btn-csr-solid{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:500;
  padding:13px 26px;border-radius:7px;
  background:#fff;color:var(--g1);
  border:1.5px solid #fff;cursor:pointer;
  transition:background .3s,transform .3s,box-shadow .3s;
  text-decoration:none;white-space:nowrap;
}
.btn-csr-solid:hover{background:var(--g4);transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.18)}
.btn-csr-solid svg{width:13px;height:13px;flex-shrink:0;transition:transform .3s}
.btn-csr-solid:hover svg{transform:translateX(3px)}
.btn-csr-ghost{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:500;
  padding:13px 26px;border-radius:7px;
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s;
  text-decoration:none;white-space:nowrap;
}
.btn-csr-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.8);transform:translateY(-2px)}
/* SDG tags */
.csr-sdg-row{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.12);
}
.csr-sdg-lbl{
  font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.28);margin-right:4px;
}
.csr-sdg-chip{
  font-size:9.5px;font-weight:600;letter-spacing:.07em;
  padding:4px 11px;border-radius:20px;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.5);
}
/* Right — step cards */
.csr-steps{display:flex;flex-direction:column;gap:10px}
.csr-step{
  display:flex;gap:20px;align-items:flex-start;
  padding:22px 24px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  transition:background .35s;
}
.csr-step:hover{background:rgba(255,255,255,.11)}
.csr-step-n{
  font-family:'Playfair Display',serif;
  font-size:20px;font-weight:400;font-style:italic;
  color:rgba(255,255,255,.2);flex-shrink:0;line-height:1;padding-top:2px;
}
.csr-step-h{font-size:13.5px;font-weight:500;color:#fff;margin-bottom:6px}
.csr-step-p{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.65;font-weight:300}

/* ─ FUNDING MODELS ─────────────────────────────────────────── */
/*  Art-direction pass: less SaaS pricing, more institutional.
    Smaller cards, tighter hierarchy, softer featured card,
    refined arrow, warm borders, compact section rhythm.       */
.funding-new{
  padding:88px 0 96px;
  background:#fff;
}
/* Header — tighter gap to cards */
.funding-new-head{
  text-align:center;
  max-width:520px;
  margin:0 auto 48px;
}
.funding-new-head .label{
  display:block;margin-bottom:14px;
  font-size:9.5px;letter-spacing:.24em;
}
.funding-new-head h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,2.8vw,42px);font-weight:400;
  color:var(--c1);line-height:1.16;letter-spacing:-.02em;
  margin-bottom:13px;
}
.funding-new-head h2 em{font-style:italic;color:var(--g1)}
.funding-new-head p{
  font-size:13.5px;font-weight:300;color:var(--c3);line-height:1.75;
}

/* ── 5-col grid — stretch so all cards same height ── */
.fnew-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;              /* tighter gap = more unified */
  align-items:stretch;
}

/* Base card — editorial, not pricing */
.fnew-card{
  background:#fff;
  border:1px solid #E0DBD4; /* warm parchment border */
  border-radius:12px;
  padding:24px 18px 20px;   /* compact */
  display:flex;flex-direction:column;
  transition:border-color .4s,box-shadow .4s,transform .4s;
}
.fnew-card:hover{
  border-color:rgba(30,107,86,.22);
  box-shadow:0 4px 20px rgba(30,107,86,.07);
  transform:translateY(-2px);
}

/* Featured — subtle gradient, not a flat block */
.fnew-card.feat{
  background:linear-gradient(160deg,#144540 0%,#0F3832 100%);
  border-color:transparent;
  border-radius:14px;
  margin-top:0;
  margin-bottom:0;
  padding:28px 18px 24px;   /* same as white cards */
  box-shadow:
    0 8px 24px rgba(25,82,72,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
  z-index:1;
}
.fnew-card.feat:hover{
  background:linear-gradient(160deg,#103A30 0%,#0A2E26 100%);
  transform:translateY(-3px);
  box-shadow:
    0 12px 32px rgba(25,82,72,.28),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* Number */
.fnew-num{
  font-family:'Playfair Display',serif;
  font-size:10px;font-weight:400;font-style:italic;
  color:#B0A898;   /* warm sand — softer than var(--c3) */
  margin-bottom:14px;
}
.fnew-card.feat .fnew-num{color:rgba(255,255,255,.32)}

/* Icon */
.fnew-icon{
  width:32px;height:32px;border-radius:7px;
  background:var(--g4);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;flex-shrink:0;
}
.fnew-card.feat .fnew-icon{background:rgba(255,255,255,.13)}
.fnew-icon svg{width:14px;height:14px;color:var(--g1)}
.fnew-card.feat .fnew-icon svg{color:rgba(255,255,255,.85)}

/* Title */
.fnew-title{
  font-family:'Playfair Display',serif;
  font-size:15.5px;font-weight:500;
  color:var(--c1);line-height:1.22;margin-bottom:8px;
}
.fnew-card.feat .fnew-title{color:#fff}

/* Price badge — refined, lighter presence */
.fnew-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:600;color:var(--g1);
  background:var(--g4);
  border:1px solid rgba(30,107,86,.12);
  padding:2px 8px;border-radius:3px;
  margin-bottom:10px;letter-spacing:.02em;
  white-space:nowrap;align-self:flex-start;
}
.fnew-card.feat .fnew-badge{
  background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);
  border-color:transparent;
}

/* Body — smaller, lighter weight */
.fnew-body{
  font-size:12px;font-weight:300;color:var(--c3);
  line-height:1.70;flex:1;margin-bottom:16px;
}
.fnew-card.feat .fnew-body{color:rgba(255,255,255,.6)}

/* CTA — bottom-pinned, text-led, arrow minimal accent */
.fnew-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--g1);
  transition:gap .3s,color .3s;
  margin-top:auto;
  padding-top:2px;
}
.fnew-card.feat .fnew-cta{color:rgba(255,255,255,.78)}
.fnew-card:not(.feat):hover .fnew-cta{gap:9px;color:var(--g2)}

/* Arrow — minimal accent, not a feature */
.fnew-arrow{
  width:20px;height:20px;border-radius:50%;
  background:rgba(30,107,86,.08);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .3s,transform .3s;
}
.fnew-card:not(.feat):hover .fnew-arrow{
  background:rgba(30,107,86,.14);
  transform:translateX(2px);
}
.fnew-card.feat .fnew-arrow{
  background:rgba(255,255,255,.14);
}
.fnew-card.feat:hover .fnew-arrow{
  background:rgba(255,255,255,.22);
}
.fnew-arrow svg{width:9px;height:9px;color:var(--g1)}
.fnew-card.feat .fnew-arrow svg{color:#fff}

/* Responsive */
@media(max-width:1100px){
  .fnew-cards{grid-template-columns:repeat(3,1fr)}
  .fnew-card.feat{margin-top:0;margin-bottom:0}
}
@media(max-width:700px){.fnew-cards{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fnew-cards{grid-template-columns:1fr}}

/* ─ THE SPACE / FACILITY ─────────────────────────────────── */
.space{
  background:#F6F3EE;
  padding:108px 0 112px;
  overflow:hidden;
}
.space-inner{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:80px;
  align-items:center;
}

/* ── Left column — visual card ──────────────────────────── */
.space-visual{
  position:relative;
  flex-shrink:0;
}
.space-card{
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(135deg,#d4e8de 0%,#b8d9c8 40%,#9ecab8 100%);
  position:relative;
  box-shadow:0 8px 48px rgba(30,107,86,.12);
}
/* SVG map art fills the card */
.space-card svg{
  position:absolute;inset:0;width:100%;height:100%;
}

/* Badge — dark leaf green, bottom-right of card */
.space-badge{
  position:absolute;
  bottom:-16px;right:-16px;
  background:var(--g1);
  border-radius:12px;
  padding:18px 24px;
  text-align:center;
  box-shadow:0 8px 32px rgba(30,107,86,.35);
  min-width:148px;
}
.space-badge-title{
  font-family:'Playfair Display',serif;
  font-size:16px;font-weight:500;
  color:#fff;line-height:1.2;margin-bottom:4px;
}
.space-badge-sub{
  font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

/* ── Right column — content ─────────────────────────────── */
.space-content{}
.space-label{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g1);
  margin-bottom:22px;display:block;
}
.space-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,3.6vw,52px);font-weight:400;
  line-height:1.08;letter-spacing:-.02em;
  color:var(--c1);margin-bottom:28px;
}
.space-h em{
  font-style:italic;color:var(--g1);display:block;
}
.space-p{
  font-size:14.5px;font-weight:300;color:var(--c3);
  line-height:1.85;margin-bottom:14px;max-width:480px;
}
.space-p strong{font-weight:600;color:var(--c1)}

/* Services list — white row tabs */
.space-services{
  border:1px solid var(--bd);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  margin:28px 0 32px;
}
.space-svc{
  display:flex;align-items:center;
  gap:14px;
  padding:14px 20px;
  border-bottom:1px solid var(--bd);
  font-size:13.5px;font-weight:400;color:var(--c2);
  transition:background .25s;
}
.space-svc:last-child{border-bottom:none}
.space-svc:hover{background:#f9f8f6}
.space-svc-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--g1);flex-shrink:0;
  opacity:.75;
}

/* Action buttons */
.space-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-space-solid{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Sans',sans-serif;
  font-size:13.5px;font-weight:500;
  padding:13px 26px;border-radius:8px;
  background:var(--g1);color:#fff;
  border:1.5px solid var(--g1);
  cursor:pointer;transition:background .3s,transform .3s,box-shadow .3s;
  text-decoration:none;white-space:nowrap;
}
.btn-space-solid:hover{background:var(--g2);border-color:var(--g2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,107,86,.25)}
.btn-space-solid svg{width:13px;height:13px;flex-shrink:0;transition:transform .3s}
.btn-space-solid:hover svg{transform:translateX(3px)}
.btn-space-outline{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Sans',sans-serif;
  font-size:13.5px;font-weight:500;
  padding:13px 26px;border-radius:8px;
  background:transparent;color:var(--c1);
  border:1.5px solid #C8C4BE;
  cursor:pointer;transition:border-color .3s,color .3s,transform .3s;
  text-decoration:none;white-space:nowrap;
}
.btn-space-outline:hover{border-color:var(--g1);color:var(--g1);transform:translateY(-2px)}

/* Responsive */
@media(max-width:960px){
  .space-inner{grid-template-columns:1fr;gap:56px}
  .space-card{aspect-ratio:16/9}
  .space-badge{right:12px;bottom:-12px}
  .space-p{max-width:100%}
}
@media(max-width:600px){
  .space{padding:80px 0 88px}
  .space-actions{flex-direction:column;max-width:280px}
  .space-badge{min-width:130px;padding:14px 18px}
}

/* ─ CONTACT SECTION ─────────────────────────────────── */
.contact{
  background:#F0EDE8;
  padding:100px 0 108px;
  border-top:none;
}
.contact-inner{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:80px;
  align-items:center;
}

/* Left column */
.contact-lbl{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g1);
  margin-bottom:22px;display:block;
}
.contact-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,3.8vw,52px);font-weight:400;
  line-height:1.12;letter-spacing:-.02em;
  color:var(--c1);margin-bottom:22px;
}
.contact-h em{
  font-style:italic;color:var(--g1);display:block;
}
.contact-p{
  font-size:15.5px;font-weight:300;color:var(--c3);
  line-height:1.82;max-width:380px;margin-bottom:40px;
}
.contact-detail:hover .contact-dt-val{color:var(--g1)}
.contact-detail:hover .contact-icon{background:var(--g4);transition:background .3s}
.contact-detail{
  display:flex;align-items:flex-start;
  gap:14px;margin-bottom:20px;
}
.contact-icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--g4);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border:1px solid rgba(30,107,86,.14);
}
.contact-icon svg{width:14px;height:14px;stroke:var(--g1);}
.contact-dt-label{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c3);margin-bottom:3px;
}
.contact-dt-val{
  font-size:15px;font-weight:500;color:var(--c1);line-height:1.4;
}

/* Right column — form card */
.contact-card{
  background:#fff;
  border-radius:18px;
  padding:44px 44px 40px;
  box-shadow:0 4px 40px rgba(0,0,0,.07);
  border:1px solid rgba(0,0,0,.05);
}
.contact-card-h{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:500;
  color:var(--c1);margin-bottom:32px;
}
.form-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;margin-bottom:14px;
}
.form-group{margin-bottom:14px}
.form-label{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c3);
  display:block;margin-bottom:8px;
}
.form-input{
  width:100%;
  padding:13px 16px;
  border:1.5px solid #E0DDD8;
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:14px;color:var(--c1);
  background:#fff;outline:none;
  transition:border-color .3s,box-shadow .3s;
  appearance:none;
}
.form-input:focus{
  border-color:var(--g1);
  box-shadow:0 0 0 3px rgba(30,107,86,.12);
}
.form-input::placeholder{color:#b0b0b0}
select.form-input{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
textarea.form-input{resize:vertical;min-height:110px}
.form-submit{
  display:flex;align-items:center;justify-content:center;
  gap:10px;width:100%;
  background:var(--g1);color:#fff;
  font-family:'DM Sans',sans-serif;
  font-size:14.5px;font-weight:500;
  padding:16px 28px;border-radius:10px;
  border:none;cursor:pointer;
  transition:background .3s,transform .3s,box-shadow .3s;
  margin-top:6px;
  letter-spacing:.01em;
  text-decoration:none;
}
.form-submit:hover{
  background:var(--g2);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(30,107,86,.3);
}
.form-submit svg{width:15px;height:15px;flex-shrink:0}

/* Responsive */
@media(max-width:900px){
  .contact-inner{grid-template-columns:1fr;gap:52px}
  .contact-card{padding:36px 32px}
  .contact-p{max-width:100%}
}
@media(max-width:600px){
  .contact{padding:80px 0 88px}
  .form-row{grid-template-columns:1fr}
  .contact-card{padding:28px 24px}
}
/* ── Footer ─────────────────────────────────────────────────────────────── */
/* ── Footer (consolidated, polished) ────────────────────────────────────── */
.footer{background:#070c09;padding:80px 0 0}
.footer .wrap{max-width:1180px;margin:0 auto;padding:0 48px}

.footer-grid{
  display:grid;
  grid-template-columns:1.45fr 1fr 1fr 1.25fr;
  column-gap:48px;
  row-gap:0;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.09);
  align-items:start;
}

.footer-brand{padding-right:0}
.footer-logo-wrap{width:72px;height:auto;display:flex;align-items:center;margin-bottom:18px}
.footer-logo-wrap img{width:56px;height:auto;object-fit:contain;display:block}
.footer-brand-name{
  font-family:'Playfair Display',serif;
  font-size:15px;font-weight:500;
  color:rgba(255,255,255,.88);
  margin-bottom:8px;letter-spacing:.005em;
}
.footer-tagline{
  font-size:12px;font-weight:300;
  color:rgba(255,255,255,.56);
  line-height:1.78;margin-bottom:14px;
  max-width:240px;
}
.footer-urdu{
  font-family:'Noto Nastaliq Urdu',serif;
  font-size:13px;color:rgba(255,255,255,.4);
  direction:rtl;margin-bottom:18px;
}
.footer-social{display:flex;gap:8px}
.fsoc{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);
  transition:border-color .3s,color .3s,background .3s,transform .2s;
}
.fsoc:hover{border-color:var(--g3);color:var(--g3);background:rgba(74,155,127,.1);transform:translateY(-1px)}
.fsoc svg{width:12px;height:12px}

.footer-col{padding:0;min-width:0}
.footer-col h4{
  font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin:0 0 18px 0;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.footer-col ul li a{
  font-size:13px;font-weight:300;
  color:rgba(255,255,255,.66);
  text-decoration:none;
  transition:color .25s;
  line-height:1.5;display:inline-block;
}
.footer-col ul li a:hover{color:#fff}

.footer-col p{
  font-size:13px;font-weight:300;
  color:rgba(255,255,255,.62);
  line-height:1.72;margin:0 0 12px 0;
}
.footer-col p:last-child{margin-bottom:0}
.footer-col p strong{
  font-weight:600;
  color:rgba(255,255,255,.85);
  display:block;margin-bottom:3px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}

.footer-bottom{
  padding:22px 0 28px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
}
.footer-copy{
  font-size:11px;letter-spacing:.02em;
  color:rgba(255,255,255,.42);
}
.footer-sdgs{display:flex;gap:6px;flex-wrap:wrap}
.fsdg{
  font-size:9px;font-weight:600;letter-spacing:.08em;
  padding:4px 9px;border-radius:3px;
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.45);
}

@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr;column-gap:32px;row-gap:36px}
  .footer-brand{grid-column:1/-1;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.06)}
  .footer-tagline{max-width:420px}
}
@media(max-width:760px){
  .footer{padding:56px 0 0}
  .footer .wrap{padding:0 22px}
  .footer-grid{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:32px;padding-bottom:40px}
  .footer-brand{grid-column:1/-1}
  .footer-logo-wrap{width:60px;height:60px}
  .footer-logo-wrap img{width:48px;height:48px}
}
@media(max-width:480px){
  .footer .wrap{padding:0 18px}
  .footer-grid{grid-template-columns:1fr;row-gap:28px;padding-bottom:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0 24px}
  .footer-copy{font-size:10.5px;line-height:1.6}
}

/* ════════════════════════════════════════════════════════
   FLOATING UI — scroll-helper + social rail
   (additive: does not touch existing sections)
════════════════════════════════════════════════════════ */

/* Shared deep-green pill style */
.st-fab,
.st-rail a {
  background: rgba(20,69,64,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Scroll helper button (bottom-right) ── */
.st-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, background .25s, box-shadow .25s;
}
.st-fab.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.st-fab:hover { background: rgba(30,107,86,.96); box-shadow: 0 8px 22px rgba(20,69,64,.32); }
.st-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.st-fab svg { width: 14px; height: 14px; transition: transform .3s ease; }
.st-fab.is-up svg { transform: rotate(180deg); }
@media (max-width:640px){
  .st-fab { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* ── Social rail (left side, desktop) ── */
.st-rail {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9985;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.st-rail.is-visible { opacity: 1; pointer-events: auto; }
.st-rail a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.st-rail a:hover {
  background: rgba(30,107,86,.96);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(20,69,64,.28);
}
.st-rail a svg { width: 14px; height: 14px; fill: currentColor; }

/* Mobile: collapse rail to a single bottom-left toggle */
.st-rail-toggle {
  display: none;
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(20,69,64,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  z-index: 9986;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, background .25s;
}
.st-rail-toggle.is-visible { opacity: 1; pointer-events: auto; }
.st-rail-toggle:hover { background: rgba(30,107,86,.96); }
.st-rail-toggle svg { width: 14px; height: 14px; fill: currentColor; }

@media (max-width:768px){
  .st-rail {
    flex-direction: row;
    left: 14px;
    bottom: 64px;          /* stack above the toggle, below scroll fab */
    top: auto;
    transform: translateY(8px);
    gap: 8px;
    opacity: 0;
    pointer-events: none;
  }
  .st-rail.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .st-rail.is-visible:not(.is-open) { opacity: 0; pointer-events: none; }
  .st-rail-toggle { display: flex; }
}