/* ══════════════════════════════════════════
   SCHOOLS PAGE
══════════════════════════════════════════ */

    @keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

    /* ══════════════════════════════════════════
       SECTION 1: PARTNER SCHOOLS GRID
       Grows over time — easy to add logos
    ══════════════════════════════════════════ */
    .schools-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 40px;
    }
    .school-card {
      border-radius: 16px;
      background: rgba(255,252,240,.65);
      border: 1.5px solid rgba(255,255,255,.85);
      box-shadow: 0 3px 14px rgba(45,106,45,.07);
      padding: 24px 18px;
      text-align: center;
      transition: border-color .28s, box-shadow .28s, transform .25s;
      cursor: default;
    }
    .school-card:hover {
      border-color: rgba(45,106,45,.35);
      box-shadow: 0 8px 28px rgba(45,106,45,.14);
      transform: translateY(-3px);
    }
    /* Logo slot — swap inner content for real <img loading="lazy"> when logos available */
    .school-logo-slot {
      width: 72px; height: 72px; border-radius: 14px;
      margin: 0 auto 12px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-size: 1.4rem;
      font-weight: 700; color: #fff;
      box-shadow: 0 4px 14px rgba(0,0,0,.14);
      overflow: hidden;
    }
    .school-logo-slot img { width: 100%; height: 100%; object-fit: contain; }
    .sl-green  { background: linear-gradient(135deg, #2d6a2d, #4a8c3d); }
    .sl-gold   { background: linear-gradient(135deg, #b07808, #d4a020); }
    .sl-teal   { background: linear-gradient(135deg, #1a6a5a, #2a8c78); }
    .sl-olive  { background: linear-gradient(135deg, #4a5a18, #6a7a28); }
    .sl-brown  { background: linear-gradient(135deg, #6a3a18, #8a5a28); }
    .sl-indigo { background: linear-gradient(135deg, #2a2a7a, #4a4a9a); }
    .sl-maroon { background: linear-gradient(135deg, #6a1a2a, #8a2a3a); }
    .sl-add {
      background: rgba(45,106,45,.08);
      border: 2px dashed rgba(45,106,45,.25);
      color: var(--green); font-size: .9rem;
    }
    .school-name {
      font-size: .84rem; font-weight: 700;
      color: var(--green-dark); line-height: 1.3; margin-bottom: 4px;
    }
    .school-board {
      font-size: .68rem; letter-spacing: .09em;
      text-transform: uppercase; color: var(--gold); font-weight: 700;
    }
    .school-area { font-size: .72rem; color: var(--muted); margin-top: 2px; }
    /* "Your school next?" card */
    .school-card.add-card { border-style: dashed; border-color: rgba(45,106,45,.25); }
    .school-card.add-card:hover { border-color: var(--green); }
    .add-card .school-name { color: var(--muted); font-weight: 500; }

    /* ══════════════════════════════════════════
       SECTION 2: VIDEO TESTIMONIALS
    ══════════════════════════════════════════ */
    .video-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: 40px;
    }
    .video-card {
      border-radius: 20px; overflow: hidden;
      position: relative; cursor: pointer;
      background: rgba(255,252,240,.5);
      border: 1.5px solid rgba(255,255,255,.80);
      box-shadow: 0 4px 20px rgba(45,106,45,.10);
      transition: transform .3s, box-shadow .3s;
    }
    .video-card:hover {
      transform: scale(1.02);
      box-shadow: 0 14px 40px rgba(45,106,45,.18);
    }
    .video-thumb {
      aspect-ratio: 16/9;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 14px; position: relative;
    }
    .vt-1 { background: linear-gradient(155deg, #1a3a0a, #2d6a1a, #4a8c2d, #3d7a20); }
    .vt-2 { background: linear-gradient(155deg, #0a1a08, #1a3a10, #2d5a18, #4a7a28); }
    .video-thumb::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(8,20,4,.60) 0%, transparent 50%);
    }
    .video-play-btn {
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(200,146,10,.90);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 28px rgba(200,146,10,.50);
      transition: transform .25s, box-shadow .25s;
      position: relative; z-index: 1;
      font-size: 1.5rem; color: #fff;
    }
    .video-card:hover .video-play-btn {
      transform: scale(1.12);
      box-shadow: 0 12px 40px rgba(200,146,10,.65);
    }
    .video-duration {
      position: absolute; top: 14px; right: 14px; z-index: 2;
      background: rgba(0,0,0,.60); color: #fff;
      font-size: .7rem; font-weight: 700; padding: 3px 8px;
      border-radius: 6px; letter-spacing: .04em;
    }
    .video-label {
      position: relative; z-index: 1;
      font-family: var(--font-display); font-size: .95rem;
      font-weight: 300; color: #fff; text-align: center;
      padding: 0 20px; line-height: 1.35;
    }
    .video-meta {
      padding: 16px 20px;
      border-top: 1px solid rgba(255,255,255,.65);
    }
    .video-title {
      font-size: .88rem; font-weight: 600;
      color: var(--green-dark); margin-bottom: 3px;
    }
    .video-school { font-size: .76rem; color: var(--muted); }
    .video-note {
      margin-top: 16px; padding: 14px 18px;
      background: rgba(200,146,10,.08); border: 1px solid rgba(200,146,10,.20);
      border-radius: 12px; font-size: .82rem; color: var(--muted);
      font-style: italic; text-align: center;
    }
    @media(hover:none)and(pointer:coarse){.video-card{cursor:pointer;}.video-card:hover{transform:none;}}

    /* ══════════════════════════════════════════
       SECTION 3: WRITTEN TESTIMONIALS — 6 cards
    ══════════════════════════════════════════ */
    .testi6-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 44px;
    }
    .t6-card {
      padding: 30px 26px;
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(45,106,45,.09) 0%, rgba(45,106,45,.05) 100%);
      border: 1.5px solid rgba(45,106,45,.16);
      box-shadow: 0 4px 18px rgba(45,106,45,.07);
      display: flex; flex-direction: column;
      transition: transform .28s, box-shadow .28s, background .28s, border-color .28s;
      position: relative; overflow: hidden;
    }
    .t6-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(45,106,45,.15);
      background: linear-gradient(145deg, rgba(45,106,45,.14) 0%, rgba(45,106,45,.08) 100%);
      border-color: rgba(45,106,45,.30);
    }
    /* Large watermark quote mark */
    .t6-card::before {
      content: '\201C';
      position: absolute; top: -12px; right: 16px;
      font-family: var(--font-display); font-size: 8rem; font-weight: 600;
      color: rgba(45,106,45,.09); line-height: 1; pointer-events: none;
    }
    .t6-stars {
      color: var(--gold); font-size: .9rem;
      letter-spacing: 3px; margin-bottom: 14px;
    }
    .t6-quote {
      font-family: var(--font-display);
      font-size: 1rem; font-style: italic; font-weight: 300;
      color: var(--green-dark); line-height: 1.72;
      flex: 1; position: relative; z-index: 1;
    }
    .t6-author {
      display: flex; align-items: center; gap: 12px;
      margin-top: 22px; padding-top: 16px;
      border-top: 1px solid rgba(45,106,45,.14);
    }
    .t6-photo {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--green), var(--green-light));
      border: 2px solid rgba(45,106,45,.25);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-size: 1rem;
      font-weight: 700; color: #fff; overflow: hidden;
    }
    .t6-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .t6-name { font-size: .86rem; font-weight: 700; color: var(--green-dark); }
    .t6-role { font-size: .74rem; color: var(--muted); margin-top: 1px; }
    .t6-school { font-size: .7rem; color: var(--gold); margin-top: 1px; font-weight: 600; }

    /* ══════════════════════════════════════════
       SECTION 4: MASONRY PHOTO GALLERY
    ══════════════════════════════════════════ */
    .gallery-grid {
      columns: 4;
      column-gap: 14px;
      margin-top: 40px;
    }
    .gallery-item {
      break-inside: avoid;
      margin-bottom: 14px;
      border-radius: 16px; overflow: hidden;
      position: relative; cursor: pointer;
      display: block;
      transition: transform .3s, box-shadow .3s;
    }
    .gallery-item:hover {
      transform: scale(1.03);
      box-shadow: 0 14px 40px rgba(45,106,45,.25);
      z-index: 2;
    }
    .gallery-scene {
      width: 100%; display: flex;
      align-items: flex-end; padding: 14px;
      position: relative;
    }
    .gallery-scene::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(8,20,4,.80) 0%, transparent 55%);
    }
    /* Each scene gets a unique farm-appropriate colour palette */
    .gs-paddy      { background: linear-gradient(155deg,#1e420a,#2d6a1a,#5aaa28,#3d7a20); aspect-ratio:4/3; }
    .gs-bees       { background: linear-gradient(155deg,#2a1a00,#5a3808,#8a6020,#6a4808); aspect-ratio:1/1; }
    .gs-mushroom   { background: linear-gradient(155deg,#0a0a1a,#1a1a3a,#2a2a5a,#1a1a3a); aspect-ratio:3/4; }
    .gs-compost    { background: linear-gradient(155deg,#1a0a00,#3a1808,#5a3010,#3a1808); aspect-ratio:4/3; }
    .gs-cert       { background: linear-gradient(155deg,#1a1a0a,#2d2d1a,#4a4a28,#3a3a18); aspect-ratio:4/3; }
    .gs-group      { background: linear-gradient(155deg,#0a1a0a,#1a3a1a,#2d6a2d,#1a3a1a); aspect-ratio:16/9; }
    .gs-fun        { background: linear-gradient(155deg,#1a0a1a,#3a1a3a,#5a2a5a,#3a1a3a); aspect-ratio:3/4; }
    .gs-lunch      { background: linear-gradient(155deg,#1a0800,#3a1808,#6a3a10,#3a1808); aspect-ratio:4/3; }
    .gs-fish       { background: linear-gradient(155deg,#000a1a,#001a3a,#00285a,#001a3a); aspect-ratio:1/1; }
    .gs-animals    { background: linear-gradient(155deg,#1a0a00,#3a2010,#5a3820,#3a2010); aspect-ratio:4/3; }
    .gs-overview   { background: linear-gradient(155deg,#0a1808,#1a3a10,#2a5a18,#1a3a10); aspect-ratio:16/9; }
    .gs-harvest    { background: linear-gradient(155deg,#1a1000,#3a2800,#5a4010,#3a2800); aspect-ratio:3/4; }

    .gallery-emoji-bg {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -60%);
      font-size: 3.2rem; opacity: .25; pointer-events: none;
    }
    .gallery-caption {
      position: relative; z-index: 1;
      color: rgba(255,255,255,.88); font-size: .73rem;
      font-weight: 600; letter-spacing: .02em; line-height: 1.3;
    }
    .gallery-cat {
      position: absolute; top: 10px; left: 10px; z-index: 2;
      background: rgba(200,146,10,.85); backdrop-filter: blur(6px);
      color: #fff; font-size: .62rem; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      padding: 3px 9px; border-radius: 100px;
    }
    @media(hover:none)and(pointer:coarse){ .gallery-item { cursor:pointer; } .gallery-item:hover { transform:none; } }

    /* ══════════════════════════════════════════
       SECTION 5: CASE STUDY
    ══════════════════════════════════════════ */
    .case-study-wrap {
      border-radius: 24px; overflow: hidden;
      border: 1.5px solid rgba(45,106,45,.20);
      box-shadow: 0 6px 32px rgba(45,106,45,.10);
    }
    /* Green header band */
    .cs-header {
      background: var(--green-dark);
      padding: 36px 44px;
      position: relative; overflow: hidden;
    }
    .cs-header::before {
      content: '';
      position: absolute; top: -60px; right: -60px;
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(200,146,10,.22), transparent 60%);
      border-radius: 50%; pointer-events: none;
    }
    .cs-label {
      font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
      color: rgba(245,214,117,.70); font-weight: 700; margin-bottom: 10px;
    }
    .cs-headline {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      font-weight: 200; color: #fff;
      letter-spacing: -.02em; line-height: 1.15;
      position: relative; z-index: 1;
    }
    .cs-headline em { font-style: italic; color: #f5d675; }
    .cs-meta-row {
      display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px;
      position: relative; z-index: 1;
    }
    .cs-meta-chip {
      padding: 5px 14px; border-radius: 100px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      color: rgba(255,255,255,.80);
      font-size: .75rem; font-weight: 600;
    }
    /* Case study body */
    .cs-body {
      padding: 44px;
      background: rgba(255,252,240,.72);
      backdrop-filter: blur(14px);
    }
    .cs-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 48px; align-items: start;
    }
    .cs-narrative p {
      color: var(--muted); font-size: .94rem;
      line-height: 1.80; margin-bottom: 18px;
    }
    .cs-narrative p:last-child { margin-bottom: 0; }
    .cs-narrative strong { color: var(--green-dark); font-weight: 600; }
    /* Outcome quote block */
    .cs-outcome {
      margin-top: 28px; padding: 22px 26px;
      background: rgba(45,106,45,.08);
      border-left: 4px solid var(--green);
      border-radius: 0 14px 14px 0;
    }
    .cs-outcome-quote {
      font-family: var(--font-display);
      font-size: .98rem; font-style: italic; font-weight: 300;
      color: var(--green-dark); line-height: 1.65; margin-bottom: 10px;
    }
    .cs-outcome-stat {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--green); color: #fff;
      padding: 6px 14px; border-radius: 100px;
      font-size: .76rem; font-weight: 700;
    }
    /* Photo mini-grid */
    .cs-photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .cs-photo {
      border-radius: 14px; overflow: hidden;
      aspect-ratio: 4/3; position: relative;
    }
    .cs-photo:first-child {
      grid-column: span 2; aspect-ratio: 16/7;
    }
    .cs-photo-scene {
      width: 100%; height: 100%;
      display: flex; align-items: flex-end; padding: 12px;
      position: relative;
    }
    .cs-photo-scene::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(8,20,4,.70) 0%, transparent 55%);
    }
    .cps-1 { background: linear-gradient(155deg,#1a3a0a,#2d6a1a,#4a8c2d); }
    .cps-2 { background: linear-gradient(155deg,#0a1a08,#1a3a10,#2d5a18); }
    .cps-3 { background: linear-gradient(155deg,#1a1a0a,#2d2d1a,#4a4a28); }
    .cps-4 { background: linear-gradient(155deg,#1a0a00,#3a1808,#5a3010); }
    .cs-photo-emoji {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -60%);
      font-size: 2.5rem; opacity: .3; pointer-events: none;
    }
    .cs-photo-cap {
      position: relative; z-index: 1;
      font-size: .7rem; color: rgba(255,255,255,.80); font-weight: 500;
    }

    /* ══ RESPONSIVE ══ */
    @media(max-width:1100px){ .gallery-grid{columns:3;} }
    @media(max-width:900px){
      .schools-grid{grid-template-columns:repeat(2,1fr);}
      .video-grid{grid-template-columns:1fr;}
      .testi6-grid{grid-template-columns:1fr 1fr;}
      .gallery-grid{columns:2;column-gap:10px;}
      .gallery-item{margin-bottom:10px;}
      .cs-grid{grid-template-columns:1fr;}
      .cs-body{padding:28px 26px;}
      .cs-header{padding:26px 28px;}
    }
    @media(max-width:600px){
      .schools-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
      .testi6-grid{grid-template-columns:1fr;}
      .gallery-grid{columns:2;}
      .cs-photos{grid-template-columns:1fr;}
      .cs-photo:first-child{grid-column:span 1;aspect-ratio:4/3;}
      .cs-body{padding:22px 18px;}
      .cs-header{padding:22px 20px;}
    }
    @media(max-width:400px){
      .schools-grid{grid-template-columns:1fr 1fr;}
      .gallery-grid{columns:2;}
    }

    /* ── Video coming soon ── */
    .video-coming-wrap {
      max-width: 600px; margin: 0 auto;
      text-align: center;
    }
    .video-coming-inner {
      padding: 52px 40px;
      background: rgba(45,106,45,.04);
      border: 2px dashed rgba(45,106,45,.20);
      border-radius: 24px;
    }
    .video-coming-icon {
      font-size: 3.5rem; line-height: 1; margin-bottom: 16px;
    }
    .video-coming-title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      font-weight: 200; color: var(--green-dark);
      margin-bottom: 12px; letter-spacing: -.02em;
    }
    .video-coming-title em { font-style: italic; color: var(--gold); }
    .video-coming-sub {
      font-size: .92rem; color: var(--muted); line-height: 1.7;
      max-width: 420px; margin: 0 auto;
    }
    @media(max-width:600px){ .video-coming-inner{ padding: 36px 20px; } }