:root{
  --forest:#1B3A2B;
  --forest-deep:#12271C;
  --gold:#D9A73B;
  --gold-deep:#B8862A;
  --purple:#6B3FA0;
  --navy:#1F3B6E;
  --orange:#D9722F;
  --teal:#1C7C74;
  --teal-deep:#145a54;
  --cream:#FAF7F0;
  --sage:#E7ECE3;
  --ink:#1C2B22;
  --line:rgba(28,43,34,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; color:var(--ink); background:var(--cream); line-height:1.6;}
h1,h2,h3,.display{font-family:'Montserrat',sans-serif; line-height:1.12; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-deep);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:6px; font-weight:700; font-size:14.5px; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, opacity .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--forest-deep);}
.btn-outline-dark{border-color:rgba(255,255,255,0.7); color:#fff;}
.btn-forest{background:var(--forest); color:#fff;}
.btn-outline-forest{border-color:var(--forest); color:var(--forest);}

/* NAV */
header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}

header.nav-transparent{
  position:fixed; top:0; left:0; width:100%; background:transparent; border-bottom:none; box-shadow:none;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
header.nav-transparent .logo-text,
header.nav-transparent .logo-sub{color:#fff; transition:color .25s ease;}
header.nav-transparent nav.links > a,
header.nav-transparent .nav .dropdown-toggle,
header.nav-transparent .nav .dropdown-caret{color:#fff; transition:color .25s ease;}
header.nav-transparent .btn-outline-forest{border-color:rgba(255,255,255,0.8); color:#fff; transition:color .25s ease, border-color .25s ease;}
header.nav-transparent .hamburger span{background:#fff; transition:background .25s ease;}

header.nav-transparent.scrolled{background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 14px rgba(28,43,34,0.08);}
header.nav-transparent.scrolled .logo-text,
header.nav-transparent.scrolled .logo-sub{color:var(--forest);}
header.nav-transparent.scrolled nav.links > a,
header.nav-transparent.scrolled .nav .dropdown-toggle,
header.nav-transparent.scrolled .nav .dropdown-caret{color:var(--ink);}
header.nav-transparent.scrolled .btn-outline-forest{border-color:var(--forest); color:var(--forest);}
header.nav-transparent.scrolled .hamburger span{background:var(--forest);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; width:100%;}
.logo{display:flex; align-items:center; gap:14px;}
.logo-mark{width:38px; height:38px; border-radius:50%; background:var(--forest); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.logo-mark svg{width:20px; height:20px;}
.logo-text{font-family:'Montserrat'; font-weight:700; font-size:44px; color:var(--forest); line-height:1.1;}
.logo-sub{font-size:16px; font-weight:700; letter-spacing:0.06em; color:var(--forest); opacity:0.7; text-transform:uppercase;}
nav.links{display:flex; gap:26px; font-size:14.5px; font-weight:600; color:var(--ink);}
nav.links a{display:flex; align-items:center; gap:4px; opacity:0.85;}
nav.links a:hover{opacity:1; color:var(--forest);}
nav.links a.active{opacity:1; color:var(--forest);}
.nav-cta{display:flex; gap:10px; align-items:center;}
.btn-sm{padding:9px 18px; font-size:13.5px; border-radius:5px;}
.logo-img{height:88px; width:auto; display:block;}

/* The desktop nav carries eight items plus the logo and two CTA buttons.
   At full size that row needs about 1694px — wider than most laptop screens —
   so it is stepped down in two tiers rather than being allowed to squeeze
   past its content width, which makes the links overlap the CTA buttons.
   Each tier starts ~40px above the width its own content actually measures,
   so a fallback font loading wider than Inter/Montserrat can't tip it over:
     full size  needs 1694px -> applies from 1740px
     tier one   needs 1308px -> applies 1400-1739px
     tier two   needs 1090px -> applies 1130-1399px
     below that the mobile panel takes over (max-width:1129px). */
@media (min-width:1130px) and (max-width:1739px){
  .nav{padding:14px 20px;}
  nav.links{gap:15px; font-size:13.5px;}
  .logo{gap:10px;}
  .logo-img{height:64px;}
  .logo-text{font-size:32px;}
  .logo-sub{font-size:12px; letter-spacing:0.03em;}
  .btn-sm{padding:8px 14px; font-size:12.5px;}
}
@media (min-width:1130px) and (max-width:1399px){
  nav.links{gap:9px; font-size:12px;}
  .logo-img{height:52px;}
  .logo-text{font-size:26px;}
  .logo-sub{display:none;}
  .btn-sm{padding:7px 12px; font-size:12px;}
}

/* DROPDOWNS — shared base (no positioning here on purpose) */
.dropdown{position:relative; display:flex; align-items:center; gap:2px;}
.dropdown-toggle{opacity:0.85;}
.dropdown-caret{
  background:none; border:none; cursor:pointer; padding:8px 6px; margin:-8px -6px -8px -2px; font-size:11px; color:inherit;
  opacity:0.7; display:flex; align-items:center; transition:transform .18s ease, opacity .18s ease;
}
.dropdown-caret:hover{opacity:1;}
.dropdown.open .dropdown-caret{transform:rotate(180deg); opacity:1;}
.dropdown-menu a{font-weight:600; color:var(--ink);}

/* Desktop-only: floating popup. Fenced behind min-width so it structurally
   cannot render on mobile, regardless of cascade order or stale caches.
   This must stay in step with the mobile switch below (max-width:1129px). */
@media (min-width:1130px){
  .dropdown-menu{
    position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-6px);
    background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 34px rgba(28,43,34,0.16);
    padding:8px; min-width:250px; display:flex; flex-direction:column; gap:1px;
    opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:60;
  }
  .dropdown-menu::before{
    content:""; position:absolute; top:-6px; left:50%; width:12px; height:12px;
    background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line);
    transform:translateX(-50%) rotate(45deg);
  }
  .dropdown.open .dropdown-menu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
  .dropdown-menu a{padding:10px 12px; border-radius:6px; font-size:14px; opacity:0.85; white-space:nowrap;}
  .dropdown-menu a:hover{background:var(--sage); opacity:1; color:var(--forest);}
}

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:70; position:relative;
}
.hamburger span{width:24px; height:2px; background:var(--forest); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-panel{display:none;}
.mobile-panel-overlay{display:none;}

@media (max-width:1129px){
  nav.links{display:none;}
  .nav-cta{display:none;}
  .hamburger{display:flex;}

  .mobile-panel{
    display:block;
    position:fixed; top:0; right:0; height:100vh; width:min(86vw, 360px);
    background:#fff; z-index:65;
    box-shadow:-8px 0 32px rgba(18,39,28,0.18);
    transform:translateX(100%); transition:transform .28s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:88px 28px 40px;
  }
  .mobile-panel.open{transform:translateX(0);}

  .mobile-panel-overlay{
    display:block; position:fixed; inset:0; background:rgba(18,39,28,0.45); z-index:60;
    opacity:0; pointer-events:none; transition:opacity .28s ease;
  }
  .mobile-panel-overlay.open{opacity:1; pointer-events:auto;}

  .mobile-panel a{
    display:block; padding:16px 4px; font-size:16px; font-weight:600; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .mobile-panel > a:first-child{padding-top:4px;}

  .mobile-panel .dropdown{position:static; display:block; border-bottom:1px solid var(--line);}
  .mobile-panel .dropdown-toggle{
    display:flex; align-items:center; justify-content:space-between; border-bottom:none; padding:16px 4px;
  }
  .mobile-panel .dropdown-caret{font-size:13px; padding:8px; margin:0; opacity:0.5; flex-shrink:0;}
  .mobile-panel .dropdown-menu{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    display:flex; flex-direction:column; background:var(--sage); border-radius:8px;
  }
  .mobile-panel .dropdown.open .dropdown-menu{max-height:400px; margin-bottom:10px;}
  .mobile-panel .dropdown-menu a{
    padding:12px 16px; font-size:14.5px; font-weight:500; border-bottom:1px solid rgba(28,43,34,0.08); opacity:0.85;
  }
  .mobile-panel .dropdown-menu a:last-child{border-bottom:none;}

  .mobile-panel .nav-cta{display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:24px;}
  .mobile-panel .btn{width:100%; padding:14px;}
}

/* HERO */
.hero{
  position:relative; min-height:640px; display:flex; align-items:center;
  background:linear-gradient(100deg, rgba(18,39,28,0.92) 10%, rgba(18,39,28,0.55) 45%, rgba(18,39,28,0.15) 75%),
    url('/assets/images/hero-image.jpg') center/cover;
  color:#fff;
}
.hero-inner{padding:150px 32px 60px; max-width:640px; margin:0 auto 0 0; padding-left:64px;}
.hero h1{font-size:clamp(32px,4vw,46px); font-weight:700; color:#fff;}
.hero p.lead{margin-top:18px; font-size:16.5px; opacity:0.9; max-width:46ch;}
.hero-ctas{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap;}

/* Smaller inner-page hero variant */
.hero.hero-inner-page{min-height:280px;}
.hero.hero-inner-page .hero-inner{padding:64px 32px;}
.hero.hero-inner-page h1{font-size:clamp(28px,3.4vw,40px);}

.feature-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:rgba(18,39,28,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border-top:1px solid rgba(255,255,255,0.12); padding:20px 0;
}
.feature-strip .wrap{display:flex; justify-content:flex-start; flex-wrap:wrap; gap:20px 48px; width:100%; margin:0; padding:0 32px;}
.feature-item{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#fff;}
.feature-item .ic{width:22px; height:22px; flex-shrink:0; opacity:0.9;}

/* QUOTE SECTION — photo bleeds into the text column via a soft left-edge fade */
.quote-section{padding:72px 0; background:var(--cream); overflow:hidden;}
.quote-layout{display:grid; grid-template-columns:1fr 1.05fr 0.85fr; align-items:stretch; max-width:1600px; margin:0 auto; min-height:480px;}
.quote-text{padding:64px 40px 64px clamp(24px,4vw,64px); position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;}
.quote-text .quote-mark{font-family:'Montserrat'; font-weight:700; font-size:48px; color:var(--gold-deep); line-height:1;}
.quote-text blockquote{font-family:'Montserrat'; font-size:26px; font-weight:600; color:var(--forest); margin:8px 0 20px; line-height:1.3;}
.quote-text p{font-size:15px; opacity:0.82; margin-bottom:14px;}
.quote-photo{position:relative; z-index:1; margin-left:-200px; width:calc(100% + 200px); min-height:100%;}
.quote-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0, transparent 160px, black 440px);
  mask-image:linear-gradient(to right, transparent 0, transparent 160px, black 440px);
}
.quote-aside{padding:40px clamp(24px,4vw,48px) 40px 24px; display:flex; flex-direction:column; gap:20px; justify-content:center; position:relative; z-index:2;}
.world-box{background:var(--sage); border-radius:16px; padding:34px;}
.world-box h4{font-family:'Montserrat'; font-size:17px; color:var(--forest); margin-bottom:18px;}
.world-box ul{list-style:none;}
.world-box li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; margin-bottom:14px; opacity:0.85;}
.world-box li:last-child{margin-bottom:0;}
.world-box li .dot{width:7px; height:7px; border-radius:50%; background:var(--forest); margin-top:7px; flex-shrink:0;}
.cta-box{background:var(--forest); border-radius:16px; padding:32px; color:var(--gold); font-family:'Montserrat'; font-weight:600; font-size:18px; line-height:1.4;}

/* FRAMEWORKS */
.frameworks{padding:88px 0; background:var(--sage);}
.center-head{text-align:center; max-width:600px; margin:0 auto 48px;}
.center-head h2{font-size:clamp(24px,3vw,32px); color:var(--forest);}
.center-head p{margin-top:10px; font-size:15.5px; opacity:0.75;}
.fw-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.fw-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 22px; text-align:left;}
.fw-icon{width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.fw-card h3{font-family:'Montserrat'; font-size:16.5px; margin-bottom:10px;}
.fw-card p{font-size:13.5px; opacity:0.78; margin-bottom:18px; min-height:60px;}
.fw-btn{width:100%; padding:10px; border-radius:6px; font-size:13px; font-weight:700; text-align:center; color:#fff;}
.c-forest{background:var(--forest);} .c-purple{background:var(--purple);} .c-gold{background:var(--gold); color:var(--forest-deep) !important;} .c-navy{background:var(--navy);}
.fw-icon.c-forest, .fw-icon.c-purple, .fw-icon.c-navy{opacity:1;}
.fw-icon.c-forest{background:rgba(27,58,43,0.1);} .fw-icon.c-purple{background:rgba(107,63,160,0.1);} .fw-icon.c-gold{background:rgba(217,167,59,0.15);} .fw-icon.c-navy{background:rgba(31,59,110,0.1);}

/* PATHWAYS */
.pathways{padding:88px 0;}
.pw-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
/* Now an <a> rather than a <div> — the homepage cards link through to the
   pathway (or its course) instead of being decorative. */
.pw-card{
  display:block; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  color:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.pw-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(28,43,34,0.12);}
.pw-img{height:120px; overflow:hidden; background:var(--sage);}
.pw-img img{width:100%; height:100%; object-fit:cover;}
/* Shown when a pathway has no banner uploaded yet, so a card is never a
   broken image. */
.pw-img-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--sage), #d5e0d0); color:var(--forest);
  opacity:0.5; font-family:'Montserrat',sans-serif; font-weight:800; font-size:32px;
}
.pw-body{padding:16px;}
.pw-tag{font-size:11px; font-weight:700; letter-spacing:0.04em;}
.pw-body h3{font-family:'Montserrat'; font-size:14.5px; margin:6px 0 6px; color:var(--forest);}
.pw-body p{font-size:12px; opacity:0.75; min-height:44px;}
.pw-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;}
/* The audience label comes from the pathway record and can be long
   ("Parents and caregivers of children aged 8-18"), so it ellipsises to the
   space available rather than being cut mid-word in the markup. */
.pw-foot > span:first-child{
  font-size:11.5px; font-weight:700; opacity:0.7;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pw-foot .pw-arrow{flex-shrink:0;}
.pw-arrow{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px;}
.pw-cta{text-align:center; margin-top:36px;}
.t-forest{color:var(--forest);} .t-gold{color:var(--gold-deep);} .t-purple{color:var(--purple);} .t-navy{color:var(--navy);} .t-orange{color:var(--orange);} .t-teal{color:var(--teal);}
.bg-forest{background:var(--forest);} .bg-gold{background:var(--gold-deep);} .bg-purple{background:var(--purple);} .bg-navy{background:var(--navy);} .bg-orange{background:var(--orange);} .bg-teal{background:var(--teal);}

/* STATS BAND */
.stats-band{background:var(--forest); color:#fff; padding:40px 0;}
.stats-band .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px;}
.stats-row{display:flex; gap:44px; flex-wrap:wrap;}
.stat div{font-family:'Montserrat'; font-size:26px; font-weight:700; color:var(--gold);}
.stat span{display:block; font-size:12.5px; opacity:0.85; margin-top:2px;}
.stats-quote{font-family:'Montserrat'; font-style:italic; color:var(--gold); font-size:15px; max-width:280px; line-height:1.4;}

/* FOUNDER */
.founder{padding:88px 0; display:grid; grid-template-columns:1fr 1fr;}
.founder-panel{padding:56px; display:flex; flex-direction:column; justify-content:center;}
.founder-panel.left{background:var(--cream); padding:0; flex-direction:row; align-items:stretch;}
.founder-text{padding:56px; display:flex; flex-direction:column; justify-content:center; flex:1 1 50%; min-width:0;}
.founder-panel.right{
  background:linear-gradient(100deg, rgba(18,39,28,0.88), rgba(18,39,28,0.55)),
    url('https://images.unsplash.com/photo-1609220136736-443140cffec6?w=1000&q=80') center/cover;
  color:#fff;
}
.founder-photo{overflow:hidden; flex:1 1 50%; min-width:0;}
/* The founder photo is landscape while these slots are tall, so cover()
   crops left and right. Anchored slightly above centre so her face sits
   in the upper third rather than dead centre. */
.founder-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 35%; display:block;}
.founder-panel h2{font-size:26px; margin:8px 0 6px; color:var(--forest);}
.founder-panel.right h2{color:#fff; font-size:clamp(24px,2.6vw,32px);}
.founder-role{font-size:13.5px; opacity:0.7; font-weight:600; margin-bottom:14px;}
.founder-panel p{font-size:14.5px; opacity:0.85; max-width:42ch; margin-bottom:10px;}
.founder-panel .btn{margin-top:16px; width:fit-content;}
.right-ctas{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}

/* GENERIC CONTENT SECTIONS (for inner pages) */
.content-section{padding:80px 0;}
.content-section.alt{background:var(--sage);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.two-col.founder-row{align-items:stretch;}

.founder-portrait{position:relative; margin-left:-48px; width:calc(100% + 48px); min-height:520px;}
.founder-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 35%; display:block; border-radius:16px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 90px);
  mask-image:linear-gradient(to right, transparent 0, black 90px);
}
.founder-bio p{font-size:17px; line-height:1.7; margin-bottom:16px; opacity:0.88;}
.founder-bio p:last-of-type{margin-bottom:0;}
.founder-bio h2{margin-bottom:6px;}
.card-grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px;}
.simple-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px;}
.simple-card h3{font-family:'Montserrat'; font-size:18px; color:var(--forest); margin-bottom:10px;}
.simple-card p{font-size:14px; opacity:0.8;}
form.simple-form{display:flex; flex-direction:column; gap:14px; max-width:520px;}
form.simple-form label{font-size:13.5px; font-weight:600; margin-bottom:4px; display:block;}
form.simple-form input, form.simple-form textarea, form.simple-form select{
  width:100%; padding:12px 14px; border-radius:6px; border:1px solid var(--line); font-family:'Inter'; font-size:14px; background:#fff;
}
form.simple-form textarea{min-height:120px; resize:vertical;}
form.simple-form input:focus, form.simple-form textarea:focus, form.simple-form select:focus{
  outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,58,43,0.12);
}
.auth-wrap{max-width:440px; margin:0 auto; padding:120px 20px 80px;}
.auth-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:36px;}
.auth-card h1{font-size:24px; color:var(--forest); margin-bottom:6px;}
.auth-card .auth-sub{font-size:14px; opacity:0.7; margin-bottom:24px;}
.auth-card .btn{width:100%; text-align:center; margin-top:6px;}
.auth-switch{text-align:center; font-size:13.5px; margin-top:20px; opacity:0.8;}
.auth-switch a{color:var(--forest); font-weight:700;}
.form-msg{padding:12px 14px; border-radius:8px; font-size:13.5px; margin-bottom:18px;}
.form-msg.error{background:#FBEAEA; color:#A33A3A; border:1px solid #EBC6C6;}
.form-msg.success{background:var(--sage); color:var(--forest); border:1px solid var(--line);}
.role-toggle{display:flex; gap:8px; margin-bottom:4px;}
.role-toggle label{flex:1; text-align:center; padding:10px; border:1.5px solid var(--line); border-radius:8px; cursor:pointer; font-size:13px; font-weight:700; color:var(--ink); opacity:0.7; transition:all .15s ease;}
.role-toggle input{position:absolute; opacity:0; pointer-events:none;}
.role-toggle input:checked + label{border-color:var(--forest); background:var(--sage); color:var(--forest); opacity:1;}

#founder-story{scroll-margin-top:100px;}
#parent-academy, #catalogue, .cat-detail-panel{scroll-margin-top:100px;}
#blueprint-illustration, #dna-traits, #dna-what-is{scroll-margin-top:130px;}
/* CTA BAND (for inner pages) */
/* ============ QUIZ TIMER ============
   Sticks to the top of the viewport while a timed quiz is being taken, so
   the remaining time is always visible however far down the page you are. */
.quiz-timer{
  position:sticky; top:96px; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:16px; background:var(--forest); color:#fff; border-radius:12px;
  padding:12px 18px; margin-bottom:20px; box-shadow:0 6px 18px rgba(28,43,34,0.16);
}
.quiz-timer-label{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; opacity:0.75;}
.quiz-timer-clock{font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; font-variant-numeric:tabular-nums;}
.quiz-timer.is-urgent{background:#A33A3A; animation:quizPulse 1s ease-in-out infinite;}
@keyframes quizPulse{50%{opacity:0.78;}}
@media (prefers-reduced-motion:reduce){ .quiz-timer.is-urgent{animation:none;} }

/* ============ SHOW/HIDE PASSWORD ============
   assets/js/password-toggle.js wraps each password input in .pw-field at
   runtime; these rules position the button inside the field. Mirrored in
   admin.css, which styles the admin panel's own form controls. */
.pw-field{position:relative; display:block;}
.pw-field > input{width:100%;}
form.simple-form .pw-field > input{padding-right:46px; margin-bottom:0;}
.pw-toggle{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  background:none; border:0; padding:6px; cursor:pointer; line-height:0;
  color:var(--forest); opacity:0.55; border-radius:6px;
  transition:opacity .15s ease, background .15s ease;
}
.pw-toggle:hover{opacity:1; background:rgba(27,58,43,0.08);}
.pw-toggle:focus-visible{outline:2px solid var(--forest); outline-offset:1px; opacity:1;}

/* ============ UNIFIED CATALOGUE (/courses) ============
   Pathways and individual courses share one card so a visitor sees one
   coherent catalogue rather than two competing lists. */
.cat-toolbar{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px;}
.cat-filters{display:flex; gap:8px; flex-wrap:wrap;}
.cat-filter{
  background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:9px 18px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--ink); opacity:0.8;
  transition:background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}
.cat-filter:hover{opacity:1; border-color:var(--forest);}
.cat-filter.active{background:var(--forest); border-color:var(--forest); color:#fff; opacity:1;}
.cat-search input{
  border:1.5px solid var(--line); border-radius:22px; padding:10px 18px; font-family:'Inter',sans-serif;
  font-size:13.5px; min-width:250px; background:#fff; color:var(--ink);
}
.cat-search input:focus{outline:none; border-color:var(--forest);}
.cat-count{font-size:13px; opacity:0.6; font-weight:600; margin-bottom:22px;}

.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:24px;}
.cat-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; color:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(28,43,34,0.13);}
.cat-card-thumb{position:relative; aspect-ratio:16/10; background:var(--sage); overflow:hidden;}
.cat-card-thumb img{width:100%; height:100%; object-fit:cover;}
.cat-card-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--sage), #d5e0d0); color:var(--forest); opacity:0.5;
  font-family:'Montserrat'; font-weight:800; font-size:38px;
}
.cat-tag{
  position:absolute; top:12px; left:12px; background:rgba(27,58,43,0.92); color:#fff;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; padding:5px 11px; border-radius:20px;
}
.cat-tag.t-featured{background:var(--gold-deep);}
.cat-tag.t-course{background:var(--navy);}
.cat-card-body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;}
.cat-card-meta{font-size:11px; text-transform:uppercase; letter-spacing:0.07em; font-weight:700; color:var(--gold-deep); margin-bottom:7px;}
.cat-card-body h3{font-family:'Montserrat'; font-size:17px; color:var(--forest); line-height:1.3; margin-bottom:8px;}
.cat-card-blurb{font-size:13.5px; opacity:0.75; line-height:1.6; margin-bottom:16px;}
.cat-card-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.cat-card-lessons{font-size:12.5px; opacity:0.6; font-weight:600;}
.cat-card-price{font-family:'Montserrat'; font-weight:800; font-size:15.5px; color:var(--forest);}
.cat-card-price.cat-soon{font-size:13px; font-weight:700; opacity:0.8;}
.cat-noresults{text-align:center; padding:56px 24px;}

@media (max-width:560px){
  .cat-search input{min-width:0; width:100%;}
  .cat-search{width:100%;}
  .cat-grid{grid-template-columns:1fr;}
}

.cta-band{background:var(--forest); color:#fff; padding:56px 0;}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h2{color:#fff; font-size:clamp(24px,2.8vw,32px); max-width:520px;}
.cta-band .cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ABOUT PAGE — hero variant with its own background image */
.hero.hero-about{
  background:linear-gradient(100deg, rgba(18,39,28,0.90) 8%, rgba(18,39,28,0.58) 45%, rgba(18,39,28,0.12) 78%),
    url('/assets/images/hero-pathway-kids.jpg') center/cover;
}
.hero.hero-about .hero-inner{max-width:680px;}

/* Prose sections: headline + copy, centered, readable measure */
.prose-section{padding:80px 0;}
.prose-section.alt{background:var(--sage);}
.prose-head{max-width:760px; margin:0 auto 28px;}
.prose-head h2{font-size:clamp(24px,3vw,34px); color:var(--forest);}
.prose-body{max-width:760px; margin:0 auto;}
.prose-body p{font-size:15.5px; opacity:0.85; margin-bottom:16px;}
.prose-body p:last-child{margin-bottom:0;}
.prose-cta{margin-top:8px;}

/* "Need X before Y" belief list */
.belief-list{list-style:none; margin-top:24px; display:grid; gap:12px;}
.belief-list li{
  padding:14px 20px; background:#fff; border-left:3px solid var(--gold); border-radius:6px;
  font-size:15px; font-weight:600; color:var(--forest);
}

/* Our Promise — foundation table */
.promise-table{width:100%; max-width:900px; margin:32px auto 0; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(28,43,34,0.06);}
.promise-table th{background:var(--forest); color:#fff; text-align:left; padding:14px 22px; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;}
.promise-table td{padding:16px 22px; font-size:14.5px; border-bottom:1px solid var(--line); vertical-align:top;}
.promise-table tr:last-child td{border-bottom:none;}
.promise-table td:first-child{font-weight:700; color:var(--forest); white-space:nowrap; width:220px;}
.promise-table td:last-child{opacity:0.82;}
.promise-close{max-width:760px; margin:28px auto 0; text-align:center; font-size:16px; font-weight:600; color:var(--forest); font-style:italic;}

/* Founder credentials line */
.founder-bio .founder-credentials{font-size:13px; font-weight:600; opacity:0.65; margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}

/* Village / stakeholder list */
.village-list{list-style:none; margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px; max-width:760px; margin-left:auto; margin-right:auto;}
.village-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; font-weight:600; color:var(--forest);}
.village-list li .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-deep); margin-top:7px; flex-shrink:0;}

/* Closing full-bleed visual */
.closing-visual{display:block; width:100%; height:auto;}

/* FRAMEWORKS PAGE */
.fw-page-hero{background:var(--forest); color:#fff; padding:96px 0 64px; text-align:center;}
.fw-page-hero .eyebrow{color:var(--gold); display:block; text-align:center;}
.fw-page-hero h1{font-size:clamp(28px,4vw,42px); color:#fff; max-width:820px; margin:14px auto 0;}
.fw-page-hero p.lead{max-width:640px; margin:18px auto 0; font-size:16px; opacity:0.85;}

.fw-tabs-bar{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;}
.fw-tabs{display:flex; gap:4px; max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,48px); overflow-x:auto;}
.fw-tab-btn{
  flex-shrink:0; background:none; border:none; cursor:pointer; padding:18px 20px; font-family:'Montserrat'; font-weight:700;
  font-size:14px; color:var(--ink); opacity:0.55; border-bottom:3px solid transparent; transition:opacity .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.fw-tab-btn:hover{opacity:0.85;}
.fw-tab-btn.active{opacity:1; border-bottom-color:var(--gold-deep); color:var(--forest);}

.fw-panel{display:none;}
.fw-panel.active{display:block;}

.fw-quote-block{
  max-width:560px; margin:28px auto 0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  border-radius:14px; padding:24px 30px; font-family:'Montserrat'; font-style:italic; font-size:16px; color:var(--gold);
}

.example-grid{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1000px; margin:28px auto 0;}

/* Framework tag row (e.g. Faith-Driven · Values-Centered · ...) */
.fw-tags{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 24px; margin-top:22px;}
.fw-tags span{font-size:12.5px; font-weight:700; color:var(--forest); display:flex; align-items:center; gap:6px;}
.fw-tags span::before{content:"◆"; color:var(--gold-deep); font-size:9px;}

/* Dark icon band (e.g. "Our DNA Shapes Our Future") */
.fw-icon-band{background:var(--forest); border-radius:18px; padding:32px 28px; display:flex; flex-wrap:wrap; justify-content:center; gap:28px 36px; margin-top:8px;}
.fw-icon-band-item{display:flex; align-items:center; gap:12px; max-width:220px;}
.fw-icon-band-item .ic{font-size:24px; flex-shrink:0;}
.fw-icon-band-item p{color:#fff; font-size:13.5px; font-weight:600; opacity:0.92; margin:0;}

/* Two-column "Rooted In / Expressed In" style comparison */
.fw-compare{display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:700px; margin:28px auto 0;}
.fw-compare-col h4{font-family:'Montserrat'; font-size:14px; color:var(--gold-deep); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; text-align:center;}
.fw-compare-col ul{list-style:none; display:grid; gap:10px;}
.fw-compare-col li{background:#fff; border-radius:8px; padding:12px 16px; font-size:14px; font-weight:700; color:var(--forest); text-align:center; border:1px solid var(--line);}
.example-grid li{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; font-size:14.5px; font-weight:600; color:var(--forest);
  display:flex; gap:10px; align-items:flex-start;
}
.example-grid li .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-deep); margin-top:7px; flex-shrink:0;}

.fw-illustration{width:100%; max-width:1100px; margin:32px auto 0; display:block; border-radius:16px; box-shadow:0 12px 40px rgba(28,43,34,0.12);}

.timeline-row{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:1300px; margin:32px auto 0;}
.timeline-step{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 18px; text-align:center;}
.timeline-step .step-num{
  width:32px; height:32px; border-radius:50%; background:var(--forest); color:var(--gold); font-family:'Montserrat'; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.timeline-step h4{font-family:'Montserrat'; font-size:14.5px; color:var(--forest); margin-bottom:8px;}
.timeline-step p{font-size:12.5px; opacity:0.78;}

/* ============ FRAMEWORK DETAIL COMPONENTS ============
   Used by the Six Pillars and Ecosystem panels on /frameworks. */

/* The founder's origin stories are first-person narrative, so they're set
   apart from the surrounding explanatory copy rather than running into it. */
.origin-story{
  max-width:820px; margin:30px auto 0; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--gold-deep); border-radius:14px; padding:32px 36px;
  box-shadow:0 4px 20px rgba(28,43,34,0.05);
}
.origin-story p{font-size:15.5px; line-height:1.85; opacity:0.87; margin-bottom:15px;}
.origin-story p:last-child{margin-bottom:0;}
.origin-story .origin-lead{font-size:17px; font-weight:600; color:var(--forest); opacity:1;}
/* The pivot line in each story — the realisation the framework came from. */
.origin-story .origin-turn{
  font-family:'Montserrat',sans-serif; font-size:17px; line-height:1.5; font-weight:700; color:var(--forest);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0; margin:22px 0; opacity:1;
}

.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1150px; margin:34px auto 0;}
.pillar-card{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--forest);
  border-radius:14px; padding:26px 22px 22px; position:relative;
}
.pillar-num{
  position:absolute; top:-15px; left:22px; width:30px; height:30px; border-radius:50%;
  background:var(--forest); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px;
  box-shadow:0 3px 10px rgba(28,43,34,0.18);
}
.pillar-card h4{font-family:'Montserrat',sans-serif; font-size:15px; line-height:1.35; color:var(--forest); margin:6px 0 10px;}
.pillar-card > p{font-size:13.5px; line-height:1.65; opacity:0.8; margin-bottom:14px;}
.pillar-card ul{list-style:none; display:grid; gap:7px; border-top:1px solid var(--line); padding-top:13px;}
.pillar-card li{font-size:12.5px; font-weight:600; opacity:0.85; display:flex; align-items:center; gap:8px;}
.pillar-card li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--forest); flex-shrink:0;}
/* Colour key mirrors the printed Six Pillars artwork. */
.pillar-card.p-gold{border-top-color:var(--gold-deep);}   .pillar-card.p-gold   .pillar-num{background:var(--gold-deep);}   .pillar-card.p-gold   h4{color:var(--gold-deep);}   .pillar-card.p-gold   li::before{background:var(--gold-deep);}
.pillar-card.p-navy{border-top-color:var(--navy);}        .pillar-card.p-navy   .pillar-num{background:var(--navy);}        .pillar-card.p-navy   h4{color:var(--navy);}        .pillar-card.p-navy   li::before{background:var(--navy);}
.pillar-card.p-purple{border-top-color:var(--purple);}    .pillar-card.p-purple .pillar-num{background:var(--purple);}      .pillar-card.p-purple h4{color:var(--purple);}      .pillar-card.p-purple li::before{background:var(--purple);}
.pillar-card.p-orange{border-top-color:var(--orange);}    .pillar-card.p-orange .pillar-num{background:var(--orange);}      .pillar-card.p-orange h4{color:var(--orange);}      .pillar-card.p-orange li::before{background:var(--orange);}
.pillar-card.p-teal{border-top-color:var(--teal);}        .pillar-card.p-teal   .pillar-num{background:var(--teal);}        .pillar-card.p-teal   h4{color:var(--teal-deep);}   .pillar-card.p-teal   li::before{background:var(--teal);}

.eco-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; max-width:1150px; margin:34px auto 0;}
.eco-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 20px; display:flex; gap:14px;}
.eco-num{
  width:30px; height:30px; border-radius:9px; background:var(--sage); color:var(--forest);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:13.5px;
}
.eco-card h4{font-family:'Montserrat',sans-serif; font-size:14px; line-height:1.35; color:var(--forest); margin-bottom:6px;}
.eco-card p{font-size:13px; line-height:1.6; opacity:0.78;}

/* "How we use this" steps — a numbered narrative rather than a card grid. */
.use-list{list-style:none; max-width:820px; margin:30px auto 0; display:grid; gap:16px; counter-reset:usestep;}
.use-list li{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px 20px 62px; position:relative;
}
.use-list li::before{
  counter-increment:usestep; content:counter(usestep);
  position:absolute; left:20px; top:20px; width:26px; height:26px; border-radius:50%;
  background:var(--sage); color:var(--forest); display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:12.5px;
}
.use-list strong{display:block; font-family:'Montserrat',sans-serif; font-size:14.5px; color:var(--forest); margin-bottom:5px;}
.use-list span{font-size:14px; line-height:1.7; opacity:0.82;}

@media (max-width:980px){
  .pillar-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .pillar-grid{grid-template-columns:1fr;}
  .origin-story{padding:24px 20px;}
  .use-list li{padding:18px 18px 18px 56px;}
}

.fw-placeholder{padding:120px 20px; text-align:center; max-width:600px; margin:0 auto;}
.fw-placeholder h2{color:var(--forest); font-size:26px;}
.fw-placeholder p{margin-top:14px; opacity:0.75; font-size:15px;}

/* LEARNING PATHWAYS PAGE */
.hero.hero-lp{
  background:linear-gradient(100deg, rgba(18,39,28,0.90) 8%, rgba(18,39,28,0.58) 45%, rgba(18,39,28,0.14) 78%),
    url('/assets/images/lp-hero.jpg') center/cover;
}
.hero.hero-lp .hero-inner{max-width:700px;}

/* Audience finder — pill tabs, reused visual language from fw-tab-btn but standalone pills */
.finder-tabs{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:24px;}
.finder-tab{
  padding:11px 22px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  font-size:13.5px; font-weight:700; color:var(--forest); cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.finder-tab:hover{border-color:var(--forest);}
.finder-tab.active{background:var(--forest); border-color:var(--forest); color:#fff;}
.finder-copy{text-align:center; font-size:14.5px; opacity:0.75; margin-top:16px; min-height:20px;}

/* Netflix-style catalogue: poster row + full cinematic detail panel below (same
   show/hide technique as the frameworks.php tab panels, triggered by poster clicks) */
.catalogue-row{display:flex; gap:18px; overflow-x:auto; padding:8px 4px 28px; scroll-snap-type:x proximity;}
.cat-poster{
  flex:0 0 220px; scroll-snap-align:start; border-radius:14px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:#fff; transition:border-color .18s ease, transform .18s ease;
}
.cat-poster:hover{transform:translateY(-3px);}
.cat-poster.active{border-color:var(--gold-deep);}
.cat-poster.hidden{display:none;}
.cat-poster-img{height:130px; overflow:hidden;}
.cat-poster-img img{width:100%; height:100%; object-fit:cover; display:block;}
.cat-poster-body{padding:14px;}
.cat-poster-body .cat-for{font-size:10.5px; font-weight:700; opacity:0.6; text-transform:uppercase; letter-spacing:0.04em;}
.cat-poster-body h4{font-family:'Montserrat'; font-size:14px; color:var(--forest); margin-top:4px;}

.cat-detail-panel{display:none;}
.cat-detail-panel.active{display:block;}
.cat-banner{position:relative; border-radius:18px; overflow:hidden; min-height:280px; display:flex; align-items:flex-end; margin-top:8px;}
.cat-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.cat-banner::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,39,28,0.92) 5%, rgba(18,39,28,0.15) 70%); z-index:1;}
.cat-banner-inner{position:relative; z-index:2; padding:32px; color:#fff;}
.cat-banner-inner .cat-for{color:var(--gold); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;}
.cat-banner-inner h2{color:#fff; margin-top:6px; font-size:clamp(22px,3vw,30px);}
.cat-banner-inner p{color:#fff; opacity:0.9; max-width:600px; margin-top:10px; font-size:14.5px;}

.cat-body-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:32px; margin-top:32px;}
.cat-body-grid h4{font-size:13px; color:var(--forest); text-transform:uppercase; letter-spacing:0.03em; margin:20px 0 10px;}
.cat-body-grid h4:first-child{margin-top:0;}
.cat-body-grid ul{list-style:none; display:grid; gap:7px;}
.cat-body-grid ul li{padding-left:18px; position:relative; opacity:0.85; font-size:14px;}
.cat-body-grid ul li::before{content:"✓"; position:absolute; left:0; color:var(--gold-deep); font-weight:700;}
.journey-table{width:100%; border-collapse:collapse; margin-top:6px; font-size:13px;}
.journey-table th{background:var(--forest); color:#fff; padding:9px 12px; text-align:left; font-weight:600;}
.journey-table td{padding:9px 12px; border-bottom:1px solid var(--line); opacity:0.85;}
.exp-line{opacity:0.75; font-style:italic; font-size:13.5px;}
.sample-lesson-box{background:var(--cream); border-left:3px solid var(--gold); border-radius:8px; padding:16px 18px; margin-top:6px;}
.sample-lesson-box strong{color:var(--forest); display:block; margin-bottom:4px;}
.cat-sidebar{background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; align-self:start;}
.cat-sidebar .tool-img{width:100%; border-radius:10px; margin-top:8px;}
.cat-sidebar .btn{width:100%; text-align:center; margin-top:10px;}

/* Preview a BSFA Lesson tabs */
.preview-tabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:28px 0;}
.preview-tab{padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink);}
.preview-tab.active{background:var(--forest); color:#fff; border-color:var(--forest);}
.preview-panel{display:none; max-width:640px; margin:0 auto; background:#fff; border-radius:16px; padding:32px; text-align:center; box-shadow:0 4px 24px rgba(28,43,34,0.07);}
.preview-panel.active{display:block;}
.preview-panel .preview-thumb{width:100%; aspect-ratio:16/9; background:linear-gradient(135deg, var(--forest), var(--forest-deep)); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; margin-bottom:18px;}
.preview-panel h4{color:var(--forest); font-size:17px; margin-bottom:8px;}
.preview-panel p{font-size:13.5px; opacity:0.8; margin-bottom:18px;}

/* FOOTER */
footer{background:#14201A; color:#fff; padding:56px 0 24px;}
.foot-grid{display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-grid h4{font-size:13px; font-weight:700; letter-spacing:0.04em; margin-bottom:14px; opacity:0.6; text-transform:uppercase;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:9px; font-size:13.5px; opacity:0.8;}
.foot-sub{display:flex; gap:8px; margin-top:14px;}
.foot-sub input{flex:1; padding:10px 12px; border-radius:5px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); color:#fff; font-size:13px;}
.foot-sub button{padding:10px 16px; border-radius:5px; background:var(--gold); border:none; color:var(--forest-deep); font-weight:700; font-size:13px; cursor:pointer;}
.foot-sub button:disabled{opacity:0.6; cursor:default;}
.foot-sub-msg{margin-top:10px; font-size:12.5px; font-weight:600; color:#8FD19E;}
.foot-sub-msg.is-error{color:#F0A0A0;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:20px; font-size:12.5px; opacity:0.85; flex-wrap:wrap; gap:16px;}
.foot-bottom span{opacity:0.65;}
.social-links{display:flex; gap:10px;}
.social-icon{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); color:#fff; transition:background .18s ease, transform .18s ease;
}
.social-icon svg{width:17px; height:17px;}
.social-icon:hover{background:var(--gold); color:var(--forest-deep); transform:translateY(-2px);}

@media (max-width:980px){
  .quote-layout{grid-template-columns:1fr; min-height:0;}
  .quote-photo{margin-left:0; width:100%; min-height:280px;}
  .quote-photo img{mask-image:none; -webkit-mask-image:none;}
  .quote-text, .quote-aside{padding:32px 20px;}
  .fw-grid{grid-template-columns:1fr 1fr;}
  .pw-grid{grid-template-columns:1fr 1fr;}
  .founder{grid-template-columns:1fr;}
  .founder-panel.left{flex-direction:column;}
  .founder-photo{min-height:260px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero-inner{padding-left:32px;}
  .two-col{grid-template-columns:1fr;}
  .founder-portrait{margin-left:0; width:100%; min-height:300px;}
  .founder-portrait img{mask-image:none; -webkit-mask-image:none;}
  .card-grid-3{grid-template-columns:1fr;}
  .example-grid{grid-template-columns:1fr 1fr;}
  .timeline-row{grid-template-columns:1fr 1fr 1fr;}
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  .nav{padding:12px 20px;}
  .hero{min-height:560px;}
  .hero-inner{padding:130px 20px 90px;}
  .feature-strip{padding:14px 0;}
  .feature-strip .wrap{padding:0 20px; gap:10px 18px; justify-content:flex-start;}
  .feature-item{font-size:12.5px; gap:6px;}
  .feature-item .ic{width:18px; height:18px;}
  .fw-grid{grid-template-columns:1fr;}
  .pw-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .stats-row{gap:24px; justify-content:space-between;}
  .stat div{font-size:21px;}
  .founder-panel{padding:32px 24px;}
  .quote-col blockquote{font-size:21px;}
  .cta-band, .stats-band .wrap{flex-direction:column; align-items:flex-start;}
  .village-list{grid-template-columns:1fr;}
  .promise-table{font-size:13px;}
  .promise-table th, .promise-table td{padding:12px 14px;}
  .promise-table td:first-child{width:auto;}
  .example-grid{grid-template-columns:1fr;}
  .fw-compare{grid-template-columns:1fr; gap:20px;}
  .fw-icon-band{padding:24px 20px; gap:20px;}
  .cat-body-grid{grid-template-columns:1fr;}
  .cat-poster{flex-basis:170px;}
  .cat-banner{min-height:220px;}
  .cat-banner-inner{padding:20px;}
  .preview-panel{padding:22px;}
  .finder-tab{padding:9px 16px; font-size:12.5px;}
  .timeline-row{grid-template-columns:1fr 1fr;}
  .fw-page-hero{padding:80px 0 48px;}
}