:root {
  --black:#111111;
  --white:#ffffff;
  --accent:#c81e3a;
  --accent-dark:#9c1329;
  --gray:#f4f4f4;
  --maxw:1100px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Poppins',system-ui,-apple-system,Arial,sans-serif; color:#222; line-height:1.6; overflow-x:hidden; }
h1,h2,h3 { font-family:'Squada One',sans-serif; text-transform:uppercase; letter-spacing:1px; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.hl { color:var(--accent); position:relative; white-space:nowrap; }
.hl::after { content:""; position:absolute; left:0; bottom:2px; width:100%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
.reveal.in .hl::after, .hero .hl::after { transform:scaleX(1); }

.announce { background:var(--black); color:var(--white); text-align:center; font-size:.85rem; padding:8px 12px; position:relative; overflow:hidden; }
.announce::after { content:""; position:absolute; top:0; left:-60%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(200,30,58,.35),transparent); animation:shimmer 5s linear infinite; }
@keyframes shimmer { 0%{left:-60%;} 100%{left:120%;} }

header.site-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; flex-wrap:wrap; border-bottom:1px solid #eee; position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); z-index:50; }
.logo img { height:60px; transition:transform .3s; }
.logo img:hover { transform:scale(1.05); }
nav ul { display:flex; gap:24px; list-style:none; flex-wrap:wrap; }
nav a { font-weight:600; text-transform:uppercase; font-size:.85rem; letter-spacing:.5px; position:relative; padding-bottom:4px; }
nav a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--accent); transition:width .25s ease; }
nav a:hover::after, nav a.active::after { width:100%; }

.hero { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:70px 24px; max-width:var(--maxw); margin:0 auto; }
.hero::before { content:""; position:absolute; inset:-40px 0 -40px 0; z-index:-1; background:radial-gradient(circle at 20% 30%,rgba(200,30,58,.10),transparent 45%),radial-gradient(circle at 85% 70%,rgba(17,17,17,.06),transparent 40%); background-size:200% 200%; animation:heroFloat 14s ease-in-out infinite; }
@keyframes heroFloat { 0%,100%{background-position:0% 0%;} 50%{background-position:100% 100%;} }
.hero h1 { font-size:2.5rem; line-height:1.15; margin-bottom:20px; opacity:0; transform:translateY(20px); animation:riseIn .7s ease forwards .1s; }
.hero p.lead { font-size:1.15rem; margin-bottom:28px; max-width:420px; opacity:0; transform:translateY(20px); animation:riseIn .7s ease forwards .3s; }
.hero .btn, .hero .phone { opacity:0; transform:translateY(20px); animation:riseIn .7s ease forwards .5s; }
@keyframes riseIn { to{opacity:1; transform:translateY(0);} }

.btn { position:relative; display:inline-block; background:var(--black); color:var(--white); padding:14px 30px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border-radius:3px; border:2px solid var(--black); overflow:hidden; z-index:1; transition:color .3s, transform .15s; }
.btn::before { content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-101%); transition:transform .3s ease; z-index:-1; }
.btn:hover { color:var(--white); border-color:var(--accent); }
.btn:hover::before { transform:translateX(0); }
.btn:active { transform:translateY(2px); }
.btn.pulse { box-shadow:0 0 0 0 rgba(200,30,58,.5); animation:pulse 2.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(200,30,58,.45);} 70%{box-shadow:0 0 0 16px rgba(200,30,58,0);} 100%{box-shadow:0 0 0 0 rgba(200,30,58,0);} }
.phone { display:block; margin-top:20px; font-size:1.3rem; font-weight:700; }
.hero-images { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hero-images img { border-radius:6px; object-fit:cover; height:100%; transition:transform .4s, box-shadow .4s; }
.hero-images img:hover { transform:scale(1.04); box-shadow:0 12px 30px rgba(0,0,0,.18); }

.page-banner { background:var(--black); color:var(--white); text-align:center; padding:70px 24px; position:relative; overflow:hidden; }
.page-banner::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:linear-gradient(90deg,var(--accent),transparent,var(--accent)); background-size:200% 100%; animation:slide 6s linear infinite; }
@keyframes slide { 0%{background-position:0 0;} 100%{background-position:200% 0;} }
.page-banner h1 { font-size:2.3rem; }
.page-banner p { margin-top:10px; opacity:.85; }

section { padding:64px 24px; max-width:var(--maxw); margin:0 auto; }
section h2 { font-size:1.9rem; margin-bottom:16px; position:relative; display:inline-block; }
section h2::after { content:""; position:absolute; left:0; bottom:-8px; width:56px; height:4px; background:var(--accent); border-radius:2px; }
section h3 { font-size:1.3rem; margin:20px 0 10px; }
.section-alt { background:var(--gray); max-width:none; }
.section-alt > * { max-width:var(--maxw); margin-left:auto; margin-right:auto; }

.divider { max-width:var(--maxw); margin:0 auto; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); background-size:200% 100%; animation:slide 5s linear infinite; opacity:.7; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card { background:var(--white); border:1px solid #eee; border-radius:8px; padding:24px; transition:transform .3s, box-shadow .3s, border-color .3s; border-top:3px solid transparent; }
.card:hover { transform:translateY(-6px); box-shadow:0 16px 34px rgba(0,0,0,.12); border-top-color:var(--accent); }
.card img { border-radius:6px; margin-bottom:16px; height:200px; object-fit:cover; width:100%; }

.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.video-item { transition:transform .3s; }
.video-item:hover { transform:translateY(-5px); }
.video-item iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.video-item h3 { margin-top:14px; }

.carousel { position:relative; max-width:900px; margin:0 auto; border-radius:10px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.2); }
.carousel-track { display:flex; transition:transform .7s cubic-bezier(.65,.05,.36,1); }
.carousel-slide { min-width:100%; }
.carousel-slide img { width:100%; height:440px; object-fit:cover; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(17,17,17,.55); color:#fff; border:0; width:46px; height:46px; border-radius:50%; font-size:1.4rem; cursor:pointer; z-index:3; transition:background .25s; display:flex; align-items:center; justify-content:center; }
.carousel-btn:hover { background:var(--accent); }
.carousel-btn.prev { left:16px; }
.carousel-btn.next { right:16px; }
.carousel-dots { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:3; }
.carousel-dots button { width:11px; height:11px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0; transition:background .25s, transform .25s; }
.carousel-dots button.active { background:var(--accent); transform:scale(1.25); }

.photo-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.photo-gallery img { height:220px; object-fit:cover; border-radius:6px; }

form.contact-form { display:grid; gap:14px; max-width:480px; }
form.contact-form input, form.contact-form textarea { padding:12px; border:1px solid #ccc; border-radius:6px; font-family:inherit; transition:border-color .2s, box-shadow .2s; }
form.contact-form input:focus, form.contact-form textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,30,58,.15); }
form.contact-form button { justify-self:start; cursor:pointer; }

footer { background:var(--black); color:#ccc; padding:44px 24px; text-align:center; font-size:.85rem; }
footer a { color:#fff; transition:color .2s; }
footer a:hover { color:var(--accent); }
footer .footer-links { margin:14px 0; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }


/* Home hero collage banner */
.hero-banner { display:block; max-width:var(--maxw); margin:24px auto 0; padding:0 24px; overflow:hidden; }
.hero-banner img { width:100%; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.22); transition:transform .5s ease, box-shadow .5s ease; opacity:0; animation:riseIn .8s ease forwards .15s; }
.hero-banner:hover img { transform:scale(1.015); box-shadow:0 20px 50px rgba(0,0,0,.28); }

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} .reveal{opacity:1; transform:none;} }

@media (max-width:800px){
  .hero-banner { margin-top:16px; }
  .hero, .grid-2, .grid-3, .video-grid, .photo-gallery { grid-template-columns:1fr; }
  header.site-header { flex-direction:column; align-items:flex-start; gap:12px; position:static; }
  .hero h1 { font-size:2rem; }
  .carousel-slide img { height:300px; }
}

/* Enhanced textured backgrounds and carousel functionality */
body {
    background: 
          repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 4px),
          repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,.01) 2px, rgba(0,0,0,.01) 4px);
}

section {
    background: 
          repeating-linear-gradient(45deg, transparent, transparent 1.5px, rgba(200,30,58,.015) 1.5px, rgba(200,30,58,.015) 3px),
          linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(200,30,58,.03) 100%);
}

.section-alt {
    background-color: #f9f9f9 !important;
    background-image: 
          repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0,0,0,.02) 10px, rgba(0,0,0,.02) 20px),
          repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0,0,0,.01) 10px, rgba(0,0,0,.01) 20px) !important;
}

.hero {
    background-image: 
          repeating-radial-gradient(circle at 0 0, transparent 0, rgba(200,30,58,.05) 50px),
          repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(200,30,58,.02) 2px, rgba(200,30,58,.02) 4px) !important;
}

.carousel {
    background: linear-gradient(135deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 100%);
    box-shadow: 
          inset 0 0 30px rgba(0,0,0,.1),
          0 14px 40px rgba(0,0,0,.2);
}

.carousel-track {
    transition: transform .6s cubic-bezier(.65,.05,.36,1);
}

.carousel-slide {
    flex-shrink: 0;
    min-width: 100%;
}

.carousel-slide img {
    display: block;
    width: 100%;
}

footer {
    background: linear-gradient(180deg, #111 0%, #000 100%);
    background-image: 
          repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(200,30,58,.1) 20px, rgba(200,30,58,.1) 21px),
          linear-gradient(180deg, #111 0%, #000 100%);
}

/* ===== Dark theme (Sep 2026) =====
   Overrides the light styles above. Background art: images/dark-streaks-bg.jpg */
:root {
  --bg:#070707;
  --surface:#141414;
  --surface-2:#1b1b1b;
  --line:#2a2a2a;
  --text:#e8e8e8;
  --muted:#a8a8a8;
  --accent-text:#ec4462; /* brighter red for text on black */
}
html { background:var(--bg); }
body { color:var(--text); background:transparent !important; }
/* fixed streak background behind everything (pseudo-element so it stays put on iOS too) */
body::before { content:""; position:fixed; inset:0; z-index:-2; background:#000 url("images/dark-streaks-bg.jpg") center/cover no-repeat; }
body::after { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)); pointer-events:none; }

.hl { color:var(--accent-text); }
a:hover { color:var(--accent-text); }

.announce { background:#000; border-bottom:1px solid var(--line); }
header.site-header { background:rgba(8,8,8,.9); border-bottom:1px solid var(--line); color:var(--text); }
nav a { color:var(--text); }

.hero, section, .section-alt { background:transparent !important; background-image:none !important; }
.hero::before { background:radial-gradient(circle at 20% 30%,rgba(200,30,58,.18),transparent 45%),radial-gradient(circle at 85% 70%,rgba(255,255,255,.04),transparent 40%); }
.section-alt { background:rgba(20,20,20,.72) !important; border-top:1px solid var(--line); border-bottom:1px solid var(--line); backdrop-filter:blur(2px); }

.page-banner { background:#000 url("images/dark-streaks-bg.jpg") center/cover no-repeat; border-bottom:1px solid var(--line); }

.card { background:rgba(22,22,22,.92); border-color:var(--line); color:var(--text); }
.card:hover { box-shadow:0 16px 34px rgba(0,0,0,.6); }
.card p, section p { color:#d4d4d4; }
.card em { color:var(--muted); }

.btn { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn::before { background:#fff; }
.btn:hover { color:#111; border-color:#fff; }

.video-item iframe, .carousel, .hero-banner img { box-shadow:0 14px 40px rgba(0,0,0,.7); }
.carousel { background:#000; }
.hero-images img:hover { box-shadow:0 12px 30px rgba(0,0,0,.6); }

form.contact-form input, form.contact-form textarea { background:#0f0f0f; color:var(--text); border-color:#3a3a3a; }
form.contact-form input::placeholder, form.contact-form textarea::placeholder { color:#8a8a8a; }

footer { border-top:1px solid var(--line); }
.form-sent { background:rgba(46,160,67,.15); border:1px solid rgba(46,160,67,.6); color:#d8f5de; padding:12px 16px; border-radius:6px; margin-bottom:14px; max-width:480px; }
.video-grid-3 { grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:800px){ .video-grid-3 { grid-template-columns:1fr; } }
.about-intro { display:grid; grid-template-columns:minmax(260px,38%) 1fr; gap:40px; align-items:start; }
.about-intro img { width:100%; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.7); }
.about-intro .about-text p { text-align:justify; hyphens:auto; margin-bottom:16px; }
@media (max-width:800px){ .about-intro { grid-template-columns:1fr; } .about-intro img { max-width:420px; margin:0 auto; } .about-intro .about-text p { text-align:left; } }

/* Homepage single hero image, Buzz photo, blog */
.hero-images.hero-single { grid-template-columns:1fr; }
.buzz-photo { display:block; max-width:820px; margin:28px auto 8px; }
.buzz-photo img { width:100%; height:auto; border-radius:8px; transition:transform .4s, box-shadow .4s; }
.buzz-photo:hover img { transform:scale(1.015); box-shadow:0 12px 30px rgba(0,0,0,.18); }
a.blog-card { display:block; color:inherit; text-decoration:none; }
a.blog-card h3 { margin-top:6px; }
.read-more { display:inline-block; margin-top:10px; font-weight:700; color:var(--accent); text-transform:uppercase; font-size:.85rem; letter-spacing:.5px; }
.post { max-width:760px; margin:0 auto; padding:56px 24px 64px; }
.post h1 { font-size:2.3rem; line-height:1.2; margin:8px 0 14px; }
.post .byline { color:#666; font-size:.95rem; margin-bottom:26px; }
.post .post-hero { width:100%; height:auto; border-radius:8px; margin-bottom:30px; }
.post h2 { font-size:1.6rem; margin:38px 0 14px; position:relative; display:inline-block; }
.post p, .post li { font-size:1.05rem; line-height:1.75; margin-bottom:14px; }
.post ul, .post ol { padding-left:22px; margin-bottom:18px; }
.post a:not(.btn) { color:var(--accent); text-decoration:underline; }
.post .stat-box { background:rgba(255,255,255,.06); border-left:4px solid var(--accent); padding:18px 22px; border-radius:6px; margin:22px 0; }
.post .author-box { display:flex; gap:18px; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:20px; border-radius:8px; margin-top:40px; }
.post .author-box img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.post .sources { font-size:.9rem; color:#aaa; margin-top:36px; }
.post .sources li { font-size:.9rem; margin-bottom:6px; }
.post .breadcrumb { font-size:.85rem; color:#777; }
.post .breadcrumb a { color:#777; text-decoration:none; }
.post-cta { text-align:center; background:var(--black); color:#fff; padding:34px 24px; border-radius:8px; margin-top:40px; }
.post-cta h3 { color:#fff; margin-top:0; }
.post-cta .btn { background:var(--accent); border-color:var(--accent); margin-top:10px; }
.blog-list { display:grid; gap:24px; }
@media (max-width:700px){ .post h1 { font-size:1.8rem; } .post .author-box { flex-direction:column; text-align:center; } }