/* ============================================
   KOEOP — Brand: Black #0A0A0A / Guards Red #C8102E
   Display: Anton | Body: Montserrat
============================================ */

:root{
  --black:#0A0A0A;
  --red:#C8102E;
  --red-dark:#9c0d24;
  --cream:#F5F4F1;
  --gray-100:#F0EFEC;
  --gray-300:#D8D6D1;
  --gray-600:#6b6b68;
  --white:#ffffff;
  --radius:2px;
  --maxw:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.05;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  color:var(--red);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.6em;
  display:block;
}
.section{ padding:80px 0; }
.section--tight{ padding:56px 0; }
.section--black{ background:var(--black); color:var(--white); }
.section--gray{ background:var(--gray-100); }
.center{ text-align:center; }
.mt-0{margin-top:0;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:15px 28px;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.btn--red{ background:var(--red); color:var(--white); border-color:var(--red); }
.btn--red:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn--outline{ background:transparent; color:var(--white); border-color:var(--white); }
.btn--outline:hover{ background:var(--white); color:var(--black); }
.btn--outline-dark{ background:transparent; color:var(--black); border-color:var(--black); }
.btn--outline-dark:hover{ background:var(--black); color:var(--white); }
.btn--block{ width:100%; }

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--black);
  border-bottom:1px solid #222;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{
  font-family:'Anton',sans-serif;
  font-size:1.9rem;
  color:var(--white);
  letter-spacing:.01em;
  position:relative;
  display:inline-flex;
  transform:skewX(-8deg);
}
.logo span{ color:var(--red); }

.nav-links{
  display:flex; gap:34px;
  align-items:center;
}
.nav-links a{
  color:var(--white);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{ border-bottom-color:var(--red); }

.header-ctas{ display:flex; align-items:center; gap:12px; }
.header-ctas .btn{ padding:12px 20px; font-size:.75rem; }

.nav-toggle{
  display:none;
  background:none; border:none; color:var(--white);
  font-size:1.6rem; cursor:pointer;
}

@media (max-width: 980px){
  .nav-links, .header-ctas{ display:none; }
  .nav-toggle{ display:block; }
  .site-header.open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:78px; left:0; right:0;
    background:var(--black); padding:20px 24px; gap:18px;
    border-bottom:2px solid var(--red);
  }
  .site-header.open .header-ctas{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:calc(78px + 230px); left:0; right:0;
    background:var(--black); padding:0 24px 24px;
    gap:10px;
  }
}

/* ============ HERO ============ */
.hero{
  background:var(--black); color:var(--white);
  padding:64px 0 72px;
}
.hero .container{
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
}
.hero-eyebrow{ color:var(--red); font-weight:700; letter-spacing:.14em; font-size:.8rem; text-transform:uppercase; margin-bottom:14px; display:block; }
.hero h1{ font-size:3.1rem; margin-bottom:18px; }
.hero h1 .accent{ color:var(--red); }
.hero p.lede{ font-size:1.05rem; color:#d8d8d6; max-width:46ch; margin-bottom:26px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.hero-trust{ display:flex; align-items:center; gap:10px; font-size:.8rem; color:#b8b8b6; }
.hero-media{ border-radius:4px; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; border-radius:4px; }

@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.2rem; }
}

/* ============ FEATURE GRID ============ */
.feature-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:28px;
  margin-top:40px;
}
.feature-item{ text-align:center; }
.feature-item .icon{
  width:52px;height:52px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
}
.feature-item .icon svg{ width:34px; height:34px; }
.feature-item h4{ font-size:.85rem; margin-bottom:6px; letter-spacing:.03em; }
.feature-item p{ font-size:.82rem; color:var(--gray-600); margin:0; }

@media (max-width:900px){
  .feature-grid{ grid-template-columns:repeat(3,1fr); row-gap:32px; }
}
@media (max-width:560px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ============ SECTION HEADINGS ============ */
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head h2{ font-size:2.2rem; }
.section-head p{ color:var(--gray-600); font-size:1rem; }

/* ============ STEPS ============ */
.steps{
  display:grid; grid-template-columns:repeat(6,1fr); gap:20px; position:relative;
}
.step{ text-align:center; }
.step .num{
  width:56px;height:56px;border-radius:50%;
  background:var(--black); color:var(--white);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px; position:relative;
}
.step .num svg{ width:24px;height:24px; }
.step .num .dot{
  position:absolute; top:-8px; right:-8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--red); color:var(--white);
  font-family:'Anton',sans-serif; font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
}
.step h4{ font-size:.85rem; margin-bottom:6px; }
.step p{ font-size:.8rem; color:var(--gray-600); }

@media (max-width:900px){
  .steps{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:repeat(2,1fr); }
}

/* connecting line for steps */
.steps-wrap{ position:relative; }
.steps-line{
  position:absolute; top:28px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(to right, var(--red) 0 8px, transparent 8px 16px);
  z-index:0;
}
@media (max-width:900px){ .steps-line{ display:none; } }

/* ============ CARDS ============ */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--white); border:1px solid var(--gray-300); border-radius:4px;
  padding:28px;
}
.card h3{ font-size:1rem; margin-bottom:10px; }
.card p{ font-size:.88rem; color:var(--gray-600); }
@media (max-width:900px){ .card-grid{ grid-template-columns:1fr; } }

/* ============ PRICING ============ */
.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.price-card{
  background:var(--white); border:1px solid var(--gray-300); border-radius:4px; overflow:hidden;
  position:relative;
}
.price-card__head{
  background:var(--black); color:var(--white);
  padding:16px 24px; font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
}
.price-card--accent .price-card__head{ background:var(--red); }
.price-card__body{ padding:26px 24px 10px; }
.price-row{ display:flex; gap:24px; margin-bottom:14px; }
.price-col{ flex:1; }
.price-col .label{ color:var(--red); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.price-col .amount{ font-family:'Anton',sans-serif; font-size:1.9rem; }
.price-col .amount small{ font-family:'Montserrat',sans-serif; font-size:.6rem; font-weight:600; color:var(--gray-600); text-transform:uppercase; margin-left:4px;}
.price-card ul{ margin:14px 0 20px; }
.price-card ul li{
  font-size:.85rem; padding:6px 0 6px 26px; position:relative; color:#333;
  border-top:1px solid var(--gray-100);
}
.price-card ul li:first-child{ border-top:none; }
.price-card ul li::before{
  content:'✓'; position:absolute; left:0; top:6px; color:var(--red); font-weight:700;
}
.price-card__foot{ padding:0 24px 24px; }
.best-value-tag{
  position:absolute; top:0; right:0;
  background:var(--black); color:var(--white);
  font-size:.65rem; font-weight:700; letter-spacing:.08em;
  padding:6px 14px; border-bottom-left-radius:4px;
}
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }

/* ============ STAT BAR ============ */
.stat-bar{
  background:var(--black); color:var(--white);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.stat{
  padding:36px 20px; text-align:center; border-left:1px solid #222;
}
.stat:first-child{ border-left:none; }
.stat .big{ font-family:'Anton',sans-serif; font-size:2.1rem; color:var(--red); }
.stat .label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
.stat .src{ font-size:.65rem; color:#888; margin-top:6px; }
@media (max-width:900px){ .stat-bar{ grid-template-columns:repeat(2,1fr); } .stat{ border-left:none; border-top:1px solid #222; } }

/* ============ POSTCARD MOCK ============ */
.postcard-mock{
  border:2px solid var(--black); border-radius:4px; overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.35);
}
.postcard-front{ position:relative; }
.postcard-front img{ width:100%; display:block; }
.postcard-back{ display:grid; grid-template-columns:repeat(3,1fr); }
.postcard-back img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.postcard-label{
  position:absolute; top:10px; left:10px; background:var(--black); color:var(--white);
  font-size:.65rem; font-weight:700; letter-spacing:.08em; padding:4px 10px; text-transform:uppercase;
}

/* ============ FAQ ACCORDION ============ */
.faq-item{ border-bottom:1px solid var(--gray-300); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 0; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.95rem;
  display:flex; justify-content:space-between; align-items:center; color:var(--black);
}
.faq-q .plus{ color:var(--red); font-size:1.3rem; transition:transform .2s ease; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:.88rem; color:var(--gray-600); }
.faq-a p{ padding-bottom:20px; margin:0; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-item.active .faq-q{ color:var(--red); }

/* ============ FORMS ============ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid--full{ grid-column:1 / -1; }
.field label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:8px;
}
.field label .req{ color:var(--red); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--gray-300); border-radius:2px;
  font-family:'Montserrat',sans-serif; font-size:.9rem; background:var(--white);
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--red); outline-offset:1px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

/* ============ CTA BAND ============ */
.cta-band{
  background:var(--black); color:var(--white);
  padding:42px 0;
}
.cta-band .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h3{ font-size:1.5rem; margin:0; }
.cta-band .actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--black); color:#ccc; padding:50px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-grid h5{
  color:var(--white); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:16px; font-family:'Montserrat',sans-serif; font-weight:700;
}
.footer-grid ul li{ margin-bottom:10px; font-size:.85rem; }
.footer-grid ul li a:hover{ color:var(--red); }
.footer-tagline{ font-size:.82rem; color:#999; margin-top:10px; max-width:32ch; }
.footer-social{ display:flex; gap:14px; margin-top:16px; }
.footer-bottom{
  border-top:1px solid #222; margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.75rem; color:#777;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ============ MISC PAGE HERO (interior pages) ============ */
.page-hero{ background:var(--black); color:var(--white); padding:56px 0; }
.page-hero .container{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.page-hero h1{ font-size:2.6rem; }
.page-hero p.lede{ color:#d8d8d6; max-width:48ch; }
.location-badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #444; padding:10px 16px; border-radius:2px;
  font-size:.8rem; font-weight:600; margin-top:8px;
}
.page-hero-media img{ border-radius:4px; width:100%; }
@media (max-width:900px){ .page-hero .container{ grid-template-columns:1fr; } .page-hero h1{ font-size:2rem; } }

/* comparison table */
.compare-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.compare-table th,.compare-table td{ padding:12px 14px; border-bottom:1px solid var(--gray-300); text-align:left; }
.compare-table th{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.compare-table th.koeop-col{ background:var(--red); color:var(--white); }
.compare-table td.koeop-col{ background:#fdecef; font-weight:700; }

/* sidebar tabs (FAQ) */
.faq-layout{ display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:start; }
.faq-tabs{ display:flex; flex-direction:column; gap:6px; }
.faq-tab{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:2px; font-size:.82rem; font-weight:700;
  color:var(--gray-600); cursor:pointer; border:1px solid transparent;
}
.faq-tab.active{ background:#fdecef; color:var(--red); border-color:#f6c9d0; }
@media (max-width:900px){ .faq-layout{ grid-template-columns:1fr; } .faq-tabs{ flex-direction:row; flex-wrap:wrap; } }

/* coverage cards */
.region-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.region-card{ border:1px solid var(--gray-300); border-radius:4px; overflow:hidden; }
.region-card__img{ position:relative; height:180px; }
.region-card__img img{ width:100%; height:100%; object-fit:cover; }
.region-tag{
  position:absolute; top:12px; left:12px; padding:4px 12px; font-size:.65rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; border-radius:2px; color:var(--white);
}
.region-card__body{ padding:22px; }
.region-card__body h3{ font-size:1.1rem; margin-bottom:4px; }
.region-card__body .sub{ color:var(--gray-600); font-size:.82rem; margin-bottom:16px; }
.region-list{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin-bottom:18px; }
.region-list li{ font-size:.82rem; display:flex; align-items:center; gap:6px; }
@media (max-width:900px){ .region-grid{ grid-template-columns:1fr; } }

/* calendar (book a call) */
.calendar-box{ border:1px solid var(--gray-300); border-radius:4px; padding:20px; }
.cal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-weight:700; font-size:.85rem; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; font-size:.78rem; margin-bottom:16px; }
.cal-grid .dow{ color:var(--gray-600); font-weight:700; padding:4px 0; }
.cal-grid button{
  background:none; border:none; padding:8px 0; border-radius:2px; cursor:pointer; font-family:'Montserrat',sans-serif;
}
.cal-grid button.muted{ color:var(--gray-300); }
.cal-grid button.selected{ background:var(--red); color:var(--white); font-weight:700; }
.time-list{ display:flex; flex-direction:column; gap:8px; }
.time-list button{
  padding:10px; border:1px solid var(--gray-300); background:var(--white); border-radius:2px; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-size:.85rem;
}
.time-list button.selected{ border-color:var(--red); color:var(--red); font-weight:700; }

/* utility */
.mb-0{margin-bottom:0;}
.text-red{color:var(--red);}
.small{font-size:.8rem;color:var(--gray-600);}
.hide-mobile{ }
@media (max-width:700px){ .hide-mobile{ display:none; } }


/* 2026-08 final approved revisions */
.clean-label{
  font-family:'Montserrat',sans-serif;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.035em;
  line-height:1.35;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.coverage-step-label{margin:0 0 5px;}
.postcard-sample-hero{overflow:visible;display:flex;justify-content:center;align-items:center;}
.postcard-sample-hero img{width:130%;max-width:none;height:auto;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(0,0,0,.16));}
.campaign-pricing-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gray-300);background:var(--white);}
.campaign-price-table{width:100%;min-width:760px;border-collapse:collapse;background:var(--white);}
.campaign-price-table th{background:var(--black);color:var(--white);padding:18px 20px;text-align:left;font-family:'Montserrat',sans-serif;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;}
.campaign-price-table td{padding:22px 20px;border-bottom:1px solid #e3e3e3;vertical-align:middle;}
.campaign-price-table tbody tr:last-child td{border-bottom:0;}
.campaign-price-table td:first-child{font-family:'Montserrat',sans-serif;font-size:1rem;}
.placement-price{display:block;font-family:'Anton',sans-serif;font-size:2rem;line-height:1;color:var(--black);letter-spacing:.01em;}
.per-door{display:inline-block;margin-top:9px;padding:5px 9px;background:#f2f2f2;color:var(--red);font-family:'Montserrat',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;border-radius:2px;}
.per-door--hero{background:var(--red);color:var(--white);font-size:.86rem;padding:7px 11px;}
.placement-note{display:block;margin-top:5px;color:#777;font-size:.72rem;font-weight:600;letter-spacing:.02em;}
.coupon-row{background:#fafafa;}
.region-grid--four{grid-template-columns:repeat(2,1fr);}
.regional-map{background:#f5f5f3;}
.regional-map img{width:100%;height:100%;object-fit:cover;display:block;}
.region-card .region-tag{background:var(--red);}
.region-link{font-weight:700;font-size:.85rem;}
@media (max-width:900px){
  .postcard-sample-hero img{width:100%;max-width:760px;}
  .region-grid--four{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .clean-label{font-size:.86rem;letter-spacing:.025em;}
}