.service-page {
  --surface: #0b0c0e;
  --surface-soft: #111316;
  --line: rgba(255, 255, 255, 0.1);
  --muted: #a1a7b0;
  --blue: #5ea2ff;
  background: var(--surface);
  color: #f7f8fa;
}

.service-shell {
  width: min(100% - 40px, 1480px);
  margin-inline: auto;
}

.service-hero {
  position: relative;
  min-height: min(740px, calc(100vh - 74px));
  padding: 0 !important;
  display: flex;
  align-items: flex-end;
  background-image: var(--service-image);
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.service-hero--plain { background: #101216; }
.service-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 6, 8, .96) 0%, rgba(5, 6, 8, .74) 44%, rgba(5, 6, 8, .12) 100%), linear-gradient(0deg, #0b0c0e 0%, transparent 34%); }
.service-hero__content { padding-block: 104px 70px; }
.service-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 46px; color: #d8dce2; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.service-back:hover { color: var(--blue); }
.service-kicker { margin: 0 0 18px; color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.service-kicker--mint { color: #5fd3ae; }
.service-kicker--warm { color: #f0b66c; }
.service-hero h1 { max-width: 960px; margin: 0; font-size: clamp(48px, 6.3vw, 104px); line-height: .98; font-weight: 800; }
.service-lead { max-width: 760px; margin: 30px 0 0; color: #d1d5db; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.6; }
.service-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.service-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid var(--line); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
.service-button:hover { transform: translateY(-2px); }
.service-button--primary { border-color: #2778eb; background: #2778eb; box-shadow: 0 14px 34px rgba(39, 120, 235, .2); }
.service-button--primary:hover { background: #438ef3; }
.service-button--ghost { background: rgba(0, 0, 0, .28); backdrop-filter: blur(14px); }
.service-button--ghost:hover { border-color: rgba(255, 255, 255, .28); }

.service-band { padding-block: 112px !important; border-top: 1px solid var(--line); }
.service-band--soft { background: var(--surface-soft); }
.service-intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.service-feature-grid { display: grid; grid-template-columns: 70px .8fr 1.2fr; gap: 48px; align-items: start; }
.service-feature-index { color: var(--blue); font-size: 14px; font-weight: 800; }
.service-feature-index--mint { color: #5fd3ae; }
.service-feature-index--warm { color: #f0b66c; }
.service-band h2, .service-cta h2 { max-width: 720px; margin: 0; font-size: clamp(32px, 4vw, 64px); line-height: 1.08; font-weight: 750; }
.service-copy { color: var(--muted); font-size: 17px; line-height: 1.85; }
.service-copy p { margin: 0 0 18px; }
.service-copy p:last-child { margin-bottom: 0; }
.service-section-heading { max-width: 760px; margin-bottom: 50px; }

.service-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-gallery__item { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #090a0c; }
.service-gallery__item img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; transition: transform .55s ease; }
.service-gallery__item:hover img { transform: scale(1.025); }
.service-gallery__item figcaption { display: grid; gap: 6px; padding: 18px; }
.service-gallery__item strong { font-size: 14px; }
.service-gallery__item span { color: var(--muted); font-size: 13px; line-height: 1.55; }

.service-quote { background: #0e1116; }
.service-quote__layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 90px; align-items: start; }
.service-quote__intro { position: sticky; top: 116px; }
.service-quote__intro > p:not(.service-kicker) { max-width: 590px; margin: 28px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.service-quote__formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.service-quote__formats span { border: 1px solid rgba(94, 162, 255, .25); background: rgba(94, 162, 255, .08); padding: 8px 13px; color: #cfe2ff; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.service-quote__form { display: grid; gap: 22px; min-width: 0; }
.service-quote__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service-field { display: grid; gap: 9px; min-width: 0; }
.service-field label { color: #dfe3e9; font-size: 12px; font-weight: 800; }
.service-field input:not([type="checkbox"]), .service-field select, .service-field textarea { width: 100%; border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; background: rgba(255, 255, 255, .04); padding: 13px 15px; color: #f7f8fa; outline: none; }
.service-field input:focus, .service-field select:focus, .service-field textarea:focus { border-color: rgba(94, 162, 255, .7); box-shadow: 0 0 0 3px rgba(94, 162, 255, .12); }
.service-field select option { background: #111316; color: #f7f8fa; }
.service-field textarea { min-height: 150px; resize: vertical; }
.service-field--file input { padding: 9px; }
.service-field__help { margin: 0; color: #737b87; font-size: 11px; line-height: 1.55; }
.service-field__error { margin: 0; color: #fca5a5; font-size: 12px; }
.service-consent { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: 12px; line-height: 1.55; cursor: pointer; }
.service-consent input { flex: 0 0 auto; margin-top: 2px; }
.service-quote__submit { width: fit-content; border: 0; cursor: pointer; }

.service-faq__layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.service-faq__list { border-top: 1px solid var(--line); }
.service-faq details { border-bottom: 1px solid var(--line); }
.service-faq summary { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-weight: 700; }
.service-faq summary::-webkit-details-marker { display: none; }
.service-faq summary i { color: var(--blue); transition: transform .25s ease; }
.service-faq details[open] summary i { transform: rotate(45deg); }
.service-faq details > div { padding: 0 48px 26px 0; color: var(--muted); line-height: 1.75; }
.service-faq details p { margin: 0; }

.service-cta { border-top: 1px solid var(--line); background: #0e1116; padding-block: 90px !important; }
.service-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }

@media (max-width: 900px) {
  .service-hero { min-height: min(720px, calc(100vh - 68px)); background-position: 62% center; }
  .service-hero__shade { background: linear-gradient(90deg, rgba(5, 6, 8, .96), rgba(5, 6, 8, .55)), linear-gradient(0deg, #0b0c0e, transparent 45%); }
  .service-back { margin-bottom: 52px; }
  .service-intro-grid, .service-feature-grid, .service-faq__layout, .service-quote__layout { grid-template-columns: 1fr; gap: 34px; }
  .service-quote__intro { position: static; }
  .service-feature-index { display: none; }
  .service-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-cta__inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .service-shell { width: min(100% - 28px, 1480px); }
  .service-hero { min-height: min(690px, calc(100vh - 64px)); }
  .service-hero__content { padding-block: 106px 52px; }
  .service-hero h1 { font-size: 46px; }
  .service-hero__actions, .service-button { width: 100%; }
  .service-band { padding-block: 76px !important; }
  .service-gallery__grid { grid-template-columns: 1fr; }
  .service-quote__grid { grid-template-columns: 1fr; }
  .service-quote__submit { width: 100%; }
  .service-faq summary { min-height: 72px; }
  .service-cta { padding-block: 72px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .service-button, .service-gallery__item img, .service-faq summary i { transition: none; }
}