/* Loaded by the homepage's carousel, goal cards and Foundation blocks
   (HeroCarousel, GoalCards, ImpactBand in cms/src/frontend/blocks), so inner
   pages do not carry them.
   Every selector starts with `html`: this file loads BEFORE site.css, whose
   rules these override, so an equally specific selector here would lose. */

/* Where the window is short, the hero's green note would sit under the
   Customer Support button. */
@media (min-width:981px) and (max-height:820px){
  html .insight-security{display:none}
}

/* The figure strip under the hero (the user, 2026-10-12): a slim white
   ribbon with a lime top edge, as wide as the page's content. From 1100px
   one row: each figure's icon beside its number, the label and date under
   them, the impact link at the end; below that two by two, the link across
   the foot. It sits just under the hero (the user, 2026-10-12: overlapping the
   photograph's foot cut through the slides' buttons). */
html .home-metrics{padding:28px 0}
html .home-metrics .stats,html .home-metrics .stats:has(.stat-link){
  width:min(100% - 32px,var(--max));grid-template-columns:repeat(4,1fr) auto;align-items:start;
  padding:22px 28px 20px;border-radius:24px;
  box-shadow:inset 0 4px 0 var(--lime),0 14px 32px rgba(53,0,79,.07)
}
html .home-metrics .stat:not(.stat-link),html .home-metrics .stat:not(.stat-link):nth-last-child(2){
  min-height:0;margin:0;padding:0 22px;display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center;
  overflow:visible;border-right:1px solid var(--hair)
}
html .home-metrics .stat:first-child{padding-left:0}
html .home-metrics .stat-copy{display:contents}
html .home-metrics .stat-icon{width:40px;height:40px;grid-row:1}
html .home-metrics .stat-icon svg{width:20px;height:20px}
html .home-metrics .stat .num{grid-column:2;line-height:1.15;white-space:nowrap}
html .home-metrics .stat .cap{grid-column:1 / -1;margin-top:8px;line-height:1.4}
html .home-metrics .stat .cap.muted{margin-top:2px;font-size:var(--fs-label)}
html .home-metrics .stats .stat-link{
  grid-column:auto;align-self:center;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
  min-height:0;margin:0;padding:0 0 0 22px;border:0
}
html .home-metrics .stat-link-label{white-space:nowrap}
@media (min-width:981px){
  html .hero.hero-cover + .home-metrics{padding-top:20px}
}
@media (max-width:1099px){
  html .home-metrics .stats,html .home-metrics .stats:has(.stat-link){grid-template-columns:repeat(2,1fr);row-gap:18px}
  html .home-metrics .stat:not(.stat-link):nth-child(2n){border-right:0}
  html .home-metrics .stat:not(.stat-link):nth-child(2n+1){padding-left:0}
  html .home-metrics .stats .stat-link{
    grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;
    padding:14px 0 0;border-top:1px solid var(--hair)
  }
}
/* A phone's half width has no room for the icon beside the number: it sits
   above it. */
@media (max-width:620px){
  html .home-metrics{padding:20px 0}
  html .home-metrics .stats,html .home-metrics .stats:has(.stat-link){padding:20px 16px 16px;border-radius:18px;column-gap:0;row-gap:16px}
  html .home-metrics .stat:not(.stat-link),html .home-metrics .stat:not(.stat-link):nth-last-child(2){padding:0 0 0 12px;border:0}
  html .home-metrics .stat:not(.stat-link):nth-child(2n+1){padding:0 12px 0 0;border-right:1px solid var(--hair)}
  html .home-metrics .stat-icon{width:32px;height:32px;margin-bottom:8px}
  html .home-metrics .stat-icon svg{width:17px;height:17px}
  html .home-metrics .stat .num{grid-column:1 / -1}
}

/* The Foundation section (2026-09-24): its heading across the top, over the
   photograph, with the intro beside it; the photograph and the programmes
   share the row under them and end together, so neither leaves a gap below. */
@media (min-width:981px){
  html .impact-section>.impact-layout{
    grid-template-columns:42% minmax(0,1fr) minmax(16rem,23%);
    grid-template-areas:"eyebrow eyebrow eyebrow" "heading heading intro" "image programmes programmes";
    row-gap:0;align-items:stretch
  }
  html .impact-eyebrow,html .impact-heading{margin-left:0}
  html .impact-heading{align-self:end}
  html .impact-heading h2{max-width:none}
  html .impact-intro{align-self:end;margin:0 0 .5rem 2rem;max-width:22rem}
  html .impact-image{grid-area:image;height:auto!important;min-height:22rem;margin-top:2.25rem}
  html .impact-programmes{align-self:center;margin:2.25rem 0 0 3rem}
}

/* The hero caption's measure (2026-09-24, widened 2026-10-05 and again
   2026-10-13, the client: "squeezed, confined to the left"): it once stopped
   short of the arc in front of the photograph; with the photograph behind the
   words it is the words' own width, inside the dark part of the wash. */
@media (min-width:981px){
  html .hero-caption.container{--cap:min(52rem,58%)}
  html .hero-caption :is(h1,h2){max-width:min(22ch,var(--cap))}
  html .hero-caption p{width:auto;max-width:var(--cap)}
}

/* The Foundation's links (2026-09-24): the eyebrow to its website, each
   programme row to its page there. */
html .impact-eyebrow-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
html .impact-eyebrow-link .ar{transition:transform .2s ease}
html .impact-eyebrow-link:hover .ar{transform:translateX(4px)}
html .impact-programme-link{color:inherit;text-decoration:none;transition:background .2s ease}
html .impact-programme-link:hover{background:linear-gradient(90deg,transparent,rgba(143,198,65,.1))}
html .impact-programme-link .impact-programme-arrow{transition:background .2s ease,border-color .2s ease}
html .impact-programme-link:hover .impact-programme-arrow{background:var(--lime);border-color:var(--lime)}
html .impact-programme-link:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* The photograph behind the words (the user, 2026-10-05, after the Foundation
   site): each slide's photograph under the whole hero, washed as the inner
   openings are (cover.css: brand purple, 60% behind the words, 30% at the
   edges, 2026-10-15); the side panel is retired. `.hero.hero-cover` outranks the arch, the arc and the
   lavender wash in site.css. --shade as in cover.css. */
html .hero.hero-cover{--shade:var(--wash,53,0,79);background:rgb(var(--shade));color:#fff}
html .hero.hero-cover::before{display:none}
html .hero.hero-cover .hero-media{left:0;right:0;clip-path:none;border-radius:0;-webkit-mask-image:none;mask-image:none}
html .hero.hero-cover .hero-media::after{background:linear-gradient(90deg,rgba(var(--shade),.3) 0%,rgba(var(--shade),.6) 18%,rgba(var(--shade),.6) 82%,rgba(var(--shade),.3) 100%)}
/* The caption centred, its intro justified with the last line centred (the
   user, 2026-10-13). */
html .hero.hero-cover .hero-caption{text-align:center}
html .hero.hero-cover .hero-caption > *{margin-inline:auto}
html .hero.hero-cover .hero-caption p{text-align:justify;text-align-last:center}
html .hero.hero-cover .hero-cta{justify-content:center}
html .hero.hero-cover .hero-kicker{color:var(--lime)}
html .hero.hero-cover .hero-caption :is(h1,h2),html .hero.hero-cover .hero-caption :is(h1,h2)::first-line{color:#fff}
html .hero.hero-cover .hero-caption p{color:#fff}
html .hero.hero-cover .hero-cta .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--plum-dark)}
html .hero.hero-cover .hero-cta .btn:not(.primary){background:transparent;border-color:rgba(255,255,255,.72);color:#fff}
html .hero.hero-cover .hero-cta .btn:not(.primary):hover{background:rgba(255,255,255,.12);border-color:#fff}
html .hero.hero-cover .hero-cta .btn.watch::before{border-color:var(--lime);color:var(--lime)}
/* The controls and the dashboard cards line up with the words' container on
   the right, where the panel used to be. */
@media (min-width:981px){
  html .hero.hero-cover .hero-chrome,html .hero.hero-cover .hero-insights{right:max(4.5rem,(100% - 1640px) / 2)}
}
/* Tablets and phones: the words fill the width, so the wash is even from top
   to foot; the tabs under them read white. */
@media (max-width:980px){
  html .hero.hero-cover .hero-media::after{background:rgba(var(--shade),.6)}
  html .hero.hero-cover .hero-chrome{background:none;backdrop-filter:none}
}
/* The slides as dots (the user, 2026-10-12, in place of the count and the
   arrows), with the pause button, on one dark glass pill so they read over
   any photograph. The current slide's dot is long and fills lime as it
   dwells, full when paused; each dot is a 24px target. The titles stay for
   screen readers. */
html .hero.hero-cover .hero-chrome-inner{
  display:flex;flex-direction:row;align-items:center;gap:4px;width:fit-content;padding:2px 2px 2px 8px;
  border-radius:999px;background:rgba(var(--shade),.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
html .hero.hero-cover .hero-tabs{display:flex;flex:none;gap:0;max-width:none}
html .hero.hero-cover .hero-tab{display:grid;place-items:center;min-width:24px;height:36px;padding:0 4px;color:#fff}
html .hero.hero-cover .tab-rail{width:8px;height:8px;margin:0;background:rgba(255,255,255,.55);transition:width .3s ease,background-color .2s ease}
html .hero.hero-cover .hero-tab:hover .tab-rail{background:#fff}
html .hero.hero-cover .hero-tab.is-active .tab-rail{width:30px}
html .hero.hero-cover .hero-tab.is-seen .tab-fill{width:0}
html .hero.hero-cover.is-paused .hero-tab.is-active .tab-fill{animation:none;width:100%}
html .hero.hero-cover .hero-tab:focus-visible{outline:2px solid var(--lime);outline-offset:-2px;border-radius:999px}
html .hero.hero-cover .tab-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html .hero.hero-cover .hero-controls{padding:0;gap:0;border-left:1px solid rgba(255,255,255,.24)}
html .hero.hero-cover .hero-toggle{width:36px;height:36px;margin-left:2px;border:0;background:none;box-shadow:none;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
html .hero.hero-cover .hero-toggle:hover{background:rgba(255,255,255,.16);color:#fff}
/* Tablets and phones: under the photograph, on the plain shade, so no pill;
   the first dot lines up with the words. */
@media (max-width:980px){
  html .hero.hero-cover .hero-chrome-inner{margin:0 auto 0 12px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* The goals as cards (the user, 2026-10-09): the heading on two lines with
   the intro right beside it across the rest of the width, no gap between
   them (2026-10-12), then four cards in a row, two on a tablet, one on a
   phone. A card is its photograph with a round icon on the lower edge, the
   title, the line under it and what the link promises; the whole card is the
   link. */
html .goal-cards-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"heading intro";
  gap:24px 48px;align-items:end;margin-bottom:clamp(32px,4vw,48px)
}
html .goal-cards-head .goals-heading h2{max-width:16ch}
html .goal-cards-head .goals-intro{max-width:none;align-self:end}
/* Straight after the figures card, which brings its own space below it. */
html .home-metrics + .goal-cards-section{padding-top:var(--space-6)}
html .goal-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
html .goal-cards > li{display:flex}
html .goal-card{
  flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #e4d6e8;border-radius:18px;background:#fff;color:inherit;
  box-shadow:0 10px 28px rgba(53,0,79,.06);transition:transform .2s ease,box-shadow .2s ease
}
html .goal-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 18px 40px rgba(53,0,79,.12)}
html .goal-card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
html .goal-card-photo{position:relative;display:block;aspect-ratio:16 / 10;min-height:0;background:var(--plum-100)}
/* A small photograph is drawn as a bare <img>, a larger one in a <picture>. */
html .goal-card-photo > :is(picture,img){position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
html .goal-card-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
html .goal-card:hover .goal-card-photo picture img{transform:scale(1.04)}
html .goal-card-photo:not(:has(img)){aspect-ratio:auto;height:28px}
html .goal-card-icon{position:absolute;left:24px;bottom:0;transform:translateY(50%);box-shadow:0 0 0 4px #fff}
html .goal-card h3{margin:44px 24px 0;font-size:var(--fs-h3);line-height:1.25;color:#35004f}
html .goal-card-photo:not(:has(.goal-card-icon)) + h3{margin-top:24px}
html .goal-card p{flex:1 1 auto;margin:10px 24px 0;font-size:var(--fs-small);line-height:1.6;color:#625b7f}
html .goal-card-go{display:inline-flex;align-items:center;gap:8px;margin:20px 24px 24px;font-size:var(--fs-small);font-weight:800;color:#35004f}
html .goal-card-go svg{color:#527c17;transition:transform .2s ease}
html .goal-card:hover .goal-card-go svg{transform:translateX(4px)}
@media (max-width:1100px){
  html .goal-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  html .goal-cards-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "intro"}
}
@media (max-width:640px){
  html .goal-cards{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (prefers-reduced-motion:reduce){
  html .goal-card,html .goal-card-photo img,html .goal-card-go svg{transition:none}
  html .goal-card:hover,html .goal-card:hover .goal-card-photo picture img{transform:none}
}