/* ============================================================
   HELIOCASTLE — SERVICES
   The "Built To Order" list: numbers, icons, copy, tech tags.
   ============================================================ */

/* ============================================================
   SERVICES
   ============================================================ */

.services {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(70px, 8vw, 120px) var(--pad-x) clamp(20px, 3vw, 40px);
}

.service-list { border-top: 1px solid var(--line); }

.service {
  position: relative;
  display: grid;
  grid-template-columns: auto 62px 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
  padding: clamp(26px, 2.8vw, 40px) clamp(10px, 1.6vw, 26px);
  border-bottom: 1px solid var(--line);
  transition: background 0.5s var(--ease), padding-left 0.5s var(--ease);
}
/* gold hairline that draws across on hover */
.service::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgb(var(--accent-rgb) / 0.15));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.service:hover {
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.045), transparent 65%);
  padding-left: clamp(20px, 2.6vw, 40px);
}
.service:hover::after { transform: scaleX(1); }

/* rows that have their own page: overlay link keeps the grid layout intact */
.service--linked { cursor: pointer; }
.service-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.service-link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -4px;
}

/* Roman numerals, not digits. They are the same upright strokes the mark
   is built from, so a row number and the logo read as the same alphabet.
   The serif is what makes them columns rather than letters — keep it. */
.service-num {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 26px);
  /* var(--gold), NOT rgb(var(--accent-rgb) / .5). The raw triplet is the same
     mid gold in both themes, so a faded version of it landed at 1.4:1 on paper
     and the numeral all but vanished. --gold is the theme-corrected tone. */
  color: var(--gold);
  letter-spacing: 0.1em;
  font-variant-numeric: normal;
  transition: color 0.4s;
}
.service:hover .service-num { color: var(--gold-pale); }

.service-icon {
  width: 46px;
  height: 46px;
  color: var(--gold);
  opacity: 0.85;
  transition: transform 0.5s var(--ease), filter 0.5s, opacity 0.4s;
}
.service-icon svg { width: 100%; height: 100%; }
.service:hover .service-icon {
  opacity: 1;
  transform: translateY(-3px);
  filter: drop-shadow(0 0 14px rgb(var(--accent-rgb) / 0.35));
}

/* text left, tech tags right — fills the row width evenly */
.service-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 3.5vw, 70px);
  align-items: center;
}
.service-body h3 {
  grid-column: 1;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 9px;
  transition: color 0.4s;
}
.service:hover .service-body h3 { color: var(--gold); }
.service-body p {
  grid-column: 1;
  max-width: 54ch;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
}

.tags {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 250px;
  list-style: none;
}
.tags li {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.72);   /* 0.6 measured 4.4:1 on paper */
  padding: 6px 13px;
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  transition: border-color 0.4s, color 0.4s;
}
.service:hover .tags li {
  border-color: rgb(var(--accent-rgb) / 0.3);
  color: rgb(var(--ink-rgb) / 0.85);
}

.service-arrow {
  width: 26px;
  height: 26px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.service:hover .service-arrow { opacity: 1; transform: translateX(0); }