/* Shared reading layout for TelePlan's service pages. */
.service-page main { overflow-wrap: anywhere; }
.service-page :where(section, aside, article) { min-width: 0; }
.service-page :where(h1, h2, h3) { text-wrap: balance; }
.service-page .service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  padding-block: clamp(38px, 5vw, 72px) clamp(54px, 7vw, 96px);
}
.service-page h1 { font-size: clamp(2.65rem, 4.3vw, 4.25rem); line-height: 1.07; }
.service-page .voice-lead { max-width: 35rem; }
.service-page .voice-primary { text-align: center; justify-content: center; }
.service-page .voice-actions { gap: .8rem 1.3rem; }
.service-flow {
  padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(145deg, #0c3c5c, #082b48);
  border: 1px solid #275670;
  border-radius: 24px;
  color: #fff;
  box-shadow: 0 20px 50px -28px #072b4750;
}
.service-flow .voice-kicker { color: #acd9f0; }
.service-page .service-flow h2 { color: #fff; font-size: clamp(1.9rem, 2.8vw, 2.65rem); }
.service-flow ol { list-style: none; padding: 0; margin: 1.9rem 0 0; display: grid; gap: 1.2rem; }
.service-flow li { display: flex; gap: 1rem; align-items: flex-start; }
.service-flow li > span {
  flex: 0 0 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid #527b95;
  border-radius: 50%;
  color: #9edfff;
  font-size: .72rem;
  font-weight: 650;
}
.service-flow strong { display: block; color: #fff; font-weight: 650; font-size: 1rem; line-height: 1.35; margin: .08rem 0 .3rem; }
.service-flow li p { margin: 0; color: #c9dce8; font-size: .88rem; line-height: 1.55; }
.service-flow .service-note { margin: 1.4rem 0 0; padding-top: 1.15rem; border-top: 1px solid #416782; color: #c9dce8; font-size: .78rem; line-height: 1.65; }
.service-section { padding-block: clamp(46px, 6vw, 82px); }
.service-tint { background: #e9f5fc80; border-block: 1px solid #cbdfea; }
.service-section-head { max-width: 48rem; }
.service-section-head > p:last-child { margin: 1.1rem 0 0; color: var(--vp-muted); line-height: 1.75; max-width: 42rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 52px); margin-top: 2.3rem; }
.service-grid article { border-top: 1px solid #9fbfd3; padding-top: 1.2rem; }
.service-page .service-grid h3 { font-size: 1.4rem; letter-spacing: -.03em; line-height: 1.2; font-weight: 650; margin: 0 0 .8rem; }
.service-grid p, .service-prose p { color: var(--vp-muted); font-size: .97rem; line-height: 1.8; margin: 0; }
.service-grid a, .service-prose a, .service-faq a, .service-contact address a { color: var(--vp-blue); text-decoration: underline; text-underline-offset: .18em; }
.service-grid a:hover, .service-prose a:hover, .service-faq a:hover, .service-contact address a:hover { color: #004e82; }
.service-split, .service-faq-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.service-prose > p + p { margin-top: 1.1rem; }
.service-page .service-split h2, .service-page .service-faq-section h2 { font-size: clamp(2rem, 3vw, 2.9rem); }
.service-faq-section { border-top: 1px solid #cbdfea; }
.service-faq { border-top: 1px solid #b9d2e2; }
.service-faq details { border-bottom: 1px solid #b9d2e2; padding: .4rem 0; }
.service-faq summary { cursor: pointer; padding: .8rem .35rem .8rem 0; min-height: 44px; color: var(--vp-navy); font-size: 1rem; line-height: 1.45; font-weight: 620; }
.service-faq summary::marker { color: var(--vp-blue); }
.service-faq details[open] summary { color: var(--vp-blue); }
.service-faq p { color: var(--vp-muted); line-height: 1.75; font-size: .95rem; margin: .1rem 0 1rem; }
.service-contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 68px); align-items: center; padding-block: clamp(42px, 5vw, 72px) clamp(62px, 8vw, 104px); }
.service-contact > div > p:not(.voice-kicker) { max-width: 38rem; margin: 1.1rem 0 0; color: var(--vp-muted); line-height: 1.75; }
.service-contact address { font-style: normal; line-height: 1.7; color: var(--vp-muted); display: grid; justify-items: start; gap: .9rem; padding-left: clamp(22px, 3vw, 40px); border-left: 1px solid #b9d2e2; }
.service-contact address strong { color: var(--vp-navy); font-size: 1.2rem; }
.service-page :is(#muligheder, #conversation) { scroll-margin-top: 120px; }
.service-page a:focus-visible { outline: 3px solid #008bc9; outline-offset: 5px; border-radius: 3px; }
@media (max-width: 850px) {
  .service-page .service-hero { grid-template-columns: 1fr; gap: 34px; }
  .service-page h1 { max-width: 16ch; font-size: clamp(2.55rem, 6vw, 3.7rem); }
  .service-flow { max-width: 44rem; }
  .service-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .service-grid article p { max-width: 48rem; }
  .service-split, .service-faq-section { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 620px) {
  .service-page .service-hero { padding-top: 32px; }
  .service-page h1 { font-size: clamp(2.35rem, 8vw, 3rem); }
  .service-flow { padding: 26px; border-radius: 20px; }
  .service-flow li { gap: .8rem; }
  .service-contact { grid-template-columns: 1fr; gap: 2rem; }
  .service-contact address { border-left: 0; padding-left: 0; border-top: 1px solid #b9d2e2; padding-top: 1.4rem; }
}
@media print {
  .service-flow { background: white; color: black; box-shadow: none; border-color: #aaa; }
  .service-flow :is(h2, p, strong, .voice-kicker), .service-flow li > span { color: black; }
  .service-tint { background: white; }
}
