.service-detail-page{background:#080809;color:#fff}
.service-detail-hero{position:relative;overflow:hidden;border-bottom:2px solid var(--red,#ef2b2d);background:radial-gradient(circle at 84% 40%,rgba(239,43,45,.28),transparent 28%),linear-gradient(120deg,#030304 0%,#0b0b0d 58%,#190708 100%)}
.service-detail-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,#000 65%)}
.service-detail-hero-inner{position:relative;z-index:1;width:min(1360px,calc(100% - 70px));min-height:430px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:50px}
.service-detail-heading{max-width:760px;padding:65px 0}
.service-detail-kicker{display:block;margin-bottom:8px;color:var(--red,#ef2b2d);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.service-detail-heading h1{margin:0;color:#fff;font-size:clamp(48px,5.8vw,82px);font-weight:950;letter-spacing:-.045em;line-height:.98}
.service-detail-heading h2{max-width:700px;margin:17px 0 12px;color:#fff;font-size:clamp(20px,2vw,29px);font-weight:900;line-height:1.15}
.service-detail-heading p{max-width:720px;margin:0;color:#c5c5ca;font-size:16px;line-height:1.65}
.service-detail-hero-button,.service-detail-cta-button{min-height:52px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;margin-top:25px;padding:0 22px;border:1px solid var(--red,#ef2b2d);border-radius:5px;background:var(--red,#ef2b2d);color:#fff;font-size:11px;font-weight:900;letter-spacing:.04em;text-decoration:none;text-transform:uppercase}
.service-detail-hero-button span,.service-detail-cta-button span{font-size:20px}
.service-detail-hero-button:hover,.service-detail-cta-button:hover{background:#c91a22}
.service-detail-hero-mark {
  width: min(390px, 31vw);
  min-height: 310px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 22px;

  box-sizing: border-box;

  border: 1px solid rgba(239, 43, 45, .55);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at center,
      rgba(239, 43, 45, .16),
      rgba(0, 0, 0, .6) 70%
    );

  box-shadow:
    0 0 0 10px rgba(239, 43, 45, .025),
    0 0 80px rgba(239, 43, 45, .15);
}
.service-detail-hero-mark img {
  display: block;

  width: 100%;
  max-width: 345px;
  height: auto;

  object-fit: contain;

  border-radius: 10px;

  filter:
    drop-shadow(
      0 10px 20px
      rgba(0, 0, 0, .5)
    );
}
.service-detail-content{width:min(1360px,calc(100% - 70px));margin:0 auto;padding:58px 0 70px}
.service-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.service-detail-card{position:relative;min-height:310px;padding:31px;overflow:hidden;border:1px solid #343438;border-radius:8px;background:linear-gradient(145deg,#171719,#101012)}
.service-detail-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:#4a4a4f}
.service-detail-warning::before{background:var(--red,#ef2b2d)}
.service-card-number{display:block;margin-bottom:13px;color:var(--red,#ef2b2d);font-size:11px;font-weight:900;letter-spacing:.12em}
.service-detail-card h2{margin:0 0 20px;color:#fff;font-size:25px;font-weight:950}
.service-detail-card ul{margin:0;padding:0;list-style:none}
.service-detail-card li{position:relative;margin-bottom:12px;padding-left:22px;color:#c9c9ce;font-size:14px;line-height:1.5}
.service-detail-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red,#ef2b2d);font-weight:950}
.service-detail-warning li::before{content:"!"}
.service-check-section{margin-top:18px;padding:34px;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;border:1px solid #343438;border-radius:8px;background:#111113}
.service-check-copy h2{margin:0 0 10px;color:#fff;font-size:31px;font-weight:950}
.service-check-copy p{margin:0;color:#a9a9af;font-size:14px;line-height:1.6}
.service-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.service-check-list div{min-height:48px;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #2f2f33;border-radius:5px;background:#151517;color:#e8e8ea;font-size:12px;font-weight:800}
.service-check-list span{color:var(--red,#ef2b2d);font-weight:950}
.service-detail-cta{margin-top:18px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:35px;border:1px solid var(--red,#ef2b2d);border-radius:8px;background:linear-gradient(120deg,#161618,#09090a)}
.service-detail-cta h2{margin:0;color:#fff;font-size:31px;font-weight:950}
.service-detail-cta p{margin:5px 0 0;color:#aaaab0;font-size:13px}
.service-detail-cta-button{flex:0 0 auto;margin-top:0}
.service-dual-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.service-detail-cta-secondary{background:transparent}
.service-detail-cta-secondary:hover{background:var(--red,#ef2b2d)}
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .service-detail-hero-inner {
    min-height: 390px;
  }


  .service-detail-hero-mark {
    width: 260px;
  }


  .service-check-section {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .service-detail-cta {
    align-items: flex-start;

    flex-direction: column;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .service-detail-hero-inner,
  .service-detail-content {
    width: calc(100% - 36px);
  }


  .service-detail-hero-inner {
    min-height: 0;

    display: block;
  }


  .service-detail-heading {
    max-width: none;

    padding: 45px 0 30px;
  }


  .service-detail-heading h1 {
    font-size: 49px;
  }


  .service-detail-heading h2 {
    font-size: 22px;
  }


  .service-detail-heading p {
    font-size: 14px;
  }


  /* MAC BROTHERS LOGO ON MOBILE */

  .service-detail-hero-mark {
    width: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 0 35px !important;
    padding: 18px !important;

    box-sizing: border-box;

    border-radius: 12px;
  }


  .service-detail-hero-mark img {
    display: block;

    width: 100%;
    max-width: 290px;

    height: auto;

    margin: 0 auto;

    object-fit: contain;
  }


  .service-detail-hero-button {
    width: 100%;

    box-sizing: border-box;
  }


  .service-detail-content {
    padding: 35px 0 50px;
  }


  .service-detail-grid {
    grid-template-columns: 1fr;
  }


  .service-detail-card {
    min-height: 0;

    padding: 25px 22px;
  }


  .service-detail-card h2 {
    font-size: 22px;
  }


  .service-detail-card li {
    font-size: 13px;
  }


  .service-check-section {
    padding: 25px 20px;
  }


  .service-check-list {
    grid-template-columns: 1fr;
  }


  .service-detail-cta {
    padding: 25px 20px;
  }


  .service-detail-cta h2 {
    font-size: 26px;
  }


  .service-detail-cta-button {
    width: 100%;

    box-sizing: border-box;
  }


  .service-dual-actions {
    width: 100%;
  }

}