/* =========================================================
   SERVICE PANELS — Reusable Cross-Service Component
   Used on Revenue + all individual service pages
========================================================= */

/* =========================
   WRAPPER
========================= */

.service-panels {
  background: #f7f5f0;
  padding: 50px 40px 140px;
}

.service-panels-inner {
  max-width: 1240px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(520px, 1fr));
  gap: 80px;

  align-items: start;
}

/* =========================
   HEADER
========================= */

.service-panels-head {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 40px;
}

.service-panels-title {
  font-family: "Castoro Titling", serif;
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: #f2dfb8;

  -webkit-text-stroke: 0.6px #b89a5a;

  text-shadow:
    0 0 6px rgba(242, 223, 184, 0.35),
    0 2px 10px rgba(184, 154, 90, 0.18);
}

/* =========================
   PANEL CARDS
========================= */

.service-panel-card {
  background: radial-gradient(
    circle at top,
    #0f2438,
    #0b1c2d 70%
  );

  border-radius: 28px;
  padding: 64px 56px 72px;

  border: 2px solid rgba(220, 201, 163, 0.55);

  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);

  transition: transform 240ms ease, box-shadow 240ms ease;
}

.service-panel-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 36px 64px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.service-panel-group-title {
  font-family: "Castoro Titling", serif;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f2dfb8;
  text-align: center;
  margin-bottom: 56px;
}

/* =========================
   SERVICE TILES
========================= */

.service-panel-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 40px;
  margin: 0 auto;
}

.service-panel-tile {
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  justify-items: center;
  text-align: center;
  transition: transform 180ms ease;
}

.service-panel-tile:hover {
  transform: translateY(-2px);
}

.service-panel-icon {
  width: 150px;
  height: 150px;
  object-fit: contain;
  transition: transform 200ms ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.service-panel-tile:hover .service-panel-icon {
  transform: translateY(-4px);
}

.service-panel-title {
  font-family: "Castoro Titling", serif;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: rgba(247, 245, 240, 0.92);
  max-width: 20ch;
}
/* =========================================
   ALL EXEC / PREVIEW CARDS — MATCH AUDIT MOBILE
========================================= */
@media (max-width: 900px) {
  body.mobile-base .dva-page .dva-exec,
  body.mobile-base .exec-page .ed-exec,
  body.mobile-base .rev-page .rev-exec,
  body.mobile-base .pc-page .pc-exec,
  body.mobile-base .custom-page .custom-exec,
  body.mobile-base .template-page .template-exec,
  body.mobile-base .redesign-page .redesign-exec,
  body.mobile-base .uxui-page .uxui-exec {
    padding: 72px 0 84px !important;
  }

  body.mobile-base .dva-page .dva-exec-card,
  body.mobile-base .exec-page .ed-exec-card,
  body.mobile-base .rev-page .rev-exec-card,
  body.mobile-base .pc-page .pc-exec-card,
  body.mobile-base .custom-page .custom-exec-card,
  body.mobile-base .template-page .template-exec-card,
  body.mobile-base .redesign-page .redesign-exec-card,
  body.mobile-base .uxui-page .uxui-exec-card {
    width: 100% !important;
    max-width: 100% !important;
    background: #fbfaf7 !important;
    border-radius: 28px !important;
    border: 2px solid rgba(220, 201, 163, 0.55) !important;
    padding: 52px 26px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    position: relative !important;
  }

  body.mobile-base .dva-page .dva-exec-card::before,
  body.mobile-base .exec-page .ed-exec-card::before,
  body.mobile-base .rev-page .rev-exec-card::before,
  body.mobile-base .pc-page .pc-exec-card::before,
  body.mobile-base .custom-page .custom-exec-card::before,
  body.mobile-base .template-page .template-exec-card::before,
  body.mobile-base .redesign-page .redesign-exec-card::before,
  body.mobile-base .uxui-page .uxui-exec-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    border: 2px solid rgba(220, 201, 163, 0.35);
    pointer-events: none;
  }

  body.mobile-base .dva-page .dva-exec-grid,
  body.mobile-base .exec-page .ed-exec-grid,
  body.mobile-base .rev-page .rev-exec-grid,
  body.mobile-base .pc-page .pc-exec-grid,
  body.mobile-base .custom-page .custom-exec-grid,
  body.mobile-base .template-page .template-exec-grid,
  body.mobile-base .redesign-page .redesign-exec-grid,
  body.mobile-base .uxui-page .uxui-exec-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
  }

  body.mobile-base .dva-page .dva-exec-copy,
  body.mobile-base .exec-page .ed-exec-copy,
  body.mobile-base .rev-page .rev-exec-copy,
  body.mobile-base .pc-page .pc-exec-copy,
  body.mobile-base .custom-page .custom-exec-copy,
  body.mobile-base .template-page .template-exec-copy,
  body.mobile-base .redesign-page .redesign-exec-copy,
  body.mobile-base .uxui-page .uxui-exec-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  body.mobile-base .dva-page .dva-exec-copy h2,
  body.mobile-base .exec-page .ed-exec-copy h2,
  body.mobile-base .rev-page .rev-exec-copy h2,
  body.mobile-base .pc-page .pc-exec-copy h2,
  body.mobile-base .custom-page .custom-exec-copy h2,
  body.mobile-base .template-page .template-exec-copy h2,
  body.mobile-base .redesign-page .redesign-exec-copy h2,
  body.mobile-base .uxui-page .uxui-exec-copy h2 {
    text-align: center !important;
    margin: 0 0 22px !important;
  }

  body.mobile-base .dva-page .dva-exec-copy p,
  body.mobile-base .exec-page .ed-exec-copy p,
  body.mobile-base .rev-page .rev-exec-copy p,
  body.mobile-base .pc-page .pc-exec-copy p,
  body.mobile-base .custom-page .custom-exec-copy p,
  body.mobile-base .template-page .template-exec-copy p,
  body.mobile-base .redesign-page .redesign-exec-copy p,
  body.mobile-base .uxui-page .uxui-exec-copy p {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.mobile-base .dva-page .dva-exec-copy ul,
  body.mobile-base .exec-page .ed-exec-copy ul,
  body.mobile-base .rev-page .rev-exec-copy ul,
  body.mobile-base .pc-page .pc-exec-copy ul,
  body.mobile-base .custom-page .custom-exec-copy ul,
  body.mobile-base .template-page .template-exec-copy ul,
  body.mobile-base .redesign-page .redesign-exec-copy ul,
  body.mobile-base .uxui-page .uxui-exec-copy ul {
    width: fit-content !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    padding-left: 1.2em !important;
    text-align: left !important;
  }

  body.mobile-base .dva-page .dva-exec-copy li,
  body.mobile-base .exec-page .ed-exec-copy li,
  body.mobile-base .rev-page .rev-exec-copy li,
  body.mobile-base .pc-page .pc-exec-copy li,
  body.mobile-base .custom-page .custom-exec-copy li,
  body.mobile-base .template-page .template-exec-copy li,
  body.mobile-base .redesign-page .redesign-exec-copy li,
  body.mobile-base .uxui-page .uxui-exec-copy li {
    text-align: left !important;
    margin-bottom: 14px !important;
  }

  body.mobile-base .dva-page .dva-exec-image-wrap,
  body.mobile-base .exec-page .ed-exec-image-wrap,
  body.mobile-base .rev-page .rev-exec-image-wrap,
  body.mobile-base .pc-page .pc-exec-image-wrap,
  body.mobile-base .custom-page .custom-exec-image-wrap,
  body.mobile-base .template-page .template-exec-image-wrap,
  body.mobile-base .redesign-page .redesign-exec-image-wrap,
  body.mobile-base .uxui-page .uxui-exec-image-wrap {
    width: 92% !important;
    max-width: 360px !important;
    aspect-ratio: 16 / 9 !important;
    margin: -18px auto 8px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: none !important;
  }

  body.mobile-base .dva-page .dva-exec-image,
  body.mobile-base .exec-page .ed-exec-image,
  body.mobile-base .rev-page .rev-exec-image,
  body.mobile-base .pc-page .pc-exec-image,
  body.mobile-base .custom-page .custom-exec-image,
  body.mobile-base .template-page .template-exec-image,
  body.mobile-base .redesign-page .redesign-exec-image,
  body.mobile-base .uxui-page .uxui-exec-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  .service-panels-inner {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .service-panels {
    padding: 120px 24px 140px;
  }

  .service-panel-tiles {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 520px) {
  .service-panel-tiles {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body.mobile-base .service-panel-icon {
    width: 110px !important;
    height: 110px !important;
  }

  body.mobile-base .service-panel-title {
    font-size: 1.02rem !important;
    max-width: 14ch !important;
  }

  body.mobile-base .service-panel-tile {
    max-width: 180px !important;
    margin: 0 auto !important;
  }
}

/* =========================================
   IPAD OVERRIDES
========================================= */

/* Portrait */
@media (orientation: portrait) {
  body.ipad-base .service-panels {
    padding: 56px 20px 80px !important;
  }

  body.ipad-base .service-panels-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.ipad-base .service-panel-card {
    width: 92% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 34px 22px 38px !important;
  }

  body.ipad-base .service-panel-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 18px !important;
    justify-items: center !important;
  }

  body.ipad-base .service-panel-tile {
    max-width: 180px !important;
    margin: 0 auto !important;
  }

  body.ipad-base .service-panel-icon {
    width: 118px !important;
    height: 118px !important;
    transform: none !important;
  }

  body.ipad-base .service-panel-title {
    font-size: 0.82rem !important;
    max-width: 12ch !important;
  }

  body.ipad-base .service-panel-card:first-of-type .service-panel-tile:last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
}

/* Landscape */
@media (orientation: landscape) {
  body.ipad-base .service-panels-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 60px !important;
  }

  body.ipad-base .service-panel-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 36px 32px !important;
    justify-items: center !important;
  }

  body.ipad-base .service-panel-tile {
    max-width: 220px !important;
    margin: 0 auto !important;
  }

  body.ipad-base .service-panel-icon {
    width: 130px !important;
    height: 130px !important;
    transform: none !important;
  }

  body.ipad-base .service-panel-title {
    font-size: 1rem !important;
    max-width: 14ch !important;
  }

  body.ipad-base .service-panel-card:first-of-type .service-panel-tile:last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
}


/* =========================
   IPAD OVERRIDES — HIGH SPECIFICITY
========================= */
html body.ipad-base .service-panel-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px 18px !important;
  justify-items: center !important;
}

html body.ipad-base .service-panel-tile {
  max-width: 180px !important;
  margin: 0 auto !important;
}

html body.ipad-base .service-panel-icon {
  width: 118px !important;
  height: 118px !important;
  transform: none !important;
}

html body.ipad-base .service-panel-title {
  font-size: 0.82rem !important;
  max-width: 12ch !important;
}

html body.ipad-base .service-panel-card:first-of-type .service-panel-tile:last-child {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}