/* BoerSocial v2 — clean social look: white, deep navy, red accents, rounded cards.
   The v1 poster theme is kept in theme-poster-v1.css. */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:900;font-style:normal;font-display:swap;src:url(/fonts/barlow-condensed-latin-900-normal.woff2) format("woff2")}

:root{
  --navy:#1b3a66; --navy2:#122a4d; --navy3:#0d1f3a;
  --red:#d7262d; --red2:#b31d23;
  --ink:#16213a; --text:#2b3550; --muted:#5f6a85;
  --bg:#f4f6fa; --card:#ffffff; --line:#dfe4ee;
  --cream:#f3ead8;
  --cond:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --sans:"Barlow","Segoe UI",Arial,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:clip}
a{color:var(--navy)}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}
.center{text-align:center}
h1,h2,h3{font-family:var(--cond);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:.3px;margin:0 0 12px;color:var(--ink)}
h1{font-size:clamp(42px,7.5vw,84px)}
h2{font-size:clamp(26px,3.8vw,36px)}
h3{font-size:clamp(22px,2.8vw,26px);line-height:1.02}
.h-dark{color:var(--ink)}
p{margin:0 0 12px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:680px}
.center .lede{margin-left:auto;margin-right:auto}
.small{font-size:13.5px;color:var(--muted)}
.small.light{color:rgba(255,255,255,.7)}
.kicker{font-family:var(--cond);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:13px;color:var(--red);margin-bottom:8px}

/* header */
.top{background:var(--navy);position:sticky;top:0;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:0;font-family:var(--cond);font-weight:900;font-size:26px;text-transform:uppercase;color:var(--cream);text-decoration:none;letter-spacing:.3px;line-height:1}
.brand .accent{color:#ff4b52}
.menu{display:flex;align-items:center;gap:6px}
.menu a{color:rgba(255,255,255,.85);text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;border-radius:9px}
.menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.menu a.on{color:#fff;background:rgba(255,255,255,.12)}
.menu a.pill{background:var(--red);color:#fff}
.menu a.pill:hover{background:var(--red2)}

/* buttons */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.center .cta-row{justify-content:center}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:11px 18px;border-radius:10px;border:2px solid var(--red);transition:transform .12s ease,background .12s ease,border-color .12s ease}
.btn:hover{background:var(--red2);border-color:var(--red2);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:rgba(27,58,102,.08)}
.btn.ghost.light{color:#fff;border-color:rgba(255,255,255,.7)}
.btn.ghost.light:hover{background:rgba(255,255,255,.12)}

/* hero */
.hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy3) 100%);color:#fff;overflow:hidden}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero .hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,31,58,.92) 0%,rgba(13,31,58,.78) 45%,rgba(13,31,58,.35) 100%);pointer-events:none}
.hero.has-img .hero-shade{background:linear-gradient(90deg,rgba(8,18,36,.9) 0%,rgba(8,18,36,.72) 42%,rgba(8,18,36,.2) 75%,rgba(8,18,36,.05) 100%)}
.hero-body{position:relative;padding:96px 20px 88px}
.hero h1{color:#fff}
.hero .lede{color:rgba(255,255,255,.82)}
.hero .kicker{color:#ff6b70}
.hero-here .hero-body{padding:110px 20px 100px}
.hero-here .hero-img{object-position:right center}
.hero-here.has-img .hero-shade{background:linear-gradient(90deg,rgba(10,22,42,.97) 0%,rgba(10,22,42,.9) 38%,rgba(10,22,42,.55) 62%,rgba(10,22,42,.25) 100%)}
@media (max-width:820px){.hero-here .hero-img{object-position:70% center}.hero .hero-img{object-position:70% center}.hero-here.has-img .hero-shade{background:linear-gradient(180deg,rgba(10,22,42,.86) 0%,rgba(10,22,42,.6) 55%,rgba(10,22,42,.35) 100%)}}
.punch{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(20px,3.2vw,30px);line-height:1.15;color:#fff;margin:10px 0 10px}
.punch .r{color:#ff6b70}
.soon{display:inline-block;margin-top:22px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:4px;font-size:13px;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.4);padding:7px 14px;border-radius:999px}

/* stats strip */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{display:block;padding:22px 18px 20px;border-left:1px solid var(--line);text-decoration:none;color:inherit}
.stat:first-child{border-left:0}
.stat .n{display:block;font-family:var(--cond);font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:1;color:var(--navy)}
.stat.red .n{color:var(--red)}
.stat .l{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.3}
@media (max-width:820px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}.stat{border-top:1px solid var(--line)}.stat:nth-child(-n+2){border-top:0}}
.pull{margin:0 0 14px;padding:12px 16px;border-left:4px solid var(--navy);background:#f3f6fa;font-family:var(--cond);font-weight:700;font-size:21px;line-height:1.15;color:var(--ink)}

/* sections and cards */
.sec{padding:40px 0}
.sec-alt{background:#eef1f7}
.sec-navy{background:var(--navy);color:#fff;padding:56px 0 48px}
.sec-navy h2,.sec-navy .big{color:#fff}
.sec-navy .lede{color:rgba(255,255,255,.8)}
.sec-h{margin-bottom:18px}
.big{font-size:clamp(44px,8vw,80px)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grid2.docs{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.grid2.docs{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.cards{padding:28px 0 44px;margin-top:-28px;position:relative}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(22,33,58,.04),0 8px 24px rgba(22,33,58,.06);overflow:hidden}
.card > h2,.card > ol,.card > ul{margin-left:22px;margin-right:22px}
.card > h2{margin-top:22px}
.card > .card-k{margin:20px 22px 0}
.card > .card-k + h2{margin-top:4px}
.card > ol,.card > ul{margin-bottom:22px}
.card-body{padding:20px 22px 22px}
.card-body h2{margin-top:4px}
.card-body p:last-child{margin-bottom:0}
.card.link{display:block;color:inherit;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.card.link:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(22,33,58,.12);border-color:#c9d2e3}
.card-img{width:100%;height:190px;object-fit:cover}
.card.fill{display:flex;flex-direction:column}
.card.fill .card-img.bottom{flex:1;height:auto;min-height:200px;object-position:center 70%}
.card-img.tall{height:270px}
.card-img.top{object-position:center top}
@media (max-width:640px){.card-img.tall{height:210px}}
.card-img.contain{object-fit:contain;background:#0b0b0b;height:260px}
.card-k{font-family:var(--cond);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:12.5px;color:var(--red);margin-bottom:6px}
.card.doc h3{color:var(--navy)}
.more{font-weight:700;color:var(--red);margin-top:8px;font-size:15px}
.card.ask{border-left:5px solid var(--red)}
.callout{margin-top:18px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:var(--r);padding:16px 18px;color:var(--ink)}

/* full width image band */
.band-img{position:relative;background:var(--navy3);color:#fff;overflow:hidden}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;pointer-events:none}
.band-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,42,.92) 0%,rgba(10,22,42,.7) 55%,rgba(10,22,42,.3) 100%);pointer-events:none}
.band-body{position:relative;padding:64px 20px 60px;max-width:1040px}
.band-body h2{color:#fff;font-size:clamp(30px,5vw,52px)}
.band-body p{max-width:620px;color:rgba(255,255,255,.88);font-size:17px}
.band-body .kicker{color:#ff6b70}
@media (max-width:640px){.band-body{padding:48px 20px 44px}.band-shade{background:linear-gradient(180deg,rgba(10,22,42,.9),rgba(10,22,42,.7))}}

/* comparison */
.red{color:var(--red)}
.compare{margin-top:18px;background:var(--navy3);color:#fff;border-radius:var(--r);padding:22px 22px 18px;box-shadow:0 8px 24px rgba(22,33,58,.12)}
.cmp-head{text-align:center;margin-bottom:16px}
.cmp-k{display:block;font-family:var(--cond);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:12px;color:#c9a227;margin-bottom:6px}
.cmp-head h3{color:#fff;font-size:clamp(26px,4.2vw,40px)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.cmp-grid{grid-template-columns:1fr}}
.cmp-col{background:#fff;color:var(--text);border-radius:12px;padding:16px 16px 14px;display:flex;flex-direction:column}
.cmp-tag{font-family:var(--cond);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--muted)}
.cmp-title{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:22px;line-height:1.02;color:var(--navy);margin:4px 0 8px}
.cmp-col p{font-size:15.5px;flex:1}
.cmp-verdict{font-weight:700;font-size:15px;padding:10px 12px;border-radius:9px;margin-top:4px}
.cmp-verdict.yes{background:#e8f1ea;color:#1e5a34;border-left:4px solid #2f8f55}
.cmp-verdict.no{background:#fbe9ea;color:#8f1b20;border-left:4px solid var(--red)}
.cmp-foot{margin:16px 4px 0;color:rgba(255,255,255,.85);font-size:15.5px}

/* lists */
.five{margin:0;padding:0;list-style:none;counter-reset:n}
.five li{counter-increment:n;position:relative;padding:12px 0 12px 54px;border-top:1px solid var(--line)}
.five li:first-child{border-top:0}
.five li::before{content:counter(n);position:absolute;left:0;top:8px;width:38px;height:38px;border-radius:10px;background:var(--navy);color:#fff;font-family:var(--cond);font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center}
.plain{margin:0 0 10px 20px;padding:0}
.plain li{margin-bottom:8px}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:0}
.tl-d{font-family:var(--cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--red);font-size:14.5px;padding-top:3px}
.tl-t{color:var(--text)}

/* contact + form */
.contact .kicker{color:#ff6b70}
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;align-items:start;margin-top:28px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-side{display:grid;gap:12px}
.ctile{display:block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;color:#fff;text-decoration:none;transition:background .12s ease}
a.ctile:hover{background:rgba(255,255,255,.13)}
.ct-k{display:block;font-family:var(--cond);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:11.5px;color:#ff6b70}
.ct-v{display:block;font-weight:700;font-size:17px;margin-top:2px;word-break:break-word}
.qr-tile{display:flex;align-items:center;gap:14px}
.qr-tile .qr{margin:0;width:96px;height:96px;border-width:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.form-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.form-foot .btn{margin-top:0}
.form{color:var(--text)}
.form h3{color:var(--ink);margin-bottom:10px}
.form label{display:block;font-weight:700;font-size:13.5px;color:var(--ink);margin:10px 0 0}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{display:block;width:100%;margin-top:5px;padding:11px 12px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;outline:none;transition:border-color .12s ease,box-shadow .12s ease}
.form input:focus,.form textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,58,102,.14)}
.form textarea{resize:vertical;min-height:120px}
.chips{border:0;padding:0;margin:12px 0 0}
.chips legend{font-weight:700;font-size:13.5px;color:var(--ink);padding:0;margin-bottom:6px}
.chips label{display:inline-block;margin:0 6px 6px 0;font-weight:700;font-size:14px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:all .12s ease}
.chips input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chips input:focus-visible+span{box-shadow:0 0 0 3px rgba(27,58,102,.25)}
.form .btn{margin-top:14px;cursor:pointer;font-family:inherit}
.form-note{margin-top:10px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

.qr{border:6px solid #fff;border-radius:10px;background:#fff}

/* footer */
.foot{background:var(--navy3);color:rgba(255,255,255,.75);padding:26px 0 30px}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-brand{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:20px;color:var(--cream);display:block}
.foot-sub{font-size:13.5px}
.foot-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-r a{color:rgba(255,255,255,.8);text-decoration:none;font-weight:700;font-size:14px}
.foot-r a:hover{color:#fff}
.ver{font-size:10.5px;opacity:.35;font-family:ui-monospace,Consolas,monospace}

@media (max-width:640px){
  body{font-size:16px}
  .top .wrap{height:56px}
  .brand{font-size:22px}
  .menu a{padding:7px 9px;font-size:14px}
  .menu a.on{display:none}
  .page-home .menu a[href="/afrikaner"]{display:none}
  .hero-body{padding:48px 20px 44px}
  .btn{padding:10px 14px;font-size:15px}
  .tl li{grid-template-columns:1fr;gap:2px}
  .card-img{height:160px}
}

/* The Afrikaner page */
.src{font-size:13.5px;color:var(--muted);margin-top:8px}
.src a{color:var(--navy);font-weight:700}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.five li b{color:var(--navy)}
.page-afrikaner .hero-here .hero-img{object-position:center 30%}