/* ==========================================================================
   Service Detail Pages Rebuild
   Applies only to individual service pages.
   ========================================================================== */
.service-detail-page { background: #ffffff; }
.service-detail-hero { padding: 58px 0 46px; background: radial-gradient(circle at 84% 18%, rgba(169, 213, 238, 0.24), transparent 30rem), linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%); }
.service-detail-hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(44px, 6vw, 82px); align-items: center; }
.service-detail-hero h1 { font-size: clamp(48px, 5.2vw, 82px); line-height: 0.92; margin-bottom: var(--space-5); }
.service-detail-hero h1 em { color: var(--aim-olive); }
.service-detail-hero .body-copy { max-width: 56ch; font-size: 17px; line-height: 1.78; }
.service-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }
.service-visual-card { position: relative; min-height: 420px; overflow: hidden; border: 1px solid rgba(79, 163, 217, 0.16); border-radius: 34px; background: radial-gradient(circle at 84% 18%, rgba(255,255,255,.9), transparent 14rem), linear-gradient(180deg, #ffffff 0%, var(--aim-sky-soft) 100%); box-shadow: var(--shadow-hero); }
.service-visual-content { position: relative; z-index: 2; height: 100%; min-height: 420px; padding: clamp(32px, 5vw, 58px); display: grid; align-content: center; justify-items: center; text-align: center; }
.service-visual-icon { width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: var(--space-5); border-radius: 50%; background: #ffffff; color: var(--aim-sky-700); border: 1px solid rgba(79, 163, 217, 0.24); box-shadow: 0 18px 42px rgba(4, 34, 73, 0.08); }
.service-visual-icon svg { width: 46px; height: 46px; }
.service-visual-card h2 { font-size: clamp(34px, 3.2vw, 52px); line-height: 0.98; margin-bottom: var(--space-4); }
.service-visual-card p { max-width: 34ch; margin: 0; color: var(--aim-text-soft); }
.service-visual-card::before, .service-visual-card::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.service-visual-card::before { width: 260px; height: 260px; right: -80px; bottom: -80px; background: rgba(169, 213, 238, 0.25); }
.service-visual-card::after { width: 180px; height: 180px; left: -60px; top: -60px; background: rgba(255, 255, 255, 0.75); }
.service-overview-section { padding: 82px 0; background: #ffffff; }
.service-section-header { max-width: 780px; margin: 0 auto var(--space-7); text-align: center; }
.service-section-header h2 { font-size: clamp(42px, 4.4vw, 70px); line-height: 0.95; }
.service-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.service-feature-card { min-height: 238px; padding: 32px 34px; border: 1px solid rgba(79, 163, 217, 0.16); border-radius: 26px; background: radial-gradient(circle at 96% 96%, rgba(234, 245, 251, 0.78), transparent 6rem), rgba(255,255,255,.96); box-shadow: 0 12px 30px rgba(4, 34, 73, 0.055); }
.service-feature-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--space-4); border-radius: 50%; background: var(--aim-sky-soft); color: var(--aim-sky-700); border: 1px solid rgba(79, 163, 217, 0.22); }
.service-feature-icon svg { width: 26px; height: 26px; }
.service-feature-card h3 { margin: 0 0 var(--space-3); color: var(--aim-blue); font-family: var(--font-heading); font-size: clamp(26px, 2.2vw, 36px); font-weight: 500; line-height: 1; }
.service-feature-card p { margin: 0; color: var(--aim-text-soft); font-size: 15px; line-height: 1.58; }
.service-process-section { padding: 82px 0; background: linear-gradient(180deg, var(--aim-sky-soft) 0%, #f7fbfd 100%); }
.service-process-panel { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-7); align-items: center; padding: clamp(34px, 5vw, 58px); border: 1px solid rgba(79, 163, 217, 0.14); border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-soft); }
.service-process-panel h2 { font-size: clamp(38px, 4vw, 64px); line-height: .95; margin-bottom: var(--space-5); }
.service-process-steps { display: grid; gap: var(--space-4); }
.service-process-step { display: grid; grid-template-columns: 46px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: 20px; background: #ffffff; border: 1px solid rgba(79, 163, 217, 0.12); }
.service-step-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--aim-olive-900); color: #ffffff; font-weight: 850; font-size: 13px; }
.service-process-step h3 { margin: 0 0 5px; color: var(--aim-blue); font-family: var(--font-body); font-size: 15px; font-weight: 850; }
.service-process-step p { margin: 0; color: var(--aim-text-soft); font-size: 14px; line-height: 1.5; }
.service-related-section { padding: 82px 0; background: #ffffff; }
.service-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.service-related-card { display: flex; flex-direction: column; min-height: 210px; padding: 30px 32px; border: 1px solid rgba(79, 163, 217, 0.16); border-radius: 24px; background: radial-gradient(circle at 96% 96%, rgba(234, 245, 251, 0.72), transparent 6rem), #ffffff; box-shadow: 0 12px 30px rgba(4, 34, 73, 0.055); text-decoration: none; color: inherit; }
.service-related-card h3 { margin: 0 0 var(--space-3); color: var(--aim-blue); font-family: var(--font-heading); font-size: 30px; line-height: 1; font-weight: 500; }
.service-related-card p { margin: 0; color: var(--aim-text-soft); line-height: 1.55; }
.service-related-card span { margin-top: auto; padding-top: var(--space-5); color: var(--aim-olive-900); font-size: 12px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.service-note { padding: var(--space-5); border-radius: 20px; background: #fff8f5; border: 1px solid rgba(138, 51, 36, 0.18); color: var(--aim-text-soft); font-size: 14px; line-height: 1.6; }
@media (max-width: 1050px) { .service-detail-hero-grid, .service-process-panel { grid-template-columns: 1fr; } .service-feature-grid, .service-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .service-feature-grid, .service-related-grid { grid-template-columns: 1fr; } .service-visual-card, .service-visual-content { min-height: 330px; } .service-process-panel, .service-feature-card { padding: 28px; } }



/* ==========================================================================
   Related/new service page image polish
   Makes image-based service detail heroes feel more refined and less oversized.
   ========================================================================== */
.service-detail-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  gap: clamp(34px, 5vw, 68px);
}

.service-visual-image-card {
  align-self: center;
  justify-self: end;
  width: min(100%, 560px);
  min-height: clamp(300px, 34vw, 440px);
  padding: 14px;
  border-radius: 34px;
  border: 1px solid rgba(79, 163, 217, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,251,253,0.98) 100%);
  box-shadow: 0 20px 52px rgba(4, 34, 73, 0.10);
  overflow: hidden;
}

.service-visual-image-card::before,
.service-visual-image-card::after {
  display: none !important;
}

.service-visual-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 34vw, 440px);
  border-radius: 26px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 12px 28px rgba(4, 34, 73, 0.08);
}

@media (max-width: 980px) {
  .service-detail-hero-grid {
    grid-template-columns: 1fr;
  }

  .service-visual-image-card {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 640px) {
  .service-visual-image-card {
    padding: 10px;
    min-height: 260px;
    border-radius: 26px;
  }

  .service-visual-image-card img {
    min-height: 260px;
    border-radius: 20px;
  }
}