/* Keep the services column aligned with the hero on wide screens. */
#services, #quote, #brief {padding-inline:max(clamp(25px,5vw,80px),calc((100% - 1120px) / 2))}
.service-explorer {position:relative;max-width:1120px}
.service-tiles {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-inline:14px}
.service-tiles button {
  --rim:#626266;
  --face:linear-gradient(120deg,#272729 0%,#171719 62%);
  --cut:polygon(0 9px,9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px 18px;min-height:56px;line-height:1.3;font-weight:600;color:#eee;
  background:transparent;border:0;border-radius:0
}
.service-tiles button::before,.service-tiles button::after {
  content:"";position:absolute;inset:0;z-index:-2;clip-path:var(--cut);background:var(--rim)
}
.service-tiles button::after {
  inset:1px;z-index:-1;
  background:repeating-linear-gradient(125deg,transparent 0 3px,#8888 3px 4px) right 5px top 5px/18px 5px no-repeat,var(--face)
}
.service-tiles button:hover {--rim:#aaa;text-decoration:none}
.service-tiles button.energized {
  --rim:#e4e4e7;--face:linear-gradient(118deg,#414145,#202022 76%);color:white
}
.service-tiles button.energized svg {filter:drop-shadow(0 0 3px #fff5)}
.circuit-port {position:relative;height:24px}

.service-tiles svg {width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.service-route {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;fill:none}
.service-route .trace {stroke:none;stroke-width:1}
.service-route .signal {stroke:#fff;stroke-width:2;stroke-dasharray:.14 1;stroke-linecap:round;opacity:0}
.service-detail {position:relative;margin-top:0;border:1px solid #55555a;border-top-color:#999;background:linear-gradient(120deg,#252527,#1a1a1c);padding:clamp(16px,2.5vw,32px)}
.service-detail h3 {font-size:clamp(23px,2.4vw,32px);letter-spacing:-.035em}
.service-detail dl {margin:14px 0 0}
.service-detail dl div {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:18px;padding:12px 0;border-top:1px solid #424245}
.service-detail dl div:last-child {padding-bottom:0}
.service-detail dt,.service-detail dd {padding:0;margin:0;border:0}
.service-detail dt {font-weight:600}
@media(max-width:850px){.service-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.service-tiles button:last-child{grid-column:span 2}}
@media(max-width:640px){.service-tiles{padding-left:12px;padding-right:0}.service-tiles button{gap:8px;padding:10px;min-height:48px;font-size:14px}.service-detail dl div{grid-template-columns:1fr;gap:3px}.service-detail dd{font-size:15px}.circuit-port{height:18px}}

/* Overlap the panels so text wrapping sets the shared height at each viewport. */
.service-panels {display:grid;grid-template-columns:minmax(0,1fr)}
.service-panels > .service-detail {grid-area:1 / 1}
.service-detail[aria-hidden="true"] {visibility:hidden;pointer-events:none}
@media (forced-colors:active) {
  .service-tiles button {border:1px solid ButtonText}
  .service-tiles button::before,.service-tiles button::after {display:none}
  .service-tiles button.energized {border:3px double Highlight}
  .service-tiles button:focus-visible {outline:2px solid Highlight;outline-offset:2px}
  
  .service-route .signal {stroke:Highlight}
}
.service-detail .request-service {display:inline-flex;align-items:center;min-height:44px;margin-top:16px}