#service-page {
  --sp-navy: #082b4c;
  --sp-deep: #031527;
  --sp-gold: #d3ad47;
  --sp-cream: #f7f2e7;
  --sp-ink: #17354d;
  --sp-muted: #647789;
  --sp-line: #e2e9ee;
  min-height: 100vh;
  background: #f7f9fa;
  color: var(--sp-ink);
  font: 15px/1.85 'Noto Sans Thai', sans-serif;
  overflow-wrap: anywhere;
}

#service-page *, #service-page *::before, #service-page *::after { box-sizing: border-box; }
#service-page h1, #service-page h2, #service-page h3, #service-page p { margin: 0; }
#service-page a { color: inherit; }

#service-page .sp-hero {
  position: relative;
  min-height: 365px;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--sp-deep);
}

#service-page .sp-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#service-page .sp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #031527ef 0%, #082b4cd9 46%, #082b4c65 100%);
}

#service-page .sp-hero-copy {
  width: min(1120px, 88%);
  margin: 0 auto;
  padding: 58px 0;
}

#service-page .sp-eyebrow {
  color: #f1d58d;
  font: 500 12px/1.4 'Prompt', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#service-page .sp-hero h1 {
  max-width: 720px;
  margin-top: 11px;
  color: #fff;
  font: 500 clamp(32px, 5vw, 56px)/1.25 'Prompt', sans-serif;
  letter-spacing: -.6px;
}

#service-page .sp-hero p {
  max-width: 620px;
  margin-top: 14px;
  color: #ecf2f5;
  font-size: 16px;
}

#service-page .sp-crumb {
  width: min(1120px, 88%);
  margin: 0 auto;
  padding: 19px 0 0;
  color: var(--sp-muted);
  font-size: 13px;
}

#service-page .sp-crumb a { color: #7d8b97; text-decoration: none; }
#service-page .sp-crumb a:hover { color: #9d781d; }

#service-page .sp-wrap { width: min(1120px, 88%); margin: 0 auto; padding: 32px 0 76px; }

#service-page .sp-intro {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 45px;
  align-items: center;
  padding: 16px 0 53px;
}

#service-page .sp-kicker {
  color: #a57e25;
  font: 500 12px/1.5 'Prompt', sans-serif;
  letter-spacing: 1px;
}

#service-page h2 {
  margin-top: 8px;
  color: var(--sp-navy);
  font: 500 clamp(26px, 3vw, 37px)/1.45 'Prompt', sans-serif;
}

#service-page .sp-intro-copy > p { margin-top: 14px; color: #536879; }

#service-page .sp-note {
  margin-top: 20px;
  padding: 17px 20px;
  border-left: 3px solid var(--sp-gold);
  background: var(--sp-cream);
  color: #5b5d5d;
  font-size: 13px;
}

#service-page .sp-intro-photo {
  height: 290px;
  margin: 0;
  overflow: hidden;
  border-radius: 4px 62px 4px 4px;
  box-shadow: 0 14px 30px #082b4c18;
}

#service-page .sp-intro-photo img { width: 100%; height: 100%; object-fit: cover; }

#service-page .sp-section { padding: 0 0 53px; }

#service-page .sp-section-heading { max-width: 700px; margin-bottom: 24px; }
#service-page .sp-section-heading p { margin-top: 10px; color: var(--sp-muted); }

#service-page .sp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

#service-page .sp-card {
  min-height: 205px;
  padding: 23px 22px;
  border: 1px solid var(--sp-line);
  border-top: 3px solid var(--sp-gold);
  background: #fff;
  box-shadow: 0 8px 24px #082b4c08;
}

#service-page .sp-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sp-navy);
  color: #f4d993;
  font: 500 13px/1 'Prompt', sans-serif;
}

#service-page .sp-card h3 { margin-top: 14px; color: var(--sp-navy); font: 500 20px/1.45 'Prompt', sans-serif; }
#service-page .sp-card p { margin-top: 7px; color: #617484; font-size: 13px; }

#service-page .sp-price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#service-page .sp-price-card { min-height: 180px; }
#service-page .sp-price { margin-top: 13px; color: #a57e25; font: 500 25px/1.3 'Prompt', sans-serif; }
#service-page .sp-price small { display: block; margin-top: 3px; color: var(--sp-muted); font: 400 12px/1.7 'Noto Sans Thai', sans-serif; }

#service-page .sp-banner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

#service-page .sp-banner {
  position: relative;
  min-height: 215px;
  overflow: hidden;
  background: var(--sp-navy);
  color: #fff;
}

#service-page .sp-banner img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .35s ease; }
#service-page .sp-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #03152713 25%, #031527e8 100%); }
#service-page .sp-banner:hover img { transform: scale(1.06); }
#service-page .sp-banner-copy { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; }
#service-page .sp-banner-copy span { color: #f1d58d; font: 500 11px/1.4 'Prompt', sans-serif; letter-spacing: .5px; }
#service-page .sp-banner-copy h3 { margin-top: 3px; color: #fff; font: 500 18px/1.45 'Prompt', sans-serif; }

#service-page .sp-list-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

#service-page .sp-list-card { padding: 25px; background: #fff; border: 1px solid var(--sp-line); }
#service-page .sp-list-card h3 { color: var(--sp-navy); font: 500 20px/1.45 'Prompt', sans-serif; }
#service-page .sp-list-card ul { margin: 15px 0 0; padding-left: 21px; color: #536879; font-size: 13px; }
#service-page .sp-list-card li + li { margin-top: 7px; }

#service-page .sp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 33px;
  background: var(--sp-navy);
  color: #fff;
}

#service-page .sp-cta h2 { margin-top: 0; color: #fff; font-size: 26px; }
#service-page .sp-cta p { margin-top: 6px; color: #dce7ef; font-size: 13px; }

#service-page .sp-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
#service-page .sp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 21px; border: 1px solid var(--sp-gold); background: var(--sp-gold); color: var(--sp-navy); font-weight: 500; text-decoration: none; }
#service-page .sp-button.alt { border-color: #d7e3eb; background: transparent; color: #fff; }
#service-page .sp-button:hover { filter: brightness(1.08); }

.sp-footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 6%; background: #fff; border-top: 1px solid #e2e9ee; color: #647789; font: 12px/1.85 'Noto Sans Thai', sans-serif; }
.sp-footer strong { color: #082b4c; font: 500 15px/1.5 'Prompt', sans-serif; }
.sp-footer p { margin-top: 4px; }
.sp-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 18px; }
.sp-footer a { text-decoration: none; }
.sp-footer a:hover { color: #9d781d; }

@media (max-width: 900px) {
  #service-page .sp-intro { grid-template-columns: 1fr; gap: 25px; }
  #service-page .sp-intro-photo { height: 250px; }
  #service-page .sp-card-grid, #service-page .sp-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #service-page .sp-banner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #service-page .sp-hero { min-height: 330px; }
  #service-page .sp-hero-copy, #service-page .sp-wrap, #service-page .sp-crumb { width: 90%; }
  #service-page .sp-hero-copy { padding: 45px 0; }
  #service-page .sp-hero h1 { font-size: 34px; }
  #service-page .sp-hero p { font-size: 14px; }
  #service-page .sp-wrap { padding-top: 25px; padding-bottom: 53px; }
  #service-page .sp-intro { padding-bottom: 40px; }
  #service-page .sp-card-grid, #service-page .sp-price-grid, #service-page .sp-banner-grid, #service-page .sp-list-layout { grid-template-columns: 1fr; }
  #service-page .sp-card { min-height: 0; }
  #service-page .sp-banner { min-height: 230px; }
  #service-page .sp-cta { align-items: flex-start; flex-direction: column; padding: 25px 22px; }
  #service-page .sp-cta h2 { font-size: 23px; }
  .sp-footer { align-items: flex-start; flex-direction: column; padding: 23px 5%; }
  .sp-footer-links { justify-content: flex-start; }
}