/* =========================================================
   OBOIVU — design tokens
   An institutional record: deep field-blue, an official gold
   seal, and paper the colour of a certified document. Built
   for credibility — the visual language of an organisation
   that keeps its books straight and its promises kept.
   ========================================================= */
:root{
  --navy:       #0B2E4E;
  --navy-2:     #123A63;
  --navy-deep:  #071D33;
  --gold:       #A98247;
  --gold-light: #C9A96A;
  --sage:       #3F5F45;
  --ink:        #1A1D21;
  --ink-soft:   #4B5158;
  --paper:      #FAF8F4;
  --paper-2:    #F1EDE4;
  --line:       rgba(11,46,78,.16);
  --line-gold:  rgba(169,130,71,.45);
  --white:      #FFFFFF;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius: 4px;
  --radius-card: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 14px 30px -18px rgba(11,29,51,.35);
  --shadow-lift: 0 24px 48px -20px rgba(11,29,51,.4);
  --shadow-soft: 0 2px 10px -4px rgba(11,29,51,.18);
  --ease: cubic-bezier(.2,.65,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 .4em;
  color:var(--navy-deep);
}
p{ margin:0 0 1em; color:var(--ink-soft); }
address{ font-style:normal; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--gold); color:var(--white);
  padding:.75em 1em; z-index:1000; font-weight:700;
}
.skip-link:focus{ left:1em; top:1em; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

.section-inner{
  max-width:1200px;
  margin:0 auto;
  padding:6rem 1.75rem;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1em;
  display:flex; align-items:center; gap:.65em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow-light{ color:var(--gold-light); }
.eyebrow-light::before{ background:var(--gold-light); }

/* reveal-on-scroll (progressive enhancement, JS toggles .is-visible) */
.reveal{ opacity:1; transform:none; }
.js-reveal .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js-reveal .reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   Seal — the signature mark
   ========================================================= */
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--line-gold);
  position:relative;
  flex-shrink:0;
}
.seal::before{
  content:"";
  position:absolute; inset:4px;
  border:1px solid var(--line-gold);
  border-radius:50%;
}
.seal-mark{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--gold);
  letter-spacing:.02em;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.95em 1.7em;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn-stamp{
  background:var(--gold);
  color:var(--white);
  box-shadow:var(--shadow-card);
}
.btn-stamp:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-large{ font-size:.86rem; padding:1.1em 2.1em; }
.btn-outline{
  margin-top:2.75rem;
  background:transparent;
  color:var(--navy-deep);
  border-color:var(--line);
}
.btn-outline:hover{ background:var(--navy-deep); color:var(--white); border-color:var(--navy-deep); }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,244,.92);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1200px; margin:0 auto;
  padding:1rem 1.75rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.85rem;
  text-decoration:none; color:var(--navy-deep);
}
.brand-mark{
  height:40px; width:40px; object-fit:contain;
  border-radius:50%;
  border:1px solid var(--line-gold);
  padding:3px;
  background:var(--white);
}
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--font-display); font-weight:600;
  font-size:1.28rem; letter-spacing:.01em;
}
.brand-sub{
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:.35em;
}

.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.6em .7em;
  cursor:pointer;
}
.nav-toggle span{
  width:20px; height:1.5px; background:var(--navy-deep); display:block;
}

.primary-nav{ display:flex; align-items:center; gap:2.2rem; }
.primary-nav ul{ display:flex; gap:1.9rem; }
.primary-nav a:not(.btn){
  font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.primary-nav a:not(.btn):hover{ border-color:var(--gold); color:var(--navy-deep); }

/* =========================================================
   Hero slider
   ========================================================= */
.hero{
  position:relative;
  height:min(92vh, 800px);
  min-height:560px;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero-slides{ position:relative; height:100%; }
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease);
}
.hero-slide.is-active{ opacity:1; visibility:visible; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.03);
}
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(7,29,51,.97) 0%, rgba(7,29,51,.72) 30%, rgba(7,29,51,.22) 62%, rgba(7,29,51,.1) 100%),
    linear-gradient(100deg, rgba(7,29,51,.6) 0%, rgba(7,29,51,0) 48%);
}
.hero-badge{
  position:absolute; z-index:2;
  top:2.5rem; left:1.75rem;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
  background:rgba(250,248,244,.1);
  border:1px solid rgba(250,248,244,.3);
  backdrop-filter:blur(8px);
  padding:.55em 1em;
  border-radius:999px;
}
.hero-badge::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 0 3px rgba(201,169,106,.25);
}
.hero-scroll-cue{
  position:absolute; z-index:2;
  left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  color:rgba(250,248,244,.6);
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
  animation:cueBob 2.6s ease-in-out infinite;
}
.hero-scroll-cue svg{ width:14px; height:14px; }
@keyframes cueBob{
  0%,100%{ transform:translate(-50%,0); opacity:.55; }
  50%{ transform:translate(-50%,6px); opacity:1; }
}
.hero-seal{
  position:absolute; z-index:2;
  top:2.5rem; right:2.5rem;
  width:112px; height:112px;
  color:rgba(250,248,244,.5);
  display:none;
}
.hero-copy{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:2.75rem 1.75rem 5.5rem;
  max-width:1200px; margin:0 auto;
  color:var(--paper);
}
.hero-copy .eyebrow{ color:var(--gold-light); }
.hero-copy .eyebrow::before{ background:var(--gold-light); }
.hero-copy h1{
  font-weight:600;
  font-size:clamp(2.3rem, 5.2vw, 4.3rem);
  color:var(--white);
  max-width:16ch;
  letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(7,29,51,.35);
}
.hero-copy p{
  max-width:54ch;
  font-size:1.08rem;
  color:rgba(250,248,244,.86);
  margin-bottom:0;
}

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(250,248,244,.4);
  background:rgba(7,29,51,.3);
  backdrop-filter:blur(6px);
  color:var(--paper);
  font-size:1.1rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.hero-nav:hover{ background:var(--gold); border-color:var(--gold); }
.hero-prev{ left:1.5rem; }
.hero-next{ right:1.5rem; }

.hero-dots{
  position:absolute; z-index:3;
  right:1.75rem; bottom:1.9rem;
  display:flex; gap:.55rem;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(250,248,244,.6);
  background:transparent;
  padding:0; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.hero-dots button.is-active{ background:var(--gold-light); border-color:var(--gold-light); }

/* =========================================================
   Ledger / registration record strip
   ========================================================= */
.ledger{
  background:var(--navy-deep);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.ledger::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(250,248,244,.06) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 85%);
  pointer-events:none;
}
.ledger-inner{
  max-width:1200px; margin:0 auto;
  padding:3.4rem 1.75rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  position:relative; z-index:1;
}
.ledger-item{
  display:flex; flex-direction:column; gap:.9rem;
  padding:0 1.8rem;
  border-left:1px solid rgba(250,248,244,.14);
}
.ledger-item:first-child{ border-left:none; padding-left:0; }
.ledger-icon{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line-gold);
  background:rgba(201,169,106,.08);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-light);
}
.ledger-icon svg{ width:17px; height:17px; }
.ledger-date{
  font-family:var(--font-display); font-weight:600;
  color:var(--gold-light); font-size:1.5rem; line-height:1;
}
.ledger-label{ font-size:.83rem; color:rgba(250,248,244,.72); line-height:1.5; }

/* =========================================================
   About
   ========================================================= */
.about{ background:var(--paper); }
.about-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:4.5rem;
  align-items:start;
}
.about-text h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); max-width:15ch; }
.about-figure{ position:relative; }
.about-figure img{
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
}
.about-figure::before{
  content:"";
  position:absolute; top:-14px; left:-14px;
  width:64px; height:64px;
  border-top:1px solid var(--gold);
  border-left:1px solid var(--gold);
  z-index:2;
}
.about-figure-badge{
  position:absolute; bottom:-1.25rem; right:-1.25rem;
  z-index:2;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  padding:1.1rem 1.4rem;
  display:flex; align-items:center; gap:.85rem;
}
.about-figure-badge svg{ width:26px; height:26px; color:var(--gold); flex-shrink:0; }
.about-figure-badge strong{
  display:block;
  font-family:var(--font-display); font-weight:600;
  font-size:1.15rem; color:var(--navy-deep); line-height:1;
}
.about-figure-badge span{
  font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
}
.figure-tag{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:1em;
}

/* =========================================================
   Approach — 3-step method band
   ========================================================= */
.approach{ background:var(--paper); border-top:1px solid var(--line); }
.approach-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:end;
  margin-bottom:3rem;
}
.approach-head h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); max-width:16ch; margin-bottom:0; }
.approach-head p{ font-size:1rem; margin-bottom:0; }
.approach-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
.approach-grid::before{
  content:"";
  position:absolute; left:calc(16.5% + 2px); right:calc(16.5% + 2px); top:26px;
  height:1px;
  background:repeating-linear-gradient(90deg, var(--line-gold) 0 8px, transparent 8px 16px);
}
.approach-step{
  padding:0 1.75rem;
  text-align:left;
  position:relative;
}
.approach-step:first-child{ padding-left:0; }
.approach-step:last-child{ padding-right:0; }
.approach-number{
  width:54px; height:54px;
  border-radius:50%;
  background:var(--navy-deep);
  color:var(--gold-light);
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem;
  position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--paper);
}
.approach-step h3{ font-size:1.15rem; margin-bottom:.5em; }
.approach-step p{ font-size:.9rem; margin-bottom:0; }

/* =========================================================
   What we do
   ========================================================= */
.work{ background:var(--paper-2); }
.work h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); max-width:17ch; margin-bottom:1em; }
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:2.5rem;
}
.work-card{
  background:var(--white);
  padding:2.4rem 2rem 2.2rem;
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.work-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
  border-color:var(--line-gold);
  z-index:1;
}
.work-tag{
  font-family:var(--font-mono); font-weight:600;
  color:var(--gold);
  font-size:.82rem;
  letter-spacing:.06em;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4em; height:2.4em;
  border-radius:50%;
  background:var(--paper-2);
  border:1px solid var(--line-gold);
  margin-bottom:1.4em;
}
.work-card h3{
  font-size:1.28rem;
  margin-bottom:.45em;
}
.work-card p{ font-size:.92rem; margin-bottom:0; }

/* =========================================================
   News — field reports
   ========================================================= */
.news{ background:var(--paper); }
.news h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); }
.noticeboard{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:2.5rem;
}
.notice-card{
  background:var(--white);
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.notice-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
  border-color:var(--line-gold);
}
.notice-card .notice-media{ overflow:hidden; }
.notice-card img{
  aspect-ratio:4/3; object-fit:cover; filter:saturate(.95);
  transition:transform .5s var(--ease);
}
.notice-card:hover img{ transform:scale(1.06); }
.notice-body{ padding:1.5rem 1.4rem 1.8rem; }
.notice-body h3{
  font-size:1.02rem;
  margin-bottom:.55em;
  line-height:1.25;
}
.notice-body p{ font-size:.86rem; margin-bottom:0; }

/* =========================================================
   Downloads
   ========================================================= */
.downloads{ background:var(--paper-2); }
.downloads h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); }
.downloads-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
  margin-top:2.5rem;
}
.download-col{
  background:var(--white);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  border-radius:var(--radius-card);
  padding:2.2rem 1.9rem 2.4rem;
  box-shadow:var(--shadow-soft);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.download-col:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.download-icon{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--paper-2);
  border:1px solid var(--line-gold);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem;
}
.download-icon svg{ width:19px; height:19px; }
.download-col h3{
  font-size:1rem;
  margin-bottom:.9em;
}
.download-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.download-col a{
  text-decoration:none;
  font-size:.9rem;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
  display:inline-block;
  transition:border-color .2s ease, color .2s ease;
}
.download-col a:hover{ color:var(--navy); border-color:var(--navy); }

/* =========================================================
   Partners
   ========================================================= */
.partners{ background:var(--paper-2); }
.partner-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
  margin-top:1.6rem;
}
.partner-strip a{
  display:flex; align-items:center; justify-content:center;
  height:110px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:1.5rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.partner-strip a:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
  border-color:var(--line-gold);
}
.partner-strip img{
  max-height:42px; width:auto; max-width:100%;
  object-fit:contain;
  filter:grayscale(1) contrast(1.05);
  opacity:.68;
  transition:filter .25s ease, opacity .25s ease;
}
.partner-strip a:hover img{ filter:grayscale(0); opacity:1; }

/* =========================================================
   Donate band
   ========================================================= */
.donate-band{
  background:linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 100%);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.donate-band::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(250,248,244,.05) 1px, transparent 1px);
  background-size:20px 20px;
  pointer-events:none;
}
.donate-band::after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  right:-180px; top:50%; transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(201,169,106,.18);
  pointer-events:none;
}
.donate-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  position:relative; z-index:1;
}
.donate-band h2{ color:var(--white); font-size:clamp(1.8rem,3.2vw,2.5rem); max-width:17ch; }

/* =========================================================
   Testimonial / pull-quote
   ========================================================= */
.testimonial{
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.testimonial-inner{
  max-width:820px; margin:0 auto;
  padding:6rem 1.75rem;
  text-align:center;
}
.testimonial-mark{
  font-family:var(--font-display);
  font-size:4.5rem;
  line-height:1;
  color:var(--gold);
  opacity:.55;
  margin-bottom:.2rem;
  display:block;
}
.testimonial-quote{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  line-height:1.42;
  color:var(--navy-deep);
  max-width:32ch;
  margin:0 auto 1.75rem;
}
.testimonial-attribution{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
}
.testimonial-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  color:rgba(250,248,244,.92);
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
}
.testimonial-name{
  font-family:var(--font-mono); font-size:.76rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); text-align:left; line-height:1.5;
}
.testimonial-name strong{ display:block; color:var(--navy-deep); font-family:var(--font-body); font-size:.86rem; letter-spacing:0; text-transform:none; font-weight:600; }

/* =========================================================
   Contact
   ========================================================= */
.contact{ background:var(--paper); }
.contact-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr;
  gap:3.5rem;
  align-items:start;
}
.contact h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); }
address{ font-size:.95rem; color:var(--ink-soft); line-height:1.8; }

/* ---- Contact form ---- */
.contact-form-wrap{ padding-right:1rem; }
.contact-form{ margin-top:2rem; }
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
}
.form-field{
  display:flex; flex-direction:column; gap:.5rem;
  margin-bottom:1.4rem;
}
.form-field label{
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:var(--font-body); font-size:.95rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:.85em 1em;
  transition:border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.form-field textarea{ resize:vertical; min-height:140px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(169,130,71,.15);
}
.form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234B5158' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1em center;
  background-size:16px;
  padding-right:2.6em;
}
.form-field select:invalid{ color:var(--ink-soft); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form .btn{ margin-top:.4rem; }
.form-note{
  font-size:.8rem; color:var(--ink-soft);
  margin:1rem 0 0;
}
.form-success{
  margin-top:2rem;
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.4rem 1.6rem;
  background:rgba(63,95,69,.08);
  border:1px solid rgba(63,95,69,.3);
  border-radius:var(--radius-card);
}
.form-success svg{ width:22px; height:22px; color:var(--sage); flex-shrink:0; margin-top:.1em; }
.form-success p{ margin:0; font-size:.92rem; color:var(--ink); }
.form-success strong{ color:var(--sage); }
.form-error{
  margin-top:1.2rem;
  padding:1rem 1.3rem;
  background:rgba(169,130,71,.08);
  border:1px solid var(--line-gold);
  border-radius:var(--radius-card);
  font-size:.86rem;
  color:var(--ink-soft);
}

/* ---- Contact sidebar cards ---- */
.contact-side{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:1.9rem 2rem;
  box-shadow:var(--shadow-soft);
}
.contact-card .eyebrow{ margin-bottom:1.2em; }
.contact-card .footer-social a{
  border-color:var(--line);
  color:var(--ink-soft);
}
.contact-card .footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); }

.map-section{ background:var(--paper-2); border-top:1px solid var(--line); }
.map-section .map-frame{ margin-top:2rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--navy-deep);
  color:rgba(250,248,244,.6);
}
.footer-top{
  border-top:1px solid var(--line-gold);
  border-bottom:1px solid rgba(250,248,244,.1);
}
.footer-grid{
  padding-top:4.5rem; padding-bottom:4rem;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:3rem;
}
.footer-brand p{
  color:rgba(250,248,244,.62);
  font-size:.88rem;
  max-width:34ch;
  margin:1.1rem 0 1.5rem;
}
.footer-logo{
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; color:var(--white);
}
.footer-logo img{
  height:36px; width:36px; object-fit:contain;
  border-radius:50%;
  border:1px solid var(--line-gold);
  padding:3px;
  background:var(--white);
}
.footer-logo span{
  font-family:var(--font-display); font-weight:600;
  font-size:1.15rem; letter-spacing:.01em;
}
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(250,248,244,.22);
  color:rgba(250,248,244,.8);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); }
.footer-social svg{ width:16px; height:16px; }
.footer-heading{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light);
  margin:0 0 1.4rem;
}
.footer-col ul{ display:flex; flex-direction:column; gap:.85rem; }
.footer-col a{
  text-decoration:none;
  font-size:.9rem;
  color:rgba(250,248,244,.72);
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--gold-light); }
.footer-visit address{
  font-size:.88rem;
  color:rgba(250,248,244,.68);
  line-height:1.75;
}
.footer-bottom{ }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-top:1.75rem; padding-bottom:1.75rem;
  font-size:.8rem;
}
.footer-inner p{ margin:0; color:rgba(250,248,244,.5); }
.back-to-top{ text-decoration:none; color:var(--gold-light); font-family:var(--font-mono); font-size:.76rem; letter-spacing:.05em; }

@media (max-width:960px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:2.75rem; padding-top:3.5rem; padding-bottom:3rem; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:.75rem; }
}

/* =========================================================
   Nav — active page state
   ========================================================= */
.primary-nav a.is-current{
  color:var(--navy-deep);
  border-color:var(--gold);
}

/* =========================================================
   Page hero — compact banner used on interior pages
   ========================================================= */
.page-hero{
  position:relative;
  height:min(52vh, 420px);
  min-height:300px;
  overflow:hidden;
  background:var(--navy-deep);
}
.page-hero img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.03);
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(7,29,51,.92) 0%, rgba(7,29,51,.55) 55%, rgba(7,29,51,.28) 100%);
}
.page-hero-copy{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:2.5rem 1.75rem 3rem;
  max-width:1200px; margin:0 auto;
  color:var(--paper);
}
.breadcrumb{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(250,248,244,.65);
  margin:0 0 1em;
  display:flex; align-items:center; gap:.6em;
}
.breadcrumb a{ text-decoration:none; color:rgba(250,248,244,.85); }
.breadcrumb a:hover{ color:var(--gold-light); }
.breadcrumb span[aria-hidden]{ color:rgba(250,248,244,.4); }
.page-hero h1{
  color:var(--white);
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  max-width:22ch;
  margin-bottom:.3em;
}
.page-hero p{
  color:rgba(250,248,244,.82);
  max-width:56ch;
  font-size:1.02rem;
  margin-bottom:0;
}

/* =========================================================
   Section lead — intro paragraph under a page heading
   ========================================================= */
.section-lead{
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:62ch;
  margin-top:-.4em;
}

/* =========================================================
   Values / approach grid (About, Work pages)
   ========================================================= */
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  margin-top:2.5rem;
}
.value-card{ border-top:1px solid var(--gold); padding-top:1.4rem; }
.value-card h3{ font-size:1.15rem; margin-bottom:.4em; }
.value-card p{ font-size:.92rem; margin-bottom:0; }

/* =========================================================
   Team page — cards
   ========================================================= */
.team-intro{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4.5rem;
  align-items:end;
  margin-bottom:1rem;
}
.team-section + .team-section{ margin-top:5rem; }
.team-kicker{
  font-family:var(--font-mono);
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); margin:0 0 1.6rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--line);
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}
.team-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.team-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lift);
  border-color:var(--line-gold);
}
.team-photo{
  aspect-ratio:4/3.4;
  position:relative;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-initials{
  font-family:var(--font-display); font-weight:600;
  font-size:2.4rem; letter-spacing:.02em;
  color:rgba(250,248,244,.92);
}
.team-photo::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:56%;
  background:linear-gradient(0deg, rgba(7,29,51,.55) 0%, rgba(7,29,51,0) 100%);
}
.team-body{ padding:1.5rem 1.5rem 1.7rem; }
.team-name{
  font-family:var(--font-display); font-weight:600;
  font-size:1.15rem; color:var(--navy-deep);
  margin-bottom:.15em;
}
.team-role{
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9em;
}
.team-bio{ font-size:.88rem; margin-bottom:1em; }
.team-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.team-tag{
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.04em;
  color:var(--navy);
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:.3em .6em;
  border-radius:var(--radius);
}
.team-note{
  margin-top:3rem;
  padding:1.4rem 1.6rem;
  background:var(--paper-2);
  border-left:2px solid var(--gold);
  font-size:.86rem;
  color:var(--ink-soft);
}
.team-note strong{ color:var(--navy-deep); }

/* =========================================================
   Contact page — map frame
   ========================================================= */
.map-frame{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  aspect-ratio:16/11;
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* =========================================================
   Page-level CTA band (used at bottom of interior pages)
   ========================================================= */
.page-cta{
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.page-cta-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.page-cta h2{ font-size:clamp(1.5rem,2.6vw,2rem); max-width:20ch; margin-bottom:0; }

/* =========================================================
   Success stories — video section
   ========================================================= */
.stories{
  background:var(--navy-deep);
  color:var(--paper);
}
.stories .eyebrow{ color:var(--gold-light); }
.stories .eyebrow::before{ background:var(--gold-light); }
.stories h2{ color:var(--white); max-width:18ch; }
.stories .section-lead{ color:rgba(250,248,244,.75); }
.story-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:1.75rem;
  margin-top:2.75rem;
  align-items:start;
}
.story-featured{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--navy);
  border:1px solid rgba(250,248,244,.14);
  box-shadow:var(--shadow-lift);
}
.story-featured iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
  display:block;
}
.story-side{
  display:flex; flex-direction:column;
  gap:1.25rem;
}
.story-card{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid rgba(250,248,244,.14);
  box-shadow:var(--shadow-card);
  text-decoration:none;
  flex:1;
}
.story-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) brightness(.82);
  transition:transform .5s var(--ease), filter .3s ease;
}
.story-card:hover img{ transform:scale(1.06); filter:saturate(1) brightness(.7); }
.story-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(7,29,51,.85) 0%, rgba(7,29,51,.15) 55%, rgba(7,29,51,.05) 100%);
}
.story-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.1rem 1.2rem;
  display:flex; align-items:center; gap:.7rem;
}
.story-play{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(250,248,244,.14);
  border:1px solid rgba(250,248,244,.4);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  transition:background .2s ease, border-color .2s ease;
}
.story-play svg{ width:11px; height:11px; margin-left:2px; }
.story-card:hover .story-play{ background:var(--gold); border-color:var(--gold); }
.story-card-body span{
  font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.03em;
  color:var(--paper);
  line-height:1.3;
}
.stories-foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.5rem;
  margin-top:2.75rem;
  padding-top:1.75rem;
  border-top:1px solid rgba(250,248,244,.14);
}
.stories-foot p{ color:rgba(250,248,244,.68); font-size:.9rem; margin-bottom:0; max-width:48ch; }
.stories .btn-outline{
  margin-top:0;
  color:var(--white);
  border-color:rgba(250,248,244,.35);
}
.stories .btn-outline:hover{ background:var(--white); color:var(--navy-deep); border-color:var(--white); }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width:961px){
  .hero-seal{ display:block; }
}

@media (max-width:960px){
  .section-inner{ padding:4.5rem 1.5rem; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:3rem; }
  .contact-form-wrap{ padding-right:0; }
  .about-figure-badge{ right:.5rem; bottom:-1rem; padding:.9rem 1.1rem; }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .noticeboard{ grid-template-columns:repeat(2,1fr); }
  .downloads-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .ledger-inner{ grid-template-columns:repeat(2,1fr); gap:1.8rem 0; }
  .ledger-item{ border-left:none; padding-left:0; }
  .ledger-item:nth-child(odd){ border-right:1px solid rgba(250,248,244,.14); padding-right:1.8rem; }
  .team-intro{ grid-template-columns:1fr; gap:1.5rem; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .partner-strip{ grid-template-columns:repeat(2,1fr); }
  .approach-head{ grid-template-columns:1fr; gap:1.25rem; }
  .approach-grid{ grid-template-columns:1fr; gap:2.25rem; }
  .approach-grid::before{ display:none; }
  .approach-step{ padding:0 !important; }
}

@media (max-width:960px){
  .story-layout{ grid-template-columns:1fr; }
  .story-side{ flex-direction:row; }
  .story-card{ aspect-ratio:4/3; }
}

@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .form-row{ grid-template-columns:1fr; }
  .primary-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start;
    gap:1.4rem;
    padding:1.75rem;
    display:none;
  }
  .primary-nav.is-open{ display:flex; }
  .primary-nav ul{ flex-direction:column; gap:1.1rem; }
  .work-grid, .noticeboard{ grid-template-columns:1fr; }
  .ledger-inner{ grid-template-columns:1fr; }
  .ledger-item{ border-right:none !important; padding-right:0 !important; }
  .hero{ height:82vh; }
  .donate-inner{ flex-direction:column; align-items:flex-start; }
  .team-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .page-cta-inner{ flex-direction:column; align-items:flex-start; }
  .story-side{ flex-direction:column; }
}

@media (max-width:480px){
  .hero{ height:78vh; min-height:480px; }
  .hero-badge{ top:1.5rem; left:1.25rem; }
  .hero-copy{ padding:2rem 1.25rem 4.5rem; }
  .ledger-inner{ padding:2rem 1.25rem; }
  .footer-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .story-card{ aspect-ratio:16/9; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-slide, .work-card, .btn{ transition:none; }
  .js-reveal .reveal{ opacity:1; transform:none; transition:none; }
}