/* =========================================================================
   JUNIOR COURT COUNSEL — STYLESHEET
   Design language: "The Case File" — a civic/legal docket aesthetic.
   Chapters from the JCC constitution become "Exhibit" section markers,
   the hero carries an official stamp motif, and team cards read as
   court ID passes. Edit the tokens below to re-theme the whole site.
   ========================================================================= */

/* ---- Fonts ----
   Source Serif 4 (headings) + Inter (body/UI) — a professional, highly
   legible editorial pairing. IBM Plex Mono is kept for small labels
   (eyebrows, docket numbers) but sized up for readability. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700;8..60,800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

/* ---- Design tokens ---- */
:root{
  /* Palette: aged docket paper, oxblood red, statute green, foil gold */
  --ink:            #1C1A17;
  --charcoal:       #2B2823;
  --muted:          #5B5343;
  --paper:          #F1E9D3;
  --paper-deep:     #E6DAB8;
  --paper-line:     #D8C89C;
  --court-red:      #A5222B;
  --court-red-dark: #7C1920;
  --court-red-bright: #D23B3B;
  --statute-green:  #2F4B3C;
  --statute-green-dark: #203529;
  --statute-green-bright: #6FBF8B;
  --gold:           #B8892E;
  --white:          #FFFCF4;

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, Segoe UI, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-card: 0 10px 30px -12px rgba(28,26,23,0.35);
  --shadow-soft: 0 4px 14px -6px rgba(28,26,23,0.25);

  --container: 1180px;
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing: border-box; }
/* base root size a touch above the 16px browser default so every rem-sized
   heading, label and paragraph across the site reads a little larger and
   clearer, without needing to touch each individual font-size value */
html{ scroll-behavior: smooth; font-size: 17px; }
@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; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, ul, ol, figure{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }
input, textarea, select{ font: inherit; }

body{
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(165,34,43,0.05), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* subtle paper grain via layered lines */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(180deg, rgba(28,26,23,0.015) 0px, rgba(28,26,23,0.015) 1px, transparent 1px, transparent 3px);
}

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

:focus-visible{
  outline: 3px solid var(--court-red);
  outline-offset: 3px;
}

/* ---- Typography ---- */
h1, h2, h3, h4{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1{ font-size: clamp(2.6rem, 5.2vw, 4.6rem); font-weight: 700; }
h2{ font-size: clamp(2rem, 3.4vw, 2.9rem); }
h3{ font-size: 1.5rem; font-weight: 600; }
h4{ font-size: 1.15rem; font-weight: 600; }
/* larger variant used on Vision / Motto / Sub-objective style feature
   cards so their headings — and supporting text — read clearly larger
   than ordinary card titles */
.card-lg h3{ font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1.25; }
.card-lg .num{ font-size: 1rem; }
.card-lg p{ font-size: 1.12rem; line-height: 1.7; }
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--court-red-dark);
  font-weight: 700;
}
.eyebrow::before{
  content: "";
  width: 30px;
  height: 3px;
  background: var(--court-red);
  display: inline-block;
  flex-shrink: 0;
}
.lede{
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.7;
}
.section-head{
  margin-bottom: 2.4rem;
  max-width: 720px;
}
.section-head h2{ margin-top: 0.6rem; }
.section-head p{ margin-top: 0.9rem; }

/* ---- Buttons ---- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--court-red);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{ background: var(--court-red-dark); }
.btn-outline{
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--white); }
.btn-ghost{
  color: var(--statute-green-dark);
  border-color: var(--statute-green-dark);
}
.btn-ghost:hover{ background: var(--statute-green-dark); color: var(--white); }
.btn-block{ width: 100%; justify-content: center; }

/* =========================================================================
   TOP BAR — contact strip above the main nav (charity-template style)
   ========================================================================= */
.top-bar{
  background: var(--ink);
  color: rgba(255,252,244,0.75);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}
.top-bar .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.top-bar-left{ display: flex; gap: 22px; flex-wrap: wrap; }
.top-bar-left a{ color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.top-bar-left a:hover{ color: var(--white); }
.top-bar-left svg{ width: 13px; height: 13px; flex-shrink: 0; }
.top-bar-social{ display: flex; gap: 12px; }
.top-bar-social a{
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,252,244,0.1);
  transition: background 0.15s ease;
}
.top-bar-social a:hover{ background: var(--court-red); }
.top-bar-social svg{ width: 12px; height: 12px; }

/* =========================================================================
   TOP UTILITY BAR
   ========================================================================= */
.topbar{
  background: var(--ink);
  color: rgba(255,252,244,0.75);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.topbar .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-contact{ display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-contact a{ display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.topbar-contact a:hover{ color: var(--white); }
.topbar-contact svg{ width: 14px; height: 14px; flex-shrink: 0; }
.topbar-social{ display: flex; gap: 12px; }
.topbar-social a{
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,252,244,0.25);
  display: grid; place-items: center;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar-social a:hover{ background: var(--court-red); border-color: var(--court-red); }
.topbar-social svg{ width: 13px; height: 13px; }
@media (max-width: 760px){
  .topbar-social{ display: none; }
  .topbar .wrap{ justify-content: center; padding: 8px 20px; }
  .topbar-contact{ gap: 14px; justify-content: center; }
}

/* =========================================================================
   HEADER — folder-tab navigation
   ========================================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(241,233,211,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--paper-line);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img{
  height: 42px;
  width: auto;
  border-radius: 3px;
}
.brand-text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.05;
}
.brand-text span{
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--court-red-dark);
  margin-top: 2px;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a{
  position: relative;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--charcoal);
  border-radius: 6px 6px 0 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover{ background: var(--paper-deep); }
.nav-links a.active{
  color: var(--court-red-dark);
}
.nav-links a.active::after{
  content:"";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--court-red);
}
.nav-cta{ margin-left: 12px; }
.nav-toggle{
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 34px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span{ top: 16px; }
.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   HERO — full-bleed background-image slider (charity-template layout)
   Each .hero-slide carries its own background-image inline in the HTML,
   so you can swap photos by editing the `style="background-image:..."`
   attribute directly, or by replacing the file in assets/hero/.
   ========================================================================= */
.hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--paper-line);
}
.hero-slider{
  position: relative;
  min-height: 640px;
  display: grid;
}
.hero-slide{
  grid-area: 1 / 1;
  min-height: 640px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  position: relative;
}
.hero-slide::before{
  /* dark gradient overlay so text stays readable over any photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,18,16,0.86) 0%, rgba(20,18,16,0.62) 42%, rgba(20,18,16,0.28) 75%);
}
.hero-slide.is-active{ opacity: 1; visibility: visible; z-index: 1; }
.hero-slide .wrap{ position: relative; z-index: 2; width: 100%; }
.hero-copy{ max-width: 640px; }
.hero-copy .eyebrow{ color: #E7B4B0; }
.hero-copy .eyebrow::before{ background: #E7B4B0; }
.hero-copy h1{ color: var(--white); margin-top: 0.9rem; }
.hero-copy h1 em{ font-style: italic; color: #F0A9A0; }
.hero-copy .hero-lede{ color: rgba(255,252,244,0.86); margin-top: 1.3rem; }
.hero-cta{
  display: flex;
  gap: 14px;
  margin-top: 2.1rem;
  flex-wrap: wrap;
}

/* slider controls */
.hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,252,244,0.5);
  background: rgba(20,18,16,0.35);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hero-arrow:hover{ background: var(--court-red); border-color: var(--court-red); }
.hero-arrow.prev{ left: 24px; }
.hero-arrow.next{ right: 24px; }
.hero-dots{
  position: absolute;
  z-index: 3;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
}
.hero-dots button{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,252,244,0.45);
  border: none;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-dots button.is-active{ background: var(--court-red); transform: scale(1.25); }

.hero-stats{
  background: var(--paper-deep);
  border-bottom: 1px solid var(--paper-line);
  padding: 30px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat b{
  display:block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--court-red-dark);
}
.stat span{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =========================================================================
   FEATURE STRIP — three colored blocks directly under the hero
   (the signature layout element from the charity-site template)
   ========================================================================= */
.feature-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.feature-block{
  padding: 44px 40px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: filter 0.2s ease;
}
.feature-block:hover{ filter: brightness(1.06); }
.feature-block .icon{
  width: 50px; height: 50px;
  border-radius: 12px;
  background: rgba(255,252,244,0.16);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.feature-block .icon svg{ width: 26px; height: 26px; }
.feature-block h3{ color: var(--white); font-size: 1.25rem; }
.feature-block p{ margin-top: 10px; color: rgba(255,252,244,0.82); font-size: 0.92rem; }
.feature-block .feature-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1.5px solid rgba(255,252,244,0.5);
  padding-bottom: 3px;
}
.feature-block.c-red{ background: var(--court-red); }
.feature-block.c-ink{ background: var(--ink); }
.feature-block.c-olive{ background: #6E7A1E; }

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section{ padding: 84px 0; }
.section-alt{
  background: var(--paper-deep);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.section-ink{
  background: var(--ink);
  color: rgba(255,252,244,0.88);
}
.section-ink h2, .section-ink h3{ color: var(--white); }
.section-ink .eyebrow{ color: #F0A9A0; }
.section-ink .eyebrow::before{ background: #F0A9A0; }
/* checklist items lose contrast against the dark background unless
   overridden here — bright text + a light, legible green checkmark */
.section-ink .list-check li{
  color: rgba(255,252,244,0.94);
  font-size: 1.05rem;
}
.section-ink .list-check li::before{ color: var(--statute-green-bright); }

.divider-tear{
  height: 1px;
  background-image: linear-gradient(90deg, var(--paper-line) 60%, transparent 0%);
  background-size: 14px 1px;
  background-repeat: repeat-x;
}

/* generic responsive grids */
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* card used for "what we do", "values", etc */
.card{
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card .num{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--court-red);
  letter-spacing: 0.08em;
}
.card h3{ margin-top: 10px; }
.card p{ margin-top: 10px; color: var(--muted); font-size: 1rem; }
.card .icon{
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--paper);
  display: grid; place-items: center;
  margin-bottom: 14px;
  color: var(--court-red-dark);
}
.card .icon svg{ width: 24px; height: 24px; }

/* =========================================================================
   ACTIVITIES HUB — clickable topic cards
   ========================================================================= */
.topic-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.topic-card{
  display: block;
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: inherit;
}
.topic-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-card); }
.topic-photo{ aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
.topic-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.topic-card:hover .topic-photo img{ transform: scale(1.06); }
.topic-body{ padding: 22px 24px 26px; }
.topic-body .tag-sm{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--court-red-dark);
}
.topic-body h3{ margin-top: 8px; font-size: 1.3rem; }
.topic-body p{ margin-top: 8px; color: var(--muted); font-size: 0.94rem; }
.topic-link{
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--court-red-dark);
}
.topic-card:hover .topic-link{ text-decoration: underline; }

@media (max-width: 980px){ .topic-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px){ .topic-grid{ grid-template-columns: 1fr; } }

/* =========================================================================
   ACTIVITY SUB-PAGES — quick facts, document card, updates log
   ========================================================================= */
.fact-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 30px 0 6px;
}
.fact{
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  text-align: center;
}
.fact b{
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--court-red-dark);
}
.fact span{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 760px){ .fact-grid{ grid-template-columns: repeat(2, 1fr); } }

.doc-card{
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  box-shadow: var(--shadow-soft);
  flex-wrap: wrap;
}
.doc-card .doc-icon{
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--court-red-dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.doc-card .doc-icon svg{ width: 26px; height: 26px; }
.doc-card .doc-info{ flex: 1; min-width: 200px; }
.doc-card .doc-info h4{ font-size: 1.05rem; color: var(--ink); }
.doc-card .doc-info p{ margin-top: 3px; font-size: 0.85rem; color: var(--muted); }

.update-list{ margin-top: 10px; }
.update-item{
  border-left: 3px solid var(--court-red);
  padding: 4px 0 4px 20px;
  margin-bottom: 26px;
}
.update-item time{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.update-item h4{ margin-top: 6px; font-size: 1.1rem; }
.update-item p{ margin-top: 6px; color: var(--muted); font-size: 0.95rem; }

.theme-list{ margin-top: 10px; }
.theme-list li{
  margin-bottom: 14px;
  padding-left: 20px;
  position: relative;
  color: var(--charcoal);
}
.theme-list li::before{
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--statute-green-dark);
}
.theme-list strong{ color: var(--ink); }

/* partner logo cards (Partners page) */
.partner-card{ text-align: center; }
.partner-logo{
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--paper-line);
  margin-bottom: 18px;
}
.partner-logo img{ width: 100%; display: block; }
.partner-card h3{ font-size: 1.15rem; }
.partner-card p{ font-size: 0.92rem; }

/* reveal on scroll
   NOTE: text stays fully opaque (opacity:1) at all times — only a small
   upward slide is deferred until the element scrolls into view. Content
   must never depend on JavaScript firing correctly to become readable. */
.reveal{
  opacity: 1;
  transform: translateY(14px);
  transition: transform 0.6s ease;
}
.reveal.is-visible{ transform: none; }

/* lists with check / dash markers */
.list-check li, .list-dash li{
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  color: var(--charcoal);
  font-size: 1.03rem;
  line-height: 1.6;
}
.list-check li::before{
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--statute-green-dark);
  font-weight: 700;
  font-size: 1.1rem;
}
.list-dash li::before{
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--court-red);
  font-weight: 700;
}

/* pill tags (values / principles) */
.tag-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.tag{
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--paper-line);
  background: var(--white);
  color: var(--charcoal);
}

/* =========================================================================
   ORG CHART (About page)
   ========================================================================= */
.orgchart{ text-align: center; }
.orgchart .tier{
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  margin: 0 auto 10px;
}
.orgchart .node{
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 150px;
}
.orgchart .node.top{
  background: var(--court-red);
  color: var(--white);
  border-color: var(--court-red-dark);
}
.orgchart .node.mid{
  background: var(--statute-green-dark);
  color: var(--white);
  border-color: var(--statute-green-dark);
}
.orgchart .connector{
  width: 1.5px;
  height: 26px;
  background: var(--ink);
  margin: 0 auto;
}
.orgchart .branch{
  border-top: 1.5px solid var(--ink);
  padding-top: 26px;
  position: relative;
  margin-top: 0;
}

/* =========================================================================
   TEAM PAGE — court ID / badge cards
   ========================================================================= */
.team-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.badge-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--paper-line);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.badge-card:hover{ transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow-card); }
.badge-top{
  background: var(--statute-green-dark);
  color: var(--white);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-hole{
  width: 34px; height: 10px;
  background: var(--paper);
  border-radius: 6px;
  margin: 10px auto 0;
}
.team-photo{
  aspect-ratio: 1 / 1;
  margin: 16px auto 0;
  width: 68%;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 3px dashed var(--paper-line);
  display: grid;
  place-items: center;
  color: var(--muted);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-photo:hover{ transform: scale(1.03); box-shadow: 0 10px 26px -10px rgba(28,26,23,0.35); }
.team-photo img{ width: 100%; height: 100%; object-fit: cover; display: none; }
.team-photo.has-photo img{ display: block; }
.team-photo.has-photo{ border-style: solid; }
.team-photo .placeholder-icon{ width: 46%; opacity: 0.55; }
.badge-body{
  padding: 14px 18px 22px;
  text-align: center;
}
.badge-body h3{ font-size: 1.15rem; margin-top: 4px;}
.badge-body .role{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--court-red-dark);
  display:block;
  margin-top: 2px;
}
.badge-body .bio{
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--muted);
}
.badge-serial{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 10px;
  border-top: 1px dashed var(--paper-line);
  padding-top: 8px;
}

/* =========================================================================
   TEAM PAGE — leadership "branch tree"
   One founder card at the top, a trunk line down to a horizontal branch
   bar, then a stem dropping to each team member's card. On narrow screens
   this collapses to a simple centered stack (see responsive section).
   ========================================================================= */
.team-tree{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tree-founder{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border: 2px solid var(--court-red);
  border-radius: var(--radius-md);
  padding: 40px 36px 34px;
  box-shadow: var(--shadow-card);
}
.tree-photo-founder{ width: 240px; height: 240px; }
.tree-tag{
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--court-red);
  color: var(--white);
  padding: 5px 16px;
  border-radius: 999px;
}
.tree-founder h3{ margin-top: 14px; font-size: 1.5rem; }
.tree-founder .role{
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--court-red-dark);
}
.tree-founder .bio{
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

.tree-trunk{
  width: 4px;
  height: 46px;
  background: var(--statute-green-dark);
}

.tree-bar-wrap{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.tree-bar{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(88%, 920px);
  height: 4px;
  border-radius: 2px;
  background: var(--statute-green-dark);
}

.tree-branches{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px 22px;
  padding-top: 50px;
  max-width: 1180px;
}
.tree-node{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 196px;
}
.tree-stem{
  width: 3px;
  height: 34px;
  background: var(--statute-green-dark);
  margin-bottom: -2px;
}
.tree-node .tree-photo{ width: 168px; height: 168px; }
.tree-node h4{
  margin-top: 16px;
  font-size: 1.15rem;
  color: var(--ink);
}
.tree-node .role{
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--court-red-dark);
}

@media (max-width: 760px){
  /* collapse the horizontal branch bar into a simple centered stack */
  .tree-bar{ display: none; }
  .tree-branches{ padding-top: 6px; gap: 36px; }
  .tree-node{ width: 100%; max-width: 260px; }
  .tree-node .tree-photo{ width: 160px; height: 160px; }
  .tree-photo-founder{ width: 190px; height: 190px; }
  .tree-founder{ padding: 32px 26px 28px; }
  .tree-stem{ height: 24px; }
}

.team-note{
  background: var(--white);
  border-left: 4px solid var(--gold);
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--muted);
  border-radius: 0 8px 8px 0;
  margin-bottom: 40px;
}
.team-note code{
  font-family: var(--font-mono);
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--court-red-dark);
}

/* =========================================================================
   CONTACT / FORMS
   ========================================================================= */
.contact-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
}
.info-card{
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 34px;
}
.info-card h3{ color: var(--white); }
.info-row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,252,244,0.12);
}
.info-row:last-child{ border-bottom: none; }
.info-row .icon{
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,252,244,0.1);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.info-row .icon svg{ width: 18px; height: 18px; stroke: var(--white); }
.info-row a, .info-row span{ font-size: 0.95rem; }
.info-row .label{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C6BFA8;
  margin-bottom: 3px;
}

.field{ margin-bottom: 20px; }
.field label{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--charcoal);
}
.field input, .field textarea, .field select{
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--paper-line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--court-red);
  box-shadow: 0 0 0 3px rgba(165,34,43,0.12);
  outline: none;
}
.field.error input, .field.error textarea{ border-color: var(--court-red); }
.field .error-msg{
  display: none;
  color: var(--court-red);
  font-size: 0.78rem;
  margin-top: 6px;
}
.field.error .error-msg{ display: block; }
.form-status{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  display: none;
}
.form-status.show{ display: block; }
.form-status.success{ background: #E1EBE4; color: var(--statute-green-dark); }
.form-status.error{ background: #F4DEDF; color: var(--court-red-dark); }
.map-embed{
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--paper-line);
  margin-top: 24px;
  filter: sepia(12%) saturate(85%);
}
.map-embed iframe{ width: 100%; height: 260px; border: 0; display: block; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{
  background: var(--ink);
  color: rgba(255,252,244,0.7);
  padding: 60px 0 26px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,252,244,0.12);
}
.footer-brand{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.footer-brand img{ height: 38px; border-radius: 3px; }
.footer-brand span{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  font-size: 1.05rem;
}
.site-footer h4{
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer ul li{ margin-bottom: 10px; font-size: 0.9rem; }
.site-footer a:hover{ color: var(--white); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-motto{
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--gold);
}

/* back to top */
.to-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--court-red);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
  border: none;
}
.to-top.show{ opacity: 1; pointer-events: auto; transform: none; }

/* floating WhatsApp button — always visible, opens a chat with JCC */
.whatsapp-btn{
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
  z-index: 40;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px -10px rgba(37,211,102,0.55); }
.whatsapp-btn svg{ width: 28px; height: 28px; }
.whatsapp-btn .wa-pulse{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.55;
  animation: wa-ping 2.2s cubic-bezier(0,0,0.2,1) infinite;
  z-index: -1;
}
@keyframes wa-ping{
  0%{ transform: scale(1); opacity: 0.5; }
  75%, 100%{ transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .wa-pulse{ animation: none; display: none; }
}
@media (max-width: 760px){
  .whatsapp-btn{ left: 16px; bottom: 16px; width: 50px; height: 50px; }
  .to-top{ right: 16px; bottom: 16px; }
}

/* =========================================================================
   PAGE HERO (inner pages) — full-bleed background-image banner
   Swap the photo by editing the inline style="background-image:..."
   on the .page-hero element in each page's HTML.
   ========================================================================= */
.page-hero{
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--paper-line);
}
.page-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,18,16,0.88) 0%, rgba(20,18,16,0.68) 50%, rgba(20,18,16,0.42) 100%);
}
.page-hero .wrap{ position: relative; z-index: 1; padding: 56px 28px; }
.page-hero .eyebrow{ color: #E7B4B0; margin-bottom: 10px; }
.page-hero .eyebrow::before{ background: #E7B4B0; }
.page-hero h1{ color: var(--white); }
.page-hero p{ color: rgba(255,252,244,0.85); margin-top: 14px; max-width: 62ch; }
.breadcrumb{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,252,244,0.65);
  margin-bottom: 18px;
}
.breadcrumb a{ color: #F0A9A0; }

/* =========================================================================
   ACTIVITIES / GALLERY PAGE
   ========================================================================= */
.filter-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.filter-btn{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--paper-line);
  background: var(--white);
  color: var(--charcoal);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-btn:hover{ border-color: var(--court-red); }
.filter-btn.is-active{
  background: var(--court-red);
  border-color: var(--court-red);
  color: var(--white);
}

.gallery-grid{
  columns: 3 260px;
  column-gap: 20px;
}
.gallery-item{
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--paper-line);
  background: var(--white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.gallery-item img{ width: 100%; display: block; }
.gallery-caption{
  padding: 14px 16px 16px;
}
.gallery-caption .tag-sm{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--court-red-dark);
}
.gallery-caption p{
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--charcoal);
}
.gallery-item.is-hidden{ display: none; }

/* lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(15,13,11,0.92);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.is-open{ display: flex; }
.lightbox-inner{
  max-width: 900px;
  width: 100%;
  text-align: center;
}
.lightbox-inner img{
  max-height: 74vh;
  width: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.lightbox-caption{
  color: rgba(255,252,244,0.85);
  margin-top: 18px;
  font-size: 0.95rem;
}
.lightbox-close{
  position: absolute;
  top: 24px; right: 28px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,252,244,0.1);
  color: var(--white);
  font-size: 1.3rem;
  border: 1.5px solid rgba(255,252,244,0.3);
}
.lightbox-close:hover{ background: var(--court-red); border-color: var(--court-red); }
.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,252,244,0.1);
  color: var(--white);
  border: 1.5px solid rgba(255,252,244,0.3);
  font-size: 1.2rem;
}
.lightbox-nav:hover{ background: var(--court-red); border-color: var(--court-red); }
.lightbox-nav.prev{ left: 24px; }
.lightbox-nav.next{ right: 24px; }

/* accordion (get involved / FAQ) */
.accordion-item{
  border-bottom: 1px solid var(--paper-line);
}
.accordion-trigger{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 20px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}
.accordion-trigger .plus{
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--court-red);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 20px;
}
.accordion-trigger[aria-expanded="true"] .plus{ transform: rotate(45deg); }
.accordion-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.accordion-panel p, .accordion-panel ul{
  padding: 0 4px 22px;
  color: var(--muted);
}

/* step list (how to apply) */
.steps{ counter-reset: step; }
.steps li{
  counter-increment: step;
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.steps li::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--court-red);
  font-weight: 600;
  flex-shrink: 0;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px){
  .grid-2, .contact-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); }
  .feature-strip{ grid-template-columns: 1fr; }
  .hero-slider, .hero-slide{ min-height: 560px; }
  .gallery-grid{ columns: 2 220px; }
  .top-bar-left span:nth-child(3){ display:none; }
}

@media (max-width: 760px){
  .nav-links{
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-line);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px 20px;
    display: none;
    gap: 0;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ padding: 14px 6px; border-radius: 0; border-bottom: 1px solid var(--paper-line); }
  .nav-cta{ margin: 14px 0 0; }
  .nav-toggle{ display: block; }
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  .section{ padding: 60px 0; }
  .hero-slider, .hero-slide{ min-height: 520px; }
  .hero-arrow{ width: 36px; height: 36px; }
  .hero-arrow.prev{ left: 10px; }
  .hero-arrow.next{ right: 10px; }
  .gallery-grid{ columns: 1 100%; }
  .top-bar-left{ display: none; }
  .top-bar .wrap{ justify-content: flex-end; }
}