/* ============================================================
   BREKIC Foundation — shared stylesheet
   Tokens: colour, type, spacing, motion
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* colour — sampled and derived from the BREKIC mark */
  --navy:      #1B2E42;   /* primary text / dark ground   */
  --navy-soft: #4E5F6E;   /* secondary text on light      */
  --blue:      #1694C7;   /* brand blue (from mark)       */
  --blue-deep: #0F6A8F;
  --orange:        #EE632C;  /* brand orange (from mark) — accents, chips, buttons on light */
  --orange-deep:   #A1431D;  /* text-safe orange — solid banners with white text */
  --orange-deeper: #773116;  /* gradient end / deepest orange */
  --sun:       #FFC24B;   /* warm accent — youth energy   */
  --paper:     #FDF3EE;   /* app background — warm orange-tinted white */
  --paper-alt: #FBE6DC;
  --white:     #FFFFFF;
  --line:      #F0D3C3;
  --line-soft: #F6E3D8;
  --success:   #2E8B57;

  /* type */
  --display: 'Unbounded', sans-serif;
  --body: 'Work Sans', sans-serif;

  /* shape */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;

  /* motion */
  --ease: cubic-bezier(.22,.68,.32,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--body);
  color:var(--navy);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  line-height:1.12;
  margin:0;
  color:var(--navy);
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family:var(--body);
  font-weight:700;
  font-size:0.8rem;
  color:var(--orange-deep);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:1.5em;
  height:2px;
  background:var(--orange);
  display:inline-block;
  border-radius:2px;
}

p{ margin:0 0 1em; color:var(--navy-soft); max-width:62ch; }
p:last-child{ margin-bottom:0; }

.container{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width:640px){ .container{ padding-inline:32px; } }
@media (min-width:1024px){ .container{ padding-inline:48px; } }

section{ padding-block: clamp(48px, 8vw, 108px); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--body);
  font-weight:600;
  font-size:0.95rem;
  padding:.95em 1.6em;
  border-radius:100px;
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--orange-deep); color:var(--white); }
.btn-primary:hover{ background:var(--orange-deeper); }
.btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.6); }
.btn-outline-light:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.btn-blue{ background:var(--blue); color:var(--white); }
.btn-blue:hover{ background:var(--blue-deep); }
.btn-ghost-blue{ background:rgba(22,148,199,.1); color:var(--blue-deep); }
.btn-ghost-blue:hover{ background:rgba(22,148,199,.18); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(253,243,238,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none;
  color:var(--navy);
}
.brand img{ height:42px; width:42px; object-fit:contain; }
.brand-word{
  font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.1;
}
.brand-word span{ display:block; font-family:var(--body); font-weight:500; font-size:.62rem; letter-spacing:.06em; color:var(--navy-soft); }

.nav-links{
  display:none;
  align-items:center;
  gap:2.1rem;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-weight:600;
  font-size:.94rem;
  color:var(--navy-soft);
  position:relative;
  padding-block:6px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange);
  transition:right .25s var(--ease);
  border-radius:2px;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color:var(--navy); }

.nav-cta{ display:none; }

.nav-toggle{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--white);
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

.mobile-panel{
  position:fixed; inset:76px 0 0 0;
  background:var(--white);
  transform:translateX(100%);
  transition:transform .32s var(--ease);
  z-index:99;
  overflow-y:auto;
  padding:28px 24px 40px;
}
.mobile-panel.is-open{ transform:translateX(0); }
.mobile-panel ul{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:4px; }
.mobile-panel a{
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; color:var(--navy);
  font-family:var(--display); font-weight:600; font-size:1.25rem;
  padding:16px 4px; border-bottom:1px solid var(--line-soft);
}
.mobile-panel a[aria-current="page"]{ color:var(--orange-deep); }

@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-panel{ display:none; }
}

/* ================================================================
   HERO — landing
   ================================================================ */
.hero{
  padding-block: clamp(40px, 7vw, 84px) clamp(56px, 9vw, 96px);
  overflow:hidden;
  position:relative;
  background:linear-gradient(155deg, var(--orange) 0%, var(--orange-deep) 62%, var(--orange-deeper) 100%);
  color:var(--white);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.14), transparent 40%),
    radial-gradient(circle at 6% 92%, rgba(27,46,66,.35), transparent 45%);
}
.hero .eyebrow{ color:var(--sun); }
.hero .eyebrow::before{ background:var(--sun); }
.hero h1{ color:var(--white); }
.hero .hero-lede{ color:rgba(255,255,255,.88); }
.hero-grid{
  display:grid;
  gap:44px;
  align-items:center;
}
@media (min-width:960px){
  .hero-grid{ grid-template-columns: 1.05fr .95fr; gap:40px; }
}
.hero h1{
  font-size:clamp(2.35rem, 5.6vw, 4.1rem);
  margin-block:18px 20px;
}
.hero h1 em{
  font-style:normal;
  color:var(--sun);
}
.hero-lede{ font-size:1.1rem; max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.28);
  max-width:520px;
}
.hero-stats strong{
  display:block; font-family:var(--display); font-size:clamp(1.5rem,3vw,2rem); color:var(--white);
}
.hero-stats span{ font-size:.82rem; color:rgba(255,255,255,.72); }

/* youth champion illustration */
.champion-wrap{
  position:relative;
  aspect-ratio:1/1;
  max-width:480px;
  margin-inline:auto;
}
.champion-wrap svg{ width:100%; height:100%; }
.champion-badge{
  position:absolute;
  bottom:6%; left:0;
  background:var(--white);
  border-radius:var(--radius-m);
  padding:14px 18px;
  box-shadow:0 18px 40px -20px rgba(18,40,63,.35);
  display:flex; align-items:center; gap:12px;
  max-width:230px;
}
.champion-badge .dot{
  width:10px; height:10px; border-radius:50%; background:var(--success); flex:none;
  box-shadow:0 0 0 4px rgba(46,139,87,.18);
}
.champion-badge strong{ display:block; font-size:.85rem; }
.champion-badge span{ font-size:.74rem; color:var(--navy-soft); }

/* hero — real photo variant */
.hero-photo-wrap{
  position:relative;
  width:100%;
  max-width:440px;
  margin-inline:auto;
}
.hero-photo-frame{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 60px -28px rgba(18,40,63,.45);
}
.hero-photo-frame img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%;
}
.hero-photo-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 45%, rgba(18,40,63,.55));
}
.hero-photo-ring{
  position:absolute; inset:-14px;
  border:1.5px dashed rgba(255,255,255,.4);
  border-radius:calc(var(--radius-l) + 14px);
  z-index:-1;
}
.hero-photo-flagchip{
  position:absolute; top:16px; left:16px; z-index:2;
  display:flex; align-items:center; gap:8px;
  background:rgba(18,40,63,.55);
  backdrop-filter:blur(6px);
  color:var(--white);
  padding:.4em .8em;
  border-radius:100px;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
}
.hero-photo-flagchip .flag{ width:16px; height:11px; border-radius:2px; overflow:hidden; flex:none; display:grid; grid-template-rows:repeat(3,1fr); }
.hero-photo-flagchip .flag span:nth-child(1){ background:#000; }
.hero-photo-flagchip .flag span:nth-child(2){ background:#FCDC04; }
.hero-photo-flagchip .flag span:nth-child(3){ background:#D90000; }

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.section-head{
  max-width:640px;
  margin-bottom:clamp(32px,5vw,56px);
}
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); margin-top:14px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center p{ margin-inline:auto; }

.alt-bg{ background:var(--white); border-block:1px solid var(--line-soft); }
.deep-bg{ background:var(--navy); color:var(--white); }
.deep-bg p{ color:#B9C6D2; }
.deep-bg h2,.deep-bg h3{ color:var(--white); }

/* ================================================================
   WHAT WE DO — pillars
   ================================================================ */
.pillars{
  display:grid;
  gap:20px;
}
@media (min-width:760px){
  .pillars{ grid-template-columns:1.15fr .85fr .85fr; grid-template-rows:auto auto; }
  .pillar-feature{ grid-row:span 2; }
}
.pillar{
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:30px;
  background:var(--white);
  display:flex; flex-direction:column; gap:14px;
}
.pillar-feature{
  background:linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
  color:var(--white);
  border:none;
  justify-content:space-between;
}
.pillar-feature p{ color:rgba(255,255,255,.86); }
.pillar-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-alt);
  color:var(--blue-deep);
  flex:none;
}
.pillar-feature .pillar-icon{ background:rgba(255,255,255,.16); color:var(--white); }
.pillar-icon svg{ width:26px; height:26px; }
.pillar h3{ font-size:1.18rem; }
.pillar-tag{
  display:inline-flex; align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:.35em .8em; border-radius:100px;
  background:rgba(232,98,44,.12); color:var(--orange-deep);
}
.pillar-feature .pillar-tag{ background:rgba(255,255,255,.18); color:var(--white); }

/* ================================================================
   FOUNDER
   ================================================================ */
.founder{
  display:grid;
  gap:40px;
  align-items:center;
}
@media (min-width:900px){ .founder{ grid-template-columns:.85fr 1.15fr; gap:56px; } }
.founder-photo{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.founder-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 55%, rgba(18,40,63,.55));
}
.founder-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 24px;
  color:var(--white);
}
.founder-photo figcaption strong{ font-family:var(--display); font-size:1.15rem; display:block; }
.founder-photo figcaption span{ font-size:.82rem; opacity:.85; }
.founder-photo{ position:relative; }
.founder-photo figcaption{ position:absolute; }

.founder-quote{
  font-family:var(--display);
  font-size:clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight:600;
  line-height:1.35;
  color:var(--navy);
  margin:0 0 20px;
  padding-left:22px;
  border-left:4px solid var(--orange);
}
.founder-copy p{ max-width:56ch; }
.founder-credentials{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:20px; list-style:none; padding:0;
}
.founder-credentials li{
  font-size:.82rem; font-weight:600; color:var(--blue-deep);
  background:var(--paper-alt); border-radius:100px; padding:.5em 1em;
}

/* ================================================================
   VISIT / CONTACT PANEL
   ================================================================ */
.visit-panel{
  display:grid;
  gap:0;
  border-radius:var(--radius-l);
  overflow:hidden;
  background:linear-gradient(135deg, var(--orange-deep), var(--navy) 68%);
  color:var(--white);
}
@media (min-width:860px){ .visit-panel{ grid-template-columns:1fr 1fr; } }
.visit-copy{ padding:clamp(32px,5vw,56px); }
.visit-copy p{ color:#B9C6D2; }
.visit-copy h2, .visit-copy h3{ color:var(--white); }
.visit-map{
  position:relative;
  min-height:280px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,194,75,.22), transparent 55%),
    linear-gradient(135deg, var(--orange-deeper), #14202D);
  display:flex; align-items:center; justify-content:center;
}
.visit-map svg{ width:78%; max-width:320px; }

.contact-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:16px; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; }
.contact-list .ico{
  width:38px; height:38px; border-radius:10px; flex:none;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
}
.contact-list .ico svg{ width:18px; height:18px; }
.contact-list strong{ display:block; font-size:.95rem; }
.contact-list span, .contact-list a{ font-size:.87rem; color:#B9C6D2; text-decoration:none; }
.contact-list a:hover{ color:var(--white); text-decoration:underline; }

.social-row{ display:flex; gap:10px; margin-top:26px; }
.social-row a{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--white);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.social-row a:hover{ background:var(--orange); border-color:var(--orange); }
.social-row svg{ width:18px; height:18px; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{ background:var(--navy); color:#93A4B4; padding-block:48px 28px; border-top:4px solid var(--orange); }
.footer-grid{
  display:grid; gap:32px;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-brand{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.footer-brand img{ height:38px; width:38px; object-fit:contain; }
.footer-brand strong{ font-family:var(--display); color:var(--white); font-size:1rem; }
.site-footer h4{ color:var(--white); font-family:var(--body); font-size:.85rem; letter-spacing:.04em; margin-bottom:14px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-footer a{ text-decoration:none; color:#93A4B4; font-size:.88rem; }
.site-footer a:hover{ color:var(--white); }
.footer-bottom{
  margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.78rem;
}

/* ================================================================
   PAGE HEADER (interior pages)
   ================================================================ */
.page-intro{ padding-block:clamp(44px,7vw,76px) 8px; }
.page-intro h1{ font-size:clamp(2rem,4.4vw,3.1rem); margin-top:16px; }
.page-intro-grid{ display:grid; gap:24px; align-items:end; }
@media (min-width:860px){ .page-intro-grid{ grid-template-columns:1.4fr 1fr; } }
.page-intro p{ font-size:1.05rem; }

/* ================================================================
   PROGRAMME LIST (page 2)
   ================================================================ */
.programme-row{
  display:grid;
  gap:24px;
  padding-block:32px;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.programme-row:first-of-type{ border-top:1px solid var(--line); }
@media (min-width:760px){
  .programme-row{ grid-template-columns:.4fr .95fr 1.35fr; gap:32px; align-items:center; }
}
.programme-tagcell{ display:flex; align-items:center; gap:12px; }
.programme-swatch{ width:12px; height:12px; border-radius:4px; flex:none; }
.programme-tagcell span{ font-size:.78rem; font-weight:700; color:var(--navy-soft); }
.programme-row h3{ font-size:1.35rem; }
.programme-meta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; }
.programme-meta li{ list-style:none; font-size:.82rem; color:var(--navy-soft); display:flex; align-items:center; gap:6px; }
.programme-meta svg{ width:15px; height:15px; flex:none; }

/* ================================================================
   CALENDAR
   ================================================================ */
.calendar-wrap{
  display:grid; gap:28px;
}
@media (min-width:980px){ .calendar-wrap{ grid-template-columns:1.55fr 1fr; align-items:start; } }

.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;
}
.chip{
  border:1.5px solid var(--line);
  background:var(--white);
  padding:.55em 1.1em;
  border-radius:100px;
  font-size:.84rem; font-weight:600;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--navy-soft);
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.chip .swatch{ width:9px; height:9px; border-radius:50%; background:var(--dot,#999); }
.chip[aria-pressed="true"]{ border-color:var(--dot,var(--navy)); color:var(--navy); background:color-mix(in srgb, var(--dot,#999) 12%, white); }
.chip.chip-all[aria-pressed="true"]{ background:var(--navy); color:var(--white); border-color:var(--navy); }

.cal-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:clamp(18px,3vw,30px);
}
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.cal-head h3{ font-size:1.2rem; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.cal-nav button:hover{ background:var(--paper-alt); }
.cal-nav svg{ width:16px; height:16px; }

.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.cal-dow{ text-align:center; font-size:.7rem; font-weight:700; color:var(--navy-soft); padding-block:6px; }
.cal-cell{
  position:relative;
  aspect-ratio:1/1;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:.85rem; font-weight:600;
  color:var(--navy-soft);
  gap:3px;
  padding:2px;
}
.cal-cell.is-empty{ background:transparent; cursor:default; }
.cal-cell:not(.is-empty):hover{ border-color:var(--line); background:var(--white); }
.cal-cell.is-today{ border-color:var(--orange); color:var(--orange-deep); }
.cal-cell.is-selected{ background:var(--navy); color:var(--white); }
.cal-dots{ display:flex; gap:3px; }
.cal-dots span{ width:5px; height:5px; border-radius:50%; }
.cal-cell.is-empty{ pointer-events:none; }

.agenda-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.agenda-head h3{ font-size:1.05rem; }
.agenda-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.agenda-empty{ font-size:.9rem; color:var(--navy-soft); padding:18px 0; }
.agenda-item{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:16px;
  display:flex; gap:12px;
}
.agenda-item .swatch{ width:6px; border-radius:6px; flex:none; }
.agenda-item strong{ display:block; font-size:.95rem; }
.agenda-item time{ font-size:.78rem; color:var(--navy-soft); display:block; margin:2px 0 6px; }
.agenda-item p{ font-size:.85rem; margin:0; }
.legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.legend li{ list-style:none; display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--navy-soft); }
.legend .swatch{ width:9px; height:9px; border-radius:50%; }
.cal-note{
  margin-top:18px; font-size:.78rem; color:var(--navy-soft);
  background:var(--paper-alt); border-radius:var(--radius-s); padding:12px 14px;
}

/* ================================================================
   FORMS (page 3)
   ================================================================ */
.form-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:clamp(24px,4vw,40px);
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:8px; }
.field .hint{ font-weight:400; color:var(--navy-soft); font-size:.78rem; margin-left:6px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:var(--radius-s);
  padding:.85em 1em;
  font-family:var(--body);
  font-size:.95rem;
  background:var(--white);
  color:var(--navy);
  transition:border-color .18s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); outline:none; }
.field-row{ display:grid; gap:18px; }
@media (min-width:640px){ .field-row.two{ grid-template-columns:1fr 1fr; } }

.check-grid{ display:grid; gap:10px; }
@media (min-width:640px){ .check-grid{ grid-template-columns:1fr 1fr; } }
.check-item{
  display:flex; align-items:flex-start; gap:10px;
  border:1.5px solid var(--line); border-radius:var(--radius-s);
  padding:.85em 1em; cursor:pointer; font-size:.9rem;
}
.check-item:has(input:checked){ border-color:var(--blue); background:rgba(30,127,166,.06); }
.check-item input{ margin-top:3px; }

.segmented{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; background:var(--paper-alt); padding:6px; border-radius:100px; margin-bottom:26px;
}
.segmented button{
  border:none; background:transparent; padding:.75em .6em; border-radius:100px;
  font-weight:600; font-size:.85rem; color:var(--navy-soft); cursor:pointer;
}
.segmented button[aria-selected="true"]{ background:var(--white); color:var(--navy); box-shadow:0 4px 14px -6px rgba(18,40,63,.3); }

.role-panel{ display:none; }
.role-panel.is-active{ display:block; }

.form-success{
  display:none;
  align-items:flex-start; gap:14px;
  background:rgba(46,139,87,.1);
  border:1px solid rgba(46,139,87,.3);
  border-radius:var(--radius-m);
  padding:18px;
  margin-top:18px;
  font-size:.9rem;
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:22px; height:22px; flex:none; color:var(--success); }

/* --- donation --- */
.donate-grid{ display:grid; gap:36px; }
@media (min-width:960px){ .donate-grid{ grid-template-columns:1fr 1fr; } }
.donate-toggle{
  display:inline-flex; background:var(--paper-alt); padding:5px; border-radius:100px; margin-bottom:22px;
}
.donate-toggle button{
  border:none; background:transparent; padding:.65em 1.4em; border-radius:100px;
  font-weight:600; font-size:.85rem; color:var(--navy-soft); cursor:pointer;
}
.donate-toggle button[aria-selected="true"]{ background:var(--orange-deep); color:var(--white); }
.amount-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.amount-btn{
  border:1.5px solid var(--line); background:var(--white); border-radius:var(--radius-m);
  padding:1em .6em; text-align:center; cursor:pointer;
}
.amount-btn strong{ display:block; font-family:var(--display); font-size:1.05rem; }
.amount-btn span{ font-size:.7rem; color:var(--navy-soft); }
.amount-btn[aria-pressed="true"]{ border-color:var(--orange); background:rgba(232,98,44,.08); }
.custom-amount{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:var(--radius-m); padding:.4em .3em .4em 1em; }
.custom-amount span{ font-weight:700; color:var(--navy-soft); }
.custom-amount input{ border:none; flex:1; font-size:1rem; font-family:var(--body); padding:.6em 0; background:transparent; }
.custom-amount input:focus{ outline:none; }

.impact-note{
  background:var(--navy); color:var(--white); border-radius:var(--radius-l);
  padding:clamp(24px,4vw,34px); margin-top:26px;
}
.impact-note p{ color:#B9C6D2; }
.impact-note ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.impact-note li{ display:flex; gap:10px; font-size:.88rem; }
.impact-note li strong{ color:var(--sun); font-family:var(--display); flex:none; }

.pay-methods{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 24px; }
.pay-chip{
  border:1px solid var(--line); border-radius:100px; padding:.5em 1em; font-size:.78rem;
  display:flex; align-items:center; gap:8px; color:var(--navy-soft); background:var(--white);
}
.pay-chip .dot{ width:8px; height:8px; border-radius:50%; }

.prototype-banner{
  background:#FFF4E5; border:1px solid #F4D9AC; color:#7A4A0E;
  border-radius:var(--radius-m); padding:14px 18px; font-size:.85rem;
  display:flex; gap:12px; align-items:flex-start; margin-bottom:28px;
}
.prototype-banner svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* utility */
.stack-gap-l > * + *{ margin-top:20px; }
.mt-0{ margin-top:0 !important; }

/* ================================================================
   GALLERY (page 4)
   ================================================================ */
.gallery-grid{
  display:grid;
  gap:22px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
.gallery-card{
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.gallery-card.span-2{ grid-column:span 1; }
@media (min-width:640px){ .gallery-card.span-2{ grid-column:span 2; } }
.gallery-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-alt); }
.gallery-card.tall .gallery-photo{ aspect-ratio:3/4; }
.gallery-photo img{ width:100%; height:100%; object-fit:cover; }
.gallery-caption{ padding:18px 20px; }
.gallery-caption strong{ display:block; font-size:.95rem; margin-bottom:4px; }
.gallery-caption span{ font-size:.8rem; color:var(--navy-soft); }
.gallery-credit{
  display:block; margin-top:8px; font-size:.68rem; color:#9AA9B4;
}

/* Executive Director extended profile */
.ed-profile{
  display:grid; gap:40px;
}
@media (min-width:900px){ .ed-profile{ grid-template-columns:.8fr 1.2fr; gap:56px; } }
.ed-highlights{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; }
.ed-highlights li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.9rem; color:var(--navy-soft);
}
.ed-highlights .ico{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:var(--paper-alt); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center;
}
.ed-highlights .ico svg{ width:15px; height:15px; }

/* footer social row */
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#93A4B4;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.footer-social a:hover{ background:var(--orange); border-color:var(--orange); color:var(--white); }
.footer-social svg{ width:16px; height:16px; }

/* Supplied photography: consistent framing and accessible full-size viewing. */
.supplied-gallery {grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.supplied-gallery .gallery-card {grid-row:auto;grid-column:auto;}
.gallery-open {display:block;width:100%;padding:0;border:0;cursor:zoom-in;background:#eee;aspect-ratio:4/3;overflow:hidden;}
.gallery-open img {width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.gallery-open:hover img {transform:scale(1.035);}
.gallery-open:focus-visible {outline:4px solid var(--blue-deep);outline-offset:4px;}
#photo-viewer {border:0;border-radius:12px;background:#101820;color:white;padding:52px 18px 18px;max-width:94vw;width:1100px;max-height:94vh;}
#photo-viewer::backdrop {background:rgba(0,0,0,.85);}
#photo-viewer img {width:100%;height:72vh;object-fit:contain;}
.photo-close {position:absolute;right:18px;top:12px;}
#photo-viewer button {background:white;color:#102f40;border:0;border-radius:6px;padding:9px 16px;font:600 14px sans-serif;cursor:pointer;}
.photo-controls {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;}
@media(max-width:760px){.supplied-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}#photo-viewer img{height:65vh;}}
@media(max-width:430px){.supplied-gallery{grid-template-columns:1fr;}}

.hero-photo-frame .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;object-fit:cover;object-position:50% 20%;background:#172b35;}
.hero-photo-frame .hero-slide.is-active{opacity:1;}
.hero-photo-frame::after{pointer-events:none;background:none;}
.hero-slide-controls{display:flex;justify-content:center;gap:10px;margin-top:16px;}
.hero-slide-controls button{border:1px solid rgba(255,255,255,.55);border-radius:30px;background:transparent;color:white;padding:8px 15px;font:600 13px sans-serif;cursor:pointer;}
.hero-slide-controls button:focus-visible{outline:3px solid #ffc24b;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.hero-photo-frame .hero-slide{transition:none;}}

/* Keep the original hero size when slides are positioned in layers. */
.hero-photo-frame[data-hero-slideshow]{width:100%;aspect-ratio:4/5;}
.hero-slide-controls{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;margin:0;}
.hero-slide-controls button{background:rgba(18,40,63,.8);}