.service-page { background: var(--white); color: var(--black); }
.service-page .site-header { position: relative; }
.service-page footer { background: var(--black); color: var(--white); }
.service-page .site-header nav a[aria-current="page"]::after { width: 100%; }

.service-hero {
  min-height: 700px; padding: clamp(65px, 8vw, 115px) clamp(24px, 4vw, 70px) clamp(70px, 8vw, 110px);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr); gap: clamp(50px, 9vw, 140px);
  align-items: end; border-bottom: 3px solid var(--black);
  background:
    linear-gradient(rgba(8,10,9,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,10,9,.05) 1px, transparent 1px), var(--white);
  background-size: 42px 42px;
}
.service-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; color: #62665f; font: 500 10px var(--mono); text-transform: uppercase; }
.service-breadcrumb a { color: var(--blue); }
.service-hero h1 { font-size: clamp(56px, 7.8vw, 120px); max-width: 1050px; }
.service-hero h1 em { color: var(--blue); font-style: normal; }
.service-hero-side { padding-bottom: 12px; }
.service-hero-side > p { color: #454943; font: 400 15px/1.8 var(--mono); }
.service-hero-side .button { margin-top: 25px; }
.service-signal { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: center; margin-bottom: 35px; }
.service-signal span { color: var(--blue); font: 500 25px var(--mono); }
.service-signal p { margin: 0; font: 500 10px/1.5 var(--mono); text-transform: uppercase; }

.service-intro { background: var(--blue); color: white; }
.service-intro-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9vw; align-items: start; }
.service-intro h2, .service-block h2, .service-final h2 { font: 400 clamp(42px, 5.3vw, 80px)/.95 var(--display); letter-spacing: -.055em; }
.service-intro-copy > p { max-width: 760px; color: #d9e0ff; font-size: 18px; line-height: 1.75; }
.service-points { margin: 45px 0 0; border-top: 2px solid white; }
.service-point { display: grid; grid-template-columns: 45px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.35); }
.service-point span { color: var(--lime); font: 500 11px var(--mono); }
.service-point p { margin: 0; font: 500 12px/1.55 var(--mono); text-transform: uppercase; }

.service-block { background: var(--white); color: var(--black); }
.service-block-head { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9vw; margin-bottom: 65px; }
.service-block-head > p:last-child { max-width: 680px; color: #4d514b; font: 400 15px/1.75 var(--mono); }
.deliverable-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--black); }
.deliverable { min-height: 300px; padding: 32px; border-right: 1px solid #afb0ab; border-bottom: 1px solid #afb0ab; }
.deliverable:nth-child(3n) { border-right: 0; }
.deliverable span { color: var(--blue); font: 500 11px var(--mono); }
.deliverable h3 { font: 400 24px/1.1 var(--display); margin: 55px 0 17px; }
.deliverable p { color: #555951; font: 400 12px/1.7 var(--mono); }

.service-packages { background: var(--black); color: white; }
.service-packages .section-heading { align-items: start; }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.package-card { min-height: 510px; padding: 32px; border: 1px solid #626660; display: flex; flex-direction: column; }
.package-card.featured { background: var(--blue); border-color: var(--blue); }
.package-label { color: var(--lime); font: 500 10px var(--mono); text-transform: uppercase; }
.package-card h3 { font: 400 clamp(30px, 3vw, 44px)/1 var(--display); margin: 42px 0 12px; }
.package-price { font: 400 25px var(--display); }
.package-card ul { padding-left: 18px; margin: 35px 0; color: #ced1cd; font: 400 12px/1.75 var(--mono); }
.package-card.featured ul { color: #e3e8ff; }
.package-card .text-link { color: white; margin-top: auto; align-self: flex-start; }
.package-note { max-width: 820px; margin: 28px 0 0 auto; color: #a9ada7; font: 400 10px/1.65 var(--mono); }

.service-process { background: var(--lime); color: var(--black); }
.service-process .process-grid li { border-color: rgba(8,10,9,.3); }
.service-process .process-grid p { color: #454943; }
.service-process .process-mark { background: var(--black); color: var(--lime); }

.service-faq { background: var(--white); color: var(--black); }
.faq-list { border-top: 3px solid var(--black); }
.faq-item { display: grid; grid-template-columns: minmax(250px,.75fr) 1.25fr; gap: 8vw; padding: 30px 0; border-bottom: 1px solid #afb0ab; }
.faq-item h3 { font: 400 19px/1.25 var(--display); margin: 0; }
.faq-item p { color: #4d514b; font: 400 13px/1.75 var(--mono); margin: 0; }
.service-final { padding: clamp(80px, 10vw, 150px) clamp(24px, 4vw, 70px); background: var(--blue); color: white; display: grid; grid-template-columns: 1.3fr .7fr; gap: 8vw; align-items: end; }
.service-final p { max-width: 560px; color: #d9e0ff; font: 400 14px/1.75 var(--mono); }
.service-final .button { justify-self: end; min-width: min(100%, 290px); }

@media (max-width: 900px) {
  .service-hero { grid-template-columns: 1fr; min-height: 0; }
  .service-intro-grid, .service-block-head { grid-template-columns: 1fr; }
  .deliverable-grid, .package-grid { grid-template-columns: 1fr; }
  .deliverable, .deliverable:nth-child(3n) { border-right: 0; min-height: 0; }
  .package-card { min-height: 440px; }
}

@media (max-width: 720px) {
  .service-hero { padding-top: 45px; gap: 25px; }
  .service-hero h1 { font-size: clamp(52px, 15vw, 76px); }
  .faq-item, .service-final { grid-template-columns: 1fr; }
  .faq-item { gap: 15px; }
  .service-final .button { justify-self: stretch; }
}