/* Services and Contact polish: black canvas, IBM Plex / Chakra Petch, contrast ≥ 4.5:1. */

body.services-page,
body.contact-page{
  background:var(--bg);
  color:var(--text);
}

body.services-page .page-intro>p:not(.eyebrow),
body.contact-page .page-intro>p:not(.eyebrow){
  color:#c5c8ca;
}

/* ---- Services directory ---- */

.service-directory{
  padding-top:48px;
  padding-bottom:40px;
}

.service-list{
  display:grid;
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}

.service-line{
  position:relative;
  margin:0;
  padding:28px 32px 28px 36px;
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(var(--sysreon-text-rgb),.015);
}

.service-line:before{
  content:"";
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:2px;
  background:var(--coral);
}

.service-index{
  margin:0 0 10px;
  font:500 12px/1.5 var(--mono);
  letter-spacing:.08em;
  color:var(--coral);
}

.service-line h2{
  margin:0;
  font-size:clamp(26px,2.4vw,34px);
  font-weight:500;
  letter-spacing:-.03em;
  color:var(--text);
}

.service-desc{
  margin:16px 0 0;
  max-width:62ch;
  font-size:17px;
  line-height:1.7;
  color:var(--text);
}

.service-line h3{
  margin:22px 0 8px;
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--text);
}

.service-first{
  margin:0;
  max-width:62ch;
  font-size:16px;
  line-height:1.7;
  color:#c5c8ca;
}

.service-line .text-link{
  margin-top:20px;
  color:var(--coral);
}

.service-line .text-link:hover{
  color:var(--text);
}

.services-page .closing{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  margin:40px auto 0;
  border-top:1px solid var(--line);
  padding-top:40px;
  padding-bottom:56px;
}

.services-page .closing h2{
  font-size:clamp(28px,3vw,40px);
  font-weight:500;
}

.services-page .closing p{
  margin-top:12px;
  max-width:52ch;
  color:#c5c8ca;
}

.services-page .closing .button{
  margin:0;
  flex-shrink:0;
}

/* ---- Contact extras ---- */

.contact-legal{
  margin-top:18px;
  font-size:16px;
  color:var(--text);
}

.contact-layout h3{
  margin-top:36px;
  font-size:18px;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--text);
}

.contact-next{
  margin:16px 0 0;
  padding-left:20px;
  color:#c5c8ca;
  font-size:16px;
  line-height:1.65;
  max-width:46ch;
}

.contact-next li{
  margin:8px 0;
}

.contact-layout .muted,
.form-note,
.contact-privacy{
  color:#c5c8ca;
}

.contact-layout .muted{
  max-width:46ch;
}

.contact-privacy{
  margin-top:20px;
  font-size:14px;
  max-width:46ch;
}

.contact-privacy a{
  color:var(--coral);
  text-decoration:underline;
  text-underline-offset:4px;
}

.contact-privacy a:hover{
  color:var(--text);
}

.contact-page form label{
  color:var(--text);
}

.contact-page form .optional{
  color:#c5c8ca;
  font-weight:400;
}

.contact-page form input,
.contact-page form select,
.contact-page form textarea{
  min-height:44px;
  color:var(--text);
  background:var(--bg);
  border-color:rgba(var(--sysreon-text-rgb),.28);
}

.contact-page form textarea{
  min-height:8.5rem;
}

.contact-page form input::placeholder,
.contact-page form textarea::placeholder{
  color:#c5c8ca;
  opacity:1;
}

.form-note{
  margin-top:14px;
  font-size:14px;
  max-width:46ch;
}

.contact-page #form-status{
  color:var(--coral);
}

.contact-page .footer-top>p,
.services-page .footer-top>p{
  color:#c5c8ca;
}

.contact-page .footer-bottom,
.services-page .footer-bottom,
.contact-page .footer-bottom button,
.services-page .footer-bottom button{
  color:#c5c8ca;
}

.contact-page .brand small,
.services-page .brand small{
  color:#c5c8ca;
}

@media(max-width:800px){
  .service-line{
    padding:24px 20px 24px 24px;
  }
  .services-page .closing{
    display:block;
    padding-bottom:48px;
  }
  .services-page .closing .button{
    margin-top:22px;
  }
}

@media(prefers-reduced-motion:reduce){
  .services-page *,
  .services-page *:before,
  .services-page *:after,
  .contact-page *,
  .contact-page *:before,
  .contact-page *:after{
    animation:none !important;
    transition:none !important;
  }
}

html[data-motion=off] .services-page *,
html[data-motion=off] .services-page *:before,
html[data-motion=off] .services-page *:after,
html[data-motion=off] .contact-page *,
html[data-motion=off] .contact-page *:before,
html[data-motion=off] .contact-page *:after{
  animation:none !important;
  transition:none !important;
}