@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --forest: #0e2618;
  --pine: #1a3d28;
  --sage: #2d5c3f;
  --fern: #4a8560;
  --gold: #c9952a;
  --amber: #e8a830;
  --cream: #f7f2e8;
  --parchment: #ede7d4;
  --charcoal: #1c1c1c;
  --bark: #6b4f2e;
  --sky: #c8dde8;
  --white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Crimson Pro', Georgia, serif; background: var(--cream); color: var(--charcoal); overflow-x: hidden; }

/* ─── TOPBAR ─── */
.topbar { background: var(--forest); color: var(--amber); font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-align: center; padding: 8px 20px; text-transform: uppercase; }

/* ─── HEADER / NAV ─── */
header { background: var(--forest); position: sticky; top: 0; z-index: 1000; border-bottom: 3px solid var(--gold); }
.header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 0; }

/* Left logo (circle) */
.logo-left { display: flex; align-items: center; text-decoration: none; padding: 8px 0; flex-shrink: 0; transition: transform 0.3s; }
.logo-left:hover { transform: scale(1.05); }
.logo-left img { height: 62px; width: 62px; object-fit: contain; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(201,149,42,0.25); }

/* Center text */
.logo-center { display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 8px 12px; flex-shrink: 0; }
.logo-center .troop { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--white); line-height: 1.1; }
.logo-center .city { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); opacity: 0.9; margin-top: 2px; }

/* Right logo (square) */
.logo-right { display: flex; align-items: center; text-decoration: none; padding: 8px 0; flex-shrink: 0; transition: transform 0.3s; }
.logo-right:hover { transform: scale(1.05); }
.logo-right img { height: 62px; width: 62px; object-fit: contain; border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(201,149,42,0.25); }

nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; list-style: none; align-items: stretch; }
.nav-list > li { position: relative; }
.nav-list > li > a, .nav-list > li > span { display: flex; align-items: center; gap: 5px; padding: 22px 15px; color: var(--cream); text-decoration: none; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, background 0.2s; white-space: nowrap; }
.nav-list > li > a:hover, .nav-list > li > span:hover, .nav-list > li.active > a, .nav-list > li.active > span { color: var(--amber); background: rgba(201,149,42,0.08); }
.nav-list > li > span::after { content: " ▾"; font-size: 10px; }

.dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--pine); min-width: 250px; border-top: 2px solid var(--gold); box-shadow: 0 8px 30px rgba(0,0,0,0.4); z-index: 100; }
.nav-list > li:hover .dropdown { display: block; }
.dropdown a, .dropdown span { display: block; padding: 12px 22px; color: var(--cream); text-decoration: none; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, background 0.2s, padding-left 0.2s; position: relative; }
.dropdown a:hover, .dropdown span:hover { color: var(--amber); background: rgba(255,255,255,0.06); padding-left: 30px; }

.sub-dropdown { display: none; position: absolute; left: 100%; top: 0; background: var(--sage); min-width: 240px; border-top: 2px solid var(--gold); box-shadow: 4px 8px 20px rgba(0,0,0,0.4); z-index: 101; }
.dropdown li:hover .sub-dropdown { display: block; }
.dropdown li { position: relative; list-style: none; }
.dropdown span::after { content: " ›"; float: right; }
.sub-dropdown a { display: block; padding: 11px 20px; color: var(--cream); text-decoration: none; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; transition: all 0.2s; }
.sub-dropdown a:hover { color: var(--amber); background: rgba(255,255,255,0.08); padding-left: 28px; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px; }
.hamburger span { display: block; width: 26px; height: 2px; background: var(--cream); transition: all 0.3s; }

/* ─── HERO (home) ─── */
.hero { position: relative; min-height: 82vh; background: var(--cream); display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 80% 40%, rgba(200,221,232,0.55) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(201,149,42,0.12) 0%, transparent 60%), linear-gradient(170deg, #f7f2e8 0%, #eee8d5 55%, #dff0e0 100%); }
.hero-pattern { position: absolute; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230e2618' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-trees { position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 180L60 120L80 140L120 80L150 110L180 40L210 90L240 60L270 100L300 30L330 80L360 50L390 100L420 20L450 70L480 45L510 90L540 25L570 65L600 40L630 85L660 15L700 60L720 35L750 80L780 20L810 65L840 40L870 90L900 10L930 55L960 30L990 75L1020 20L1050 60L1080 35L1110 80L1140 15L1170 55L1200 30L1230 70L1260 10L1290 55L1320 25L1350 65L1380 40L1440 180Z' fill='%231a3d28' opacity='0.18'/%3E%3Cpath d='M0 180L80 130L110 155L150 100L190 130L230 70L260 105L300 55L330 95L370 45L400 85L440 55L470 95L510 30L550 75L580 50L620 90L660 20L700 65L730 40L770 85L800 15L840 55L870 30L910 75L940 20L980 60L1010 35L1050 80L1080 20L1120 60L1150 30L1190 70L1220 15L1260 55L1290 25L1330 65L1370 40L1440 180Z' fill='%232d5c3f' opacity='0.12'/%3E%3C/svg%3E") bottom/cover no-repeat; }
.hero-line { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(201,149,42,0.15), transparent); }
.hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 80px 40px 140px; text-align: center; }
.hero-badge { display: inline-block; border: 1px solid rgba(14,38,24,0.25); color: var(--sage); font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 6px 18px; margin-bottom: 30px; animation: fadeInDown 0.8s ease both; }
.hero-title { font-family: 'Playfair Display', serif; font-size: clamp(52px, 8vw, 96px); font-weight: 900; color: var(--forest); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 16px; animation: fadeInUp 0.9s 0.1s ease both; }
.hero-title em { font-style: italic; color: var(--gold); }
.hero-subtitle { font-family: 'Playfair Display', serif; font-size: clamp(18px, 2.5vw, 26px); color: var(--sage); font-style: italic; margin-bottom: 40px; animation: fadeInUp 0.9s 0.2s ease both; }
.hero-stats { display: flex; justify-content: center; gap: 50px; margin-bottom: 50px; animation: fadeInUp 0.9s 0.3s ease both; }
.stat { text-align: center; }
.stat-num { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 900; color: var(--gold); line-height: 1; }
.stat-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sage); margin-top: 4px; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 0.9s 0.4s ease both; }

/* ─── PAGE HERO (inner pages) ─── */
.page-hero { background: var(--forest); padding: 70px 30px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,0.015) 20px, rgba(255,255,255,0.015) 21px); }
.page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero-eyebrow { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.page-hero-eyebrow a { color: var(--amber); text-decoration: none; opacity: 0.75; }
.page-hero-eyebrow a:hover { opacity: 1; }
.page-hero-title { font-family: 'Playfair Display', serif; font-size: clamp(38px, 5vw, 64px); font-weight: 900; color: var(--white); line-height: 1.05; }
.page-hero-title em { font-style: italic; color: var(--amber); }
.page-hero-sub { font-size: 18px; color: rgba(247,242,232,0.7); margin-top: 14px; font-style: italic; font-family: 'Playfair Display', serif; }

/* ─── BUTTONS ─── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; transition: all 0.25s; }
.btn-primary { background: var(--gold); color: var(--forest); font-weight: 700; }
.btn-primary:hover { background: var(--amber); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,149,42,0.4); }
.btn-outline { background: transparent; color: var(--forest); border: 1.5px solid rgba(14,38,24,0.35); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: var(--cream); border: 1px solid rgba(247,242,232,0.4); }
.btn-outline-light:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }

/* ─── LAYOUT ─── */
.section { max-width: 1200px; margin: 0 auto; padding: 80px 30px; }
.section-sm { padding: 50px 30px; }
.section-header { margin-bottom: 60px; }
.section-eyebrow { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 700; color: var(--forest); line-height: 1.1; }
.section-title em { font-style: italic; color: var(--sage); }
.section-body { font-size: 19px; line-height: 1.75; color: #333; max-width: 800px; }
.section-body p { margin-bottom: 1.2em; }

/* ─── CARDS ─── */
.card-grid { display: grid; gap: 24px; }
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: var(--white); border: 1px solid rgba(14,38,24,0.1); padding: 32px; position: relative; transition: transform 0.25s, box-shadow 0.25s; text-decoration: none; color: inherit; display: block; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(14,38,24,0.12); }
.card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 0.25s; }
.card:hover::before { transform: scaleY(1); }
.card-icon { font-size: 32px; margin-bottom: 16px; }
.card-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--forest); margin-bottom: 10px; }
.card-body { font-size: 16px; line-height: 1.65; color: #555; }

/* ─── MISC ─── */
.divider { display: flex; align-items: center; gap: 20px; margin: 50px 0; color: var(--gold); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.divider-icon { font-size: 20px; }

.highlight-box { background: var(--forest); color: var(--cream); padding: 50px 60px; position: relative; overflow: hidden; }
.highlight-box::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 100%; background: linear-gradient(to left, rgba(201,149,42,0.1), transparent); }
.highlight-box h3 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--amber); margin-bottom: 14px; }
.highlight-box p { font-size: 17px; line-height: 1.7; color: rgba(247,242,232,0.85); }

.alert-banner { background: linear-gradient(135deg, var(--gold), #a0720d); color: var(--forest); padding: 20px 30px; text-align: center; }
.alert-banner strong { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; display: block; }
.alert-banner p { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 20px 0; }
th { background: var(--forest); color: var(--amber); font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 18px; text-align: left; }
td { padding: 12px 18px; border-bottom: 1px solid rgba(14,38,24,0.08); color: #333; vertical-align: top; }
tr:nth-child(even) td { background: rgba(14,38,24,0.03); }
tr:hover td { background: rgba(201,149,42,0.06); }

.rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; margin: 30px 0; }
.rank-badge { background: var(--white); border: 2px solid rgba(14,38,24,0.1); padding: 20px 16px; text-align: center; transition: all 0.25s; }
.rank-badge:hover { border-color: var(--gold); transform: scale(1.05); }
.rank-icon { font-size: 36px; display: block; margin-bottom: 8px; }
.rank-name { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); }

.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--gold), var(--sage)); }
.timeline-item { position: relative; padding: 0 0 40px 30px; }
.timeline-item::before { content: ''; position: absolute; left: -5px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--forest); }
.timeline-year { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; margin-bottom: 4px; }
.timeline-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--forest); margin-bottom: 8px; }
.timeline-body { font-size: 16px; line-height: 1.65; color: #555; }

.contact-form { background: var(--white); border: 1px solid rgba(14,38,24,0.1); padding: 50px; max-width: 680px; }
.form-group { margin-bottom: 24px; }
.form-label { display: block; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--forest); margin-bottom: 8px; }
.form-input, .form-textarea { width: 100%; padding: 12px 16px; border: 1px solid rgba(14,38,24,0.2); background: var(--cream); font-family: 'Crimson Pro', serif; font-size: 17px; color: var(--charcoal); transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
.form-input:focus, .form-textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,149,42,0.15); }
.form-textarea { min-height: 140px; resize: vertical; }
.form-check { display: flex; align-items: center; gap: 10px; }
.form-check input { width: 16px; height: 16px; accent-color: var(--gold); }
.form-check label { font-size: 15px; color: #555; }

.position-card { background: var(--white); border-left: 4px solid var(--gold); padding: 20px 24px; margin-bottom: 16px; }
.position-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--forest); }
.position-body { font-size: 15px; color: #555; margin-top: 6px; line-height: 1.6; }

.pullquote { border-left: 4px solid var(--gold); padding: 20px 30px; margin: 30px 0; background: rgba(201,149,42,0.05); }
.pullquote p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 22px; color: var(--forest); line-height: 1.5; }
.pullquote cite { display: block; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; margin-top: 10px; }

.stripe-section { background: var(--parchment); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.photo-item { aspect-ratio: 4/3; background: var(--pine); display: flex; align-items: center; justify-content: center; color: rgba(247,242,232,0.4); font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-align: center; padding: 20px; border: 1px solid rgba(255,255,255,0.05); }

.badge-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.badge-tag { background: var(--white); border: 1px solid rgba(14,38,24,0.15); padding: 7px 14px; font-size: 14px; color: var(--forest); transition: all 0.2s; }
.badge-tag:hover { background: var(--forest); color: var(--amber); }

/* ─── FOOTER ─── */
footer { background: var(--forest); color: rgba(247,242,232,0.7); padding: 60px 30px 30px; border-top: 3px solid var(--gold); }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
.footer-brand p { font-size: 15px; line-height: 1.75; margin-top: 12px; }
.footer-nav h4 { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.footer-nav ul { list-style: none; }
.footer-nav ul li { margin-bottom: 8px; }
.footer-nav ul a { color: rgba(247,242,232,0.65); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-nav ul a:hover { color: var(--amber); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-bottom p { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.08em; }

/* ─── ANIMATIONS ─── */
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.animate-in.visible { opacity: 1; transform: translateY(0); }

/* ─── MAP ─── */
.map-frame { overflow: hidden; border: 3px solid var(--gold); margin-top: 20px; }
.map-frame iframe { display: block; width: 100%; border: 0; }
.map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.map-link:hover { color: var(--amber); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) { .nav-list > li > a, .nav-list > li > span { padding: 22px 11px; font-size: 12px; } }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } .hero-stats { gap: 30px; } .logo-center .troop { font-size: 16px; } }
@media (max-width: 700px) {
  nav { display: none; }
  nav.open { display: flex !important; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--forest); z-index: 2000; padding: 80px 30px; overflow-y: auto; }
  nav.open .nav-list { flex-direction: column; }
  nav.open .nav-list > li > a, nav.open .nav-list > li > span { padding: 14px 0; font-size: 14px; }
  nav.open .dropdown { position: static; background: rgba(255,255,255,0.05); display: block !important; padding-left: 20px; }
  nav.open .sub-dropdown { position: static; background: rgba(255,255,255,0.05); display: block !important; padding-left: 16px; }
  .hamburger { display: flex; z-index: 2001; }
  .highlight-box { padding: 30px; }
  .contact-form { padding: 30px 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .logo-left img, .logo-right img { height: 46px; width: 46px; }
  .logo-center .troop { font-size: 15px; }
}