/* =====================================================================
   Oswald — Local font-face definitions
   ===================================================================== */
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald/static/Oswald-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald/static/Oswald-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald/static/Oswald-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald/static/Oswald-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald/static/Oswald-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald/static/Oswald-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   Inter — Local font-face definitions
   ===================================================================== */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* =====================================================================
   BRAND TOKENS
   These feed Bootstrap's own CSS-variable layer (--bs-*) so every
   Bootstrap component (btn-primary, text-primary, borders, etc.)
   automatically inherits the brand palette with zero overrides below.
   ===================================================================== */
:root{
  --red:#E30613;
  --red-dark:#B30510;
  --black:#17181A;
  --grey-dark:#2B2C2E;
  --grey-mid:#8A8D93;
  --grey-line:#E4E3E0;
  --grey-light:#F4F3F1;
  --white:#FFFFFF;

  /* --- Bootstrap variable remapping --- */
  --bs-primary: var(--red);
  --bs-primary-rgb: 227, 6, 19;
  --bs-primary-text-emphasis: var(--red-dark);
  --bs-primary-bg-subtle: #FBE1E3;
  --bs-primary-border-subtle: #F3B3B8;

  --bs-dark: var(--black);
  --bs-dark-rgb: 23, 24, 26;
  --bs-secondary-color: var(--grey-mid);
  --bs-border-color: var(--grey-line);
  --bs-body-color: var(--black);
  --bs-body-bg: var(--white);
  --bs-link-color: var(--black);
  --bs-link-hover-color: var(--red);
  --bs-body-font-family:'Inter',sans-serif;
  --bs-heading-color: var(--black);
}

html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;}
a{text-decoration:none;}

h1,h2,h3,.eyebrow,.navbar-nav .nav-link,.btn,.dial-label{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
}

/* ---------- brand buttons (mapped onto Bootstrap's .btn-primary) ---------- */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--red);
  --bs-btn-border-color:var(--red);
  --bs-btn-hover-bg:var(--red-dark);
  --bs-btn-hover-border-color:var(--red-dark);
  --bs-btn-active-bg:var(--red-dark);
  --bs-btn-active-border-color:var(--red-dark);
  font-size:11.5px;font-weight:600;letter-spacing:0.8px;padding:13px 22px;border-radius:0;
}
.btn-outline-primary{
  --bs-btn-color:var(--red);
  --bs-btn-border-color:var(--red);
  --bs-btn-hover-bg:var(--red);
  --bs-btn-hover-border-color:var(--red);
  font-size:11.5px;font-weight:600;letter-spacing:0.8px;padding:13px 22px;border-radius:0;
}

/* ---------- header / navbar ---------- */
.navbar-brand{display:flex;align-items:center;gap:10px;font-family:'Oswald';font-weight:700;font-size:15px;letter-spacing:0.5px;color:var(--black);}
.navbar-brand .infinity{color:var(--red);font-size:22px;font-weight:700;}
.navbar-nav .nav-link{font-size:12.5px;font-weight:500;letter-spacing:0.6px;color:var(--grey-dark);position:relative;padding-bottom:4px;}
.navbar-nav .nav-link.active{color:var(--black);}
.navbar-nav .nav-link.active::after{content:"";position:absolute;left:0.5rem;right:0.5rem;bottom:-2px;height:2px;background:var(--red);}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--black);color:var(--white);padding:88px 0 96px;overflow:hidden;}
.hero::before{
  content:"";position:absolute;right:-6%;top:-20%;width:640px;height:640px;
  background:radial-gradient(circle,rgba(227,6,19,0.35) 0%,rgba(227,6,19,0) 70%);
}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;color:var(--red);margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);}
.hero h1{font-size:56px;line-height:1.04;font-weight:700;letter-spacing:0.5px;color:#fff;}
.hero h1 span{color:var(--red);}
.hero p.lead{font-family:'Inter';text-transform:none;max-width:480px;margin-top:22px;font-size:15.5px;line-height:1.65;color:#D6D6D8;}

/* channel dial signature element */
.dial-nav{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,0.18);}
.dial-item{display:flex;align-items:center;gap:16px;padding:14px 0 14px 22px;cursor:pointer;position:relative;transition:opacity .2s ease;opacity:0.55;}
.dial-item:hover{opacity:0.85;}
.dial-item.active{opacity:1;}
.dial-item.active::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--red);}
.dial-num{font-family:'Oswald';font-size:11px;color:var(--grey-mid);width:20px;}
.dial-item.active .dial-num{color:var(--red);}
.dial-label{font-size:13.5px;font-weight:500;letter-spacing:1px;}

/* ---------- intro stats ---------- */
.intro-stat{border-left:1px solid var(--grey-line);}
.intro-stat:first-child{border-left:none;}
.intro-stat .num{font-family:'Oswald';font-size:34px;font-weight:600;color:var(--red);}
.intro-stat .lbl{font-size:12.5px;color:var(--grey-mid);margin-top:6px;line-height:1.5;text-transform:none;font-family:'Inter';}

/* ---------- media sections ---------- */
.media-section{padding:96px 0;border-bottom:1px solid var(--grey-line);}
.media-section.alt{background:var(--grey-light);}

.content .idx{font-family:'Oswald';font-size:13px;color:var(--red);letter-spacing:2px;margin-bottom:14px;}
.content h2{font-size:34px;font-weight:600;letter-spacing:0.3px;margin-bottom:16px;}
.content p.desc{font-family:'Inter';text-transform:none;font-size:15px;line-height:1.7;color:var(--grey-dark);max-width:440px;margin-bottom:26px;}
.spec-row{font-size:13.5px;}
.spec-row .k{font-family:'Oswald';font-weight:500;letter-spacing:0.5px;color:var(--black);width:130px;flex-shrink:0;font-size:12px;}
.spec-row .v{font-family:'Inter';color:var(--grey-mid);}

.visual{aspect-ratio:4/3;border-radius:2px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.visual svg{width:60%;height:60%;}
.visual .tag{position:absolute;bottom:20px;left:20px;background:rgba(23,24,26,0.85);color:var(--white);font-family:'Oswald';font-size:11px;letter-spacing:1.5px;padding:7px 14px;}

.v-ledwall{background:linear-gradient(135deg,#1a1b1d,#2f3134);}
.v-outdoor{background:linear-gradient(135deg,var(--red),#a30410);}
.v-radio{background:linear-gradient(135deg,var(--black),#3a3b3d);}
.v-digital{background:var(--grey-light);border:1px solid var(--grey-line);}
.v-digital svg{width:70%;height:70%;}
.v-tv{background:linear-gradient(135deg,#232427,#0f0f10);}

/* ---------- comparison table ---------- */
.compare h2{font-size:28px;font-weight:600;}
.compare .sub{font-family:'Inter';text-transform:none;color:var(--grey-mid);font-size:14px;}
.table thead th{font-family:'Oswald';font-size:11.5px;letter-spacing:1px;color:var(--grey-mid);font-weight:500;text-transform:uppercase;border-bottom-width:1px;}
.table td, .table th{font-size:13.5px;vertical-align:middle;}
td.media-name{font-family:'Oswald';font-weight:600;letter-spacing:0.5px;font-size:13px;}
td.media-name .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:10px;}

/* ---------- CTA banner ---------- */
.cta-banner h3{color:#fff; font-size:26px;font-weight:600;max-width:520px;line-height:1.3;text-transform:none;font-family:'Inter';}
.cta-banner h3 span{color:var(--red);font-family:'Oswald';text-transform:uppercase;}

/* ---------- footer ---------- */
footer{font-size:12px;color:var(--grey-mid);}
footer .foot-nav a{font-family:'Oswald';font-size:11px;letter-spacing:0.5px;color:var(--grey-mid);}
footer .foot-nav a:hover{color:var(--red);}

@media (max-width:991.98px){
  .hero h1{font-size:38px;}
}


.navbar-brand img
{
    width: 160px;
}