/*
 * Standalone service-page layer for the approved structural home system.
 * Scope: body[data-page-type="service"] only. Backend, analytics and form
 * behavior remain in the existing HTML and script.js contracts.
 */

body[data-page-type="service"] {
  padding-bottom: 0;
  background:
    radial-gradient(circle at 86% 3%, rgb(228 123 50 / 9%), transparent 28rem),
    var(--page);
}

body[data-page-type="service"] main {
  min-width: 0;
}

@media (min-width: 901px) {
  body[data-page-type="service"] .site-header--service {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  body[data-page-type="service"] .site-header--service .header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: clamp(12px, 1.4vw, 22px);
  }

  body[data-page-type="service"] .site-header--service .header-phone {
    grid-template-columns: max-content max-content;
  }
}

body[data-page-type="service"] .section-anchor {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

body[data-page-type="service"] .side-menu__item {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: 13px;
}

body[data-page-type="service"] .side-menu__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-page-type="service"] .service-hero {
  min-height: min(780px, 100dvh);
  padding-top: calc(var(--header-height) + 48px);
  padding-bottom: 64px;
}

body[data-page-type="service"] .service-hero::before {
  background-position: 62% center;
}

body[data-page-type="service"] .service-hero::after {
  background:
    linear-gradient(90deg, rgb(8 8 7 / 97%) 0 38%, rgb(8 8 7 / 78%) 64%, rgb(8 8 7 / 86%) 100%),
    linear-gradient(0deg, rgb(11 11 10 / 94%) 0, transparent 52%);
}

body[data-page-type="service"] .service-hero .hero__grid {
  grid-template-columns: minmax(0, 1.38fr) minmax(290px, 0.62fr);
  align-items: end;
  gap: clamp(28px, 4vw, 56px);
}

body[data-page-type="service"] .hero__content,
body[data-page-type="service"] .hero__title {
  width: 100%;
  min-width: 0;
  max-width: 780px;
}

body[data-page-type="service"] .hero__title {
  overflow-wrap: normal;
  font-size: clamp(37px, 3.4vw, 52px);
  hyphens: none;
  line-height: 1.1;
  text-wrap: balance;
  word-break: normal;
}

body[data-page-type="service"] .hero__lead {
  max-width: 68ch;
  margin-bottom: 0;
}

body[data-page-type="service"] .eyebrow {
  letter-spacing: 0.01em;
  text-transform: none;
}

.service-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.4;
}

.service-breadcrumbs a,
.service-inline-link {
  color: #f0a064;
  text-decoration-color: rgb(228 123 50 / 68%);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.service-breadcrumbs a:hover,
.service-breadcrumbs a:focus-visible,
.service-inline-link:hover,
.service-inline-link:focus-visible {
  color: #ffd2ad;
}

.service-boundary {
  max-width: 68ch;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid rgb(228 123 50 / 36%);
  border-radius: var(--radius-control);
  background: rgb(228 123 50 / 10%);
  color: #f2dfce;
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.55;
}

body[data-page-type="service"] .hero__content > .service-boundary + .hero__actions {
  margin-top: clamp(22px, 3vw, 28px);
}

.service-hero__summary {
  position: relative;
  align-self: end;
  min-width: 0;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgb(255 244 232 / 18%);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, rgb(228 123 50 / 13%), transparent 48%),
    rgb(20 18 15 / 90%);
  box-shadow: var(--shadow);
}

.service-hero__summary::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 72%);
  content: "";
}

.service-card__index,
.service-info-card > span,
.service-steps li > span {
  color: #f0a064;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.service-hero__summary h2,
.service-info-card h3,
.service-wide-card h2,
.service-section-note h2,
.service-steps h3 {
  margin: 10px 0 0;
  color: var(--text);
  overflow-wrap: normal;
  hyphens: none;
  line-height: 1.18;
  text-wrap: balance;
  word-break: normal;
}

.service-hero__summary h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.025em;
}

.service-hero__summary p,
.service-info-card p,
.service-wide-card p,
.service-section-note p,
.service-steps p {
  max-width: 70ch;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.service-fact-list {
  display: grid;
  gap: 9px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.service-fact-list li {
  position: relative;
  padding-left: 17px;
  color: var(--soft);
  line-height: 1.5;
}

.service-fact-list li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--accent);
  content: "";
}

body[data-page-type="service"] .page-section {
  padding-block: clamp(64px, 7vw, 92px);
}

body[data-page-type="service"] .services-section,
body[data-page-type="service"] .faq-section {
  background: var(--page-soft);
}

body[data-page-type="service"] .works-section {
  background: var(--page);
}

.service-section-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
}

.service-section-shell > *,
.service-section-shell .section-heading--split > * {
  min-width: 0;
}

.service-section-shell .section-heading--split {
  display: block;
  max-width: 820px;
  margin-bottom: 0;
}

.service-section-shell .section-heading--split > p {
  max-width: 70ch;
  margin-top: 0;
}

.service-section-shell h2 {
  max-width: 100%;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
  word-break: normal;
}

.service-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.service-content-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-info-card {
  min-width: 0;
  padding: clamp(22px, 2.7vw, 32px);
  border-right: 1px solid var(--line);
}

.service-info-card:last-child {
  border-right: 0;
}

.service-info-card h3 {
  font-size: clamp(18px, 1.7vw, 23px);
}

.service-wide-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(22px, 4vw, 52px);
  min-width: 0;
  padding: clamp(24px, 4vw, 42px);
  border-top: 1px solid rgb(228 123 50 / 48%);
  background:
    linear-gradient(120deg, rgb(228 123 50 / 9%), transparent 52%),
    var(--surface);
}

.service-wide-card h2,
.service-section-note h2 {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.service-wide-card p {
  margin-top: 0;
}

.service-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  list-style: none;
}

.service-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  padding: clamp(22px, 2.7vw, 32px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-steps li:nth-child(even) {
  border-right: 0;
}

.service-steps li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.service-steps h3 {
  margin-top: 0;
  font-size: clamp(18px, 1.7vw, 23px);
}

.service-steps p {
  grid-column: 2;
}

.service-section-note {
  min-width: 0;
  padding: clamp(24px, 3.5vw, 38px);
  border: 1px solid rgb(228 123 50 / 34%);
  border-radius: var(--radius-card);
  background:
    linear-gradient(120deg, rgb(228 123 50 / 14%), transparent 62%),
    var(--surface-raised);
}

.service-section-note p {
  max-width: 74ch;
}

body[data-page-type="service"] .faq-layout {
  align-items: start;
}

body[data-page-type="service"] .faq-list {
  min-width: 0;
}

body[data-page-type="service"] .faq-item > p {
  max-width: 70ch;
  margin: 0;
  padding: 0 42px 18px 0;
  color: var(--muted);
}

body[data-page-type="service"] [data-local-facts] {
  width: min(calc(100% - 220px), var(--content));
  max-width: none;
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding: 15px 18px;
  border: 1px solid rgb(228 123 50 / 36%);
  border-radius: var(--radius-control);
  background: rgb(228 123 50 / 8%);
  color: var(--soft);
}

body[data-page-type="service"] .service-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  width: min(calc(100% - 220px), var(--content));
  margin: 14px auto clamp(28px, 4vw, 48px);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

body[data-page-type="service"] .service-related a {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 11px 15px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--soft);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

body[data-page-type="service"] .service-related a:last-child {
  border-right: 0;
}

body[data-page-type="service"] .service-related a:hover,
body[data-page-type="service"] .service-related a:focus-visible {
  background: rgb(228 123 50 / 12%);
  color: var(--text);
}

.service-fact {
  width: min(calc(100% - 220px), var(--content));
  margin-right: auto;
  margin-left: clamp(188px, calc((100vw - var(--content) + 180px) / 2), 218px);
}

.service-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: stretch;
  gap: 18px;
}

body[data-page-type="service"] .contact-copy,
body[data-page-type="service"] .contact-links {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

body[data-page-type="service"] .contact-copy {
  padding: clamp(24px, 3vw, 34px);
}

body[data-page-type="service"] .contact-links {
  align-content: start;
  margin-top: 0;
  padding: clamp(16px, 2.4vw, 28px);
}

body[data-page-type="service"] .contact-copy .service-boundary {
  margin-bottom: 22px;
}

.request-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: min(90dvh, 820px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.request-modal::backdrop {
  background: rgb(5 4 3 / 78%);
  backdrop-filter: blur(6px);
}

.request-modal__shell {
  position: relative;
  display: grid;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.request-modal__close {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  margin-bottom: 18px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.request-modal__close:hover,
.request-modal__close:focus-visible {
  border-color: var(--accent);
  background: rgb(228 123 50 / 10%);
}

.request-modal .request-form__head {
  padding-right: 52px;
}

.request-modal .form-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.request-modal .form-status[data-state="info"] {
  color: var(--soft);
}

.request-modal .form-status[data-state="error"] {
  color: var(--danger);
}

.call-modal,
.request-modal {
  scrollbar-color: var(--accent) var(--surface);
}

@media (max-width: 1180px) {
  body[data-page-type="service"] [data-local-facts],
  body[data-page-type="service"] .service-related,
  .service-fact {
    width: min(calc(100% - (var(--gutter) * 2)), var(--content));
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 1120px) {
  body[data-page-type="service"] .service-hero {
    min-height: auto;
  }

  body[data-page-type="service"] .service-hero .hero__grid,
  .service-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-hero__summary {
    width: min(100%, 760px);
  }

  .service-section-shell .section-heading--split {
    max-width: 780px;
  }
}

@media (max-width: 900px) {
  body[data-page-type="service"] .service-hero {
    padding-top: calc(var(--header-height) + 44px);
  }

  body[data-page-type="service"] .service-hero::after {
    background:
      linear-gradient(180deg, rgb(8 8 7 / 88%) 0, rgb(8 8 7 / 82%) 44%, rgb(8 8 7 / 98%) 100%),
      linear-gradient(90deg, rgb(8 8 7 / 93%), rgb(8 8 7 / 65%));
  }
}

@media (max-width: 760px) {
  body[data-page-type="service"] .hero__title {
    font-size: clamp(30px, 8vw, 39px);
  }

  .service-content-grid,
  .service-content-grid--two,
  .service-wide-card,
  .service-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-info-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-info-card:last-child {
    border-bottom: 0;
  }

  .service-wide-card {
    gap: 8px;
  }

  .service-steps li,
  .service-steps li:nth-child(even),
  .service-steps li:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-steps li:last-child {
    border-bottom: 0;
  }

  body[data-page-type="service"] .faq-layout {
    gap: 18px;
  }

  body[data-page-type="service"] .service-related {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page-type="service"] .service-related a,
  body[data-page-type="service"] .service-related a:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  body[data-page-type="service"] .service-related a:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  body[data-page-type="service"] {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body[data-page-type="service"] .service-hero {
    padding-top: calc(var(--header-height) + 34px);
    padding-bottom: 48px;
  }

  body[data-page-type="service"] .hero__title {
    font-size: clamp(27px, 8.8vw, 36px);
    line-height: 1.12;
  }

  .service-breadcrumbs {
    font-size: 0.75rem;
  }

  .service-hero__summary,
  .service-section-note,
  body[data-page-type="service"] .contact-copy,
  body[data-page-type="service"] .contact-links {
    padding: 20px;
  }

  .service-info-card,
  .service-steps li,
  .service-wide-card {
    padding: 20px;
  }

  .service-steps li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }

  .service-steps p {
    grid-column: 2;
  }

  .request-modal {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }

  .request-modal__shell {
    padding: 20px;
  }

  .request-modal .request-form__head {
    padding-right: 0;
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  body[data-page-type="service"] {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body[data-page-type="service"] .mobile-action-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 8px var(--gutter) max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgb(11 11 10 / 95%);
    backdrop-filter: blur(18px);
  }

  body[data-page-type="service"] .mobile-action-dock .btn {
    min-width: 0;
    min-height: 44px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 13px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-type="service"],
  body[data-page-type="service"] *,
  body[data-page-type="service"] *::before,
  body[data-page-type="service"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .request-modal::backdrop {
    background: rgb(5 4 3 / 92%);
  }
}