:root{--accent:#5c6946;--accent2:#76825c;--sand:#d8ccb2;
  --bg:#0b0b0c;
  --paper:#f4f2ee;
  --muted:rgba(244,242,238,.72);
  --line:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.06);
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--paper);
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background-image: radial-gradient(800px 420px at 20% -10%, rgba(255,255,255,.08), transparent 55%),
                    radial-gradient(900px 520px at 80% 0%, rgba(255,255,255,.06), transparent 55%),
                    url("../assets/bg-grit.png");
  background-size: auto, auto, cover;
  background-attachment: fixed, fixed, fixed;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1120px;margin:0 auto;padding:0 18px}

.header{
  position:sticky;top:0;z-index:50;
  background: rgba(11,11,12,.82);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brand img{height:236px;max-height:none;}

.nav{display:flex;gap:18px;align-items:center}
.nav a{
  font-size:14px;color:rgba(244,242,238,.78);
  padding:8px 10px;border-radius:999px;
}
.nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(216,204,178,.22);background:rgba(92,105,70,.22);color:rgba(242,240,233,.95);font-weight:800;text-decoration:none;box-shadow:0 18px 55px rgba(0,0,0,.35)}
.btn:hover{border-color:rgba(216,204,178,.35);background:rgba(118,130,92,.28)}
.btn.primary{background:rgba(244,242,238,.90);color:#0b0b0c;border-color:rgba(244,242,238,.35)}
.btn.primary:hover{background:rgba(244,242,238,.96)}

.hamburger{
  display:none;width:44px;height:44px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:rgba(244,242,238,.92);
}
.hamburger:hover{background:rgba(255,255,255,.12)}
.mobile{display:none;border-top:1px solid var(--line);background:rgba(11,11,12,.92)}
.mobile a{display:block;padding:10px 12px;border-radius:12px;color:rgba(244,242,238,.86)}
.mobile a:hover{background:rgba(255,255,255,.10);text-decoration:none}
.mobile-inner{padding:10px 0 14px;display:flex;flex-direction:column;gap:8px}

.hero{padding:46px 0 18px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,238,.75)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(92,105,70,.22)}
h1{margin:10px 0 10px;font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.02em;max-width:22ch}
.lede{margin:0 0 18px;color:var(--muted);max-width:72ch;font-size:17px}

.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding:16px;
}
.grid2{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.section{padding:20px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:10px 0 12px}
.section-head h2{margin:0;font-size:20px}
.section-head p{margin:0;color:rgba(244,242,238,.72);font-size:14px;max-width:70ch}

.card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 14px 50px rgba(0,0,0,.35);
}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0;color:rgba(244,242,238,.78);font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pill{border:1px solid var(--line);background:rgba(255,255,255,.05);padding:4px 10px;border-radius:999px;font-size:12px;color:rgba(244,242,238,.70)}
.divider{
  height:20px;margin:10px 0 0;
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  opacity:.8;
}
.hr{
  height:2px;margin:18px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.topic{display:flex;gap:12px;align-items:center}
.icon{
  width:48px;height:48px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
}
.icon svg{width:26px;height:26px}
.icon img{width:26px;height:26px}

.form input,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(244,242,238,.92);
  outline:none;
  font-size:14px;
}
.form textarea{min-height:130px;resize:vertical}

.footer{padding:26px 0 34px;border-top:1px solid var(--line);color:rgba(244,242,238,.70);font-size:12px;margin-top:16px}
.footer-row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .topic-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .brand img{height:172px;}
  .nav{display:none;}
  .hamburger{display:flex;}
}
.mobile{display:block}
}


/* Topic art */
.topic-art{width:100%;height:auto;border-radius:16px;border:1px solid rgba(216,204,178,.16);box-shadow:0 18px 60px rgba(0,0,0,.35);background:rgba(0,0,0,.35)}
.card.topic{flex-direction:column;align-items:stretch}
.card.topic .topic-row{display:flex;gap:12px;align-items:flex-start}


.section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:900px){.section-grid{grid-template-columns:1fr}}
.section-card{display:grid;grid-template-columns:1fr;gap:10px}
.section-card h3{margin:0;font-size:16px}
.section-card p{margin:0;color:rgba(244,242,238,.78);font-size:14px}


/* === v7 overrides: restore desktop tabs, tighten header, olive accents === */
:root{
  --olive:#5c6946;
  --olive2:#76825c;
  --sand:#d8ccb2;
}
.siteHeader{padding:10px 0 !important;}
.navRow{gap:18px !important; align-items:center !important;}
.brand img{height:236px !important; max-height:none !important;}
/* desktop nav visible */
.navLinks{display:flex !important; gap:18px; align-items:center;}
.menuBtn{display:none !important;}
/* Mobile: hamburger only */
@media (max-width:860px){
  .brand img{height:172px !important;}
  .navLinks{display:none !important;}
  .menuBtn{display:inline-flex !important;}
}
/* Topic cards: photo + olive label feel */
.topicsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
@media (max-width:980px){
  .topicsGrid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:620px){
  .topicsGrid{grid-template-columns:1fr;}
}
.topicCard{
  display:block;
  border:1px solid rgba(216,204,178,.16);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  background:rgba(0,0,0,.28);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.topicImg{
  height:210px;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
}
.topicMeta{
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(92,105,70,.18), rgba(0,0,0,.35));
}
.topicTitle{
  color:rgba(242,240,233,.98);
  font-weight:900;
  letter-spacing:.02em;
}
.topicSub{color:rgba(242,240,233,.72); font-size:.95rem;}
.topicCard:hover{border-color:rgba(118,130,92,.55); transform:translateY(-1px);}


/* === v8 overrides: desktop vs mobile header, image sizing, new header feel === */
.siteHeader{
  padding:8px 0 !important;
  background: radial-gradient(1200px 220px at 50% 0%, rgba(92,105,70,.22), rgba(0,0,0,0)) !important;
}
.navRow{align-items:center !important; gap:18px !important;}
/* Keep logo size but reduce vertical whitespace */
.brand{display:flex; align-items:center;}
.brand img{height:236px !important; max-height:none !important; display:block;}
/* Desktop nav visible */
.navLinks{display:flex !important; gap:18px; align-items:center;}
.navLinks a{
  text-transform:none;
  letter-spacing:.02em;
  color:rgba(242,240,233,.90);
  padding:8px 10px;
  border-radius:10px;
}
.navLinks a:hover{background:rgba(92,105,70,.18); color:rgba(242,240,233,.98);}
.navLinks a.active{color:var(--sand); background:rgba(92,105,70,.16);}
/* Hamburger only on mobile */
.menuBtn{display:none !important;}
@media (max-width:860px){
  .brand img{height:172px !important;}
  .navLinks{display:none !important;}
  .menuBtn{display:inline-flex !important;}
}
/* Topic grid sizing: stop oversized images */
.topicsGrid9{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.topicImg{
  height:180px !important;
  background-size:cover;
  background-position:center;
}
@media (max-width:980px){
  .topicsGrid9{grid-template-columns:repeat(2, minmax(0,1fr));}
  .topicImg{height:160px !important;}
}
@media (max-width:620px){
  .topicsGrid9{grid-template-columns:1fr;}
  .topicImg{height:140px !important;}
}
/* Olive label bar like the concept */
.topicLabel{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65));
}
.topicLabel span{
  display:inline-block;
  background:rgba(92,105,70,.35);
  border:1px solid rgba(216,204,178,.18);
  padding:6px 10px;
  border-radius:10px;
  color:rgba(242,240,233,.96);
  font-weight:900;
  letter-spacing:.02em;
}
.topicCard{position:relative;}


/* === v9 HARD FIXES: force desktop tabs + correct image proportions === */
.siteHeader{padding:6px 0 !important;}
.navRow{display:flex !important; align-items:center !important; justify-content:space-between !important; gap:18px !important;}
/* Desktop: ALWAYS show tabs, NEVER show hamburger */
@media (min-width:861px){
  .navLinks{display:flex !important; align-items:center !important; gap:16px !important; flex-wrap:nowrap !important;}
  .menuBtn{display:none !important;}
  .mobileMenu{display:none !important;}
}
/* Mobile: hamburger only */
@media (max-width:860px){
  .navLinks{display:none !important;}
  .menuBtn{display:inline-flex !important;}
}
/* Prevent logo from pushing nav offscreen */
.brand{min-width:0 !important;}
.brand img{height:236px !important; width:auto !important;}
/* Topic images: consistent sizing across devices */
.topicCard{position:relative !important; overflow:hidden !important;}
.topicImg{
  height:150px !important;
  background-size:cover !important;
  background-position:center !important;
}
.topicImg img{max-width:100% !important; height:auto !important; display:block !important;}
@media (max-width:980px){
  .topicImg{height:135px !important;}
}
@media (max-width:620px){
  .topicImg{height:120px !important;}
}
/* Ensure grids don't blow up */
.topicsGrid, .topicsGrid9{
  width:100% !important;
  max-width:100% !important;
}

@media (min-width:861px){.nav{display:flex !important;} .hamburger{display:none !important;} .mobile{display:none !important;}}

/* v10: topic image sizing fixes */
.topicImg{height:160px !important;background-size:cover !important;background-position:center !important;}
@media (max-width:980px){.topicImg{height:145px !important;}}
@media (max-width:620px){.topicImg{height:130px !important;}}

/* === v12: photo-first topics + merch page === */
.heroPhoto{position:relative; min-height:260px; background-size:cover; background-position:center; border-bottom:1px solid rgba(216,204,178,.14);}
.heroOverlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.74));}
.heroTitle{position:relative; margin:0; padding:34px 0 6px; font-size:2.2rem; letter-spacing:.02em;}
.heroKicker{position:relative; margin:0 0 20px; color:rgba(242,240,233,.78);}
@media (max-width:860px){ .heroPhoto{min-height:220px;} .heroTitle{font-size:1.9rem;} }

/* Topic grid */
.topicsGrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;}
@media (max-width:980px){ .topicsGrid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:620px){ .topicsGrid{grid-template-columns:1fr;} }

.topicCard{border:1px solid rgba(216,204,178,.14); border-radius:16px; overflow:hidden; background:rgba(0,0,0,.22); text-decoration:none; box-shadow:0 18px 60px rgba(0,0,0,.35);}
.topicImg{height:170px; background-size:cover; background-position:center; filter:saturate(1.02) contrast(1.05);}
@media (max-width:980px){ .topicImg{height:160px;} }
@media (max-width:620px){ .topicImg{height:135px;} }

.topicMeta{padding:12px 14px; background:linear-gradient(180deg, rgba(92,105,70,.18), rgba(0,0,0,.35));}
.topicTitle{color:rgba(242,240,233,.98); font-weight:900; letter-spacing:.02em;}
.topicSub{color:rgba(242,240,233,.70); font-size:.95rem; margin-top:4px;}

/* Merch grid */
.merchGrid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:14px;}
@media (max-width:980px){ .merchGrid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:620px){ .merchGrid{grid-template-columns:1fr;} }
.merchItem{border:1px solid rgba(216,204,178,.14); border-radius:16px; overflow:hidden; background:rgba(0,0,0,.18); padding:12px;}
.merchThumb {
  width: 100%;
}

.merchThumb img {
  width: 100%;
  height: auto;     /* 🔑 image keeps its natural ratio */
  display: block;
  object-fit: contain;
}
.merchName{margin-top:10px; font-weight:900; color:rgba(242,240,233,.96);}
.merchMeta{color:rgba(242,240,233,.70); font-size:.92rem; margin-top:4px; margin-bottom:10px;}
.noteBox{margin-top:16px; padding:12px 14px; border-radius:14px; border:1px solid rgba(118,130,92,.35); background:rgba(92,105,70,.12); color:rgba(242,240,233,.86);}

.buildTag{color:rgba(242,240,233,.55); font-size:.85rem; margin-left:6px;}

/* === v14 FINAL OVERRIDES: fix oversized graphics + tighten header (authoritative) === */
.siteHeader{padding:6px 0 !important;}
.navRow{gap:16px !important;}
/* Desktop tabs visible, hamburger hidden */
@media (min-width:861px){ .navLinks{display:flex !important;} .menuBtn{display:none !important;} }
@media (max-width:860px){ .navLinks{display:none !important;} .menuBtn{display:inline-flex !important;} }

/* Topic cards: consistent sizes */
.topicImg{height:160px !important; background-size:cover !important; background-position:center !important;}
@media (max-width:980px){ .topicImg{height:145px !important;} }
@media (max-width:620px){ .topicImg{height:125px !important;} }

/* Topic pages: prevent any images from exploding */
main img{max-width:100% !important; height:auto !important;}
.heroPhoto{min-height:240px !important;}
@media (max-width:620px){ .heroPhoto{min-height:210px !important;} }

/* Grid breathing room */
.section{padding:22px 0 !important;}

/* === v15 fixes === */
.buildTag{color:rgba(242,240,233,.55); font-size:.85rem; margin-left:6px;}

/* Featured Topics should use approved images and sane sizing */
.topicsGridFeatured{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
@media (max-width:980px){ .topicsGridFeatured{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:620px){ .topicsGridFeatured{grid-template-columns:1fr;} }

/* Prevent any topic grids from collapsing to a skinny right column */
.topicsGrid, .topicsGridFeatured, .pfGrid, .pf-grid, .patternGrid, .pattern-grid{
  width:100% !important;
  max-width:100% !important;
}
.topicsGrid > *, .topicsGridFeatured > *, .pfGrid > *, .pf-grid > *, .patternGrid > *, .pattern-grid > *{
  min-width:0 !important;
}

/* Hard reset any float/column rules that cause the '1/3 width right' squeeze */
.pfGrid, .pf-grid, .patternGrid, .pattern-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  float:none !important;
}
@media (max-width:980px){ .pfGrid, .pf-grid, .patternGrid, .pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }
@media (max-width:620px){ .pfGrid, .pf-grid, .patternGrid, .pattern-grid{grid-template-columns:1fr !important;} }

/* Ensure cards never shrink to tiny widths */
.topicCard, .pfItem, .patternItem{width:100% !important;}

/* Keep images proportionate everywhere */
.topicImg{height:160px !important;}
@media (max-width:980px){ .topicImg{height:145px !important;} }
@media (max-width:620px){ .topicImg{height:125px !important;} }

/* Hamburger button: bigger icon centered, no tiny top-left glyph */
.menuBtn{
  width:46px !important;
  height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:26px !important;
  line-height:1 !important;
  padding:0 !important;
}
.menuBtn::before, .menuBtn::after{display:none !important;}

/* === v16 patch === */
.footerLinks{display:flex; gap:14px; align-items:center;}
.footerLinks a{color:rgba(242,240,233,.72); text-decoration:none;}
.footerLinks a:hover{color:rgba(242,240,233,.92); text-decoration:underline;}
.buildTag{color:rgba(242,240,233,.55); font-size:.85rem; margin-left:6px;}
.menuBtn{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:28px !important;
  line-height:1 !important;
  padding:0 !important;
}

/* === v17: universal gritty header + working hamburger on mobile only === */
.siteHeader{
  background-image:
    linear-gradient(180deg, rgba(92,105,70,.16), rgba(0,0,0,0)),
    url('../assets/header-grit.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  border-bottom:1px solid rgba(216,204,178,.14) !important;
}

/* Desktop vs Mobile nav behavior (authoritative) */
@media (min-width:861px){
  .navLinks{display:flex !important;}
  .menuBtn{display:none !important;}
  .mobileMenu{display:none !important;}
}
@media (max-width:860px){
  .navLinks{display:none !important;}
  .menuBtn{display:inline-flex !important;}
}

/* Hamburger button look: centered icon, consistent box */
.menuBtn{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:30px !important;
  line-height:1 !important;
  padding:0 !important;
  border:1px solid rgba(216,204,178,.20) !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}
.menuBtn:active{transform:translateY(1px);}

/* === v18: FIXED headers + working hamburger across all pages === */

/* Universal gritty header treatment (works for both header styles) */
header.header, header.siteHeader{
  position:relative;
  border-bottom:1px solid rgba(216,204,178,.14) !important;
}
header.header::before, header.siteHeader::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('../assets/header-grit.png');
  background-size:cover;
  background-position:center top;
  opacity:.32;              /* lighter grit */
  pointer-events:none;
  mix-blend-mode:overlay;
}
header.header::after, header.siteHeader::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(92,105,70,.18), rgba(0,0,0,0));
  pointer-events:none;
}
header.header > *, header.siteHeader > *{position:relative; z-index:1;}

/* Desktop vs Mobile nav behavior for BOTH header systems */
@media (min-width:861px){
  .hamburger, .menuBtn{display:none !important;}
  nav.nav, nav.navLinks{display:flex !important;}
  #mobileMenu, .mobileMenu{display:none !important;}
}
@media (max-width:860px){
  nav.nav, nav.navLinks{display:none !important;}
  .hamburger, .menuBtn{display:inline-flex !important;}
}

/* Hamburger button styling (both variants) */
.hamburger, .menuBtn{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:30px !important;
  line-height:1 !important;
  padding:0 !important;
  border:1px solid rgba(216,204,178,.22) !important;
  background:rgba(0,0,0,.26) !important;
  color:rgba(242,240,233,.92) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28) !important;
}

/* === v19: header speckles unified + mobile menu open class === */

/* Kill any previous pseudo-grit to prevent double/triple */
header.header::before, header.header::after,
header.siteHeader::before, header.siteHeader::after{
  content:none !important;
}

/* Apply ONE consistent gritty header background to all pages */
header.header, header.siteHeader{
  background-image:
    linear-gradient(180deg, rgba(92,105,70,.22), rgba(0,0,0,0)),
    url('../assets/header-grit.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat:no-repeat !important;
}

/* Mobile menu: allow JS to open via .open */
#mobileMenu, .mobileMenu{
  display:none;
}
#mobileMenu.open, .mobileMenu.open{
  display:block !important;
}

/* Make sure menus render above content */
#mobileMenu, .mobileMenu{
  position:absolute;
  right:16px;
  top:64px;
  z-index:9999;
  min-width:220px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(216,204,178,.18);
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Make links big/tappable */
#mobileMenu a, .mobileMenu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
}
#mobileMenu a:hover, .mobileMenu a:hover{
  background: rgba(92,105,70,.18);
}

/* Ensure hamburger visible on mobile, hidden on desktop (both systems) */
@media (min-width:861px){
  .hamburger, .menuBtn{display:none !important;}
  nav.nav, nav.navLinks{display:flex !important;}
  #mobileMenu, .mobileMenu{display:none !important;}
}
@media (max-width:860px){
  nav.nav, nav.navLinks{display:none !important;}
  .hamburger, .menuBtn{display:inline-flex !important;}
}

/* Button visuals */
.hamburger, .menuBtn{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:30px !important;
  line-height:1 !important;
  padding:0 !important;
}

/* === v20: desktop hamburger OFF + lighter header grit (match body) === */

/* Apply ONE consistent header background using lighter grit */
header.header, header.siteHeader{
  position:relative !important;
  background-image:
    linear-gradient(180deg, rgba(92,105,70,.18), rgba(0,0,0,0)),
    url('../assets/header-grit-light.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat:no-repeat !important;
}

/* Default: hide hamburger everywhere; enable only on mobile */
.hamburger, .menuBtn{display:none !important;}
@media (max-width:860px){
  .hamburger, .menuBtn{display:inline-flex !important;}
  nav.nav, nav.navLinks{display:none !important;}
}
@media (min-width:861px){
  nav.nav, nav.navLinks{display:flex !important;}
  #mobileMenu, .mobileMenu{display:none !important;}
}

/* Ensure menu button clickable and above overlays */
.hamburger, .menuBtn{position:relative !important; z-index:10001 !important;}

/* Keep mobile menu positioning consistent */
#mobileMenu, .mobileMenu{z-index:10000 !important;}

/* === v21: Header grit matches body + no desktop hamburger === */

/* Headers: use the same grit texture as body, with subtle scanlines */
header.header, header.siteHeader{
  background-image:
    linear-gradient(180deg, rgba(92,105,70,.16), rgba(0,0,0,0)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 8px),
    url("../assets/bg-grit.png") !important;
  background-size: auto, auto, cover !important;
  background-position: center top, center top, center top !important;
  background-repeat: repeat, repeat, no-repeat !important;
}

/* Disable any old header-grit overlays (prevents double/triple on merch) */
header.header::before, header.header::after,
header.siteHeader::before, header.siteHeader::after{
  content:none !important;
}

/* Hamburger: OFF by default, ON only on mobile */
.hamburger, .menuBtn{display:none !important;}
@media (max-width:860px){
  .hamburger, .menuBtn{display:inline-flex !important;}
  nav.nav, nav.navLinks{display:none !important;}
}
@media (min-width:861px){
  nav.nav, nav.navLinks{display:flex !important;}
  #mobileMenu, .mobileMenu{display:none !important;}
}

/* === v22: NO speckle textures (header + body). Keep header horizontal lines only. === */

/* Turn off any grit textures / speckles everywhere */
body{
  background-image:
    radial-gradient(1200px 700px at 18% 12%, rgba(92,105,70,.10), rgba(0,0,0,0)),
    radial-gradient(900px 520px at 78% 20%, rgba(216,204,178,.06), rgba(0,0,0,0)) !important;
  background-color:#090b0f !important;
  background-repeat:no-repeat !important;
  background-size: cover !important;
}
body::before, body::after{content:none !important;}

/* Headers: remove speckles; keep olive tint + subtle horizontal lines */
header.header, header.siteHeader{
  background-image:
    linear-gradient(180deg, rgba(92,105,70,.16), rgba(0,0,0,0)),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.045) 1px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 10px
    ) !important;
  background-size:auto !important;
  background-position:center top !important;
  background-repeat:repeat !important;
}
header.header::before, header.header::after,
header.siteHeader::before, header.siteHeader::after{
  content:none !important;
}

/* Mobile menu mechanics (both systems): closed by default, open via .open */
#mobileMenu, .mobileMenu{display:none;}
#mobileMenu.open, .mobileMenu.open{display:block !important;}

/* Hamburger: OFF by default, ON only on mobile */
.hamburger, .menuBtn{display:none !important;}
@media (max-width:860px){
  .hamburger, .menuBtn{display:inline-flex !important;}
  nav.nav, nav.navLinks{display:none !important;}
}
@media (min-width:861px){
  nav.nav, nav.navLinks{display:flex !important;}
  #mobileMenu, .mobileMenu{display:none !important;}
}

/* Keep hamburger clickable above everything */
.hamburger, .menuBtn{position:relative !important; z-index:10001 !important;}
#mobileMenu, .mobileMenu{z-index:10000 !important;}

/* === v23: turn OFF all grit everywhere; keep header horizontal lines only === */

/* Remove any texture images on body/sections/cards */
body, .card, .panel, .premise, .showFormat, .brandLine, .block, .tile, .box{
  background-image:none !important;
}

/* Body: clean dark with subtle vignettes only */
body{
  background-color:#090b0f !important;
  background-image:
    radial-gradient(1200px 700px at 18% 12%, rgba(92,105,70,.10), rgba(0,0,0,0)),
    radial-gradient(900px 520px at 78% 20%, rgba(216,204,178,.06), rgba(0,0,0,0)) !important;
}

/* Header: only horizontal lines + olive tint (no speckle) */
header.header, header.siteHeader{
  background-image:
    linear-gradient(180deg, rgba(92,105,70,.16), rgba(0,0,0,0)),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.045) 1px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 10px
    ) !important;
}

/* Topics page desktop: force ALL grids full width and 3-up; prevent right-squeeze */
.topicsGrid, .topicsGridFeatured, .pfGrid, #sectionsGrid, #patternsGrid, .specificSectionsGrid{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  float:none !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:14px !important;
}
@media (max-width:980px){
  .topicsGrid, .topicsGridFeatured, .pfGrid, #sectionsGrid, #patternsGrid, .specificSectionsGrid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:620px){
  .topicsGrid, .topicsGridFeatured, .pfGrid, #sectionsGrid, #patternsGrid, .specificSectionsGrid{
    grid-template-columns:1fr !important;
  }
}

/* Ensure children don't have fixed widths that cause squeeze */
.topicsGrid > *, #sectionsGrid > *, #patternsGrid > *, .pfGrid > *{
  width:100% !important;
  max-width:100% !important;
}

/* Mobile menu reliability: open class */
#mobileMenu, .mobileMenu{display:none;}
#mobileMenu.open, .mobileMenu.open{display:block !important;}
/* === v24 FIXES: Mobile menu works everywhere + Topics grid + no speckles === */

/* Ensure no texture images anywhere */
body, .card, .panel, .box, .block, .tile, .premise, .showFormat, .brandLine{
  background-image:none !important;
}

/* Body background: clean */
body{
  background-color:#090b0f !important;
  background-image:
    radial-gradient(1200px 700px at 18% 12%, rgba(92,105,70,.10), rgba(0,0,0,0)),
    radial-gradient(900px 520px at 78% 20%, rgba(216,204,178,.06), rgba(0,0,0,0)) !important;
}

/* Header: olive + horizontal lines only */
header.header, header.siteHeader{
  background-image:
    linear-gradient(180deg, rgba(92,105,70,.16), rgba(0,0,0,0)),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.045) 1px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 10px
    ) !important;
  background-repeat:repeat !important;
}

/* Mobile menu base */
#mobileMenu, .mobileMenu{
  display:none;
  position:absolute;
  right:16px;
  top:64px;
  z-index:10000;
  min-width:220px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(216,204,178,.18);
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
#mobileMenu.open, .mobileMenu.open{display:block !important;}
#mobileMenu a, .mobileMenu a{display:block; padding:10px 12px; border-radius:10px;}
#mobileMenu a:hover, .mobileMenu a:hover{background: rgba(92,105,70,.18);}

/* Hamburger visible on mobile only */
.hamburger, .menuBtn{display:none !important;}
@media (max-width:860px){
  .hamburger, .menuBtn{display:inline-flex !important;}
  nav.nav, nav.navLinks{display:none !important;}
}
@media (min-width:861px){
  nav.nav, nav.navLinks{display:flex !important;}
  #mobileMenu, .mobileMenu{display:none !important;}
}
.hamburger, .menuBtn{
  width:48px; height:48px; border-radius:12px;
  align-items:center; justify-content:center;
  font-size:30px; line-height:1; padding:0;
  border:1px solid rgba(216,204,178,.22);
  background:rgba(0,0,0,.26);
  color:rgba(242,240,233,.92);
  position:relative; z-index:10001;
}

/* TOPICS: Fix 'Specific sections' grid pushing right */
.section-grid{
  width:100% !important;
  max-width:100% !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  float:none !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;
  justify-content:stretch !important;
  align-items:stretch !important;
}
.section-grid .section-card{width:100% !important; max-width:100% !important;}
@media (max-width:980px){
  .section-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}
@media (max-width:620px){
  .section-grid{grid-template-columns:1fr !important;}
}

/* === v25: Topics page - ensure Specific sections spans full width (fix right-push) === */
.topic-grid > .hr,
.topic-grid > .section-head,
.topic-grid > .section-grid{
  grid-column: 1 / -1 !important;
  width:100% !important;
}

/* Specific sections grid columns */
.section-grid{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}
@media (max-width:980px){
  .section-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
}
@media (max-width:620px){
  .section-grid{grid-template-columns:1fr !important;}
}
/* Reduce hero vertical weight — remove "double header" feel */
.hero{
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.hero h1{
  margin-top: 6px;
}
header.header,
header.siteHeader,
.siteHeader {
  /* your header size changes go here */
}
/* HEADER: reduce vertical padding but keep logo size */
header.header,
header.siteHeader,
.siteHeader{
  padding: 10px 0 !important;  /* was 8px — this gives breathing room */
}

/* Remove extra inner padding that creates the big buffer */
.header-inner,
.navRow{
  padding: 0 !important;
  min-height: 0 !important;
}

/* Restore logo size (big), without re-inflating the header */
.brand img{
  max-height: 78px !important;   /* try 68–78px depending on taste */
  height: auto !important;
  width: auto !important;
}
@media (max-width: 860px){
  header.header,
  header.siteHeader,
  .siteHeader{
    padding: 6px 0 !important;
  }
  .brand img{
    max-height: 140px !important;
  }
}
/* HEADER LOGO — large, without growing header */
.brand img{
  max-height: 156px !important;   /* doubles the previous size */
  height: auto !important;
  width: auto !important;
}
@media (max-width: 860px){
  .brand img{
    max-height: 96px !important;
  }
}
/* ===== HEADER FINAL LOCK: big logo, tight header (no buffer creep) ===== */

/* Tighten the outer header padding */
header.header,
header.siteHeader,
.siteHeader{
  padding: 6px 0 !important;           /* tighter than before */
}

/* Force header row to be a tight flex line */
header.header .header-inner,
header.siteHeader .navRow,
.siteHeader .navRow,
.navRow,
.header-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;             /* kills "buffer creep" */
  height: 84px !important;              /* locks header height */
}

/* Make the logo big, but controlled */
.brand{
  display:flex !important;
  align-items:center !important;
  gap: 12px;
}
.brand img{
  height: 76px !important;              /* set real height (stable) */
  width: auto !important;
  max-height: none !important;          /* remove caps */
  display:block !important;             /* removes baseline whitespace */
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent nav text from increasing header height */
nav.nav a,
nav.navLinks a{
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Mobile: slightly smaller locked header + logo */
@media (max-width: 860px){
  header.header .header-inner,
  header.siteHeader .navRow,
  .siteHeader .navRow,
  .navRow,
  .header-inner{
    height: 72px !important;
  }
  .brand img{
    height: 84px !important;
  }
}
/* ===== BIG LOGO / SMALL HEADER (Option A) ===== */

/* Keep header tight but allow logo to overflow */
header.header,
header.siteHeader,
.siteHeader{
  padding: 6px 0 !important;
  overflow: visible !important;
}

/* Lock header row height */
header.header .header-inner,
header.siteHeader .navRow,
.siteHeader .navRow,
.navRow,
.header-inner{
  height: 84px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Make logo 2–3x taller than header */
.brand{
  position: relative !important;
  z-index: 10002 !important;
  display: flex !important;
  align-items: center !important;
}

.brand img{
  height: 200px !important;     /* BIG: change to 180/220/240 as desired */
  width: auto !important;
  max-height: none !important;
  display: block !important;
}

/* Shift nav to the right so it doesn't collide with the oversized logo */
nav.nav,
nav.navLinks{
  margin-left: 240px !important;  /* adjust if needed */
}

/* Mobile: big but controlled */
@media (max-width: 860px){
  header.header .header-inner,
  header.siteHeader .navRow,
  .siteHeader .navRow,
  .navRow,
  .header-inner{
    height: 72px !important;
  }

  .brand img{
    height: 150px !important;
  }

  nav.nav,
  nav.navLinks{
    margin-left: 0 !important;   /* nav hidden on mobile anyway */
  }
}
/* ===== HEADER LAYOUT FIX ===== */

.header {
  height: 84px;
  padding: 0;
}

.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
}

/* BRAND / LOGO */
.brand {
  display: flex;
  align-items: center;
  height: 100%;
}

.brand img {
  height: 170px;          /* BIG logo */
  width: auto;
  max-height: none;
  transform: translateY(6px); /* optical vertical centering */
}

/* NAV */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  white-space: nowrap;   /* prevents wrapping */
}

.nav a {
  font-size: 14px;
  letter-spacing: .04em;
}
/* ===== Apply same header layout to Merch header variant ===== */

/* If Merch uses .siteHeader / .navRow instead of .header / .header-inner */
.siteHeader {
  height: 84px;
  padding: 0;
}

.siteHeader .navRow {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
}

/* Brand/logo inside siteHeader */
.siteHeader .brand {
  display: flex;
  align-items: center;
  height: 100%;
}

.siteHeader .brand img {
  height: 170px;
  width: auto;
  max-height: none;
  transform: translateY(6px);
}

/* Nav inside siteHeader */
.siteHeader nav,
.siteHeader .navLinks,
.siteHeader .nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  white-space: nowrap;
}
/* =========================
   MOBILE HEADER FIX
   ========================= */
@media (max-width: 768px) {

  header.header,
  .siteHeader {
    height: 72px;           /* compact but usable */
    padding: 0 14px;
  }

  .header-inner,
  .navRow {
    height: 100%;
    display: flex;
    align-items: center;    /* vertical centering */
    justify-content: space-between;
  }

  /* Logo */
  .brand {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .brand img {
    height: 52px;           /* visually ~2x current mobile size */
    width: auto;
    max-height: none;
    transform: translateY(2px); /* micro optical centering */
  }

  /* Hide desktop nav */
  nav.nav {
    display: none;
  }

  /* Hamburger button */
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 26px;        /* bigger icon */
    line-height: 1;
    margin: 0;
    padding: 0;
  }

  /* Mobile menu dropdown */
  #mobileMenu {
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background: #0e0f0f;
    z-index: 1000;
  }

  #mobileMenu a {
    display: block;
    padding: 14px 18px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
}
/* =========================
   MOBILE HEADER FIX (ALL PAGES)
   ========================= */
@media (max-width: 768px){

  /* Header containers (cover both templates) */
  header.header,
  header.siteHeader,
  .header,
  .siteHeader{
    height: 72px !important;
    padding: 0 14px !important;
    overflow: visible !important;
  }

  /* Header row (cover both templates + any wrapper variations) */
  header.header .header-inner,
  .header .header-inner,
  header.siteHeader .navRow,
  .siteHeader .navRow,
  .navRow,
  .header-inner{
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Logo */
  header.header .brand,
  .header .brand,
  header.siteHeader .brand,
  .siteHeader .brand,
  .brand{
    height: 72px !important;
    display:flex !important;
    align-items:center !important;
  }

  header.header .brand img,
  .header .brand img,
  header.siteHeader .brand img,
  .siteHeader .brand img,
  .brand img{
    height: 56px !important;      /* adjust 52–64 if you want */
    width: auto !important;
    max-height: none !important;
    display: block !important;
    transform: translateY(2px) !important;
  }

  /* Hide desktop nav (some pages use .nav, others use .navLinks) */
  nav.nav,
  nav.navLinks,
  .nav,
  .navLinks{
    display: none !important;
  }

  /* Hamburger */
  .hamburger{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile menu dropdown */
  #mobileMenu{
    position: absolute !important;
    top: 72px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
  }
}
/* =========================
   LOGO SIZE — HARD LOCK
   ========================= */

/* Desktop + Mobile */
.header .brand img,
.siteHeader .brand img,
.brand img{
  height: 64px !important;     /* ← START HERE */
  width: auto !important;
  max-height: none !important;
  min-height: 160px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* If you want BIGGER (you said 2x–3x): try one of these */
/*
height: 72px !important;
height: 80px !important;
*/
}
/* MOBILE ONLY: center hamburger, nudge ONLY the logo vertically */
@media (max-width: 860px){

  /* Keep hamburger centered by centering the row */
  header.header .header-inner,
  .header .header-inner,
  header.siteHeader .navRow,
  .siteHeader .navRow{
    display: flex !important;
    align-items: center !important;
  }

  /* Do NOT change the img (it may be locked); move the brand container instead */
  header.header .brand,
  .header .brand,
  header.siteHeader .brand,
  .siteHeader .brand{
    position: relative !important;
    top: 20px !important;   /* <-- adjust this number */
  }

  /* Force hamburger to be centered and not affected */
  .hamburger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* MOBILE ONLY: move the LOGO IMAGE vertically without affecting hamburger */
@media (max-width: 860px){

  /* Keep hamburger centered */
  header.header .header-inner,
  header.siteHeader .navRow,
  .header-inner,
  .navRow{
    align-items: center !important;
  }

  /* Remove baseline whitespace that can make the logo look off-center */
  .brand{ line-height: 0 !important; }

  /* Move the actual image */
  header.header .brand img,
  header.siteHeader .brand img,
  .brand img{
    display: block !important;
    transform: translateY(12px) !important;  /* <-- adjust 8px–18px */
  }
}
/* MOBILE ONLY: nudge logo left */
@media (max-width: 860px){

  header.header .brand,
  header.siteHeader .brand,
  .brand{
    margin-left: -40px !important;   /* adjust -8px to -20px */
  }
}
/* DESKTOP NAV FONT — match Merch page */
@media (min-width: 861px){
  /* cover both nav variants used across pages */
  nav.nav a,
  nav.navLinks a,
  .nav a,
  .navLinks a,
  header.header nav a,
  header.siteHeader nav a{
    font-size: 16px !important;   /* <-- set to Merch size */
    line-height: 1 !important;
  }
}
/* =========================
   Contact / Briefing Form
   ========================= */

.formCard{
  padding:22px;
}

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  align-items:start;
}

.formRow{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.formLabel{
  font-size:.95rem;
  color: rgba(231,237,245,.75);
  font-weight:600;
}

.formInput,
.formTextarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(231,237,245,.18);
  background: rgba(15,22,32,.55);
  color: rgba(231,237,245,.92);
  outline:none;
}

.formInput::placeholder,
.formTextarea::placeholder{
  color: rgba(231,237,245,.45);
}

.formInput:focus,
.formTextarea:focus{
  border-color:#3fa9f5;
  box-shadow: 0 0 0 3px rgba(63,169,245,.18);
}

.formTextarea{
  min-height:120px;
  resize:vertical;
}

.formActions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

.formBtn{
  padding:11px 16px;
  border-radius:12px;
  border:1px solid rgba(63,169,245,.55);
  background: rgba(63,169,245,.12);
  color: rgba(231,237,245,.92);
  font-weight:700;
  cursor:pointer;
}

.formBtn:hover{
  border-color:#3fa9f5;
  background: rgba(63,169,245,.18);
}

/* Responsive */
@media (max-width: 920px){
  .formGrid{ grid-template-columns:1fr; }
}
/* ===== Contact Form (Production UI) ===== */
.formCard{ padding:22px; }

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  align-items:start;
}

.formRow{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.formLabel{
  font-size:.95rem;
  font-weight:700;
  color: rgba(231,237,245,.80);
}

.formInput,
.formTextarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(231,237,245,.18);
  background: rgba(15,22,32,.55);
  color: rgba(231,237,245,.92);
  outline:none;
}

.formInput::placeholder,
.formTextarea::placeholder{
  color: rgba(231,237,245,.45);
}

.formInput:focus,
.formTextarea:focus{
  border-color:#3fa9f5;
  box-shadow: 0 0 0 3px rgba(63,169,245,.18);
}

.formTextarea{
  min-height:140px;
  resize:vertical;
}

/* Align button like your merch CTA style */
.formActions{
  display:flex;
  justify-content:flex-start;
  margin-top:12px;
}

/* If your site already has a button class you like, use it instead of .formBtn */
.formBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(231,237,245,.18);
  background: rgba(231,237,245,.06);
  color: rgba(231,237,245,.92);
  font-weight:800;
  cursor:pointer;
}

.formBtn:hover{
  border-color: rgba(231,237,245,.30);
  background: rgba(231,237,245,.09);
}

/* Mobile */
@media (max-width: 920px){
  .formGrid{ grid-template-columns:1fr; }
}
/* ===== Contact Form UI ===== */
.formCard{ padding:22px; }

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  align-items:start;
}

.formRow{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.formLabel{
  font-size:.95rem;
  font-weight:700;
  color: rgba(231,237,245,.80);
}

.formInput,
.formTextarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(231,237,245,.18);
  background: rgba(15,22,32,.55);
  color: rgba(231,237,245,.92);
  outline:none;
}

.formInput::placeholder,
.formTextarea::placeholder{
  color: rgba(231,237,245,.45);
}

.formInput:focus,
.formTextarea:focus{
  border-color:#3fa9f5;
  box-shadow: 0 0 0 3px rgba(63,169,245,.18);
}

.formTextarea{
  min-height:140px;
  resize:vertical;
}

.formActions{
  display:flex;
  justify-content:flex-start;
  margin-top:12px;
}

/* Mobile */
@media (max-width: 920px){
  .formGrid{ grid-template-columns:1fr; }
}
/* CONTACT: force the two cards to stack on mobile */
@media (max-width: 900px){
  .cardsGrid,
  .twoCol,
  .split,
  .grid2{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* make sure cards can shrink nicely */
  .card{
    min-width: 0;
  }
}
/* CONTACT form controls: force dark theme even on mobile */
.card .formInput,
.card .formTextarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(231,237,245,.18);
  background: rgba(15,22,32,.55) !important;
  color: rgba(231,237,245,.92) !important;
  outline:none;
}

.card .formInput::placeholder,
.card .formTextarea::placeholder{
  color: rgba(231,237,245,.45) !important;
}