/* =============================================================
   Beyond Co — Shared design system
   Brand-locked palette around #2E3242 with a warm gold accent
   ============================================================= */

:root{
  /* Brand */
  --brand-primary: #2E3242;   /* your brand */
  --brand-deep:    #1F2230;   /* darker — headings, footer */
  --brand-mid:     #454B65;   /* hover, secondary emphasis */
  --brand-tint:    #E8E9EF;   /* pale slate — chips, callouts */

  /* Accent — warm muted gold (complements cool slate) */
  --accent:        #C7995A;
  --accent-deep:   #8E6A3A;
  --accent-soft:   #EFE3CB;

  /* Canvas & Surface */
  --canvas:        #E6ECEE;   /* coastal mist — soft cool background (trial) */
  --surface:       #FFFFFF;
  --surface-soft:  #FAF8F4;

  /* Text */
  --text-primary:  #2E3242;
  --text-secondary:#5A6076;
  --text-tertiary: #8B8F9C;
  --text-on-dark:  #FFFFFF;

  /* Border */
  --border:        #E6E4DE;

  /* Effects */
  --shadow-1: 0 1px 2px rgba(46, 50, 66, 0.06);
  --shadow-2: 0 4px 16px rgba(46, 50, 66, 0.10);
  --shadow-3: 0 10px 30px rgba(46, 50, 66, 0.18);

  /* Radii */
  --radius-card:    20px;
  --radius-card-lg: 28px;
  --radius-pill:    9999px;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --section-y: 96px;
  --nav-h:     72px;
}

/* ============ RESET & BASE ============ */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; overflow-x: hidden; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body{
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ BUTTONS — full pill ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease,
              transform .15s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--brand-primary);
  color: var(--text-on-dark);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn--primary:hover{
  background: var(--accent);
  color: var(--brand-deep);
  transform: translateY(-2px);
}

/* ============ FORM SUCCESS BANNER ============
   Appears in place of a form (or above it) after a successful submission.
   Triggered by query params ?subscribed=1 / ?booked=1 in form-success.js. */
.form-success{
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card-lg);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1);
  margin-top: 32px;
}
.form-success__icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-success__icon svg{
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-success__title{
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--brand-deep);
  margin: 0 0 8px;
}
.form-success__text{
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 520px;
}

.btn--on-dark{
  background: var(--surface);
  color: var(--brand-primary);
}
.btn--on-dark:hover{
  background: var(--brand-tint);
  color: var(--brand-deep);
}

.btn--outline{
  background: transparent;
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1.5px var(--brand-primary);
}
.btn--outline:hover{ background: var(--brand-tint); }

.btn--accent{
  background: var(--accent);
  color: var(--brand-deep);
}
.btn--accent:hover{ background: var(--accent-deep); color: var(--text-on-dark); }

.btn--lg{ padding: 18px 36px; font-size: 17px; }

/* Frosted-glass button — 15% white panel with a soft blur, white text and
   a 1.5px white border. Inverts to white fill / slate text on hover. */
.btn--glass{
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  color: var(--text-on-dark);
  box-shadow: inset 0 0 0 1.5px #fff;
  transition: background-color .25s ease, color .25s ease;
}
.btn--glass:hover{
  background: #fff;
  color: var(--brand-deep);
}

/* ============ SITE-WIDE NOTICE RIBBON ============
   Thin slate strip above the nav announcing the preview state. Dismissable
   for the rest of the session. JS in cart.js handles show/hide. */
.site-notice{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--brand-primary);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 48px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}
.site-notice__close{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  padding: 6px 10px;
  border-radius: 999px;
  transition: opacity .15s ease, background-color .15s ease;
}
.site-notice__close:hover{ opacity: 1; background: rgba(255,255,255,0.1); }
body.has-notice .nav{ top: var(--notice-h, 40px); }

/* ============ NAVIGATION ============ */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 50;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.nav--transparent{ background: transparent; color: var(--text-on-dark); }
.nav--solid{
  background: var(--canvas);
  color: var(--brand-deep);
  box-shadow: 0 1px 0 rgba(46,50,66,0.08), 0 4px 12px rgba(46,50,66,0.04);
}
.nav__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav__inner > .nav__brand{ justify-self: start; }
.nav__inner > .nav__menu{ justify-self: center; }
.nav__inner > .nav__actions{ justify-self: end; }
.nav__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__brand{
  transition: opacity .25s ease;
}
.nav__brand img{
  height: 44px; width: auto;
  transition: filter .25s ease;
}
/* On the home page only, the nav brand fades in as the nav becomes solid */
.nav--home.nav--transparent .nav__brand{
  opacity: 0;
  pointer-events: none;
}
/* Nav logo recolours to match the rest of the menu line.
   Transparent nav (over dark hero) → keep logo light (no filter).
   Solid nav (on cream) → invert to deep slate so it matches the menu links. */
.nav--solid .nav__brand img{
  filter: brightness(0) saturate(100%);
}

.nav__menu{
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.nav__link{
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .9;
  transform-origin: center;
  transition: opacity .2s ease, color .2s ease, transform .2s ease;
}
.nav__link:hover{
  opacity: 1;
  transform: scale(1.04);
}
/* Subtle gold accent on hover — picks up the brand colour without a heavy
   background fill. Works on both solid and transparent nav variants. */
.nav--solid .nav__link:hover,
.nav--solid .nav__group:hover > .nav__link{
  color: var(--accent-deep);
}
.nav--transparent .nav__link:hover,
.nav--transparent .nav__group:hover > .nav__link{
  color: var(--accent);
}
.nav__link--mobile-cart,
.nav__link--mobile-donate{ display: none; }
.nav__link[aria-current="page"]::before{
  content:"";
  position: absolute;
  left: 12px; right: 12px;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
/* On dropdown links the chevron sits 14px+4px to the right of the text, so
   pull the underline in on this side to keep it under the text only. */
.nav__group > .nav__link[aria-current="page"]::before{
  right: 30px;
}

/* Dropdown */
.nav__group{ position: relative; }
.nav__group > .nav__link::after{
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: transform .2s ease;
}
.nav__group:hover > .nav__link::after{ transform: rotate(180deg); }
.nav__dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: -4px;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  color: var(--brand-deep);
  border-radius: 12px;
  border: 0;
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-2);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Invisible bridge — fills the 10px gap between the parent link and the
   panel so hover doesn't drop when the cursor moves down to the items. */
.nav__dropdown::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px;
  height: 12px;
}
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__dropdown a{
  display: block;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--brand-deep);
  white-space: nowrap;
  transform-origin: left center;
  transition: color .2s ease, transform .2s ease;
}
.nav__dropdown a:hover{
  color: var(--accent-deep);
  transform: scale(1.04);
  background: transparent;
}

/* Cart + Donations actions group */
.nav__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__cart,
.nav__donate{
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav__cart{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__donate{ display: inline-block; }
/* Hover inverts the pill — slate fill with white text on the solid nav,
   white fill with slate text on the transparent nav. */
.nav--solid .nav__cart:hover,
.nav--solid .nav__donate:hover{
  background: var(--brand-primary);
  color: #fff;
}
.nav--transparent .nav__cart:hover,
.nav--transparent .nav__donate:hover{
  background: #fff;
  color: var(--brand-primary);
}
.nav__cart svg{ width: 16px; height: 16px; fill: currentColor; }

/* Mobile menu toggle */
.nav__toggle{
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nav__toggle svg{ width: 22px; height: 22px; fill: currentColor; }

/* ============ HERO ============ */
.hero{
  position: relative;
  /* Default: Chapman's Peak photo sits beneath a heavy slate scrim on every
     inner hero, so the mountain reads as ambient texture rather than scenery.
     The .hero--photo modifier (used on the homepage) overrides this with a
     lighter gradient so the photo can shine. */
  background-color: var(--brand-primary);
  background-image:
    linear-gradient(180deg, rgba(31,34,48,0.78) 0%, rgba(31,34,48,0.88) 100%),
    url('https://beyondcompany.co.za/sbcontent/gallery/IMG_3096.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  color: var(--text-on-dark);
  padding: calc(var(--nav-h) + 64px) 24px 96px;
  overflow: hidden;
}
.hero--photo{
  background-color: var(--brand-primary);
  background-image:
    /* darken the sky (top) so the white logo reads, keep the mountains visible,
       light vignette at edges to focus eye on centered content */
    radial-gradient(ellipse 90% 75% at center, rgba(31,34,48,0.18) 0%, rgba(31,34,48,0.55) 100%),
    linear-gradient(180deg, rgba(46,50,66,0.55) 0%, rgba(46,50,66,0.30) 45%, rgba(31,34,48,0.55) 100%),
    var(--hero-photo, none);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.hero--full{ min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 14vh; padding-bottom: 120px; }
.hero--full .hero__inner{ flex: 1; width: 100%; }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(255,255,255,0.04), transparent 60%);
  pointer-events:none;
}
.hero__inner{
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.hero__logo{ width: min(220px, 50vw); height: auto; }
.hero--full .hero__logo{ width: min(920px, 95vw); }
.hero__actions{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.hero__eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.hero__title{
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--text-on-dark);
}
/* Home hero: small caption sitting under the giant logo */
.hero--full .hero__title{
  font-size: clamp(12px, 1.8vw, 18px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* On the home hero, override the gold eyebrow so it reads in the same
   small-caps white style as the "site preview" line below it. The
   margin-top:auto inside the column-flex hero pushes the trio to the
   bottom of the viewport, just above the bouncing chevron. */
.hero--full .hero__eyebrow{
  font-size: clamp(12px, 1.8vw, 18px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-top: auto;
  margin-bottom: 8px;
}
.hero__lede{
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  max-width: 720px;
  color: rgba(255,255,255,0.85);
  margin: 0;
  font-weight: 400;
}
.hero__lede strong{ color: #E4CBA4; font-weight: 700; }

.hero__scroll{
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  width: 36px;
  opacity: .85;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translate(-50%, 0); }
  50%   { transform: translate(-50%, 8px); }
}

/* ============ SECTIONS ============ */
section{ padding: var(--section-y) 0; }
.eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 16px;
}
.section-title{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--brand-deep);
  margin: 0;
}
.section-lede{
  max-width: 760px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

/* ============ MISSION / PROSE ============ */
.prose{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--brand-deep);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.prose strong{ color: var(--accent-deep); font-weight: 700; }
.prose + .prose{ margin-top: 32px; }
.prose__title{
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  margin: 48px 0 16px;
}

/* ============ PILLARS / CARD GRID ============ */
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.grid-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
}

.pillar{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 460px;
  padding: 28px 28px 32px;
  background-color: var(--brand-deep);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
  border: 0;
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}
/* Photo layer (pseudo-element). The image itself carries the styling now —
   no CSS filter applied. The gradient overlay below handles text legibility.
   --pillar-photo-position lets each card bias its crop (defaults to center). */
.pillar::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pillar-photo);
  background-size: cover;
  background-position: var(--pillar-photo-position, center);
  z-index: 0;
}
/* Dark gradient overlay on top of the photo layer — keeps text legible. */
.pillar::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.78) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.pillar > *{ position: relative; z-index: 2; }
.pillar:hover{
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 18px 42px rgba(46,50,66,0.22);
}
/* Subtle photo zoom on hover — adds life to the card without moving the
   text layout (the photo lives on a pseudo-element). */
.pillar::before{
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover::before{
  transform: scale(1.04);
}
/* Top-right arrow indicator — solid white with slate icon, soft shadow.
   Always readable against any photo, goes gold on hover. */
.pillar__arrow{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background-color .25s ease, transform .25s ease;
  z-index: 2;
}
.pillar__arrow svg{
  width: 22px; height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.pillar:hover .pillar__arrow{
  background: var(--accent);
  transform: translate(2px, -2px);
}
.pillar:hover .pillar__arrow svg{ stroke: var(--brand-deep); }
/* Number sits top-left, semi-transparent against the photo */
.pillar__num{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.70);
  align-self: flex-start;
}
/* Icon + word + subtitle sit at the bottom of the card */
.pillar__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--accent);
  margin-bottom: 14px;
}
.pillar__icon svg{
  width: 100%; height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar__word{
  /* Scales fluidly between 28px and 52px based on viewport width — keeps
     long words like "Community" / "Connection" inside the card all the
     way down to the mobile single-column breakpoint. */
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: #fff;
}
/* Highlight the "Co" prefix in pillar words (Coffee / Community / Connection)
   in the brand accent gold — playful brand callback */
.brand-co{ color: var(--accent); }
.pillar__chev{
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============ PRODUCT CARD ============ */
/* Photo-first card — matches the home-page pillar cards.
   The blend photo fills the card, a dark gradient overlay keeps the
   text legible at the bottom, and a corner arrow indicates clickability. */
.product{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  padding: 28px;
  background-color: var(--brand-deep);
  background-image: var(--product-photo);
  background-size: cover;
  background-position: var(--product-photo-position, center);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
  border: 0;
  color: var(--text-on-dark);
  text-decoration: none;
}
.product:hover{
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 18px 42px rgba(46,50,66,0.22);
}
/* Dark gradient overlay sits above the background photo (below content) */
.product::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.28) 45%,
    rgba(0,0,0,0.82) 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Legacy <img class="product__image"> support — hidden because we now use
   a background-image on .product itself for cross-browser reliability. */
.product__image{ display: none; }
/* Top-right arrow — solid white circle with slate icon so it stands out
   against any photo. Goes gold on hover, matching every other card type. */
.product__arrow{
  position: absolute;
  top: 22px;
  right: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background-color .25s ease, transform .25s ease;
  z-index: 3;
}
.product__arrow svg{
  width: 22px; height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.product:hover .product__arrow{
  background: var(--accent);
  transform: translate(2px, -2px);
}
.product:hover .product__arrow svg{ stroke: var(--brand-deep); }
/* Body content (price → name → desc → tags) sits at the bottom, above the gradient. */
.product__body{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
.product__price{
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: background-color .25s ease, color .25s ease;
}
.product:hover .product__price{
  background: var(--accent);
  color: var(--brand-deep);
}
.product__name{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.1;
  margin: 4px 0 0;
}
.product__desc{
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0;
}
.product .product-tags{ margin-top: 6px; }
.product .product-tag{
  background: rgba(255,255,255,0.18);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  padding: 5px 11px;
  letter-spacing: 0.02em;
}
.product__buy{
  margin-top: 16px;
  align-self: center;
}

/* ============ PRODUCT DETAIL (Blend pages) ============ */
.product-detail{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  padding: 32px;
  box-shadow: var(--shadow-1);
}
.product-detail__media{
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--brand-deep);
  background-image: var(--product-photo);
  background-size: cover;
  background-position: center;
}
.product-detail__media img{ display: none; }
.product-detail__info{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.product-detail__name{
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--brand-deep);
  margin: 0;
}
.product-detail__price{
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}
.product-detail__desc{
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}
.product-detail__form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.product-detail__form .btn{
  align-self: stretch;
  margin-top: 12px;
}

/* ============ NEW PILL-BASED PRODUCT DETAIL ============ */
.product-page{
  background: var(--canvas);
  padding: calc(var(--nav-h) + 48px) 0 var(--section-y);
}
.product-detail__origin{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 12px;
}
.product-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
.product-tag{
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 600;
}
.product-option{ margin-top: 12px; }
.product-option__label{ margin-bottom: 8px; }
.product-option__label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.product-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.product-pill{
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-pill:hover{ border-color: var(--brand-mid); }
.product-pill.is-selected{
  background: var(--brand-primary);
  color: var(--text-on-dark);
  border-color: var(--brand-primary);
}
/* Check mark removed — selected state communicated by colour + border alone */
.product-cart-row{
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 32px;
}
.product-qty{
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 6px;
  gap: 2px;
  flex-shrink: 0;
}
.product-qty button{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: none;
  font-weight: 700;
  font-size: 18px;
  color: var(--brand-deep);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease;
}
.product-qty button:hover{ background: var(--brand-tint); }
.product-qty__num{
  display: inline-block;
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-deep);
}
.product-add-btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease;
}
.product-add-btn:hover{ background: var(--brand-deep); }
.product-add-btn svg{ width: 18px; height: 18px; fill: currentColor; }
.product-money-note{
  margin-top: 24px;
  padding: 18px 24px;
  background: var(--accent-soft);
  border-radius: var(--radius-card);
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-deep);
}
.product-money-note strong{ font-weight: 700; }

@media (max-width: 720px){
  .product-cart-row{ flex-direction: column; }
  .product-add-btn{ width: 100%; }
}
.product-detail__back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-mid);
  margin-bottom: 28px;
  transition: color .15s ease;
}
.product-detail__back:hover{ color: var(--brand-primary); }
.product-detail__back::before{ content: "←"; }

@media (max-width: 900px){
  .product-detail{ grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .product-detail__media{ aspect-ratio: 16 / 10; }
}

/* ============ PROGRAMME CARD (Community) ============ */
/* Lateral photo-fill card — photo covers the whole card, a left-to-right
   gradient darkens the side that holds the text. Matches the photo-first
   treatment of the pillar and blend cards but keeps the wide landscape
   orientation. */
.programme{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  padding: 40px 48px;
  background-color: var(--brand-deep);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  isolation: isolate;
  border: 0;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
  color: var(--text-on-dark);
  text-decoration: none;
}
.programme:hover{
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 18px 42px rgba(46,50,66,0.22);
}
/* Photo layer fills the card */
.programme__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--brand-deep);
}
.programme__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--programme-photo-position, center);
  display: block;
  /* Per-card zoom — set --programme-photo-zoom on the .programme element
     to scale the photo smaller (values < 1 zoom out, > 1 zoom in). */
  transform: scale(var(--programme-photo-zoom, 1));
  transform-origin: center;
}
/* Gradient overlay — darken the LEFT side where the text sits. */
.programme::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0.05) 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Reverse variant flips the gradient so text can sit on the right. */
.programme--reverse::before{
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0.05) 100%
  );
}
.programme--reverse .programme__body{
  align-self: flex-end;
  text-align: right;
}
.programme--reverse .programme__arrow{ left: 24px; right: auto; }
/* Body sits above the gradient, occupies the left ~55% of the card. */
.programme__body{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 58%;
  padding: 0;
}
.programme__eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.programme__name{
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.1;
  margin: 0;
}
.programme__desc{
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  margin: 0;
}
/* Top-right arrow — solid white with slate icon, matches the other cards. */
.programme__arrow{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background-color .25s ease, transform .25s ease;
  z-index: 3;
}
.programme__arrow svg{
  width: 22px; height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.programme:hover .programme__arrow{
  background: var(--accent);
  transform: translate(2px, -2px);
}
.programme:hover .programme__arrow svg{ stroke: var(--brand-deep); }

/* ============ CALLOUT CARD (clickable feature blocks) ============ */
.callout{
  display: block;
  position: relative;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card-lg);
  padding: 36px 40px;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
  color: inherit;
  text-decoration: none;
  max-width: 700px;
  margin: 0 auto;
}
.callout:hover{
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 0 0 1.5px var(--accent), 0 18px 42px rgba(46,50,66,0.22);
}
/* Polaroid-style corner accent photos. Sit half-overlapping the callout's
   edges, slightly rotated, with a white frame and soft shadow. Positioned
   with .callout__corner--tl / --tr / --bl / --br modifiers. */
.callout__corner{
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--surface);
  padding: 8px 8px 24px;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  z-index: 3;
  overflow: hidden;
}
.callout__corner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.callout__corner--tl{ top: -28px;    left: -28px;  transform: rotate(-5deg); }
.callout__corner--tr{ top: -28px;    right: -28px; transform: rotate(5deg);  }
.callout__corner--bl{ bottom: -28px; left: -28px;  transform: rotate(4deg);  }
.callout__corner--br{ bottom: -28px; right: -28px; transform: rotate(-4deg); }
@media (max-width: 720px){
  .callout__corner{ width: 100px; height: 100px; padding: 6px 6px 18px; }
}
/* Circular photos with a thin gold ring, one at each corner, overhanging
   the card edge. Profile-pic feel, pulls in the brand accent. */
.callout__photos{ display: contents; }
.callout__photo{
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 10px 24px rgba(0,0,0,0.20);
  background: var(--brand-tint);
  z-index: 2;
}
.callout__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Position each photo at a different corner. Order: TL → TR → BL → BR. */
.callout__photo:nth-child(1){ top: -32px;    left: -32px;  }
.callout__photo:nth-child(2){ top: -32px;    right: -32px; }
.callout__photo:nth-child(3){ bottom: -32px; left: -32px;  }
.callout__photo:nth-child(4){ bottom: -32px; right: -32px; }
@media (max-width: 820px){
  .callout__photo{ width: 90px; height: 90px; }
  .callout__photo:nth-child(1),
  .callout__photo:nth-child(2){ top: -20px; }
  .callout__photo:nth-child(3),
  .callout__photo:nth-child(4){ bottom: -20px; }
  .callout__photo:nth-child(1),
  .callout__photo:nth-child(3){ left: -20px; }
  .callout__photo:nth-child(2),
  .callout__photo:nth-child(4){ right: -20px; }
}
/* Two-column callout — video/photo on the left, text on the right. */
.callout--with-media{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 40px;
  text-align: left;
  max-width: 1100px;
  align-items: stretch;
}
.callout--with-media .callout__media{
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--brand-deep);
}
.callout--with-media .callout__media video,
.callout--with-media .callout__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.callout--with-media .callout__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}
.callout--with-media .eyebrow{ text-align: left; }
.callout--with-media .prose__title{ text-align: left; }
.callout--with-media .prose{ text-align: left; margin: 0; }
.callout--with-media .callout-pill{ align-self: flex-start; }
@media (max-width: 820px){
  .callout--with-media{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px;
  }
  .callout--with-media .callout__body{
    text-align: center;
    align-items: center;
  }
  .callout--with-media .eyebrow,
  .callout--with-media .prose__title,
  .callout--with-media .prose{ text-align: center; }
  .callout--with-media .callout-pill{ align-self: center; }
}
/* Pill inside callouts — mirrors the arrow's slate-to-gold pattern on the
   other card types. Slate at rest, gold when the user hovers the card. */
.callout-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 18px 36px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.callout:hover .callout-pill{
  background: var(--accent);
  color: var(--brand-deep);
  transform: translateY(-2px);
}
/* Legacy callout__arrow — no longer used but kept for backwards compatibility. */
.callout__arrow{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, transform .25s ease;
}
.callout__arrow svg{
  width: 16px; height: 16px;
  stroke: var(--brand-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.callout:hover .callout__arrow{
  background: var(--accent);
  transform: translate(2px, -2px);
}
.callout:hover .callout__arrow svg{ stroke: var(--brand-deep); }
@media (max-width: 720px){
  .callout{ padding: 48px 28px; }
  .callout__arrow{ top: 16px; right: 16px; width: 34px; height: 34px; }
}

/* ============ FORM (Connection booking, newsletter) ============ */
.form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.field{ display: flex; flex-direction: column; gap: 6px; }
.field--full{ grid-column: 1 / -1; }
.field label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.input,.select,.textarea{
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: 16px;
  color: var(--brand-deep);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea{
  border-radius: 18px;
  min-height: 140px;
  font-family: inherit;
  resize: vertical;
}
.select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brand-mid) 50%), linear-gradient(135deg, var(--brand-mid) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.input::placeholder,.textarea::placeholder{ color: var(--text-tertiary); }
.input:focus,.select:focus,.textarea:focus{
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(46,50,66,0.15);
}
.form__actions{ grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* ============ TIME WHEEL (iOS-alarm-style rolodex) ============
   Two scrollable columns with scroll-snap. The center band (a gold-bordered
   strip) shows the "selected" value. A fade-to-canvas mask at top/bottom
   blurs items as they leave the center, giving the rolodex depth. JS reads
   the closest-to-center item on scroll-settle and combines hour + minute
   into the hidden #startTime field. */
.timewheel{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 156px;
  padding: 0 20px;
  background: var(--canvas);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  box-sizing: border-box;
}
.timewheel::before{
  /* Gold-bordered "selected" band in the center */
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  top: 50%;
  height: 44px;
  margin-top: -22px;
  border-top: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  background: rgba(199,153,90,0.06);
  pointer-events: none;
  z-index: 1;
}
.timewheel::after{
  /* Fade-out gradient at top and bottom — rolodex depth effect */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--canvas) 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0) 72%,
      var(--canvas) 100%);
  pointer-events: none;
  z-index: 2;
}
.timewheel__col{
  width: 96px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  /* Lock touch input to vertical only — no horizontal pan / swipe.
     Prevents the wheel from slipping side to side on finger drag. */
  touch-action: pan-y;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  text-align: center;
  z-index: 0;
  outline: none;
}
.timewheel__col::-webkit-scrollbar{ display: none; }
.timewheel__pad{
  /* Top/bottom padding rows so the first and last items can snap to centre. */
  height: 56px;  /* (156 height − 44 band) / 2 */
}
.timewheel__item{
  height: 44px;
  line-height: 44px;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-tertiary);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, transform .18s cubic-bezier(0.22, 1, 0.36, 1);
}
.timewheel__item.is-active{
  color: var(--accent);
  transform: scale(1.15);
  font-weight: 800;
}
/* ============ HORIZONTAL SCROLL GALLERY ============
   Side-scrolling photo strip used in Our Future Facility on the connection
   page. Snaps each card into view, hides scrollbar, supports touch swipe. */
.facility__label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.scroller{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Bleed slightly so the strip can extend past the container edges, with
     interior padding so the first/last card still has breathing room. */
  margin: 0 -24px;
  padding: 8px 24px 24px;
  scroll-padding-left: 24px;
}
.scroller::-webkit-scrollbar{ display: none; }
.scroller__item{
  flex: 0 0 auto;
  width: 82%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card-md);
  scroll-snap-align: start;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.scroller__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scroller__placeholder{
  background: var(--brand-primary);
  border: 2px dashed rgba(199,153,90,0.55);
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 24px;
}
@media (min-width: 720px){
  .scroller__item{ width: 46%; max-width: 520px; }
}
@media (min-width: 1024px){
  .scroller__item{ width: 31%; max-width: 380px; }
}

.timewheel__sep{
  font-size: 26px;
  font-weight: 800;
  color: var(--brand-deep);
  position: relative;
  z-index: 3;
  line-height: 1;
}

/* ============ STORY OF IMPACT (home page) ============ */
.story{ background: var(--canvas); padding: var(--section-y) 0; }
.story__grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.story__media{
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.story__media img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.story__body{ padding: 8px 0; }
.story__eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 16px;
}
.story__title{
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--brand-deep);
  margin: 0 0 24px;
}
.story__desc{
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 36px;
  max-width: 540px;
}
.story__stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
  max-width: 540px;
}
.story__stat{ display: flex; flex-direction: column; }
.story__stat-num{
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
  line-height: 1;
}
.story__stat-label{
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 8px;
}
@media (max-width: 900px){
  .story__grid{ grid-template-columns: 1fr; gap: 32px; }
  .story__media{ aspect-ratio: 16 / 10; padding: 32px; }
}
@media (max-width: 560px){
  .story__stats{ grid-template-columns: 1fr; gap: 12px; }
  .story__stat{ flex-direction: row; align-items: baseline; gap: 12px; }
  .story__stat-label{ margin-top: 0; }
}

/* Centered variant — no photo, content stacked and centered */
.story--centered .container{ max-width: 880px; text-align: center; }
.story--centered .story__title{ margin: 0 auto 28px; max-width: 760px; }
.story--centered .story__desc{ margin: 0 auto 40px; max-width: 720px; }
.story--centered .story__stats{ margin: 0 auto 40px; max-width: 680px; }
.story--centered .story__stat{ align-items: center; text-align: center; }
@media (max-width: 560px){
  .story--centered .story__stat{ flex-direction: column; align-items: center; gap: 0; }
  .story--centered .story__stat-label{ margin-top: 8px; }
}

/* ============ CONTACT CARD ============ */
.contact{ background: var(--canvas); }
.contact__card{
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card-lg);
  padding: 36px 40px 40px;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1);
}
.contact__label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 24px 0 12px;
}
.contact__email{
  display: inline-block;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: 0.01em;
  padding: 18px 36px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--brand-primary);
  transition: background-color .2s ease, color .2s ease;
}
.contact__email:hover{
  background: var(--brand-primary);
  color: #fff;
}
.contact__methods{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  margin-top: 24px;
}
.contact__card .section-title{ margin-bottom: 0; }
.contact__method{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact__method .contact__label{ margin: 0 0 14px; }
@media (max-width: 720px){
  /* When stacked vertically on mobile, the cross-axis becomes horizontal —
     `align-items: center` is what actually centers each method (pill + label)
     in the column. Without it, the previous `align-items: flex-start` pushed
     them to the left edge of the card. */
  .contact__methods{ flex-direction: column; gap: 28px; align-items: center; }
}

/* ============ NEWSLETTER ============ */
.newsletter{ background: var(--canvas); padding-top: 0; }
.newsletter__inner{
  background: var(--brand-tint);
  border-radius: var(--radius-card-lg);
  padding: 64px 40px;
  text-align: center;
}
.newsletter__form{
  margin: 28px auto 0;
  max-width: 560px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter__input{
  flex: 1 1 260px;
  min-width: 220px;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: 16px;
  color: var(--brand-deep);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.newsletter__input::placeholder{ color: var(--text-tertiary); }
.newsletter__input:focus{
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(46,50,66,0.15);
}

/* ============ FOOTER ============ */
.footer{
  background: var(--brand-deep);
  color: var(--text-on-dark);
  padding: 72px 0 28px;
}
.footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.footer__col{ display: flex; flex-direction: column; gap: 14px; }
.footer__brand-logo{
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  margin-bottom: 8px;
  display: block;
}
.footer__tagline{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  max-width: 360px;
  margin: 0;
}
.footer__heading{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 6px;
}
.footer__links{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer__links a{
  font-size: 15px;
  font-weight: 500;
  color: var(--text-on-dark);
  transition: color .15s ease;
}
.footer__links a:hover{ color: var(--accent); }
.footer__contact-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-on-dark);
  line-height: 1.5;
  margin: 0;
  transition: color .15s ease;
}
.footer__contact-item svg{
  width: 16px; height: 16px;
  fill: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}
a.footer__contact-item:hover{ color: var(--accent-soft); }
.footer__divider{
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 48px 0 24px;
}
.footer__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__copy{
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  margin: 0;
  flex: 1;
  text-align: center;
}
.footer__socials{ display: flex; gap: 12px; }
.footer__socials a{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, transform .2s ease;
}
.footer__socials a:hover{ background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.footer__socials svg{ width: 16px; height: 16px; fill: var(--text-on-dark); }
.footer__payments{
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__payments img{
  height: 24px;
  width: auto;
  opacity: 0.65;
  filter: brightness(0) invert(1);
}
.footer__payment-brand{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

@media (max-width: 900px){
  .footer__grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__col--brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .footer__grid{ grid-template-columns: 1fr; gap: 28px; }
  .footer__col--brand{ grid-column: auto; }
  .footer__bottom{
    flex-direction: column-reverse;
    gap: 20px;
  }
  .footer__copy{ flex: none; }
}

/* ============ NOTICE BANNER ============ */
.notice{
  max-width: 760px;
  margin: 0 auto 32px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 18px 24px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.notice__icon{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  color: var(--brand-deep);
  font-size: 16px;
}
.notice__text{
  font-size: 15px;
  color: var(--brand-deep);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

/* ============ ADDED-TO-CART TOAST ============ */
/* Floating "added to cart" toast — slides up from the bottom-right corner
   of the viewport, auto-dismisses after a few seconds. Brand-styled to
   match the rest of the site (slate panel, gold check, gold link). */
.added-toast{
  position: fixed;
  top: calc(var(--nav-h, 80px) + 8px);
  right: 20px;
  z-index: 80;
  max-width: 360px;
  padding: 14px 44px 14px 16px;
  border-radius: 14px;
  background: var(--brand-primary);
  color: var(--text-on-dark);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 0 0 1.5px var(--accent), 0 14px 36px rgba(0,0,0,0.28);
  opacity: 0;
  transform: translateY(-14px) scale(.96);
  transform-origin: 90% top;
  animation: toastIn .32s cubic-bezier(.2,.7,.2,1) forwards;
}
body.has-notice .added-toast{
  top: calc(var(--nav-h, 80px) + var(--notice-h, 40px) + 8px);
}
.added-toast.is-leaving{
  animation: toastOut .22s ease forwards;
}
@keyframes toastIn{
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut{
  to{ opacity: 0; transform: translateY(-14px) scale(.96); }
}
/* Pointer notch connecting the toast to the cart icon. JS sets
   --notch-right to the actual distance from the toast's right edge
   to the cart icon's centre so the bubble visibly "talks" from it. */
.added-toast::before{
  content: "";
  position: absolute;
  top: -7px;
  right: var(--notch-right, 28px);
  width: 14px;
  height: 14px;
  background: var(--brand-primary);
  box-shadow: -1.5px -1.5px 0 0 var(--accent);
  transform: rotate(45deg);
}
/* Cart/donate "bump" — fires when an item is added. The pill scales up,
   its border briefly flashes gold, and a soft gold glow expands and fades
   around it before everything settles back to rest. */
.nav__cart.is-bumping,
.nav__donate.is-bumping,
.nav__link--mobile-cart.is-bumping,
.nav__link--mobile-donate.is-bumping{
  animation: cartBump .55s cubic-bezier(.34,1.56,.64,1);
}
/* Number "roll" — the old digit slides up & fades, then the new digit
   rolls in from below. JS swaps the text content at the midpoint. */
.cart-count,
.donation-count{
  display: inline-block;
  transform-origin: center;
}
.cart-count.is-rolling,
.donation-count.is-rolling{
  animation: countRoll .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes countRoll{
  0%{ transform: translateY(0); opacity: 1; }
  40%{ transform: translateY(-10px); opacity: 0; }
  41%{ transform: translateY(10px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}
@keyframes cartBump{
  0%{
    transform: scale(1);
    box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 0 rgba(199,153,90,0);
  }
  35%{
    transform: scale(1.18);
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px rgba(199,153,90,0.35);
  }
  70%{
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 12px rgba(199,153,90,0.0);
  }
  100%{
    transform: scale(1);
    box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 0 rgba(199,153,90,0);
  }
}
.added-toast__check{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.added-toast a{
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-left: 2px;
}
.added-toast a:hover{ opacity: .85; }
.added-toast__close{
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  opacity: .65;
  transition: opacity .15s ease, background-color .15s ease;
}
.added-toast__close:hover{ opacity: 1; background: rgba(255,255,255,0.1); }
@media (max-width: 540px){
  /* Keep the toast as a small cartoon-quote anchored to the top-right
     near the cart icon — the previous override stretched it to a full-width
     slate slab. Tighter padding + smaller check + capped width so it
     reads as a bubble, not a banner. */
  .added-toast{
    right: 12px;
    left: auto;
    max-width: 260px;
    padding: 10px 36px 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 12px;
    gap: 10px;
  }
  .added-toast__check{
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .added-toast__close{
    font-size: 18px;
    padding: 3px 7px;
  }
}

/* ============ CART PAGE ============ */
.cart{ background: var(--canvas); padding-top: 32px; }

.cart-empty{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  padding: 80px 40px;
  text-align: center;
  box-shadow: var(--shadow-1);
  max-width: 720px;
  margin: 0 auto;
}
.cart-empty__icon{
  width: 96px; height: 96px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--brand-tint);
  display: flex; align-items: center; justify-content: center;
}
.cart-empty__icon svg{ width: 40px; height: 40px; fill: var(--brand-primary); }
.cart-empty__title{
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  margin: 0 0 12px;
}
.cart-empty__desc{
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 440px;
}

/* Filled-cart layout (ready for ecommerce integration) */
.cart-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: start;
}
.cart-items{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-1);
  padding: 8px 32px;
}
.cart-item{
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.cart-item:last-child{ border-bottom: 0; }
.cart-item__image{
  width: 50px; height: 50px;
  border-radius: 12px;
  object-fit: cover;
}
.cart-item__info{ display: flex; flex-direction: column; gap: 4px; }
.cart-item__name{ font-size: 17px; font-weight: 700; color: var(--brand-deep); }
.cart-item__meta{ font-size: 14px; color: var(--text-secondary); }
.cart-item__remove{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 6px;
  align-self: flex-start;
  background: none;
  padding: 0;
  transition: color .15s ease;
}
.cart-item__remove:hover{ color: var(--brand-primary); }

.qty{
  display: inline-flex;
  align-items: center;
  background: var(--brand-tint);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}
.qty button{
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--brand-primary);
  transition: background-color .15s ease;
}
.qty button:hover{ background: var(--surface); }
.qty__num{
  display: inline-block;
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-deep);
}
.cart-item__price{
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-deep);
  justify-self: end;
  min-width: 80px;
  text-align: right;
}

.cart-summary{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-1);
  padding: 32px;
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}
.cart-summary__title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 20px;
}
.cart-summary__row{
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.cart-summary__row--total{
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-deep);
  border-bottom: 0;
  padding-top: 20px;
}
.cart-summary__check{ margin-top: 24px; width: 100%; }

@media (max-width: 900px){
  .cart-grid{ grid-template-columns: 1fr; }
  .cart-summary{ position: static; }
  .cart-item{ grid-template-columns: 40px 1fr auto; gap: 16px; }
  .cart-item__image{ width: 40px; height: 40px; }
  .cart-item__qty{ grid-column: 2 / 3; }
  .cart-item__price{ grid-column: 3 / 4; }
}

/* ============ COMING-SOON CARD ============ */
.soon{
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card-lg);
  padding: 80px 40px;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1);
  max-width: 720px;
  margin: 0 auto;
}
.soon__eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 12px;
}
.soon__title{
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--brand-deep);
  margin: 0 0 16px;
}
.soon__desc{
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 480px;
}
.soon__actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ DONATION INPUT FORM ============ */
.donation-form{
  display: flex;
  gap: 12px;
  align-items: stretch;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.donation-form__field{
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 8px 0 22px;
  flex: 1 1 220px;
  min-width: 180px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.donation-form__field:focus-within{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(46,50,66,0.15);
}
.donation-form__currency{
  font-weight: 700;
  font-size: 16px;
  color: var(--brand-deep);
  margin-right: 6px;
}
.donation-form__input{
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-deep);
  -moz-appearance: textfield;
  width: 100%;
  min-width: 80px;
}
.donation-form__input::-webkit-outer-spin-button,
.donation-form__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.donation-form__input::placeholder{ color: var(--text-tertiary); }

/* ============ FACTS GRID (programme detail pages) ============ */
.facts-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.fact{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  padding: 32px;
  box-shadow: var(--shadow-1);
}
.fact__eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 12px;
}
.fact__text{
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 720px){
  .facts-grid{ grid-template-columns: 1fr; gap: 18px; }
  .fact{ padding: 24px; }
}

/* Donation line item (on donations.html) */
.donation-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.donation-item:last-child{ border-bottom: 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  :root{ --section-y: 72px; }
  .programme{ padding: 32px 28px; min-height: 320px; }
  .programme__body{ max-width: 75%; }
}
@media (max-width: 720px){
  .programme__body{ max-width: 100%; }
  .programme--reverse .programme__body{ text-align: left; align-items: flex-start; }
  .programme--reverse .programme__arrow{ right: 24px; left: auto; }
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
  .form{ grid-template-columns: 1fr; }
  .contact__card{ padding: 40px 24px; }
  .newsletter__inner{ padding: 48px 24px; }
}
@media (max-width: 720px){
  :root{ --section-y: 56px; --nav-h: 64px; }
  /* Mobile: revert grid back to flex so toggle + cart sit on the right */
  .nav__inner{
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nav__menu{ display: none; }
  .nav__toggle{ display: inline-flex; }
  /* Mobile: hide donations pill, keep cart pill (icon + count) */
  .nav__donate{ display: none; }
  .nav__actions{ order: 1; margin-left: auto; }
  .nav__toggle{ order: 2; margin-left: 12px; }
  .hero{ padding: calc(var(--nav-h) + 48px) 20px 64px; }
  .hero--full{
    /* Mobile: push the logo down so it sits in the centre of frame like desktop,
       and shift the photo crop so Chapman's Peak stays in view at portrait
       aspect ratios (the wide-format JPG zooms past it otherwise). */
    padding-top: 26vh;
    padding-bottom: 110px;
  }
  .hero--photo{
    /* Mobile crop: zoom to 135% of viewport height (creates both
       horizontal and vertical overflow) and anchor the visible window
       to the LEFT side of the image so Chapman's Peak — which sits in
       the left portion of the source photo — stays in frame.
       If the peak ends up on the wrong side, swap 0% → 100%. */
    background-size: auto 135%;
    background-position: 67% 35%;
  }
  .container{ padding: 0 20px; }

  /* Bleed card backgrounds to the viewport edges on mobile so the slate
     and white surfaces meet the screen edge instead of leaving a gap */
  .contact__card,
  .newsletter__inner,
  .soon,
  .cart-empty{
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Mobile drawer */
  .nav__link--mobile-cart,
  .nav__link--mobile-donate{ display: block; }
  .nav.is-open .nav__menu .nav__link--mobile-cart{
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--brand-primary);
  }
  .nav.is-open .nav__menu .nav__link--mobile-donate{
    color: var(--brand-primary);
  }
  .nav.is-open{
    background: var(--surface);
    color: var(--brand-deep);
    box-shadow: var(--shadow-2);
  }
  .nav.is-open .nav__menu{
    display: flex;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: 12px;
    margin: 0;
    gap: 4px;
    box-shadow: var(--shadow-2);
    border-top: 1px solid var(--border);
  }
  .nav.is-open .nav__menu .nav__link,
  .nav.is-open .nav__menu .nav__group > .nav__link{
    padding: 14px 16px;
    width: 100%;
    color: var(--brand-deep);
    border-radius: 12px;
    opacity: 1;
  }
  .nav.is-open .nav__group{ width: 100%; }
  .nav.is-open .nav__dropdown{
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    border: none;
    background: var(--canvas);
    margin-top: 4px;
    padding: 6px;
  }
}
@media (max-width: 560px){
  .hero__inner{ gap: 24px; }
  .product__body{ padding: 24px; }
}

/* ============ MOBILE FADE-IN ON SCROLL ============
   On touch devices, cards start slightly faded + offset and ease into
   place the first time they enter the viewport. Skipped on desktop and
   for users who prefer reduced motion. One-shot — no repeat as the user
   scrolls back and forth. */
@media (hover: none){
  .pillar.fade-init,
  .programme.fade-init,
  .product.fade-init,
  .callout.fade-init{
    opacity: 0;
    transform: translateY(10px);
    /* Long, even-paced fade: ease-in-out curve makes opacity scale
       smoothly (not front-loaded) — feels like the card materialises
       gradually rather than popping in and slowing. */
    transition: opacity 1600ms cubic-bezier(0.4, 0, 0.6, 1),
                transform 1600ms cubic-bezier(0.4, 0, 0.6, 1);
  }
  .pillar.fade-in,
  .programme.fade-in,
  .product.fade-in,
  .callout.fade-in{
    opacity: 1;
    transform: translateY(0);
  }

  /* Community-only stagger — .programme cards live exclusively on
     community.html, so a per-card delay creates a cascade reveal as the
     section enters view. Each card waits 180ms longer than the one above.
     nth-child resets per parent, so each section's cascade is independent. */
  .programme.fade-init:nth-child(1){ transition-delay: 0ms; }
  .programme.fade-init:nth-child(2){ transition-delay: 180ms; }
  .programme.fade-init:nth-child(3){ transition-delay: 360ms; }
  .programme.fade-init:nth-child(4){ transition-delay: 540ms; }
}

/* ============ VENUE LOCATION MAP (connection page) ============
   Embedded Google Map below the booking form. Wrapped in an anchor
   so a tap (especially on mobile) deep-links into the Maps app for
   turn-by-turn directions. */
.venue-map{
  margin-top: 24px;
  text-align: center;
}
.venue-map__title{
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--brand-deep);
  margin: 8px 0 6px;
}
.venue-map__address{
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 auto 20px;
  max-width: 520px;
}
.venue-map__frame{
  display: block;
  position: relative;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--brand-tint);
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.venue-map__frame:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-2);
}
.venue-map__frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Prevent iframe from stealing the tap so the anchor still opens
     Google Maps when the user clicks anywhere on the frame. */
  pointer-events: none;
  /* Smooth fade-in once Google Maps finishes loading — avoids the
     sudden "pop" when lazy-loaded content arrives. The container's
     slate-tint background holds the spot while we wait. */
  opacity: 0;
  transition: opacity 0.7s ease;
}
.venue-map__frame iframe.is-loaded{ opacity: 1; }

/* ============ ANIMATED IMPACT STATS ============
   The story stats count up from zero when scrolled into view. Numbers
   live inside `data-target` attributes so the JS can swap the visible
   text as the animation progresses. Prefix / suffix (%, +) are kept as
   inline siblings so they don't get overwritten. */
.story__stat-num[data-target]{
  font-variant-numeric: tabular-nums;
}