/* Velar Bureau — service pages in the home page's language: section heads, a dark case block, the calculator,
   the process line, questions as a quiet list and the other services as big rows (like the home services list). */
.svc-sec { padding-block: var(--sec) 0; }
.svc-sec .sec-head { margin-bottom: clamp(36px, min(4vw, 57.6px), 60px); }
.svc-page .work { margin-top: var(--sec); }
.svc-page .vx-calc { padding-top: var(--sec); }
.svc-page .vx-calc__h { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.svc-page .process { margin-top: 0; }
/* questions */
.sq { border-top: 1px solid rgba(14, 15, 17, .14); }
.sq details { border-bottom: 1px solid rgba(14, 15, 17, .14); }
.sq summary { display: grid; grid-template-columns: 90px minmax(0, 1fr) 32px; align-items: center; padding-block: clamp(22px, min(2.4vw, 34.56px), 36px); cursor: pointer; list-style: none;
  font-weight: 500; font-size: clamp(1.4rem, min(2.4vw, 34.56px), 2.2rem); letter-spacing: -.035em; line-height: 1.1; transition: color .3s, padding .5s var(--ease); }
.sq summary::-webkit-details-marker { display: none; }
.sq summary > span:first-child { font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .8rem; letter-spacing: 0; color: #8C929C; }
.sq summary i { position: relative; width: 20px; height: 20px; justify-self: end; }
.sq summary i::before, .sq summary i::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
.sq summary i::after { transform: rotate(90deg); }
.sq details[open] summary i::after { transform: rotate(0); }
.sq details[open] summary > span:first-child, .sq summary:hover > span:first-child { color: var(--signal); }
.sq summary:hover { padding-left: 10px; }
.sq p { margin: 0 0 clamp(22px, min(2.4vw, 34.56px), 36px) 90px; max-width: 60ch; color: #646A76; font-size: 1.05rem; line-height: 1.6; }
/* other services */
.so { border-top: 1px solid rgba(14, 15, 17, .14); }
.so a { display: grid; grid-template-columns: 90px minmax(0, 1fr) 32px; align-items: center; padding-block: clamp(20px, min(2.2vw, 31.68px), 32px); border-bottom: 1px solid rgba(14, 15, 17, .14);
  font-weight: 500; font-size: clamp(1.8rem, min(3.4vw, 48.96px), 3.2rem); letter-spacing: -.045em; line-height: 1; color: #0E0F11; transition: color .3s, padding .5s var(--ease); }
.so a > span:first-child { font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .8rem; letter-spacing: 0; color: #8C929C; }
.so a svg { width: 26px; height: 26px; justify-self: end; opacity: .35; transition: opacity .3s, transform .45s var(--ease), color .3s; }
.so:hover a { color: #B4BAC3; }
.so a:hover { color: #0E0F11; padding-left: 14px; }
.so a:hover > span:first-child, .so a:hover svg { color: var(--signal); opacity: 1; }
.so a:hover svg { transform: translate(3px, -3px); }
.so a em { font-style: normal; justify-self: end; margin-right: 24px; font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: .9rem; letter-spacing: 0; color: #8C929C; }
.so a { grid-template-columns: 90px minmax(0, 1fr) auto 32px; }
@media (max-width: 700px) {
  .sq summary, .so a { grid-template-columns: 40px minmax(0, 1fr) 24px; }
  .so a { grid-template-columns: 40px minmax(0, 1fr) 24px; }
  .so a em { display: none; }
  .sq p { margin-left: 40px; }
}

/* one rhythm for every block: tighter section padding site-wide */
:root { --sec: clamp(44px, min(4.2vw, 60.48px), 64px); }