/* ============================================================
   Razz Sports — custom dark-gold theme over Bootstrap 5.
   Tokens from the design handoff. Border-radius: 0 throughout.
   ============================================================ */
:root{
  --ink:#0B0B0B;
  --panel:#101010;
  --panel-2:#121212;
  --panel-3:#141414;
  --chip:#1A1A1A;
  --raised:#1C1C1C;
  --border:#1C1C1C;
  --border-2:#262626;
  --border-3:#2A2A2A;
  --border-4:#3A3A3A;
  --gold:#F0B429;
  --txt:#FFFFFF;
  --txt-2:#C5C5C5;
  --txt-3:#9A9A9A;
  --txt-4:#6A6A6A;
  --hatch: repeating-linear-gradient(45deg, rgba(240,180,41,.04) 0 2px, transparent 2px 9px);
}

*,*::before,*::after{ box-sizing:border-box; border-radius:0 !important; }

html,body{
  background:var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

body{
  color:var(--txt-2);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  display: flex;
  flex-direction: column;
  word-break: break-word;
  min-height: 100%;
  overflow-x: hidden;
}

#header {
  flex-shrink: 0;
}

#mainContent {
  flex-grow: 1;
  flex-shrink: 0;
}

#footer {
  flex-shrink: 0;
  margin-top: auto;
}

.row>* {
  --bs-gutter-x-mobile: 48px;
  padding-right: calc(var(--bs-gutter-x-mobile) * .5);
  padding-left: calc(var(--bs-gutter-x-mobile) * .5);
}

@media (min-width:576px) {
  .w-sm-50{ width:50% !important; }
}
@media (min-width: 768px) {
  .w-md-33{ width:33.3333% !important; }
}
@media (min-width:992px) {
  .w-lg-33{ width:33.3333% !important; }
  .w-lg-25{ width:25% !important; }
  .w-lg-50{ width:50% !important; }
}

/* Layout — we use Bootstrap's .container > .row > .col-* everywhere.
   Nudge the container a touch wider to keep the brand's roomy feel. */
@media (min-width:1400px){ .container,.container-xxl{ max-width:1320px; } }
.rz-section{ padding-top:clamp(56px,8vw,80px); padding-bottom:clamp(56px,8vw,80px); }

/* Typography */
.display{ font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:.95; color:#fff; }
.eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--gold); font-weight:600; }
.eyebrow-chip{ display:inline-block; border:1px solid var(--border-3); padding:7px 14px; }
.txt-muted{ color:var(--txt-3); }
.txt-faint{ color:var(--txt-4); }
.gold{ color:var(--gold); }
a{ color:inherit; text-decoration:none; }
p{ line-height:1.7; }

/* ---------- Buttons ---------- */
.btn-rz{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:#0B0B0B; border:1px solid var(--gold);
  font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:13px;
  padding:14px 22px; cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.btn-rz:hover{ background:#fff; border-color:#fff; color:#0B0B0B; }
.btn-rz-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#fff; border:1px solid var(--border-4);
  font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:13px;
  padding:14px 22px; cursor:pointer; transition:.15s;
}
.btn-rz-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-rz-block{ width:100%; justify-content:center; }

/* Skewed CTA (nav build-a-kit) */
.btn-skew{ transform:skewX(-8deg); }
.btn-skew > span{ display:inline-block; transform:skewX(8deg); }

/* ---------- Decorative tiles ---------- */
.tile{ position:relative; overflow:hidden; background:linear-gradient(160deg,#161616,#0c0c0c); }
.tile::after{ content:""; position:absolute; inset:0; background:var(--hatch); pointer-events:none; }
.tile .ghost{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; color:rgba(255,255,255,.05); font-size:46%;
  line-height:1; user-select:none; pointer-events:none;
}
.tile .ghost.lg{ font-size:clamp(120px,30vw,260px); }
.about-wrap .tile .ghost.lg{ font-size:clamp(85px,30vw,100px); }
.tile-sq{ aspect-ratio:1/1; }
.tile-45{ aspect-ratio:4/5; }
.tile-34{ aspect-ratio:3/4; }
.tile-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--gold); color:#0B0B0B; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; padding:5px 10px;
}
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.gold-square{
  position:absolute; width:46%; height:46%; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(12deg);
  background:rgba(240,180,41,.10); border:1px solid rgba(240,180,41,.30);
}

/* ---------- Nav ---------- */
.rz-nav{
  position:sticky; top:0; z-index:60; height:70px;
  background:rgba(11,11,11,.84); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.rz-nav .container{ height:100%; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo .mark{ width:38px; height:38px; background:var(--gold); transform:skewX(-8deg); display:flex; align-items:center; justify-content:center; }
.logo .mark span{ font-family:'Anton',sans-serif; color:#0B0B0B; font-size:22px; transform:skewX(8deg); }
.logo .mark img.mark-img{ width:100%; height:100%; object-fit:contain; transform:skewX(8deg); }
.logo .word{ font-family:'Anton',sans-serif; font-size:22px; letter-spacing:.02em; }
.logo .word .a{ color:#fff; } .logo .word .b{ color:var(--gold); }
.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.nav-links a:hover{ color:var(--gold); }
.nav-links a.active{ color:var(--gold); }
.nav-burger{ display:none; width:44px; height:44px; background:none; border:0; flex-direction:column; gap:4px; align-items:center; justify-content:center; cursor:pointer; }
.nav-burger span{ width:18px; height:2px; background:#fff; display:block; }
.nav-burger span:last-child{ background:var(--gold); }
@media(max-width:992px){
  .nav-links,.nav-cta{ display:none !important; }
  .nav-burger{ display:flex; }
}

/* ---------- Mobile menu ---------- */
.rz-menu{ position:fixed; inset:0; z-index:70; background:#0B0B0B; display:none; flex-direction:column; }
.rz-menu.open{ display:block; animation:fade .2s ease; }
.rz-menu-top{ height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,5vw,32px); border-bottom:1px solid #1A1A1A; }
.rz-menu-close{ width:44px; height:44px; background:none; border:0; color:#fff; font-size:30px; cursor:pointer; }
.rz-menu-links{ flex:1; display:block; padding:32px clamp(18px,5vw,32px) 0; }
.rz-menu-links a{ display:flex; align-items:baseline; justify-content:space-between; padding:18px 0; border-bottom:1px solid #1A1A1A; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(24px,9vw,20px); color:#fff; line-height:1; transition:all 0.4s;}
.rz-menu-links a:hover,
.rz-menu-links a.active{ color:var(--gold); transition: all 0.4s;}
.rz-menu-links a .idx{ font-family:'Inter',sans-serif; font-size:13px; color:var(--gold); }
.rz-menu-bottom{ padding:clamp(18px,5vw,32px); }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ---------- Ticker (seamless infinite marquee) ----------
   Two identical groups laid side by side; animating to -50% scrolls exactly
   one group, so it loops with no gap. Each group repeats the phrases enough
   times to always exceed the viewport width. */
.ticker{ background:var(--gold); overflow:hidden; }
.ticker-track{ display:flex; width:max-content; animation:ticker 50s linear infinite; }
.ticker-group{ display:flex; flex-shrink:0; align-items:center; }
.ticker-group span{ font-family:'Anton',sans-serif; color:#0B0B0B; font-size:clamp(20px,4vw,30px); text-transform:uppercase; padding:14px 0; white-space:nowrap; }
.ticker-group .dot{ color:#0B0B0B; opacity:.55; padding:0 18px; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Client logo marquee (full-width, auto-scroll) ---------- */
.clients{ overflow:hidden; width:100%; }
.clients-track{ display:flex; width:max-content; align-items:center; animation:clients-scroll 45s linear infinite; }
.clients-group{ display:flex; align-items:center; flex-shrink:0; }
/* each logo sits in a uniform tile using the enquiry-modal banner background */
.client-tile{
  flex-shrink:0;
  width:clamp(180px,22vw,230px); height:130px;
  margin:0 12px;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#1a1a1a,#0c0c0c);
  border:1px solid var(--border-3);
}
.client-tile::after{ content:""; position:absolute; inset:0; background:var(--hatch); pointer-events:none; }
.clients-logo{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; position:relative; z-index:1; }
.clients:hover .clients-track{ animation-play-state:paused; }
@keyframes clients-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Rich-text (WYSIWYG) content ---------- */
.cms-content{ color:var(--txt-2); }
.cms-content > :first-child{ margin-top:0; }
.cms-content p{ color:var(--txt-3); margin:0 0 1em; }
.cms-content p:first-of-type{ color:var(--txt-2); font-size:17px; }
.cms-content a{ color:var(--gold); text-decoration:underline; }
.cms-content h2,.cms-content h3{ font-family:'Anton',sans-serif; color:#fff; text-transform:uppercase; margin:1.2em 0 .4em; }
.cms-content ul,.cms-content ol{ color:var(--txt-3); padding-left:1.2em; margin:0 0 1em; }
.cms-content li{ margin:.2em 0; }
.cms-content strong{ color:#fff; }

/* ---------- Product card (Classic) ---------- */
.pcard{ display:flex; flex-direction:column; height:100%; }
.pcard .meta-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--txt-3); margin-top:14px; }
.pcard .row-np{ display:flex; justify-content:space-between; align-items:baseline; margin:6px 0 14px; gap:10px; }
.pcard .pname{ font-family:'Anton',sans-serif; font-size:20px; text-transform:uppercase; color:#fff; }
.pcard .pprice{ font-family:'Anton',sans-serif; font-size:20px; color:var(--gold); }
.pcard a.coverlink{ display:block; }
.pcard a.coverlink:hover .tile{ outline:1px solid var(--border-4); }
.product-catalogue-wrapper {row-gap:24px;}
@media (min-width:576px) {
  .product-catalogue-wrapper .product-list {width:50%;}
  .product-catalogue-wrapper {
    row-gap: 32px;
    margin:0 -8px;
  }
}
@media (min-width:992px) {
  .product-catalogue-wrapper .product-list {width: 33.3333%;}
  .product-catalogue-wrapper {
    margin:0 -16px;
  }
}
@media (min-width:1400px) {
  .product-catalogue-wrapper .product-list {width: 25%;}
}

/* ---------- Sections / dividers ---------- */
.rule-top{ border-top:1px solid var(--border); }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
@media (min-width:992px) {
  .section-head{margin-bottom: 48px;}
}

/* Value props */
.vp{ padding:26px 0; }
.vp .n{ font-family:'Anton',sans-serif; color:var(--gold); font-size:22px; }
.vp h3{ font-family:'Anton',sans-serif; text-transform:uppercase; color:#fff; font-size:22px; margin:12px 0 8px; }
@media(min-width:992px){
  .vp {padding: 26px 30px 26px 0;}
  .vp + .vp{ border-left:1px solid var(--border); padding-left:30px; }
  .list-wrap .inner-list {width:33.3333%;}
}

/* CTA band */
.cta-band{ position:relative; overflow:hidden; background:var(--gold); color:#0B0B0B; padding:clamp(36px,6vw,64px); }
.cta-band .ghost{ position:absolute; right:4%; top:50%; transform:translateY(-50%); font-family:'Anton',sans-serif; font-size:clamp(120px,20vw,220px); color:rgba(0,0,0,.08); pointer-events:none; }
.cta-band h2{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(34px,6vw,54px); margin:0; position:relative; }
.btn-dark{ background:#0B0B0B; color:#fff; border:1px solid #0B0B0B; }
.btn-dark:hover{ background:#222; border-color:#222; color:#fff; }
.cta-band .cta-inner-wrap {row-gap:24px;}
@media (min-width:992px) {
  .cta-band .cta-inner-wrap .cta-left {width: 66.66666667%;}
  .cta-band .cta-inner-wrap .cta-right {width: 33.33333333%; text-align: right;}
}

/* Stats */
.stat .n{ font-family:'Anton',sans-serif; font-size:clamp(32px,5vw,46px); color:#fff; }
.stat .l{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--txt-3); margin-top:4px; }

/* ---------- Forms ---------- */
.rz-field{ width:100%; background:var(--chip); border:1px solid var(--border-3); color:#fff; padding:13px 15px; font-family:inherit; font-size:15px; }
.rz-field:focus{ outline:none; border-color:var(--gold); }
.rz-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--txt-3); margin:0 0 7px; }
textarea.rz-field{ min-height:120px; resize:vertical; }
/* Select: hide the cramped native arrow, draw our own chevron with room to breathe. */
select.rz-field{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C5C5C5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:13px;
}
select.rz-field::-ms-expand{ display:none; }
select.rz-field:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F0B429' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }

/* form grid — 2 cols on wider screens, 1 col on mobile; .full spans the row */
.form-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:640px){ .form-grid{ grid-template-columns:repeat(2,1fr); } }
.form-grid .full{ grid-column:1 / -1; }

/* size breakdown grid (qty per size) */
.size-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media(max-width:520px){ .size-grid{ grid-template-columns:repeat(3,1fr); } }
.size-cell{ text-align:center; }
.size-cell .size-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--txt-3); text-transform:uppercase; margin-bottom:5px; }
.size-cell .size-qty{ text-align:center; padding:10px 4px; -moz-appearance:textfield; }
.size-cell .size-qty::-webkit-outer-spin-button,.size-cell .size-qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* size guide link + modal table */
.size-guide-link{ background:none; border:0; padding:0; color:var(--gold); font-size:12px; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; text-decoration:none; white-space:nowrap; }
.size-guide-link:hover{ color:#fff; }
.size-guide-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:14px; }
.size-guide-table th,.size-guide-table td{ border:1px solid var(--border-3); padding:8px 12px; text-align:center; white-space:nowrap; }
.size-guide-table thead th{ background:#1A1A1A; color:#fff; text-transform:uppercase; letter-spacing:.05em; font-size:11px; }
.size-guide-table thead .sg-group{ background:var(--gold); color:#0B0B0B; font-family:'Anton',sans-serif; font-size:14px; letter-spacing:.04em; }
.size-guide-table tbody th{ background:#141414; color:#fff; text-align:left; font-weight:700; }
.size-guide-table tbody td{ color:var(--txt-2); }
.size-guide-table tbody tr:nth-child(even) td{ background:#0e0e0e; }
.sg-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.sg-tab{ background:none; border:1px solid var(--border-4); color:#fff; padding:9px 20px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; }
.sg-tab.active{ background:var(--gold); border-color:var(--gold); color:#0B0B0B; }
.sg-panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sg-panel[hidden]{ display:none; }

/* contact details links — white by default, gold on hover */
.contact-link{ color:#fff; display:inline-block; }
.contact-link:hover{ color:var(--gold); }

/* themed multi-file upload (replaces the native control) */
.rz-file{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--chip); border:1px dashed var(--border-4); padding:14px 16px; cursor:pointer; transition:border-color .15s; }
.rz-file:hover{ border-color:var(--gold); }
.rz-file input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.rz-file .rz-file-btn{ background:var(--gold); color:#0B0B0B; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; padding:10px 16px; white-space:nowrap; }
.rz-file:hover .rz-file-btn{ background:#fff; }
.rz-file .rz-file-name{ color:var(--txt-3); font-size:14px; }

/* ---------- Footer ---------- */
.rz-footer{ border-top:1px solid var(--border); }
.rz-footer .ftitle{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--txt-4); margin-bottom:14px; }
.rz-footer a{ color:var(--txt-3); font-size:14px; display:block; padding:5px 0; }
.rz-footer a:hover{ color:var(--gold); }
.news-box{ display:flex; border:1px solid var(--border-3); }
.news-box input{ flex:1; background:transparent; border:0; color:#fff; padding:12px 14px; font-family:inherit; }
.news-box input:focus{ outline:none; }
.news-box button{ background:var(--gold); color:#0B0B0B; border:0; padding:0 16px; cursor:pointer; font-size:18px; }
.footer-sub{ border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:18px 0; font-size:12px; color:var(--txt-3); }
.footer-sub .socials a{ display:inline; padding:0 0 0 18px; }
.footer-sub .socials a svg {height: 30px; width: 30px; fill: var(--txt-3);}

/* ---------- Modal ---------- */
.rz-modal{ position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding:24px; overflow:auto; background:rgba(5,5,5,.82); backdrop-filter:blur(8px); }
.rz-modal.open{ display:flex; animation:fade .18s ease; }
.rz-modal-card{ width:100%; max-width:560px; background:#121212; border:1px solid var(--border-3); margin:auto; animation:pop .22s cubic-bezier(.2,.8,.2,1); position:relative; }
@keyframes pop{ from{transform:translateY(8px) scale(.98);opacity:0} to{transform:none;opacity:1} }
.rz-modal-close{ position:absolute; top:12px; right:12px; z-index:5; width:35px; height:35px; display:flex; transition: all 0.3s; align-items:center; padding: 0 0 3px 0px; border: 0 !important; justify-content:center; background:rgba(11,11,11,.65); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:22px; line-height:1; cursor:pointer; backdrop-filter:blur(2px); }
.rz-modal-close:hover{ background:var(--gold); border-color:var(--gold); color:#0B0B0B; transition: all 0.3s;}
.rz-modal-banner{ height:400px; position:relative; background:linear-gradient(160deg,#1a1a1a,#0c0c0c); overflow:hidden; }
.rz-modal-banner::after{ content:""; position:absolute; inset:0; background:var(--hatch); }
.rz-modal-body{ padding:24px; }
.chip{ display:inline-block; background:var(--chip); border:1px solid var(--border-2); color:var(--txt-2); font-size:12px; padding:6px 11px; margin:0 6px 6px 0; }
.spec-row{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; color:var(--txt-2); font-size:14px; }
.spec-tick{ color:var(--gold); transform:skewX(-10deg); font-weight:700; }
.sent-badge{ width:64px; height:64px; background:var(--gold); color:#0B0B0B; display:flex; align-items:center; justify-content:center; font-size:30px; transform:skewX(-8deg); margin:0 auto 18px; }

/* Utility */
.hatch-bg{ position:relative; }
.hatch-bg::before{ content:""; position:absolute; inset:0; background:var(--hatch); pointer-events:none; }
.divider{ border-color:var(--border) !important; opacity:1; }

.featured-wrap { row-gap:24px;}

/* ---------- Videos (highlights page) ---------- */
.video-card{ display:block; }
.video-frame{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:#0c0c0c; border:1px solid var(--border-3); cursor:pointer;
}
.video-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease, opacity .2s; }
.video-frame:hover .video-thumb{ transform:scale(1.04); opacity:.85; }
.video-thumb-poster{ display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#161616,#0c0c0c); }
.video-thumb-poster::after{ content:""; position:absolute; inset:0; background:var(--hatch); }
.video-thumb-poster .ghost-rz{ font-family:'Anton',sans-serif; color:rgba(255,255,255,.06); font-size:clamp(64px,12vw,96px); line-height:1; }
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:#0B0B0B; z-index:2; pointer-events:none;
  transition:background .15s, transform .15s;
}
.video-frame:hover .video-play{ background:#fff; transform:translate(-50%,-50%) scale(1.06); }
.video-frame.is-playing .video-play{ display:none; }
.video-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-title{ font-family:'Anton',sans-serif; text-transform:uppercase; color:#fff; font-size:20px; letter-spacing:.01em; margin:14px 0 0; }
.video-desc{ margin:6px 0 0; font-size:14px; }