/* ===================================================
   The Final Turn — Main Stylesheet
   Palette + type per Brand/BRAND_GUIDE.md (migrated 8/16/26
   from the pre-rename green/Playfair system)
   =================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Prata&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* --- CSS Custom Properties ---
   Canonical brand tokens first; the legacy names below them are
   aliases kept so existing rules keep working. New rules should
   use the canonical names. */
:root {
  --navy:         #071832;
  --navy-soft:    #102641;
  --ink:          #101217;
  --gold:         #C99732;
  --gold-soft:    #E5C67A;
  --green:        #075735;
  --earth:        #766047;
  --earth-light:  #D8C8AA;

  --green-dark:   var(--navy);        /* legacy: dominant dark → navy */
  --green-mid:    var(--green);       /* legacy: labels, accents, focus */
  --green-light:  var(--gold);        /* legacy: hover borders, accent bars */
  --green-pale:   #F0E6CF;            /* legacy: pale tint chips/hovers, now warm gold-cream */
  --cream:        #F7F1E6;
  --cream-dark:   #EFE7D6;
  --gold-light:   var(--gold-soft);
  --charcoal:     var(--ink);
  --gray-mid:     var(--earth);
  --gray-light:   var(--earth-light);
  --white:        #FFFFFF;
  --red-soft:     #C0392B;

  --font-serif:   'Prata', Georgia, serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, sans-serif;

  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;

  --shadow-sm:    0 1px 3px rgba(7,24,50,.08), 0 1px 2px rgba(7,24,50,.06);
  --shadow-md:    0 4px 16px rgba(7,24,50,.10), 0 2px 6px rgba(7,24,50,.07);
  --shadow-lg:    0 12px 40px rgba(7,24,50,.14), 0 4px 12px rgba(7,24,50,.08);

  --max-width:    1160px;
  --section-pad:  80px 24px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; }
input, textarea, select { font-family: inherit; }
/* A file input has no author width — the browser sizes it from the font and the
   button label, so a wider body font can push it past a narrow viewport. */
input[type="file"] { max-width: 100%; }

/* --- Typography --- */
h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--navy);
}
/* Titles are Montserrat Bold; section headings are Prata. Prata ships a single
   weight (400), so every rule that uses it says so — anything heavier would be
   a synthesized fake bold. */
h1 { font-family: var(--font-sans); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 400; }
h3 { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 400; }
h4 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; }
p  { font-size: 1rem; color: var(--gray-mid); }

.lead {
  font-size: 1.15rem;
  color: var(--charcoal);
  line-height: 1.75;
}

.section-label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-mid);
  display: block;
  margin-bottom: 10px;
}

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

section {
  padding: var(--section-pad);
}

.section-intro {
  max-width: 680px;
  margin-bottom: 52px;
}

.section-intro p {
  font-size: 1.05rem;
  margin-top: 12px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px; /* brand guide: 8px everywhere; was a 50px pill */
  font-size: .95rem;
  font-weight: 600;
  transition: all .2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--green-dark);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--green-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(7,24,50,.3);
}

.btn-secondary {
  background: transparent;
  color: var(--green-dark);
  border: 2px solid var(--green-dark);
}
.btn-secondary:hover {
  background: var(--green-dark);
  color: var(--white);
  transform: translateY(-1px);
}

.btn-gold {
  /* brand guide primary button: gold gradient, near-black text (7.2:1) —
     white on gold fails contrast at ~2.2:1 */
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #11100D;
  font-weight: 700;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,151,50,.35);
}

.btn-white {
  background: var(--white);
  color: var(--green-dark);
}
.btn-white:hover {
  background: var(--cream);
  transform: translateY(-1px);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.6);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--white);
}

.btn-sm { padding: 10px 20px; font-size: .875rem; }
.btn-lg { padding: 18px 36px; font-size: 1.05rem; }

/* --- Navigation --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247,241,230,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cream-dark);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 2px 0;
}

.nav-logo img {
  height: 62px;
  width: auto;
  display: block;
}

.nav-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--green-dark);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav-logo-text .name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--green-dark);
}
.nav-logo-text .tagline {
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--gray-mid);
  text-transform: uppercase;
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  padding: 6px 14px;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--charcoal);
  transition: all .15s;
}
.nav-links a:hover,
.nav-links a.active {
  background: var(--green-pale);
  color: var(--green-dark);
}

.nav-cta { flex-shrink: 0; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 6px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all .25s;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  min-height: calc(100vh - 68px);
  background: var(--cream);
  z-index: 99;
  padding: 24px;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--cream-dark);
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--charcoal);
  border-bottom: 1px solid var(--cream-dark);
}
.mobile-menu a:hover { background: var(--green-pale); color: var(--green-dark); }
.mobile-menu .btn { margin-top: 12px; text-align: center; justify-content: center; }

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
}

/* --- Footer --- */
.site-footer {
  background: var(--green-dark);
  color: rgba(255,255,255,.8);
  padding: 64px 24px 32px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.footer-brand .logo-text {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 12px;
}

.footer-brand p {
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h5 {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  font-size: .9rem;
  color: rgba(255,255,255,.75);
  padding: 4px 0;
  transition: color .15s;
}
.footer-col a:hover { color: var(--white); }

.footer-newsletter input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: var(--white);
  font-size: .9rem;
  margin-bottom: 8px;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,.45); }
.footer-newsletter input:focus {
  outline: none;
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
}
.footer-newsletter .btn { width: 100%; justify-content: center; }

.footer-bottom {
  padding-top: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
}

.footer-bottom a {
  color: rgba(255,255,255,.55);
  text-decoration: underline;
}
.footer-bottom a:hover { color: var(--white); }

.footer-legal {
  max-width: 520px;
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; }
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 24px 80px;
  isolation: isolate;
  color: var(--white);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../assets/photos/hero/sunset-fence.jpg') center 55% / cover no-repeat;
  transform: scale(1.01);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(7,24,50,.40) 40%, rgba(7,24,50,.82) 100%),
    radial-gradient(circle at 50% 48%, rgba(201,151,50,.15), transparent 46%);
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 20px;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
}

.hero .lead {
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 40px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 56px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-stat {
  text-align: center;
}
.hero-stat .number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--white);
}
.hero-stat .label {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
}

@media (max-width: 800px) {
  .hero { min-height: auto; padding: 100px 24px 60px; }
  .hero-stats { gap: 16px; }
}

/* --- Auction Preview Section --- */
.auction-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.auction-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.auction-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.auction-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.auction-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.auction-card-body h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--charcoal);
}

.auction-card-body .donated-by {
  font-size: .85rem;
  color: var(--gray-mid);
}

.auction-sold {
  font-weight: 800;
  color: #8a1c1c;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 8px;
}

.fundraising-bar-wrap {
  background: var(--cream-dark);
  border-radius: 24px;
  height: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08);
  max-width: 600px;
  margin: 0 auto;
}
.fundraising-bar-fill {
  background: linear-gradient(90deg, var(--green-dark), var(--gold));
  height: 100%;
  width: 0%;
  transition: width 1.2s ease;
  border-radius: 24px 0 0 24px;
}

/* --- Section Variants --- */
.bg-cream { background: var(--cream); }
.bg-cream-dark { background: var(--cream-dark); }
.bg-white { background: var(--white); }
.bg-green-dark { background: var(--green-dark); }
.bg-green-mid { background: var(--green-mid); }
.bg-charcoal { background: var(--charcoal); }

/* --- Horse Cards --- */
.horses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.horse-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
}

.horse-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.horse-card-photo {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  position: relative;
  overflow: hidden;
}

.horse-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horse-card-photo .photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.45);
}

.horse-card-photo .photo-placeholder .icon { font-size: 2.5rem; }
.horse-card-photo .photo-placeholder .text { font-size: .8rem; font-weight: 500; }

.horse-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.status-transition { background: var(--green-pale); color: var(--green-dark); }
.status-graduate   { background: #DCFCE7; color: #166534; }
.status-retired    { background: #FFFBEB; color: #78350F; }

.horse-card-body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.horse-card-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 2px;
}

.horse-card-meta {
  font-size: .82rem;
  color: var(--gray-mid);
  margin-bottom: 12px;
}

.horse-card-story {
  font-size: .9rem;
  color: var(--gray-mid);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 18px;
}

.horse-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--gray-light);
  padding-top: 16px;
}

.sponsorship-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sponsorship-info .amount {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--green-dark);
}
.sponsorship-info .label {
  font-size: .72rem;
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

/* --- Impact Metrics --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 720px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .metrics-grid .metric-card { padding: 20px 12px; min-width: 0; }
}

.metric-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
  transition: box-shadow .2s;
}
.metric-card:hover { box-shadow: var(--shadow-md); }

.metric-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.metric-number {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--green-dark);
  margin-bottom: 4px;
  display: block;
}

.metric-label {
  font-size: .82rem;
  color: var(--gray-mid);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --- How It Works Steps --- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

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

.step-item {
  text-align: center;
}

.step-number {
  width: 52px;
  height: 52px;
  background: var(--green-dark);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0 auto 16px;
}

.step-item h4 {
  font-size: 1rem;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.step-item p {
  font-size: .9rem;
  line-height: 1.65;
}

/* --- Feature Cards / What We Do --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  border: 1px solid var(--gray-light);
  transition: all .2s;
}
.feature-card:hover {
  border-color: var(--green-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 14px;
}

.feature-card h4 {
  font-size: 1.05rem;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.feature-card p {
  font-size: .88rem;
  line-height: 1.6;
}

/* --- Donation CTA Section --- */
.donation-cta {
  background: var(--green-dark);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 60px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.donation-cta::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}

.donation-cta h2 { color: var(--white); margin-bottom: 12px; }
.donation-cta p { color: rgba(255,255,255,.75); margin-bottom: 32px; font-size: 1.05rem; }

.donation-levels {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.donation-level-btn {
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.25);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 50px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.donation-level-btn:hover,
.donation-level-btn.active {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
}
.donation-level-btn .amount { font-size: 1.1rem; font-family: var(--font-serif); font-weight: 400; }
.donation-level-btn .desc { font-size: .7rem; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }

.donation-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Sponsor a Stall --- */
.stall-sponsor-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 52px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 700px) {
  .stall-sponsor-card { grid-template-columns: 1fr; gap: 28px; }
  .donation-cta { padding: 40px 24px; }
}

.stall-sponsor-card h2 { color: var(--white); margin-bottom: 14px; }
.stall-sponsor-card p { color: rgba(255,255,255,.8); font-size: 1rem; margin-bottom: 20px; }

.stall-what-included {
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 24px;
}
.stall-what-included h4 {
  color: var(--gold-light);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
}
.stall-what-included li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .92rem;
  color: rgba(255,255,255,.85);
  padding: 5px 0;
}
.stall-what-included li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Graduate Grid Cards --- */
.graduates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.grad-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.grad-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.14);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.grad-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(160deg, var(--navy-soft), rgba(0,0,0,.3));
  overflow: hidden;
  position: relative;
}
.grad-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grad-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.3);
}

.grad-card-body {
  padding: 18px 20px 22px;
}

.grad-card-badge {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-dark);
  padding: 3px 10px;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.grad-card-body h4 {
  color: var(--white);
  margin-bottom: 6px;
  font-size: 1.2rem;
}

.grad-card-body p {
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.grad-card-read {
  color: var(--gold-light);
  font-size: .85rem;
  font-weight: 600;
}

/* --- Graduate Modal --- */
.grad-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.grad-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.grad-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  position: relative;
  transform: translateY(20px);
  transition: transform .3s ease;
}
.grad-modal-overlay.active .grad-modal {
  transform: translateY(0);
}

.grad-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.grad-modal-close:hover {
  background: rgba(0,0,0,.75);
}

.grad-modal-photo {
  width: 100%;
  height: 320px;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy));
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.grad-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grad-modal-body {
  padding: 32px 36px 40px;
}

.grad-modal-body .graduate-outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-pale);
  color: var(--green-dark);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
  width: fit-content;
}

.grad-modal-body h2 { margin-bottom: 6px; font-size: 1.8rem; }
.grad-modal-body .sub { font-size: .95rem; color: var(--gray-mid); margin-bottom: 18px; }
.grad-modal-body p { font-size: 1rem; line-height: 1.8; color: var(--charcoal); }
.grad-modal-body .quote {
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 4px solid var(--gold);
  background: var(--cream);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--charcoal);
  font-size: .95rem;
  line-height: 1.7;
}

@media (max-width: 680px) {
  .grad-modal-photo { height: 220px; }
  .grad-modal-body { padding: 24px; }
  .grad-modal-body h2 { font-size: 1.4rem; }
  /* long button labels forced the page to scroll sideways on phones */
  .btn { white-space: normal; text-align: center; }
}

/* --- Transparency Section --- */
.transparency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.transparency-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  border: 1px solid var(--gray-light);
}

.transparency-card .icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.transparency-card h4 { margin-bottom: 8px; }
.transparency-card p  { font-size: .9rem; line-height: 1.65; }

.camera-disclaimer {
  background: #FFF8ED;
  border: 1px solid #FDDEA0;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 24px;
}
.camera-disclaimer .icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.camera-disclaimer p { font-size: .88rem; color: #92400E; line-height: 1.6; }

/* --- Forms --- */
.form-section {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 52px 48px;
  box-shadow: var(--shadow-md);
}

@media (max-width: 600px) {
  .form-section { padding: 32px 24px; }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .full { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Grid items default to min-width:auto, so a select sized to its longest
     option ("Yes — owner has given written consent") widens the whole track and
     pushes the page into horizontal scroll on a phone. */
  min-width: 0;
}

.form-group label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--charcoal);
}

.form-group label .required { color: var(--red-soft); margin-left: 2px; }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(7,87,53,.12);
}

.form-group textarea { min-height: 110px; resize: vertical; }

.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }

.form-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.form-note {
  font-size: .82rem;
  color: var(--gray-mid);
  margin-top: 16px;
  line-height: 1.55;
}

/* --- Legal Disclaimer --- */
.legal-notice {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.legal-notice .icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.legal-notice p { font-size: .875rem; color: #78350F; line-height: 1.6; }

/* --- Page Hero (inner pages) --- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  padding: 80px 24px 72px;
  text-align: center;
}

.page-hero .section-label { color: rgba(255,255,255,.6); justify-content: center; display: block; }
.page-hero h1 { color: var(--white); }
.page-hero .lead { color: rgba(255,255,255,.8); max-width: 560px; margin: 16px auto 0; font-weight: 700; }

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: .82rem;
  color: var(--gray-mid);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--green-mid); }
.breadcrumb a:hover { text-decoration: underline; }

/* --- Horse Profile Page --- */
.profile-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .profile-layout { grid-template-columns: 1fr; }
}

.profile-photo-main {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  margin-bottom: 16px;
}
.profile-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── rotating gallery ──────────────────────────────────────────────────────
   Every photo of a horse cross-fades in place on their own page. The landing
   page and the roster still show the one flagged as main, which is why the
   rotation lives here and not in the shared card markup. */
/* Scoped to the frame, NOT to .photo-rotator: that class is only added when a
   horse has more than one photo, and a horse with exactly one still needs its
   slide lifted out of normal flow. Without this the single slide lands below
   the frame, gets clipped, and the "Photo Coming Soon" placeholder shows
   through instead of the photo. */
.profile-photo-main .rot-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease-in-out;
}
.profile-photo-main .rot-slide.is-active { opacity: 1; }
/* the placeholder sits underneath, so a slide that fails to load reveals it */
.profile-photo-main .rot-slide img { display: block; }

.rot-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 14px 12px;
  background: linear-gradient(180deg, rgba(7,24,50,0) 0%, rgba(7,24,50,.72) 100%);
  color: #fff;
  font-size: .82rem;
  line-height: 1.35;
  pointer-events: none;
}

.rot-pause {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-sm);
  background: rgba(7,24,50,.62);
  color: #fff;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s;
}
.rot-pause:hover { background: rgba(7,24,50,.85); border-color: var(--gold-soft, #e5c67a); }
/* .photo-rotator is only set when there is more than one photo, which is exactly
   when the dots are there to be cleared */
.photo-rotator .rot-caption { padding-bottom: 32px; }

.rot-pause:focus-visible { outline: 3px solid rgba(229,198,122,.7); outline-offset: 2px; }

.rot-dots {
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0;
}
/* The dot you see is 10px; the button around it is 24px so it can be tapped.
   Drawing the dot as ::after is what keeps the two sizes independent. */
.rot-dots button {
  position: relative;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rot-dots button::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background .2s, transform .2s;
}
.rot-dots button[aria-current="true"]::after { background: #fff; transform: scale(1.3); }
.rot-dots button:hover::after { background: rgba(255,255,255,.8); }
.rot-dots button:focus-visible { outline: 2px solid var(--gold-soft, #e5c67a); outline-offset: -2px; border-radius: 50%; }

/* Touch: both controls need a 44px target, which they do not get from the text alone. */
@media (pointer: coarse) {
  .rot-pause { min-height: 44px; padding: 10px 15px; }
  .rot-dots button { width: 34px; height: 40px; }
  .rot-dots button::after { inset: 15px 12px; }
}

.profile-photo-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--gold, #c99732); }

/* Someone who has asked for less motion gets a still photo and a Play button. */
@media (prefers-reduced-motion: reduce) {
  .profile-photo-main .rot-slide { transition: none; }
}

.profile-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.profile-photo-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s;
}
.profile-photo-thumb:hover { opacity: 1; }
.profile-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

.profile-sidebar {
  position: sticky;
  top: 88px;
}

.profile-sponsor-card {
  background: var(--green-dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin-bottom: 20px;
}
.profile-sponsor-card h4 { color: var(--gold-light); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; font-family: var(--font-sans); }
.profile-sponsor-card .amount { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; color: var(--white); }
.profile-sponsor-card .period { font-size: .85rem; color: rgba(255,255,255,.65); }
.profile-sponsor-card p { color: rgba(255,255,255,.75); font-size: .9rem; margin: 12px 0 20px; line-height: 1.6; }
.profile-sponsor-card .btn { width: 100%; justify-content: center; }

.profile-info-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid var(--gray-light);
  margin-bottom: 16px;
}
.profile-info-card h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-mid); margin-bottom: 14px; font-family: var(--font-sans); font-weight: 700; }

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 7px 0;
  font-size: .875rem;
  border-bottom: 1px solid var(--gray-light);
  gap: 12px;
}
.info-row:last-child { border-bottom: none; }
.info-row .key { color: var(--gray-mid); font-weight: 500; flex-shrink: 0; }
.info-row .value { color: var(--charcoal); font-weight: 600; text-align: right; }

.care-updates { margin-top: 36px; }
.care-updates h3 { margin-bottom: 20px; }

.update-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 22px;
  border: 1px solid var(--gray-light);
  margin-bottom: 14px;
  position: relative;
}
.update-card::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: var(--green-light);
  border-radius: 0 3px 3px 0;
}
.update-date { font-size: .78rem; color: var(--gray-mid); margin-bottom: 6px; font-weight: 600; letter-spacing: .03em; }
.update-card h4 { margin-bottom: 8px; font-size: 1rem; }
.update-card p { font-size: .9rem; line-height: 1.65; }

/* --- Donation Page --- */
.giving-levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.giving-level-card {
  background: var(--white);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.giving-level-card:hover {
  border-color: var(--green-mid);
  box-shadow: var(--shadow-md);
}
.giving-level-card.selected {
  border-color: var(--green-dark);
  background: var(--green-pale);
}
.giving-level-card .amount {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--green-dark);
  display: block;
  margin-bottom: 4px;
}
.giving-level-card .desc {
  font-size: .8rem;
  color: var(--gray-mid);
  font-weight: 500;
}

/* --- Transparency Highlight Banner --- */
.highlight-banner {
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--white);
  padding: 40px 48px;
  border-radius: var(--radius-xl);
  display: flex;
  gap: 40px;
  align-items: center;
}
.highlight-banner .icon-block { font-size: 3rem; flex-shrink: 0; }
.highlight-banner h3 { color: var(--white); margin-bottom: 8px; }
.highlight-banner p  { color: rgba(255,255,255,.75); font-size: .95rem; }

@media (max-width: 600px) {
  .highlight-banner { flex-direction: column; gap: 20px; padding: 28px; }
}

/* --- Utility --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.inline-flex { display: inline-flex; }
.w-full { width: 100%; }
.hidden { display: none; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

.divider {
  border: none;
  border-top: 1px solid var(--gray-light);
  margin: 40px 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--gray-light);
  color: var(--charcoal);
}

/* --- Notification Toast --- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--green-dark);
  color: var(--white);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: all .3s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* --- Responsive two-column layouts (used inline in pages) --- */
@media (max-width: 720px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .stall-sponsor-card { padding: 32px 24px; }
  .donation-cta { padding: 40px 24px; }
  [style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--earth-light); border-radius: 3px; }

/* --- Mobile overrides --- */
@media (max-width: 600px) {
  /* Reduce section padding */
  :root { --section-pad: 52px 20px; }

  /* Page hero */
  .page-hero { padding: 48px 20px 44px; }

  /* Filter/tab buttons — compact so they wrap in a row instead of stacking tall */
  #filter-buttons .btn {
    padding: 9px 16px;
    font-size: .82rem;
  }

  /* Donation CTA */
  .donation-cta { padding: 36px 20px; }

  /* Highlight banner */
  .highlight-banner { padding: 24px 20px; }

  /* Form section */
  .form-section { padding: 28px 20px; }

  /* Hero badge — smaller so it fits on one line */
  .hero-badge { font-size: .7rem; padding: 5px 11px; }

  /* Reduce hero stats gap so 4 fit across narrower screens */
  .hero-stats { gap: 16px; margin-top: 32px; }

  /* Horse card footer — stack sponsor info above button on very small screens */
  .horse-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .horse-card-footer .btn { width: 100%; justify-content: center; }
}

/* ============ BRAND ICON SET (assets/icons) ============ */
/* Circular navy icons replacing emoji thumbnails. Sized off the
   container's emoji font-size so they drop into existing icon divs. */
.tft-icon {
  width: 2em;
  height: 2em;
  display: inline-block;
  vertical-align: middle;
}
/* On dark sections the navy linework needs a white plate behind it,
   same rule as the logo on photography. */
.tft-icon--plate {
  background: #fff;
  border-radius: 50%;
}
.highlight-banner .icon-block .tft-icon { width: 1.6em; height: 1.6em; }