/* =========================================================
   02 · Services (piece B)
   Dark gunmetal band, translucent so the shared WebGL world glows through.
   Mechanism 5: hairline rows — index → title → description → square button.
   ========================================================= */

.services { background-color: rgba(24, 25, 28, .84); color: var(--ink-on-dark); overflow: clip; } /* clip, not hidden: keeps the sticky aside working */
/* Embossed metallic headline on dark */
.services__title .line { background: linear-gradient(180deg, var(--alu-50, #F3F4F5) 10%, var(--alu-400, #9A9EA4) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.services__title em { color: inherit; }
.services__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; left: 50%; top: 30%;
  margin: -35vw 0 0 -35vw;
  background: radial-gradient(closest-side, rgba(236, 238, 240, .07), rgba(255, 102, 0, .025) 50%, transparent 75%);
  will-change: transform;
}

.services__head { align-items: end; row-gap: 32px; }
.services__title { grid-column: 1 / span 7; }
.services__intro { grid-column: 9 / span 4; font-size: 16px; line-height: 1.65; padding-bottom: 6px; color: rgba(236, 238, 240, .82); }

/* ---------- Rows ---------- */
/* 4/8 split: a sticky focal index on the left, the rows on the right */
.svc-split { margin-top: clamp(72px, 8vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.svc-aside { grid-column: 1 / span 4; position: relative; }
.svc-aside__inner { position: sticky; top: 18vh; display: grid; gap: 14px; padding-top: 28px; }
.svc-aside__num {
  font-size: clamp(120px, 13vw, 200px); font-weight: 400; line-height: .82; letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  color: var(--alu-50);
  transition: opacity 300ms var(--ease-out);
}
.svc-aside__of { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--alu-400); }
.svc-aside__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink-on-dark); max-width: 12ch; transition: opacity 300ms var(--ease-out); }
.svc-aside.is-swapping .svc-aside__num, .svc-aside.is-swapping .svc-aside__title { opacity: 0; }
.svc-split .svc-list { grid-column: 5 / span 8; margin-top: 0; }
.svc-list { border-top: 1px solid rgba(0, 0, 0, .55); box-shadow: inset 0 1px 0 rgba(236, 238, 240, .07); }
.svc { position: relative; border-bottom: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(236, 238, 240, .07); }
.svc__h { margin: 0; font: inherit; }

.svc__row, .svc__panel-in {
  display: grid;
  grid-template-columns: 44px minmax(0, 4fr) minmax(0, 5fr) 40px;
  column-gap: var(--gutter);
}
.svc__row {
  position: relative; width: 100%; align-items: center; text-align: left;
  padding: clamp(26px, 2.6vw, 38px) 0; color: var(--ink-on-dark);
}
.svc__row::before { /* hover wash, slides in from the left */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(236, 238, 240, .06), rgba(236, 238, 240, .02) 55%, transparent 85%);
  opacity: 0; transform: scaleX(.6); transform-origin: left;
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
}
.svc__row::after { /* ember hairline that grows along the row's bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ember-500);
  transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-out);
}
.svc__row:hover::before, .svc__row:focus-visible::before, .svc.is-open .svc__row::before { opacity: 1; transform: none; }
.svc.is-open {
  background: linear-gradient(180deg, rgba(236, 238, 240, .06), rgba(236, 238, 240, .02) 60%, rgba(14, 15, 17, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(236, 238, 240, .07);
}
.svc.is-open .svc__row { padding-top: clamp(34px, 3.4vw, 48px); }
.svc__h { position: relative; }
.svc__h::before { content: ""; position: absolute; left: clamp(-24px, -2vw, -10px); top: 0; bottom: 0; z-index: 1; width: 2px; background: var(--ember-500); box-shadow: 0 0 12px var(--ember-glow); transform: scaleY(0); transform-origin: top; transition: transform 900ms var(--ease-out); }
.svc.is-open .svc__h::before { transform: none; }
.svc.is-open .svc__title { color: #fff; }
.svc__row:hover::after, .svc__row:focus-visible::after { transform: scaleX(1); }
.svc__row:focus-visible { outline-offset: -2px; }

.svc__idx { font-size: 11px; letter-spacing: .18em; color: var(--muted-on-dark); transition: color var(--dur-hover); }
.svc__row:hover .svc__idx, .svc__row:focus-visible .svc__idx, .svc.is-open .svc__idx { color: var(--ink-on-dark); }

.svc__title {
  font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1;
  transition: transform 600ms var(--ease-out);
}
.svc__desc { font-size: 16px; line-height: 1.55; color: rgba(236, 238, 240, .8); max-width: 52ch; transition: color var(--dur-hover); }

.svc__btn {
  position: relative; width: 40px; height: 40px; justify-self: end;
  border: 1px solid rgba(236, 238, 240, .35);
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover), transform 700ms var(--ease-out);
}
.svc__btn i {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: rgba(236, 238, 240, .8); transition: background var(--dur-hover), transform 700ms var(--ease-out);
}
.svc__btn i + i { transform: rotate(90deg); }

/* hover / focus / open states */
.svc__row:hover .svc__desc, .svc.is-open .svc__desc { color: var(--ink-on-dark); }
.svc__row:hover .svc__btn i, .svc__row:focus-visible .svc__btn i { background: var(--ember-500); }
.svc__row:hover .svc__btn, .svc__row:focus-visible .svc__btn { border-color: var(--ember-500); box-shadow: 0 0 14px -2px var(--ember-glow, rgba(255,102,0,.55)); }
.svc.is-open .svc__btn { background: var(--ember-500); border-color: var(--ember-500); box-shadow: 0 0 18px -2px var(--ember-glow, rgba(255,102,0,.55)); }
.svc.is-open .svc__btn i { background: var(--graphite, #1A1B1E); transform: rotate(45deg); }
.svc.is-open .svc__btn i + i { transform: rotate(135deg); }

@keyframes svc-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

/* ---------- Expanding panel ---------- */
.svc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 900ms var(--ease-out);
}
.svc.is-open .svc__panel { grid-template-rows: 1fr; }
.svc__panel-in { min-height: 0; overflow: hidden; }
.svc__more {
  grid-column: 2 / span 3; padding: 8px 0 clamp(40px, 4.5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 40px; column-gap: var(--gutter); row-gap: 16px;
  grid-auto-flow: row dense; align-content: start;
}
.svc__more > * { grid-column: 2; }
.svc__more > .svc__kicker { grid-column: 1 / -1; grid-row: 1; }
.svc__more > .svc__lead { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
.svc__more > * { opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out); }
.svc.is-open .svc__more > * { opacity: 1; transform: none; }
.svc.is-open .svc__more > *:nth-child(1) { transition-delay: 150ms; }
.svc.is-open .svc__more > *:nth-child(2) { transition-delay: 230ms; }
.svc.is-open .svc__more > *:nth-child(3) { transition-delay: 310ms; }
.svc.is-open .svc__more > *:nth-child(n+4) { transition-delay: 390ms; }
.svc__kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--alu-400); }
.svc__lead { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.svc__lead em { font-style: italic; font-weight: 400; }
.svc__more p:not(.svc__kicker):not(.svc__lead) { font-size: 16px; line-height: 1.65; color: rgba(236, 238, 240, .82); }
.svc__actions .link { font-size: 16px; }
.svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 8px; }
.svc__tel { font-size: 11px; letter-spacing: .18em; color: var(--muted-on-dark); padding: 8px 0; transition: color var(--dur-hover); }
.svc__tel:hover { color: var(--ink-on-dark); }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1080px) {
  .svc-aside { grid-column: 1 / span 3; }
  .svc-split .svc-list { grid-column: 4 / span 9; }
}
@media (max-width: 900px) {
  .services__title, .services__intro { grid-column: 1 / -1; }
  .services__intro { max-width: 520px; }
  .svc__row {
    grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "title btn" "desc desc";
    column-gap: 14px; row-gap: 8px; padding: 22px 0; align-items: center;
  }
  .svc__idx { display: none; }
  .svc__title { grid-area: title; }
  .svc__desc { grid-area: desc; font-size: 15px; padding-right: 8px; }
  .svc__btn { grid-area: btn; width: 44px; height: 44px; }
  .svc__row:hover .svc__title, .svc.is-open .svc__title { transform: none; }
  .svc__panel-in { grid-template-columns: 1fr; }
  .svc__more { grid-column: 1; grid-template-columns: 1fr; padding: 4px 0 36px; }
  .svc__more > *, .svc__more > .svc__kicker, .svc__more > .svc__lead { grid-column: 1; grid-row: auto; }
  .svc__lead { font-size: 24px; }
  .svc__h::before { left: calc(var(--side) * -1); }
  .svc-split { display: block; }
  .svc-aside { display: none; } /* full-bleed edge bar on mobile, flush with the viewport */
}


/* Desktop: the row the sticky aside points at is the lit one; the rest sit back */
@media (min-width: 901px) {
  .svc-split .svc__title { color: rgba(236, 238, 240, .62); transition: color 400ms var(--ease-out); }
  .svc-split .svc.is-active .svc__title, .svc-split .svc.is-open .svc__title, .svc-split .svc__row:hover .svc__title, .svc-split .svc__row:focus-visible .svc__title { color: var(--ink-on-dark); }
}