/* ==========================================================================
   THRYA HEALTH AND RESEARCH FOUNDATION
   Stylesheet: HOME (index.html)

   Structure of this file:
     1.  Design tokens          (kept identical across every page stylesheet)
     2.  Reset & base
     3.  Typography utilities
     4.  Buttons & links
     5.  Layout utilities
     6.  Site header & navigation
     7.  Site footer
     8.  Scroll reveal / motion
     9.  PAGE — Hero
     10. PAGE — Context snapshot
     11. PAGE — Programmes at a glance
     12. PAGE — CTA band
     13. PAGE — Latest stories
     14. Back-to-top button
     14b. Site search (header button + overlay)
     15. MOBILE RESPONSIVE (section by section, labelled)
     24. MOBILE RESPONSIVE — SITE SEARCH (bottom of file)
   ========================================================================== */


/* ----------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root{
  /* Colour */
  --color-cream:        #FBF6EF;
  --color-cream-deep:   #F3E8D8;
  --color-paper:        #FFFDF9;
  --color-forest:       #14332A;
  --color-forest-2:     #1F5040;
  --color-terracotta:   #B85C34;
  --color-terracotta-deep:#93482A;
  --color-gold:         #C08A34;
  --color-ink:          #211D18;
  --color-ink-soft:     #5B564D;
  --color-line:         #E3D6C2;
  --color-sage:         #E3E8D6;

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-xxl: 8rem;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 32px;

  /* Shadow */
  --shadow-soft: 0 24px 60px -30px rgba(20,51,42,.35);
  --shadow-lift: 0 14px 34px -18px rgba(20,51,42,.28);

  /* Layout */
  --container-w: 1200px;
  /* Left offset of the .nav-capsule pill itself (the rounded glass bar),
     computed the way the browser positions it: .header-inner is centered
     at max-width 1200px inside .site-header (which itself has 1.5rem side
     padding), so once the viewport is wider than 1200px + that padding,
     extra space opens up on both sides — (100vw - 1248px)/2 — on top of
     the fixed padding stack up to the capsule's own edge (site-header
     1.5rem + header-inner .6rem = 2.1rem / 33.6px — NOT including the
     capsule's own 1.6rem inner padding, since we want the pill's outer
     edge, not the logo text sitting inside it). max(...,0px) keeps it
     from going negative on narrower screens. */
  --hero-indent: calc(33.6px + max((var(--vw-safe, 100vw) - 1248px) / 2, 0px));
  --header-h: 124px;
}

/* ----------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body{
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--color-forest); margin: 0 0 .6em; line-height: 1.15; font-weight: 500; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }

.skip-link{
  position: absolute; left: -999px; top: 0; background: var(--color-forest); color: #fff;
  padding: .8rem 1.2rem; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

:focus-visible{ outline: 2.5px solid var(--color-terracotta); outline-offset: 3px; }

/* ----------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ---------------------------------------------------------------------- */
.eyebrow{
  font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-terracotta); margin: 0 0 .9rem;
  display: inline-block;
}
.eyebrow-light{ color: var(--color-gold); }

.section-head{ max-width: 680px; margin: 0 auto var(--space-xl); text-align: center; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
.section-head-row{ display: flex; align-items: flex-end; justify-content: space-between; text-align: left; max-width: none; gap: var(--space-md); }
.section-lede{ color: var(--color-ink-soft); font-size: 1.08rem; }

.text-link{
  color: var(--color-forest-2); font-weight: 600; border-bottom: 1.5px solid var(--color-terracotta);
  padding-bottom: 2px; transition: color .2s ease, border-color .2s ease;
}
.text-link:hover{ color: var(--color-terracotta); }

/* ----------------------------------------------------------------------
   4. BUTTONS & LINKS
   ---------------------------------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: .98rem;
  border: 1.5px solid transparent; transition: transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--color-terracotta); color: #fff; box-shadow: var(--shadow-lift); }
.btn-primary:hover{ background: var(--color-terracotta-deep); }
.btn-ghost{ border-color: var(--color-forest); color: var(--color-forest); background: transparent; }
.btn-ghost:hover{ background: var(--color-forest); color: #fff; }
.btn-outline-light{ border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline-light:hover{ background: #fff; color: var(--color-forest); }

/* ----------------------------------------------------------------------
   5. LAYOUT UTILITIES
   ---------------------------------------------------------------------- */
.container{ max-width: var(--container-w); margin: 0 auto; padding: 0 1.5rem; }

/* ----------------------------------------------------------------------
   6. SITE HEADER & NAVIGATION — floating glass capsule
   ---------------------------------------------------------------------- */
.site-header{
  /* NOTE: no backdrop-filter/transform directly on this element or on
     .header-inner — either would make this sticky header the containing
     block for any position:fixed descendant (like the mobile nav panel
     below), trapping it inside the header's own box instead of the
     viewport. The glass effect instead lives on .header-inner::before,
     a pseudo-element, which never becomes a containing block for real
     DOM descendants like .site-nav. */
  position: sticky; top: 0; z-index: 100; width: 100%;
  padding: 14px 1.5rem;
  background: transparent;
  transition: padding .35s ease;
}
.site-header.is-scrolled{ padding-top: 10px; padding-bottom: 10px; }

.header-inner{
  position: relative;
  height: 96px;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* the nav pill: logo + links, its own glass capsule */
.nav-capsule{
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 70px; padding: 0 .6rem 0 1.6rem;
}
.nav-capsule::before{
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: rgba(251, 246, 239, .62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 18px 40px -22px rgba(20, 51, 42, .35),
    0 2px 8px -2px rgba(20, 51, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled .nav-capsule::before{
  background: rgba(251, 246, 239, .86);
  box-shadow:
    0 22px 44px -20px rgba(20, 51, 42, .4),
    0 2px 10px -2px rgba(20, 51, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}

.brand{ display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand-mark{ width: 152px; height: 47px; object-fit: contain; }
.brand-name{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; color: var(--color-forest); }

.site-nav{ display: flex; align-items: center; gap: .25rem; }
.nav-link{
  font-weight: 600; font-size: .92rem; color: var(--color-ink);
  padding: .6rem 1.05rem; border-radius: 999px;
  transition: color .25s ease, background .25s ease;
}
.nav-link:hover,
.nav-link.is-active{
  color: var(--color-terracotta); background: rgba(20, 51, 42, .07);
}

/* separate floating CTA pill, outside the nav capsule — dark, with a
   circular arrow bubble, matching a "book appointment" style hero CTA */
.nav-cta{
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--color-forest); color: #fff !important; font-weight: 600; font-size: .92rem;
  padding: .5rem .5rem .5rem 1.4rem; border-radius: 999px;
  box-shadow: 0 14px 28px -12px rgba(20, 51, 42, .55);
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.nav-cta:hover{ background: var(--color-forest-deep, #0E241D); transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(20, 51, 42, .65); }
.nav-cta-arrow{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-terracotta);
  font-size: 1rem; line-height: 1;
}

.nav-toggle{
display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    padding: 0;
    margin-right: 1.2rem;
}
.nav-toggle span{ display: block; height: 2px; width: 100%; background: var(--color-forest); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------------
   7. SITE FOOTER
   ---------------------------------------------------------------------- */
.site-footer{
  position: relative;
  background: linear-gradient(175deg, var(--color-forest) 0%, #142b23 100%);
  color: #E9E3D6;
  padding: var(--space-xl) 0 var(--space-md);
  margin-top: var(--space-xxl);
  overflow: hidden;
}

/* subtle top accent line */
.site-footer::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-gold), var(--color-terracotta));
  opacity: .85;
}

/* faint radial glow for depth, matching CTA band */
.site-footer::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(214, 163, 63, .12), transparent 55%);
  pointer-events: none;
}

.footer-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.footer-logo{
  display: block;
  width: 71px;
  height: 65px;
  margin-left: 0px;
  margin-top: -6px;
  margin-bottom: .4rem;
  opacity: 1;
}

.footer-name{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
  margin: 1.1rem 0 .3rem;
  line-height: 1.35;
}

.footer-tagline{
  color: var(--color-gold);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.footer-col h3{
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: .6rem;
}
.footer-col h3::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--color-terracotta);
}

.footer-col a, .footer-col p{
  display: block;
  color: #D9D2C2;
  font-size: .95rem;
  margin-bottom: .65rem;
  line-height: 1.5;
}

.footer-col a{
  position: relative;
  width: fit-content;
  transition: color .25s ease, transform .25s ease;
}
.footer-col a:hover{
  color: #fff;
  transform: translateX(3px);
}

.footer-bottom{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p{
  margin: 0;
  font-size: .85rem;
  color: #B9AF9C;
}

.footer-social{ display: flex; gap: .9rem; }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #E9E3D6;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-social a:hover{
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px -6px rgba(196, 106, 79, .55);
}

/* ---- Footer: rebuilt from scratch in section 22 at the end of this
   file ---- */

/* ----------------------------------------------------------------------
   8. SCROLL REVEAL / MOTION
   ---------------------------------------------------------------------- */
.js [data-reveal]{ opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
/* Without the .js class (JS blocked/failed) or once revealed, content stays fully visible — no hidden-forever states. */

/* ----------------------------------------------------------------------
   9. PAGE — HERO
   Full-bleed background image with a dark scrim for legible light text.
   The section pulls up under the sticky glass header (negative margin,
   compensated by matching extra padding — see note on .hero) so the
   header's frosted glass floats directly over the artwork instead of
   plain page background.
   ---------------------------------------------------------------------- */
.hero{
  position: relative; overflow: hidden;
  /* pull the section's box up by exactly one header-height, then add that
     same amount back as padding-top: the visual content lands in the same
     place as before, but the background now extends behind the header. */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 6rem) 0 7rem;
  min-height: 100vh;
  display: flex; align-items: center;
  box-sizing: border-box;
}
.hero-bg{
  position: absolute; inset: 0; z-index: 0;
  background-image: url('images/Thrya/hero1.webp');
  background-size: cover; background-position: center 0%; background-repeat: no-repeat;
}
.hero-overlay{
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 20%, rgba(20, 51, 42, .35) 0%, rgba(20, 51, 42, 0) 100%),
    linear-gradient(180deg, rgba(15, 38, 30, .68) 0%, rgba(15, 38, 30, .58) 45%, rgba(12, 32, 25, .82) 100%);
}

.hero-inner{
  position: relative; z-index: 2;
  /* max-width grows by the same amount as the left padding below, so the
     text column keeps its original ~640px width and just shifts right as
     a whole, instead of shrinking and re-wrapping onto extra lines */
  max-width: calc(640px + var(--hero-indent)); margin: 0;
  /* shift the copy column right so it starts at the same horizontal
     position as the logo/nav links inside .nav-capsule above it */
  padding-left: var(--hero-indent);
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}

/* bold, upright display type — no italic, no eyebrow tag — for a cleaner
   direct match to the reference layout */
.hero-title{
  font-family: var(--font-display); font-style: normal; font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .3);
  margin-top: -170px;
}
.hero-title-accent{ color: var(--color-gold); }
.hero-sub{
  font-family: var(--font-body); font-style: normal;
  font-size: 1rem; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .82);
  max-width: 46ch; margin-bottom: 2rem;
}

.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 2.6rem; }

/* solid white pill CTA with a circular arrow bubble, matching the
   reference's primary hero button */
.btn-hero-primary{
  display: inline-flex; align-items: center; gap: .9rem;
  background: #FBF6EF; color: var(--color-forest); font-weight: 600;
  padding: .55rem .6rem .55rem 1.6rem; border-radius: 999px; border: none;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5);
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn-hero-primary:hover{ background: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .55); }
.btn-arrow{
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--color-forest); color: #fff;
  font-size: 1rem; line-height: 1;
}

/* floating translucent stat card, anchored to the bottom-left corner of
   the hero artwork, independent of the copy column */
.hero-stat-card{
  position: absolute; z-index: 2; left: var(--hero-indent); bottom: clamp(1.5rem, 6vw, 3rem);
  display: flex; flex-direction: column; gap: .6rem; max-width: 242px;
  padding: 1.1rem 1.3rem; border-radius: var(--radius-md);
  background: rgba(15, 38, 30, .55);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hero-stat-number{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1; }
.hero-stat-label{ font-family: var(--font-body); font-size: .78rem; font-weight: 400; color: rgba(255, 255, 255, .78); line-height: 1.4; }

.hero-avatar-stack{ display: flex; }
.hero-avatar-stack img{
  width: 48px; height: 50px;
  border-radius: 50%;
  margin-left: -10px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
  background: #14332a; /* fallback while loading */
}
.hero-avatar-stack img:first-child{ margin-left: 0; }
/* floating programme-tag cluster + note, upper right of the hero artwork */
.hero-tags{ display: flex; flex-wrap: wrap; gap: .55rem; }
.hero-tags li{
  font-size: .88rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .25); padding: .45rem .95rem; border-radius: 999px;
}
.hero-tags-float{
  position: absolute; z-index: 2; right: clamp(1rem, 4vw, 3.5rem); bottom: clamp(1.5rem, 6vw, 3rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; max-width: 320px;
}
.hero-tags-float .hero-tags{ justify-content: flex-end; }
.hero-tags-note{ margin-top: .3rem; text-align: right; max-width: 260px; }
.hero-tags-note strong{ display: block; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.05rem; margin-bottom: .35rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.hero-tags-note p{ font-size: .85rem; color: rgba(255, 255, 255, .8); margin: 0; line-height: 1.5; }

/* staggered entrance for the hero's own children, on top of the shared
   [data-reveal] fade/rise transition defined in section 8. nth-child (not
   nth-of-type) so the delay follows actual DOM order across mixed tags. */
.hero-inner [data-reveal]:nth-child(1){ transition-delay: .05s; }
.hero-inner [data-reveal]:nth-child(2){ transition-delay: .15s; }
.hero-inner [data-reveal]:nth-child(3){ transition-delay: .25s; }

.scroll-cue{
  position: absolute; left: 50%; bottom: 1.7rem; transform: translateX(-50%); z-index: 2;
  width: 30px; height: 46px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px;
  display: flex; justify-content: center; padding-top: 8px; transition: border-color .2s ease;
}
.scroll-cue:hover{ border-color: var(--color-gold); }
.scroll-cue span{ width: 4px; height: 8px; border-radius: 2px; background: var(--color-gold); animation: scroll-cue-move 1.8s ease-in-out infinite; }
@keyframes scroll-cue-move{ 0%{ transform: translateY(0); opacity: 1; } 70%{ transform: translateY(12px); opacity: 0; } 100%{ opacity: 0; } }

/* ----------------------------------------------------------------------
   10. PAGE — CONTEXT SNAPSHOT
   ---------------------------------------------------------------------- */
.context-band{ padding: var(--space-xxl) 0; background:#fff; }

/* stat-wall: asymmetric bento pairing — one large feature card (the
   district's single most distinctive number) beside a companion list of
   three quieter supporting facts sharing one surface. Deliberately not a
   grid of identical tiles. */
.stat-wall{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.5rem; margin-bottom: var(--space-xl); align-items: stretch; }

/* -------- feature card -------- */
.stat-feature{
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(192,138,52,.22), transparent 60%),
    linear-gradient(165deg, #1a3d32, var(--color-forest) 60%);
  color: #fff; padding: 2.6rem 2.6rem 2.4rem; display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft); border: 1px solid rgba(192,138,52,.28);
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease;
  transform-style: preserve-3d; will-change: transform;
  --glare-x: 50%; --glare-y: 50%;
}
/* corner bracket marks — a quiet nod to a field/specimen data tag,
   fitting a research foundation, without resorting to numbered steps */
.stat-feature::before, .stat-feature::after{
  content: ''; position: absolute; width: 22px; height: 22px; border-color: rgba(192,138,52,.55);
  border-style: solid; opacity: .9; transition: opacity .3s ease;
}
.stat-feature::before{ top: 20px; left: 20px; border-width: 1.5px 0 0 1.5px; }
.stat-feature::after{ bottom: 20px; right: 20px; border-width: 0 1.5px 1.5px 0; }
.stat-feature:hover{ box-shadow: 0 34px 70px -26px rgba(20, 51, 42, .55), var(--shadow-soft); }

.stat-feature-chip{
  align-self: flex-start; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--color-gold); border: 1px solid rgba(192,138,52,.5); border-radius: 999px;
  padding: .35rem .85rem; margin-bottom: auto;
}
.stat-feature-figure{ margin-top: 2.2rem; }
.stat-feature-number{
  display: block; font-family: var(--font-display); font-weight: 600; line-height: .95;
  font-size: clamp(3.6rem, 7vw, 5.4rem); font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -.01em;
}
.stat-feature-label{ font-size: 1.05rem; color: rgba(255,255,255,.72); max-width: 26ch; margin: .6rem 0 0; }

/* ====================== CONTEXT SNAPSHOT — enhanced ====================== */

.stat-wall{ display: flex; flex-direction: column; gap: 1.6rem; }
@media (min-width: 821px){ .stat-wall{ display: grid; grid-template-columns: 1fr 1fr; } }

.stat-feature{
  background: linear-gradient(160deg, var(--color-forest) 0%, #163A2E 100%);
  border-radius: var(--radius-lg); padding: 2.2rem; color: #fff;
  box-shadow: var(--shadow-lift); position: relative; overflow: hidden;
}
.stat-feature::after{
  content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,75,.25), transparent 70%); pointer-events:none;
}
.stat-feature-chip{
  display:inline-block; font-size:.72rem; padding:.35rem .7rem; border-radius:99px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85);
}
.stat-feature-figure .stat-feature-number{
  display:block; font-family: var(--font-display); font-weight:500; font-size:3.6rem; line-height:1;
  margin:1.1rem 0 .5rem; letter-spacing:-.01em;
}
.stat-feature-label{ font-size:.95rem; line-height:1.55; color:rgba(255,255,255,.8); max-width:320px; margin:0; }

.stat-feature-compare{ display:flex; flex-direction:column; gap:.65rem; margin-top:1.8rem; }
.stat-feature-compare-row{ display:flex; align-items:center; gap:.8rem; }
.stat-feature-compare-label{ font-size:.74rem; color:rgba(255,255,255,.62); width:70px; flex:none; }
.stat-feature-compare-row--muted .stat-feature-compare-label{ color:rgba(255,255,255,.42); }
.stat-feature-compare-value{
  font-size:.78rem; font-weight:600; color:#fff; width:38px; flex:none; text-align:right;
  font-variant-numeric:tabular-nums;
}
.stat-feature-compare-row--muted .stat-feature-compare-value{ color:rgba(255,255,255,.6); }
.stat-feature-bar{ flex:1; height:4px; background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden; }
.stat-feature-bar-fill{
  display:block; height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg, var(--color-gold), #fff); transition:width 1.2s cubic-bezier(.16,.84,.44,1);
}
.stat-feature-bar-fill--muted{ background:rgba(255,255,255,.4); }

/* ---- companion list ---- */
.stat-list{
  background: var(--color-paper); border:1px solid var(--color-line); border-radius: var(--radius-lg);
  display:flex; flex-direction:column; box-shadow: var(--shadow-lift); overflow:hidden;
}
.stat-row{
  display:flex; align-items:center; gap:1.2rem; padding:1.15rem 1.6rem;
  border-bottom:1px solid var(--color-line);
}
.stat-row:last-child{ border-bottom:none; }
.stat-row-icon{
  flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.4px solid var(--color-line); background:#fff;
}
.stat-row-icon svg{ width:19px; height:19px; }
.stat-row-body{ flex:1; min-width:0; }
.stat-row-number{
  display:block; font-family: var(--font-display); font-weight:500; font-size:1.4rem; color: var(--color-forest);
  line-height:1;
}
.stat-row-label{ font-size:.85rem; color: var(--color-ink-soft); margin:.3rem 0 0; line-height:1.4; }
.stat-row-label em{ font-style:normal; opacity:.75; }

/* ---- lead stat that now sits atop the map card ---- */
.map-lead-stat{
  display: block;
  padding: 0;
  margin-bottom: 1.1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.map-lead-stat:hover,
.map-lead-stat.is-active{
  background: none;
  border-color: var(--color-terracotta);
}
.map-lead-stat:hover .stat-row-label,
.map-lead-stat.is-active .stat-row-label{
  color: var(--color-terracotta);
}

.map-lead-stat .stat-row-icon,
.map-lead-stat .stat-row-number{
  display: none;
}

.map-lead-stat .stat-row-body{
  padding-bottom: .9rem;
}

.map-lead-stat .stat-row-label{
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading, #1F5040);
  margin: 0;
  transition: color .2s ease;
}

.map-lead-stat-hint{
  font-size: .72rem;
  color: var(--color-terracotta);
  margin: .3rem 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.map-lead-stat:hover .map-lead-stat-hint,
.map-lead-stat.is-active .map-lead-stat-hint{
  opacity: 1;
}

/* ---- map + gap list ---- */
.context-detail{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-xl); align-items:start;
  background: var(--color-paper); border-radius: var(--radius-lg); padding: var(--space-lg); border:1px solid var(--color-line);
}
@media (max-width:820px){ .context-detail{ grid-template-columns:1fr; } }

.context-map-wrap{ position:relative; }
.map-caption{ min-height:1.4rem; margin:0 0 .8rem; font-size:.82rem; color: var(--color-ink-soft); }
.map-caption strong{ color: var(--color-forest); font-weight:600; }
.map-caption .tag{
  display:inline-block; margin-left:.5rem; font-size:.68rem; padding:.15rem .5rem; border-radius:99px;
  background: var(--color-sage); color: var(--color-forest); vertical-align:middle;
}
.wayanad-map{ width:100%; height:auto; border-radius: var(--radius-md, 12px); display:block; }
.map-source{ margin:.5rem 0 0; font-size:.72rem; color: var(--color-ink-soft); text-align:right; font-style:italic; }
@keyframes blockPulse{ 0%,100%{ fill: var(--color-sage); } 50%{ fill: var(--color-gold); } }


.gap-list{ display:flex; flex-direction:column; gap:.7rem; list-style:none; margin:0; padding:0; }
.gap-item{ border:1px solid var(--color-line); border-radius:10px; background:#fff; overflow:hidden; transition:border-color .2s ease; }
.gap-item.is-open{ border-color: var(--color-terracotta); }
.gap-item-trigger{
  all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:1.65rem;
  padding:1.65rem 1.1rem; cursor:pointer;
}
.gap-item-icon{
  flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: var(--color-sage); border:1px solid var(--color-line); transition:border-color .2s ease;
}
.gap-item.is-open .gap-item-icon{ border-color: var(--color-terracotta); }
.gap-item-icon svg{ width:17px; height:17px; }
.gap-item-title{ flex:1; font-weight:700; font-size:.92rem; color: var(--color-forest); text-align:left; }
.gap-item-plus{ flex:none; width:20px; height:20px; position:relative; }
.gap-item-plus::before, .gap-item-plus::after{ content:''; position:absolute; background: var(--color-terracotta); transition: transform .25s ease; }
.gap-item-plus::before{ left:0; top:9px; width:20px; height:2px; }
.gap-item-plus::after{ left:9px; top:0; width:2px; height:20px; }
.gap-item.is-open .gap-item-plus::after{ transform: rotate(90deg); }
.gap-item-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.gap-item.is-open .gap-item-panel{ max-height:140px; }
.gap-item-panel-inner{ padding:0 1.1rem 1.1rem 3.5rem; }
.gap-item-panel-inner p{ margin:0; font-size:.86rem; line-height:1.55; color: var(--color-ink-soft); }

.data-note{ margin-top:1.4rem; font-size:.75rem; color: var(--color-ink-soft); opacity:.65; }



/* ----------------------------------------------------------------------
   11. PAGE — PROGRAMMES AT A GLANCE
   ---------------------------------------------------------------------- */
.programmes-glance{ padding: var(--space-xxl) 0; }
.programme-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.programme-card{
  display: block; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-lift);
  transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, border-color .3s ease;
}
.programme-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); border-color: var(--color-terracotta); }

.programme-media{ position: relative; height: 150px; overflow: hidden; }
.programme-illo{
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
.programme-card:hover .programme-illo{ transform: scale(1.06); }
.programme-media::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 51, 42, 0) 55%, rgba(20, 51, 42, .28) 100%);
}
.programme-icon{
  position: absolute; left: .9rem; bottom: .9rem; z-index: 1; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center;
}
.programme-icon svg{ width: 20px; height: 20px; }

.programme-body{ padding: 1.5rem 1.6rem 1.7rem; }
.programme-card h3{ font-size: 1.12rem; margin-bottom: .5rem; }
.programme-card p{ font-size: .93rem; color: var(--color-ink-soft); margin: 0 0 1rem; }

.programme-link{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 700; color: var(--color-terracotta);
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--color-terracotta);
  border-radius: 999px;
  background: var(--color-cream);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
}
.programme-link span{ display: inline-block; transition: transform .3s ease; }

.programme-card:hover .programme-link{
  background: var(--color-terracotta);
  color: #fff;
}
.programme-card:hover .programme-link span{ transform: translateX(4px); }

.programme-link:active{ transform: scale(.97); }
/* ----------------------------------------------------------------------
   12. PAGE — CTA BAND
   ---------------------------------------------------------------------- */
.cta-band{
  position: relative;
  background: var(--color-forest);
  color: #fff;
  padding: 0;
  margin: var(--space-xxl) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
}

/* layered depth: subtle gradient wash + radial glow accents */
.cta-band::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(214, 163, 63, .22), transparent 55%),
    radial-gradient(circle at 4% 115%, rgba(196, 106, 79, .18), transparent 50%),
    linear-gradient(155deg, var(--color-forest) 0%, #142b23 100%);
  z-index: -1;
}

/* faint hairline border for a crafted, framed feel */
.cta-band::after{
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: inherit;
  pointer-events: none;
}

.cta-band-inner{
  padding: var(--space-xl) 0;
  position: relative;
}

.cta-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.cta-copy{ max-width: 34rem; }

.cta-band .eyebrow-light{
  color: rgba(255, 255, 255, .68);
  letter-spacing: .08em;
  margin-bottom: .6rem;
}

.cta-inner h2{
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  line-height: 1.28;
  max-width: 22ch;
  margin: 0;
  letter-spacing: -.01em;
}

.cta-band .hero-actions{
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

/* premium polish on the primary CTA within a dark band */
.cta-band .btn-primary{
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .45);
  transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, filter .3s ease;
}
.cta-band .btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -8px rgba(0, 0, 0, .55);
  filter: brightness(1.04);
}

.cta-band .btn-outline-light{
  border-color: rgba(255, 255, 255, .4);
  transition: transform .3s cubic-bezier(.16,.84,.44,1), background .3s ease, border-color .3s ease;
}
.cta-band .btn-outline-light:hover{
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .7);
}

/* ---- CTA band: rebuilt from scratch in section 20 at the end of this
   file ---- */

/* ----------------------------------------------------------------------
   LATEST FROM THE FIELD
   ---------------------------------------------------------------------- */
.latest-stories{
  margin-top: -50px;
   padding:0; }

.section-head-row{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.2rem;
}

.story-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.story-card{
  display: block;
  min-height: 380px;
  border-radius: var(--radius-md);
  perspective: 1400px;
}

.story-flip{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}

.story-card.is-flipped .story-flip,
.story-card:hover .story-flip{
  transform: rotateY(180deg);
}

.story-face{
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: flex-end;
}

.story-face-back{
  transform: rotateY(180deg);
  background-position: top center;
}

.story-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 51, 42, .35) 0%, rgba(20, 51, 42, 0) 30%, rgba(20, 51, 42, .55) 65%, rgba(20, 51, 42, .88) 100%);
  opacity: .96;
}

.story-scrim-back{
  background: linear-gradient(180deg, rgba(20, 51, 42, .15) 0%, rgba(20, 51, 42, .35) 40%, rgba(20, 51, 42, .92) 100%);
}

.story-content,
.story-back-content{
  position: relative;
  z-index: 1;
  padding: 1.6rem 1.6rem 1.8rem;
  width: 100%;
}

.story-tag{
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  padding: .35rem .8rem;
  border-radius: 999px;
  margin-bottom: .8rem;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .35);
}

.story-content h3{
  font-size: 1.12rem;
  line-height: 1.35;
  margin-bottom: 0;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-excerpt{
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255,255,255,.9);
  margin: .8rem 0 1rem;
}

.story-back-content .story-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
}

.story-back-content .story-link span{
  display: inline-block;
  transition: transform .3s ease;
}

.story-card:hover .story-back-content .story-link span{
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce){
  .story-flip{ transition: none; }
}

/* ---- Latest stories: rebuilt from scratch in section 21 at the end of
   this file ---- */



/* ----------------------------------------------------------------------
   14. BACK TO TOP BUTTON
   ---------------------------------------------------------------------- */
.to-top{
  position: fixed; right: 1.6rem; bottom: 1.6rem; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-forest); color: #fff; border: none; font-size: 1.2rem; box-shadow: var(--shadow-soft);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, background .2s ease;
  z-index: 90;
}
.to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover{ background: var(--color-terracotta); }


/* ----------------------------------------------------------------------
   14b. SITE SEARCH — header button + full-screen overlay
   Markup: .search-trigger sits inside .nav-capsule (index.html header);
   .search-overlay sits at the end of <body>, OUTSIDE the sticky header
   (a fixed element nested in the header would be sized to it, see the
   note in section 6). Behaviour: script.js section 41. Content:
   search-index.js.
   ---------------------------------------------------------------------- */

/* the round button after the nav links — same tint language as .nav-link */
.search-trigger{
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; margin-right: .3rem;
  border-radius: 50%;
  background: transparent; color: var(--color-forest);
  border: 1.5px solid rgba(20, 51, 42, .18);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.search-trigger[hidden]{ display: none; }
.search-trigger:hover,
.search-trigger[aria-expanded="true"]{
  background: rgba(20, 51, 42, .07); color: var(--color-terracotta); border-color: transparent;
}
/* with three items in the capsule, keep the links hugging the right edge
   like before (brand left · links + search right). Desktop only — on mobile
   the nav is a fixed floating card and takes no part in this row. */
@media (min-width: 1101px){
  .nav-capsule .site-nav{ margin-left: auto; }
}

/* just above the hamburger breakpoint the links get a little tighter and
   never wrap, so the search button always has room */
@media (min-width: 1101px) and (max-width: 1240px){
  .nav-capsule{ gap: 1rem; }
  .nav-link{ white-space: nowrap; padding: .6rem .7rem; font-size: .88rem; }
}

body.search-open{ overflow: hidden; }

.search-overlay{
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(.75rem, 10vh, 6rem) 1rem 1rem;
  /* opacity only — no visibility toggle, so the input can take focus in the
     same tick the overlay opens (needed for the keyboard to appear on iOS) */
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.search-overlay[hidden]{ display: none; }
.search-overlay.is-open{ opacity: 1; pointer-events: auto; }

.search-scrim{
  position: absolute; inset: 0;
  background: rgba(14, 36, 29, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.search-panel{
  position: relative;
  display: flex; flex-direction: column;
  width: min(680px, 100%);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  background: var(--color-paper);
  border-radius: 28px;
  box-shadow: 0 40px 90px -30px rgba(10, 30, 24, .75), 0 2px 10px -2px rgba(10, 30, 24, .25);
  overflow: hidden;
  transform: translateY(-14px) scale(.98);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.search-overlay.is-open .search-panel{ transform: none; }

/* input row — the field is set in the display face so it reads as part of the brand */
.search-bar{
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.1rem 1.05rem 1.6rem;
  border-bottom: 1px solid var(--color-line);
  transition: border-color .2s ease;
}
.search-bar:focus-within{ border-bottom-color: var(--color-terracotta); }
.search-bar-icon{ flex-shrink: 0; color: var(--color-terracotta); }
.search-input{
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent; box-shadow: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.3;
  color: var(--color-forest);
  padding: .35rem 0;
  caret-color: var(--color-terracotta);
  -webkit-appearance: none; appearance: none;
}
.search-input::placeholder{ color: var(--color-ink-soft); opacity: .75; font-style: italic; }
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration{ -webkit-appearance: none; display: none; }

.search-close{
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 36px; padding: 0 .85rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-line); background: transparent;
  color: var(--color-ink-soft);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.search-close:hover{ color: var(--color-forest); border-color: var(--color-forest); }
.search-close-key{ font: inherit; }
.search-close-x{ display: none; font-size: 1.5rem; line-height: 1; }

.search-body{
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1.1rem 1.3rem;
}
.search-overlay [hidden]{ display: none !important; }

.search-hint{
  margin: .3rem 0 .8rem .5rem;
  font-size: .95rem; color: var(--color-ink-soft);
}
.search-chips{ display: flex; flex-wrap: wrap; gap: .55rem; padding-left: .5rem; }
.search-chip{
  display: inline-flex; align-items: center;
  padding: .5rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--color-line); background: var(--color-cream);
  color: var(--color-forest); font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.search-chip:hover{ background: var(--color-forest); border-color: var(--color-forest); color: #fff; }

.search-note{
  margin: .1rem 0 .6rem .5rem;
  font-size: .9rem; color: var(--color-ink-soft);
}

.search-results{ display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.search-result-link{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border-radius: var(--radius-md);
  color: var(--color-ink);
  transition: background .15s ease;
}
.search-result-link[aria-selected="true"]{ background: var(--color-sage); }
.search-result-main{ display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.search-result-title{
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.1rem; line-height: 1.3; color: var(--color-forest);
}
.search-result-desc{
  font-size: .93rem; line-height: 1.5; color: var(--color-ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.search-result-page{
  flex-shrink: 0; margin-top: .15rem;
  padding: .2rem .75rem; border-radius: 999px;
  background: var(--color-cream-deep); color: var(--color-forest-2);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.search-result-link[aria-selected="true"] .search-result-page{ background: var(--color-paper); }
.search-result-title mark,
.search-result-desc mark{
  background: rgba(192, 138, 52, .3); color: inherit;
  padding: 0 .06em; border-radius: 3px;
}

.search-empty{ padding: .4rem .5rem .3rem; }
.search-empty .search-chips{ padding-left: 0; }
.search-empty-title{
  margin: 0 0 .35rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--color-forest);
}
.search-empty-text{ margin: 0 0 1rem; color: var(--color-ink-soft); font-size: .95rem; }

/* visually hidden, still announced by screen readers */
.search-sr{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}


/* ==========================================================================
   15. MOBILE RESPONSIVE
   Organised section by section, matching the numbering above.
   ========================================================================== */

/* ---- 15.1 Layout & tablet breakpoint (≤ 1024px) ---- */
@media (max-width: 1024px){
  :root{ --space-xxl: 6rem; --space-xl: 3.6rem; }
}

/* ---- 15.4 Context snapshot: rebuilt from scratch in section 17 at the
   end of this file ---- */

/* ---- 15.5 Programmes at a glance: rebuilt from scratch in section 18 at
   the end of this file ---- */

/* ---- 15.6 CTA band: rebuilt from scratch in section 20 at the end of
   this file ---- */

/* ---- 15.7 Latest stories: rebuilt from scratch in section 21 at the
   end of this file ---- */

/* ---- 15.8 Footer: rebuilt from scratch in section 22 at the end of
   this file ---- */

/* ---- 15.9 Back to top: rebuilt from scratch in section 23 at the end
   of this file ---- */




/* ----------------------------------------------------------------------
   PAGE — WHO WE ARE / FOUNDERS
   ---------------------------------------------------------------------- */
.founders-section{ padding:0px; background: var(--color-cream);  }

.founders-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.founder-card{
  display: flex;
  flex-direction: column;
}

.founder-photo-wrap{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--color-line);
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.founder-card:hover .founder-photo-wrap{
  box-shadow: var(--shadow-soft);
  border-color: var(--color-terracotta);
}

.founder-index{
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  color: #fff; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 51, 42, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .35);
}

.founder-photo{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.16,.84,.44,1);
}
.founder-card:hover .founder-photo{ transform: scale(1.07); }

.founder-scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,51,42,0) 45%, rgba(20,51,42,.86) 100%);
  opacity: .9;
  transition: opacity .35s ease;
}

.founder-bio{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.2rem 1.2rem 1.3rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.founder-card:hover .founder-bio{
  transform: translateY(0);
  opacity: 1;
}
.founder-bio p{
  font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.92); margin: 0;
}

.founder-info{
  padding: 1rem .2rem 0;
}
.founder-info h3{
  font-size: 1.08rem; margin-bottom: .2rem;
}
.founder-role{
  font-size: .82rem; color: var(--color-terracotta); font-weight: 600; margin: 0;
}

.founders-cta{
  display: flex; justify-content: center; margin-top: var(--space-lg);
}
.btn-arrow-inline{ display: inline-block; transition: transform .3s ease; }
.founders-cta .btn:hover .btn-arrow-inline{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .founder-photo-wrap, .founder-photo, .founder-bio{ transition: none; }
}

/* ---- Founders grid: rebuilt from scratch in section 19 at the end of
   this file ---- */

/* ==========================================================================
   16. MOBILE RESPONSIVE — NAV & HERO (rebuilt from scratch)
   Desktop rules above are untouched. This block only targets the header/
   navigation capsule and the hero section, for small screens.
   ========================================================================== */

/* ---- 16.1 Header & nav capsule (≤ 1100px) ----
   Was ≤ 640px. Six nav links + the Donate pill + the search button don't fit
   in one row on tablets (links wrapped, and Donate overlapped "Contact Us"
   around 800px), so the hamburger now takes over at 1100px and below. */
@media (min-width: 641px) and (max-width: 1100px){
  /* the hero text lines up with the (narrower) capsule edge at this size */
  :root{ --hero-indent: 20.8px; }
}
@media (max-width: 1100px){
  :root{ --header-h: 88px; }

  .site-header{ padding: 10px 1rem; }
  .header-inner{ height: 64px; padding: 0 .3rem; }

  .nav-toggle{ display: flex; }

  .nav-capsule{
    height: 64px;
    padding: 0 .4rem 0 1rem;
  }
  .brand-mark{
    width:43px;
    height: 64px;
    margin-left: 12px;
     }
  .brand-name{ font-size: 1.05rem; }

  /* CTA pill shrinks to just its arrow bubble to save space */
  .nav-cta{ font-size: .72rem; gap: .4rem; padding: .3rem .3rem .3rem .8rem; }
  .nav-cta-arrow{ width: 26px; height: 26px; font-size: .85rem; }

  /* nav links drop out of the capsule row and open as a small floating
     card — about half the screen height — instead of a full-height panel */
  .site-nav{
    position: fixed;
    top: calc(var(--header-h) + .5rem);
    left: 50%;
    width: min(88vw, 360px);
    max-height: 50vh;
    transform: translateX(-50%) translateY(-12px) scale(.96);
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .8rem;
    border-radius: var(--radius-lg);
    /* same frosted-glass recipe as .nav-capsule::before. backdrop-filter is
       safe here because .site-nav is itself the fixed element — it has no
       fixed descendants that could get trapped by a new containing block. */
    background: rgba(251, 246, 239, .62);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
      0 18px 40px -22px rgba(20, 51, 42, .35),
      0 2px 8px -2px rgba(20, 51, 42, .12),
      inset 0 1px 0 rgba(255, 255, 255, .55);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .35s ease, box-shadow .35s ease;
  }
  /* keep in step with the capsule, which gets more opaque once scrolled */
  .site-header.is-scrolled .site-nav{
    background: rgba(251, 246, 239, .86);
    box-shadow:
      0 22px 44px -20px rgba(20, 51, 42, .4),
      0 2px 10px -2px rgba(20, 51, 42, .16),
      inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  /* browsers without backdrop-filter: fall back to a near-solid panel */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-nav,
    .site-header.is-scrolled .site-nav{ background: rgba(251, 246, 239, .97); }
  }
  .site-nav.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .nav-link{ width: 100%; font-size: 1rem; padding: .8rem .9rem; text-align: left; }

  body.nav-open{ overflow: hidden; }
}

/* ---- 16.2 Hero (≤ 640px) ---- */
@media (max-width: 640px){
  .hero{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas:
      "inner inner"
      "stat  tags";
    gap: 1.2rem .8rem;
    align-items: start;
    min-height: auto;
    /* pull the section up under the sticky header again, like desktop,
       so the background image shows through behind the transparent
       header/navbar instead of stopping below it. Padding-top pushes the
       actual text content back down so it still starts below the navbar. */
    margin-top: calc(-1 * var(--header-h));
    padding: calc(var(--header-h) + 1.5rem) 0 3rem;
  }

  /* image now covers the whole section — including behind the navbar and
     down through the stats/tags row — instead of stopping partway and
     showing the solid fallback colour underneath. */
  .hero-bg{
    background-size: cover;
    background-position: center 20%;
  }

  .hero-inner{
    grid-area: inner;
    max-width: 100%;
    padding: 0 1.2rem;
  }

  /* cancel the desktop -170px pull so the heading starts right below the
     header instead of being dragged up toward it */
  .hero-title{
    margin-top: 35px;
    font-size: 1.9rem;
    line-height: 1.15;
    margin-bottom: 50px;
  
  }
  .hero-sub{ font-size: .9rem;
     max-width: 100%;
      margin-bottom: 1.4rem;
      margin-top: -35px;
     }

  .hero-actions{
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    gap: .5rem;
    margin-bottom: 1.6rem;
  }
  .hero-actions .btn{
    justify-content: center;
    padding: .38rem .8rem;
    font-size: .72rem;
    gap: .3rem;
  }
  .btn-hero-primary{ padding: .2rem .2rem .2rem .7rem; gap: .35rem; }
  .btn-arrow{ width: 18px; height: 18px; font-size: .62rem; }

  /* both floating clusters move into normal flow, stacked under the copy,
     instead of being absolutely pinned to the artwork's corners */
  .hero-stat-card{
    grid-area: stat;
    align-self: center;
    position: static;
    width: 200px;
    max-width: 141px;
    aspect-ratio: auto;
    justify-content: flex-start;
    gap: .35rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0 0 0 1.2rem;
  }
  .hero-stat-number{ font-size: 1.3rem; }
  .hero-stat-label{ font-size: .68rem; line-height: 1.3; }
  .hero-avatar-stack img{ width: 30px; height: 31px; margin-left: -9px; }
  .hero-tags-float{
    grid-area: tags;
    align-self: center;
    position: static;
    align-items: flex-start;
    gap: .35rem;
    max-width: 100%;
    margin: 0 1.2rem 0 0;
  }
  .hero-tags-float .hero-tags{ gap: .3rem; justify-content: flex-start; }
  .hero-tags li{ font-size: .68rem; padding: .28rem .6rem; }
  .hero-tags-note strong{ font-size: .82rem; margin-bottom: .15rem; }
  .hero-tags-note p{ font-size: .68rem; line-height: 1.35; }
  .hero-tags-note{ text-align: left; max-width: 100%; }
  .hero-tags-note strong,
  .hero-tags-note p{ text-align: left; }

  .scroll-cue{ display: none; }
}

/* ==========================================================================
   17. MOBILE RESPONSIVE — CONTEXT SNAPSHOT (rebuilt from scratch)
   A tight, scaled-down version of the desktop layout: same structure
   (feature card + companion list, then map + gap accordion) just smaller —
   tighter padding, smaller type, smaller icons/cards throughout.
   ========================================================================== */
@media (max-width: 640px){

  .context-band{ padding: 2.6rem 0; }
  /* section intro: hide the descriptive lede paragraph under the h2 on
   phone, scoped to this section only */
.context-band .section-lede{ display: none; }

  /* ---- stat-wall: feature card + companion list ---- */
  .stat-wall{ gap: .9rem; margin-bottom: 1.8rem; }

  .stat-feature{ padding: 1.3rem; border-radius: var(--radius-md); }
  .stat-feature::after{ width: 110px; height: 110px; right: -25px; top: -25px; }
  .stat-feature-chip{ font-size: .62rem; padding: .28rem .6rem; }
  .stat-feature-figure .stat-feature-number{ font-size: 2.1rem; margin: .7rem 0 .3rem; }
  .stat-feature-label{ font-size: .78rem; line-height: 1.4; max-width: 100%; }

  .stat-feature-compare{ gap: .45rem; margin-top: 1.1rem; }
  .stat-feature-compare-row{ gap: .5rem; }
  .stat-feature-compare-label{ font-size: .64rem; width: 52px; }
  .stat-feature-compare-value{ font-size: .66rem; width: 28px; }
  .stat-feature-bar{ height: 3px; }

  .stat-list{ border-radius: var(--radius-md); }
  .stat-row{ padding: .75rem .9rem; gap: .7rem; }
  .stat-row-icon{ width: 28px; height: 28px; }
  .stat-row-icon svg{ width: 14px; height: 14px; }
  .stat-row-number{ font-size: 1.02rem; }
  .stat-row-label{ font-size: .68rem; margin-top: .2rem; }

  .map-lead-stat .stat-row-body{ padding-bottom: .6rem; }
  .map-lead-stat .stat-row-label{ font-size: .82rem; }
  .map-lead-stat-hint{ font-size: .6rem; }

  /* ---- context-detail: map + gap accordion ---- */
  .context-detail{ padding: 1rem; gap: 1.4rem; border-radius: var(--radius-md); }

  .map-caption{ font-size: .68rem; margin-bottom: .5rem; }
  .map-caption .tag{ font-size: .58rem; padding: .12rem .4rem; }
  .map-source{ font-size: .62rem; }

  .gap-list{ gap: .5rem; }
  .gap-item{ border-radius: 8px; }
  .gap-item-trigger{ gap: .9rem; padding: .85rem .8rem; }
  .gap-item-icon{ width: 26px; height: 26px; border-radius: 7px; }
  .gap-item-icon svg{ width: 13px; height: 13px; }
  .gap-item-title{ font-size: .76rem; }
  .gap-item-plus{ width: 15px; height: 15px; }
  .gap-item-plus::before{ top: 7px; width: 15px; }
  .gap-item-plus::after{ left: 7px; width: 2px; height: 15px; }
  .gap-item-panel-inner{ padding: 0 .8rem .85rem 2.7rem; }
  .gap-item-panel-inner p{ font-size: .72rem; line-height: 1.45; }

  .data-note{ margin-top: 1rem; font-size: .64rem; }

  .context-band .section-head h2{ 
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    margin-bottom: -30px;
   }
}

/* ==========================================================================
   18. MOBILE RESPONSIVE — PROGRAMMES AT A GLANCE / WHAT WE DO
   (rebuilt from scratch)
   Desktop rules above are untouched. Same tight, scaled-down approach as
   section 17: same structure (single-column card stack), just smaller —
   tighter padding, smaller type, smaller media/icon throughout.
   ========================================================================== */
@media (max-width: 640px){

  .programmes-glance{ padding: 2.6rem 0; }

  .programme-grid{ grid-template-columns: 1fr; gap: 1rem; }

  /* image now fills the whole card instead of just the top half — the
     card gets an explicit height, the media block goes full-bleed behind
     it (position: absolute), and the body is pushed to the bottom via
     flexbox so it sits over the image rather than below it. */
  .programme-card{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    border-radius: var(--radius-md);
  }

  .programme-media{
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 0;
  }

  /* stronger, taller gradient than the desktop version so the text panel
     at the bottom of the full-bleed photo stays easy to read */
  .programme-media::after{
    background: linear-gradient(180deg, rgba(20, 51, 42, 0) 30%, rgba(20, 51, 42, .55) 65%, rgba(20, 51, 42, .86) 100%);
  }

  /* icon moves to the top corner now that the bottom of the card is the
     text panel, not empty photo */
  .programme-icon{ width: 34px; height: 34px; left: .7rem; top: .7rem; bottom: auto; }
  .programme-icon svg{ width: 16px; height: 16px; }

  .programme-body{ position: relative; z-index: 1; padding: 1.1rem 1.2rem 1.3rem; }
  .programme-card h3{ color: #fff; font-size: 1rem; margin-bottom: .35rem; }
  .programme-card p{ color: rgba(255, 255, 255, .82); font-size: .82rem; line-height: 1.5; margin: 0 0 .85rem; }

  .programme-link{ font-size: .76rem; padding: .48rem .95rem; gap: .4rem; background: var(--color-cream); border-color: transparent; }
}

/* ==========================================================================
   19. MOBILE RESPONSIVE — WHO WE ARE / FOUNDERS (rebuilt from scratch)
   Desktop rules above are untouched. Cards stay 2-up (2×2) instead of
   dropping to a single column — tight gap/padding, smaller type, smaller
   CTA button, and a taller, more portrait-feeling photo card.
   ========================================================================== */
@media (max-width: 640px){

  .founders-grid{ grid-template-columns: repeat(2, 1fr); gap: .7rem; }

  .founder-photo-wrap{ aspect-ratio: 3 / 4; border-radius: var(--radius-sm); }

  .founder-index{
    top: .5rem; left: .5rem; width: 24px; height: 24px; font-size: .64rem;
  }

  .founder-bio{ padding: .7rem .7rem .8rem; }
  .founder-bio p{ font-size: .68rem; line-height: 1.4; }

  .founder-info{ padding: .6rem .1rem 0; }
  .founder-info h3{ font-size: .84rem; margin-bottom: .1rem; text-align: left; }
  .founder-role{ font-size: .66rem; text-align: left; }

  .founders-cta{ margin-top: var(--space-sm, 1rem); }
  .founders-cta .btn{ padding: .45rem 1rem; font-size: .74rem; gap: .35rem; }
}

/* ==========================================================================
   20. MOBILE RESPONSIVE — CTA BAND (rebuilt from scratch)
   Desktop rules above are untouched. Same row layout as desktop (copy on
   the left, buttons on the right) — just a smaller version of it, with
   the button group vertically centred against the wrapped heading.
   ========================================================================== */
@media (max-width: 640px){

  .cta-band{ margin: var(--space-lg, 2.4rem) 0; border-radius: var(--radius-sm); }
  .cta-band-inner{ padding: 1.5rem 0; }

  .cta-inner{ align-items: flex-start; gap: .8rem; flex-wrap: nowrap; }
  .cta-copy{ max-width: 58%; }

  .cta-band .eyebrow-light{ font-size: .6rem; margin-bottom: .3rem; }
  .cta-inner h2{ font-size: .98rem; line-height: 1.4; }

  .cta-band .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    margin-top: .2rem;
  }
  .cta-band .hero-actions .btn{ padding: .32rem .65rem; font-size: .64rem; gap: .25rem; }
}

/* ==========================================================================
   21. MOBILE RESPONSIVE — LATEST STORIES (rebuilt from scratch)
   Desktop rules above are untouched. Same structure as desktop — flip
   cards in a stack — just smaller: tighter padding, smaller type, single
   column instead of three across.
   ========================================================================== */
@media (max-width: 640px){

  .latest-stories{ margin-top: 0; }

  .section-head-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.4rem;
  }

  .story-grid{ grid-template-columns: 1fr; gap: .9rem; }

  .story-card{ min-height: 260px; border-radius: var(--radius-sm); }
  .story-flip{ min-height: 260px; }

  .story-content,
  .story-back-content{ padding: 1.1rem 1.1rem 1.2rem; }

  .story-tag{ font-size: .62rem; padding: .28rem .65rem; margin-bottom: .55rem; }

  .story-content h3{ font-size: .94rem; line-height: 1.4; }

  .story-excerpt{ font-size: .78rem; line-height: 1.5; margin: .6rem 0 .8rem; }

  .story-back-content .story-link{ font-size: .74rem; gap: .3rem; }
}

/* ==========================================================================
   22. MOBILE RESPONSIVE — FOOTER (rebuilt from scratch)
   Desktop rules above are untouched. Same structure as desktop — logo
   block + link columns + bottom bar — collapsed to a single column with
   tighter spacing and smaller type throughout.
   ========================================================================== */
@media (max-width: 640px){

  .site-footer{ padding: 1.8rem 0 1rem; margin-top: var(--space-lg); }

  .footer-inner{
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem .8rem;
    padding-bottom: 1.1rem;
  }
  .footer-brand{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .6rem;
  }
  /* Quick links (2nd child) and Get involved (3rd child) sit side by
     side; Reach us (4th child) drops back to full width below them */
  .footer-col:nth-child(4){ grid-column: 1 / -1; }

  .footer-logo{ grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 36px; margin: 0; }
  .footer-name{ grid-column: 2; grid-row: 1; font-size: .8rem; margin: 0; line-height: 1.25; align-self: end; }
  .footer-tagline{ grid-column: 2; grid-row: 2; font-size: .58rem; margin: 0; align-self: start; white-space: normal; }

  .footer-col h3{ font-size: .66rem; margin-bottom: .45rem; padding-bottom: .3rem; }
  .footer-col a, .footer-col p{ font-size: .78rem; margin-bottom: .3rem; }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-top: .8rem;
  }
  .footer-bottom p{ font-size: .68rem; }

  .footer-social{ gap: .5rem; }
  .footer-social a{ width: 26px; height: 26px; }
  .footer-social a svg{ width: 14px; height: 14px; }
}

/* ==========================================================================
   23. MOBILE RESPONSIVE — BACK TO TOP (rebuilt from scratch)
   Desktop rules above are untouched. Smaller button, pulled in closer to
   the screen edge to match the tighter mobile margins used everywhere
   else.
   ========================================================================== */
@media (max-width: 640px){
  .to-top{ right: 1rem; bottom: 1rem; width: 40px; height: 40px; font-size: 1rem; }
}


/* ==========================================================================
   24. MOBILE RESPONSIVE — SITE SEARCH
   Desktop rules are in section 14b. On small screens the search button
   moves next to the hamburger inside the capsule, and the overlay becomes
   a near-full-width sheet with the page label under each result.
   ========================================================================== */
/* button sits beside the hamburger wherever the hamburger is shown (≤ 1100px) */
@media (max-width: 1100px){
  .nav-capsule{ gap: .25rem; }
  .search-trigger{ margin-left: auto; margin-right: .35rem; width: 38px; height: 38px; }
  .search-trigger svg{ width: 17px; height: 17px; }
}
/* the desktop rule that pushes the links right only applies while they're visible */
@media (max-width: 640px){
  .search-overlay{ padding: .6rem .6rem 0; }
  .search-panel{
    border-radius: 22px;
    max-height: calc(100vh - 1.2rem);
    max-height: calc(100dvh - 1.2rem);
  }
  .search-bar{ padding: .8rem .8rem .8rem 1.1rem; gap: .65rem; }
  .search-close{ padding: 0; width: 36px; }
  .search-close-key{ display: none; }
  .search-close-x{ display: inline; }

  .search-input{ font-size: 1.1rem; }
  .search-body{ padding: .8rem .7rem 1.1rem; }
  .search-hint{ margin-left: .4rem; }
  .search-chips{ padding-left: .4rem; }

  .search-result-link{ flex-direction: column; gap: .4rem; padding: .75rem .8rem; }
  .search-result-title{ font-size: 1.05rem; }
  .search-result-page{ align-self: flex-start; margin-top: 0; padding: .12rem .6rem; font-size: .74rem; }
}