/* ==========================================================================
   Page: Home
   Layout signature — full-bleed photo hero with right-weighted copy, then an
   alternating rhythm of light card grids and dark full-bleed bands.
   Depends on tokens/base/components.
   ========================================================================== */

/* ---- Blob placement -------------------------------------------------------
   Declared here rather than inline, so the Content-Security-Policy can stay
   free of 'unsafe-inline' for styles. Each section positions its own field.
   -------------------------------------------------------------------------- */
.blob[data-pos="a"]{--s:340px;left:-9%;top:12%;}
.blob[data-pos="b"]{--s:300px;right:-8%;top:46%;--d:2s;}
.blob[data-pos="c"]{--s:300px;left:3%;top:8%;--d:1s;}
.blob[data-pos="d"]{--s:320px;right:-7%;top:52%;--d:3s;}
.blob[data-pos="e"]{--s:280px;left:-8%;top:26%;--d:2.5s;}
.blob[data-pos="f"]{--s:300px;right:5%;top:14%;--d:4s;}

/* ---- HERO ---------------------------------------------------------------- */
.hero{min-height:100vh;display:flex;align-items:center;background:var(--forest);}
.hero-media{position:absolute;inset:0;z-index:0;}
/* No background override here. It used to flatten the slot to solid forest-2,
   which killed the .ph--dark treatment and left the hero's whole left side
   reading as an empty rectangle rather than as a photograph that has not been
   uploaded yet. The scrim above it does the darkening. */
.hero-media .ph{width:100%;height:100%;}
/* Symmetrical, because the copy is centred. The old scrim ran light-to-dark
   left to right, which only makes sense under copy weighted to one side. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(14,31,23,.58) 0%, rgba(14,31,23,.88) 62%, rgba(14,31,23,.96) 100%);
}

/* Centred.
   This was right-weighted, on the assumption of a photograph filling the left
   of the frame. There is no photograph yet, so the left half read as an empty
   rectangle and the composition looked broken rather than art-directed. A
   centred hero needs nothing behind it to make sense. */
.hero-in{
  position:relative;z-index:var(--z-content);
  padding:180px 0 170px;
  margin-inline:auto;max-width:60ch;
  text-align:center;
}
.hero h1{font-size:var(--t-h1);color:#fff;margin-top:24px;}
.hero h1 em{font-style:normal;color:var(--hivis);}
.hero h1 u{text-decoration:none;position:relative;white-space:nowrap;}
.hero h1 u::after{
  content:"";position:absolute;left:0;right:0;bottom:.07em;height:.11em;
  background:var(--coral);border-radius:2px;
}
.hero-lede{margin:22px auto 0;font-size:1.08rem;max-width:48ch;color:var(--on-dark);}
.hero-act{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.hero-chips{margin-top:38px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* ---- Shared section heads ------------------------------------------------ */
.split-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:52px;}
.split-head--action{align-items:end;}
.lede--tight{max-width:34ch;}
.kicker--centred{justify-content:center;}

/* ---- 01 · PILLARS -------------------------------------------------------- */
.home-pillars{padding:104px 0 116px;}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:var(--z-content);}
.pillar-grid .card-body{padding:30px 26px 26px;}
.pillar-grid h3{margin-bottom:9px;}
.pillar-grid p{font-size:.9rem;color:var(--muted);margin-bottom:16px;}

/* ---- 02 · WHY IT MATTERS ------------------------------------------------- */
.home-why{position:relative;background:var(--forest);padding:110px 0 140px;}
.home-why-media{position:absolute;inset:0;z-index:0;}
.home-why-media .ph{width:100%;height:100%;}
.home-why-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,31,23,.95),rgba(14,31,23,.72));
}
.home-why-grid{
  position:relative;z-index:var(--z-content);
  display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:end;
}
.home-why-txt{color:#fff;}
.home-why-txt h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-bottom:18px;max-width:15ch;}
.home-why-txt p{color:var(--on-dark);max-width:44ch;margin-bottom:28px;}
.home-why-ph{position:relative;}
.home-why-main{height:410px;border-radius:var(--r);margin-bottom:-160px;box-shadow:var(--sh-deep);}
.home-why-sub{
  position:absolute;width:150px;height:150px;border-radius:var(--r-sm);
  left:-30px;top:-46px;box-shadow:0 16px 32px rgba(0,0,0,.36);
}

/* Stats sit astride the band edge, half on the dark ground and half off it. */
.home-stats{position:relative;z-index:var(--z-wave);padding-top:36px;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;display:flex;align-items:center;gap:14px;
  position:relative;overflow:hidden;
  transition:transform var(--dur),box-shadow var(--dur);
}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh-soft);}
.stat-ic{
  width:44px;height:44px;border-radius:50%;background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--forest-3);flex-shrink:0;
}
.stat-n{
  font-family:var(--f-display);font-weight:800;font-size:1.6rem;
  line-height:1;letter-spacing:-.03em;
}
.stat-l{font-size:.78rem;color:var(--muted);margin-top:3px;}

/* ---- 03 · PROGRAMMES ----------------------------------------------------- */
.home-prog{padding:114px 0;}
.prog-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:var(--z-content);}
.card-link{display:flex;flex-direction:column;height:100%;}
.prog-ph{height:215px;border:none;border-bottom:1px dashed rgba(18,16,12,.16);position:relative;}
.home-prog h3{margin-bottom:9px;}
.home-prog .card-body p{font-size:.9rem;color:var(--muted);margin-bottom:16px;}
.prog-meta{
  display:flex;gap:16px;font-size:.76rem;color:var(--muted);
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.prog-meta span{display:flex;align-items:center;gap:6px;}
.prog-meta svg{color:var(--forest-3);flex-shrink:0;}

/* ---- QUOTE --------------------------------------------------------------- */
.home-quote{position:relative;padding:112px 0;background:var(--forest-2);}
.home-quote-media{position:absolute;inset:0;z-index:0;}
.home-quote-media .ph{width:100%;height:100%;}
.home-quote-media::after{content:"";position:absolute;inset:0;background:rgba(14,31,23,.86);}
.home-quote-in{position:relative;z-index:var(--z-content);max-width:46ch;margin:0 auto;color:#fff;}
.quote-mark{font-family:var(--f-display);font-size:4rem;line-height:.6;color:var(--hivis);margin-bottom:18px;}
.home-quote-in h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:28px;color:#fff;}

/* ---- 04 · SERVICES ------------------------------------------------------- */
.home-serv{padding:114px 0;}
.serv-head{max-width:62ch;margin-bottom:48px;}
.serv-lede{margin-top:16px;}
.serv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:38px;}
.serv-ph{height:185px;border:none;border-bottom:1px dashed rgba(18,16,12,.16);}
.home-serv h3{margin-bottom:8px;}
.home-serv .card-body p{font-size:.88rem;color:var(--muted);margin-bottom:16px;flex:1;}
.home-serv .card-body{display:flex;flex-direction:column;flex:1;}

/* ---- 05 · EVENTS --------------------------------------------------------- */
.home-evt{padding:114px 0;}
.evt-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:stretch;position:relative;z-index:var(--z-content);}
.evt-feat{
  border-radius:var(--r);overflow:hidden;background:var(--forest);
  display:grid;grid-template-columns:1fr 1fr;
}
.evt-feat .ph{border:none;min-height:300px;}
.evt-b{padding:36px 32px;display:flex;flex-direction:column;justify-content:center;color:#fff;}
.evt-b h3{font-size:1.4rem;margin-bottom:12px;}
.evt-b p{color:var(--on-dark);font-size:.92rem;margin-bottom:18px;}
.evt-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.evt-tags span{
  font-family:var(--f-mono);font-size:.7rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  padding:5px 11px;border-radius:var(--pill);
}
.evt-list{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;display:flex;flex-direction:column;
}
.evt-list h4{font-family:var(--f-display);font-weight:800;font-size:1.05rem;margin-bottom:20px;}
.el{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);transition:padding-left var(--dur-fast);}
.el:hover{padding-left:6px;}
.el:last-of-type{border-bottom:none;}
.el-d{width:52px;flex-shrink:0;text-align:center;background:var(--cream-2);border-radius:var(--r-sm);padding:8px 4px;}
.el-d b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.1rem;line-height:1;}
.el-d span{font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;color:var(--muted);}
.el-t{font-weight:700;font-size:.94rem;margin-bottom:3px;}
.el-m{font-size:.78rem;color:var(--muted);}
.evt-list .btn--ghost{margin-top:20px;align-self:flex-start;}

/* ---- 06 · CREW ----------------------------------------------------------- */
.home-crew{padding:0 0 114px;}
.crew-head{margin-bottom:48px;}
.crew-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.cc{position:relative;border-radius:var(--r);overflow:hidden;}
.cc .ph{aspect-ratio:4/5;border:none;transition:transform .5s var(--ease);}
.cc:hover .ph{transform:scale(1.05);}
.cc-ov{
  position:absolute;left:10px;right:10px;bottom:10px;padding:18px 18px 20px;
  border-radius:var(--r-sm);color:#fff;
  transform:translateY(14px);opacity:0;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.cc:hover .cc-ov,.cc:focus-within .cc-ov{transform:translateY(0);opacity:1;}
.cc-nm{
  position:absolute;left:0;right:0;bottom:0;padding:20px;
  background:linear-gradient(transparent,rgba(14,31,23,.85));
  color:#fff;transition:opacity .3s;
}
.cc:hover .cc-nm,.cc:focus-within .cc-nm{opacity:0;}
.cc h3{font-size:1.02rem;margin-bottom:2px;}
.cc p{font-size:.78rem;opacity:.85;}

/* ---- 07 · FIELD NOTES ---------------------------------------------------- */
.home-blog{padding:0 0 114px;}
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;position:relative;z-index:var(--z-content);}
.bm-ph{height:320px;border:none;border-bottom:1px dashed rgba(18,16,12,.16);}
.bm .card-body{padding:26px 24px 28px;}
.bm h3{font-size:1.24rem;margin:10px 0;}
.bm p{font-size:.9rem;color:var(--muted);margin-bottom:14px;}
.bside{display:flex;flex-direction:column;gap:18px;}
.bp{display:grid;grid-template-columns:132px 1fr;gap:18px;}
.bp .ph{border:none;min-height:132px;font-size:.64rem;padding:8px;}
.bp .ph .d{font-size:.72rem;}
.bp-b{padding:18px 20px 18px 0;display:flex;flex-direction:column;justify-content:center;}
.bp h3{font-size:.98rem;margin-bottom:6px;}

/* ---- 08 · PARTNERS ------------------------------------------------------- */
.home-part{padding:0 0 114px;}
.home-part .center{margin-bottom:40px;}

/* ---- 09 · GET INVOLVED --------------------------------------------------- */
.home-inv{padding:0 0 114px;}
.inv-card{position:relative;border-radius:var(--r);overflow:hidden;padding:70px 46px 60px;background:var(--forest);}
.inv-media{position:absolute;inset:0;z-index:0;}
.inv-media .ph{width:100%;height:100%;}
.inv-media::after{content:"";position:absolute;inset:0;background:rgba(14,31,23,.9);}
.inv-in{position:relative;z-index:var(--z-content);color:#fff;max-width:54ch;margin:0 auto 44px;}
.inv-in h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:16px;color:#fff;}
.inv-in p{color:var(--on-dark);}
.paths{position:relative;z-index:var(--z-content);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pt{
  padding:34px 30px;border-radius:var(--r);color:#fff;
  transition:background var(--dur),transform var(--dur),box-shadow var(--dur);
}
.pt:hover{background:rgba(255,255,255,.16);transform:translateY(-5px);}
.pt:nth-child(1):hover{box-shadow:0 20px 40px var(--glow-hivis);}
.pt:nth-child(2):hover{box-shadow:0 20px 40px var(--glow-teal);}
.pt:nth-child(3):hover{box-shadow:0 20px 40px var(--glow-coral);}
.pt-tag{
  display:inline-block;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--pill);margin-bottom:16px;
}
.pt-tag--hivis{background:var(--hivis);color:var(--forest);}
.pt-tag--teal{background:var(--teal);color:var(--forest);}
.pt-tag--coral{background:var(--coral);color:var(--forest);}
.pt h3{font-size:1.3rem;margin-bottom:11px;color:#fff;}
.pt > p{font-size:.9rem;color:var(--on-dark);margin-bottom:18px;}
.pt ul{margin-bottom:22px;}
.pt li{font-size:.85rem;color:var(--on-dark);display:flex;gap:9px;margin-bottom:8px;}
.pt li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hivis);margin-top:8px;flex-shrink:0;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .pillar-grid{grid-template-columns:1fr 1fr;}
  .crew-row{grid-template-columns:1fr 1fr;}
  .paths{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .hero{min-height:auto;}
  /* 140/130 was still 270px of padding on an 812px phone, which pushed the
     hero to 884px and the two calls to action below the fold. The top only has
     to clear the fixed header. */
  .hero-in{padding:104px 0 76px;}
  .split-head{grid-template-columns:1fr;}
  .pillar-grid,.prog-row,.serv-row,.crew-row{grid-template-columns:1fr;}
  .home-why-grid{grid-template-columns:1fr;}
  .home-why-main{margin-bottom:0;margin-top:30px;height:280px;}
  .home-why-sub{display:none;}
  .home-why{padding-bottom:100px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .evt-grid,.evt-feat,.blog-grid{grid-template-columns:1fr;}
  .evt-feat .ph{min-height:220px;}
  .bp{grid-template-columns:110px 1fr;}
  .bp-b{padding:16px 16px 16px 0;}
  .inv-card{padding:52px 24px 46px;}
  .home-pillars,.home-prog,.home-serv,.home-evt{padding:var(--sec) 0;}
  .home-crew,.home-blog,.home-part,.home-inv{padding-bottom:var(--sec);}
}

@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr;}
}