:root{--red:#e50922;--red2:#ff3147;--ink:#101113;--muted:#70747b;--paper:#f6f6f3;--card:#fff;--line:#e5e5e2;--shadow:0 20px 60px rgba(16,17,19,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.6}.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.container{width:min(1160px,92%);margin:auto}.site-header{position:sticky;top:0;z-index:15;background:rgba(246,246,243,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}.brand-mark{width:43px;height:43px;background:var(--red);color:#fff;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;transform:skew(-8deg);box-shadow:5px 5px 0 var(--ink)}.brand-mark span{transform:skew(8deg)}.brand-name{font:700 20px "Space Grotesk";letter-spacing:-.7px}.brand-name b{color:var(--red)}.nav-links{display:flex;gap:28px;align-items:center}.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}.nav-links a:hover,.nav-links .active{color:var(--ink)}.theme-toggle,.menu-toggle{border:1px solid var(--line);background:var(--card);border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:18px}.menu-toggle{display:none;border-radius:10px}
.hero{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}.eyebrow{font:700 12px "Space Grotesk";letter-spacing:2px;color:var(--red)}.eyebrow span{display:inline-block;width:28px;height:2px;background:var(--red);vertical-align:middle;margin-right:8px}.hero h1,.page-hero h1{font:700 clamp(58px,8vw,105px)/.9 "Space Grotesk";letter-spacing:-6px;margin:22px 0}.hero h1 em,.page-hero h1 em{color:var(--red);font-style:normal}.hero p{max-width:600px;color:var(--muted);font-size:19px}.hero-actions{display:flex;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;gap:14px;padding:14px 20px;text-decoration:none;border:0;font-weight:700;cursor:pointer;font-family:inherit}.btn-red{background:var(--red);color:#fff;box-shadow:6px 6px 0 var(--ink)}.btn-red:hover{transform:translate(-2px,-2px)}.btn-ghost{border:1px solid var(--ink);color:var(--ink);background:transparent}.btn-white{background:#fff;color:#111}.hero-art{height:460px;position:relative;overflow:hidden;background:#111;border-radius:4px}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:390px;height:390px;background:radial-gradient(circle at 35% 35%,#ff5262,#e50922 45%,transparent 68%);left:-80px;top:50px}.orb-two{width:300px;height:300px;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.08) 28%,transparent 70%);right:-60px;bottom:-70px}.signal{position:absolute;right:40px;top:40px;display:flex;gap:8px;align-items:end;height:100px}.signal span{width:5px;background:#fff;display:block}.signal span:nth-child(1){height:25%}.signal span:nth-child(2){height:45%}.signal span:nth-child(3){height:80%}.signal span:nth-child(4){height:55%}.signal span:nth-child(5){height:95%}.hero-card{position:absolute;left:45px;bottom:45px;color:#fff}.hero-card small{letter-spacing:3px}.hero-card strong{display:block;font:700 65px/.85 "Space Grotesk";letter-spacing:-4px;margin-top:10px}.hero-card i{display:inline-block;background:#fff;color:#111;padding:4px 9px;font-style:normal;font-weight:700;margin-top:16px}
.ticker{background:var(--red);color:#fff;overflow:hidden}.ticker-inner{width:max-content;display:flex;gap:28px;padding:12px 0;animation:slide 20s linear infinite}@keyframes slide{to{transform:translateX(-30%)}}.ticker strong{margin-left:20px}.section{padding:90px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-heading h2,.comments-panel h2{font:700 44px "Space Grotesk";letter-spacing:-2px;margin:8px 0}.text-link,.news-body a,.source-link{color:var(--red);font-weight:700;text-decoration:none}.news-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px}.news-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.news-image{height:210px;position:relative;display:flex;align-items:end;padding:18px;color:#fff;font:700 11px "Space Grotesk";letter-spacing:2px;overflow:hidden}.featured .news-image{height:260px}.gradient-port{background:linear-gradient(135deg,#130507,#e50922 50%,#5d0b15)}.gradient-weather{background:linear-gradient(135deg,#090e16,#7d8797,#e50922)}.gradient-city{background:linear-gradient(135deg,#0b0b0c,#333,#e50922)}.gradient-water{background:linear-gradient(135deg,#07131a,#2c6a75,#e50922)}.news-body{padding:24px}.news-body small,.article-content small{font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:700}.news-body h3{font:700 24px/1.1 "Space Grotesk";letter-spacing:-1px}.news-body p{color:var(--muted)}.community-panel,.comments-panel{background:#111;color:#fff;padding:45px;display:flex;justify-content:space-between;align-items:center;gap:30px}.community-panel h2,.comments-panel h2{font-size:48px;margin:8px 0}.community-panel p{color:#bbb;max-width:620px}.ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ad-card{min-height:180px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:25px;text-decoration:none;color:#111}.ad-card:hover{border-color:var(--red);transform:translateY(-3px)}.ad-logo{font:700 30px/.85 "Space Grotesk";color:#111}.ad-logo b{color:var(--red)}.ad-logo.market{font-size:25px}.ad-logo.parts{color:#e50922}.ad-logo.parts b{color:#111}.ad-note,.muted,.form-note{font-size:13px;color:var(--muted)}
.comments-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px}.comment-form{display:grid;gap:12px}.comment-form input,.comment-form textarea,.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid var(--line);background:var(--card);padding:14px;font:inherit;outline:none}.comment-form textarea{min-height:150px;resize:vertical}.comments-list{display:grid;gap:12px}.comment{background:var(--card);border:1px solid var(--line);padding:18px}.comment strong{font-family:"Space Grotesk"}.comment p{margin:6px 0;color:var(--muted)}
.page-hero{padding:100px 0 60px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:78px}.page-hero p{max-width:620px;color:var(--muted);font-size:18px}.article-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.article{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.article:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.article-art{min-height:260px;color:#fff;font:700 30px "Space Grotesk";padding:24px;display:flex;flex-direction:column;justify-content:space-between}.article-art span{font-size:11px;letter-spacing:2px}.article-content{padding:30px}.article-content h2{font:700 34px/1.05 "Space Grotesk";letter-spacing:-1.5px}.article-content p{color:var(--muted)}.source-link{display:inline-block;margin-top:10px}.comments-panel{display:block}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.contact-info{display:grid;align-content:start;gap:14px}.contact-card{background:var(--card);border:1px solid var(--line);padding:24px;display:flex;gap:18px;align-items:center}.contact-card>span{width:42px;height:42px;display:grid;place-items:center;background:#111;color:#fff}.contact-card small{display:block;color:var(--muted);font-size:10px;letter-spacing:1.5px}.contact-card a,.contact-card strong{display:block;color:var(--ink);font-weight:700;text-decoration:none}.contact-form{background:var(--card);border:1px solid var(--line);padding:32px;display:grid;gap:15px}.contact-form h2{font:700 34px "Space Grotesk";margin:0 0 8px}.contact-form label{font-size:13px;font-weight:700}.contact-form input,.contact-form select,.contact-form textarea{margin-top:6px}.contact-form textarea{min-height:160px;resize:vertical}
.footer{background:#111;color:#fff;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer a{display:block;color:#aaa;text-decoration:none;margin:7px 0}.footer h4{margin-top:0}.footer-brand{color:#fff}.copyright{border-top:1px solid #292929;margin-top:40px;padding-top:18px;color:#777;font-size:12px}
body.dark{--ink:#f3f3f1;--muted:#a6a8ad;--paper:#0b0c0e;--card:#141518;--line:#292b30;--shadow:0 20px 60px rgba(0,0,0,.25)}body.dark .site-header{background:rgba(11,12,14,.88)}body.dark .btn-ghost{border-color:#fff;color:#fff}body.dark .ad-card{color:#fff}body.dark .ad-logo{color:#fff}body.dark .ad-logo.parts b{color:#fff}
@media(max-width:850px){.nav-links{display:none}.nav-links.open{display:flex;position:absolute;top:78px;left:0;right:0;background:var(--paper);padding:20px;flex-direction:column;border-bottom:1px solid var(--line)}.menu-toggle{display:block}.hero{grid-template-columns:1fr;padding-top:55px}.hero-art{height:360px}.news-grid,.article-grid,.contact-grid{grid-template-columns:1fr}.article:first-child{display:block}.ad-grid{grid-template-columns:1fr}.comments-wrap{grid-template-columns:1fr}.community-panel{display:block}.community-panel .btn{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}.page-hero h1,.hero h1{font-size:60px;letter-spacing:-4px}}
@media(max-width:520px){.section{padding:60px 0}.hero h1{font-size:52px}.page-hero h1{font-size:52px}.hero-art{height:300px}.hero-card strong{font-size:48px}.hero-actions{flex-direction:column}.section-heading{align-items:start;gap:15px;flex-direction:column}.community-panel,.comments-panel{padding:30px}.community-panel h2,.comments-panel h2{font-size:38px}.footer-grid{grid-template-columns:1fr}}

/* Karoo Stem logo + image enhancements */
.brand-logo{display:block;width:min(230px,42vw);height:auto;max-height:54px;object-fit:contain;object-position:left center}
.news-photo,.article-photo{background-size:cover;background-position:center;position:relative}
.news-photo:after,.article-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.68));pointer-events:none}
.news-photo>span,.article-photo>span{position:relative;z-index:1}
.fuel-photo{background-image:url("https://images.unsplash.com/photo-1486006920555-c77dcf18193c?auto=format&fit=crop&w=1400&q=80")}
.weather-photo{background-image:url("https://images.unsplash.com/photo-1534088568595-a066f710f802?auto=format&fit=crop&w=1400&q=80")}
.city-photo{background-image:url("https://images.unsplash.com/photo-1519501025264-65ba15a82390?auto=format&fit=crop&w=1400&q=80")}
.water-photo{background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1400&q=80")}
.ad-grid{grid-template-columns:repeat(3,1fr)}
.ad-card{padding:0;overflow:hidden;transition:.2s;box-shadow:var(--shadow)}
.ad-visual{min-height:210px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden}
.ad-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.18),rgba(0,0,0,.58));}
.ad-visual>*{position:relative;z-index:1}
.ad-badge{align-self:flex-start;background:#fff;color:#111;padding:6px 9px;font:700 10px "Space Grotesk";letter-spacing:1.4px}
.ad-visual strong{display:block;font:700 42px/.8 "Space Grotesk";letter-spacing:-2px}
.ad-visual b{display:block;font:700 32px/.9 "Space Grotesk";color:#ffdd00}
.ad-visual small{display:block;margin-top:12px;font-weight:700;letter-spacing:1px}
.giant-visual{background:linear-gradient(135deg,#0d66a5,#f1a900 45%,#e50922)}
.gho-visual{background:linear-gradient(135deg,#151515,#d71920 55%,#f0c000)}
.gho-visual b{color:#fff}.local-visual{background:linear-gradient(135deg,#0d0d0e,#444,#e50922)}
.ad-copy{padding:18px 20px;background:var(--card);display:flex;flex-direction:column;gap:4px}.ad-copy strong{font-family:"Space Grotesk"}.ad-copy span{font-size:13px;color:var(--red);font-weight:700}
@media(max-width:850px){.brand-logo{width:200px;max-height:48px}.ad-grid{grid-template-columns:1fr}.ad-visual{min-height:180px}}
@media(max-width:520px){.brand-logo{width:170px;max-height:44px}.site-header .nav{height:70px}.nav-links.open{top:70px}}