/* ============================================================
   ICOSA LTD  ·  Services
   ============================================================ */

/* ---------- Index of service lines in the title band ---------- */
.svc-index{ margin-top:clamp(56px, 6vw, 96px); max-width:64%; }
.svc-index ol{ list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(24px, 3vw, 56px); border-top:1px solid var(--line-strong); }
.svc-index li{ border-bottom:1px solid var(--line); }
.svc-index a{
  display:flex; align-items:baseline; gap:18px; padding-block:18px;
  font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight:300;
  transition:color .4s var(--ease), padding .5s var(--ease);
}
.svc-index a:hover{ color:var(--burnt); padding-left:8px; }
.si-num{ font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--burnt-ink); flex:none; }
.si-title{ flex:1; }
.si-arr{ font-size:.95rem; color:var(--mut); transition:transform .5s var(--ease), color .4s var(--ease); }
.svc-index a:hover .si-arr{ transform:translateY(4px); color:var(--burnt); }

/* ---------- Service lines ---------- */
#lines{ overflow:hidden; }
.svc-list{ border-top:1px solid var(--line-strong); }
.svc-entry{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:32px clamp(48px, 8vw, 160px);
  padding-block:clamp(48px, 5.5vw, 96px); border-bottom:1px solid var(--line-strong);
}
.svc-lead{ position:sticky; top:calc(var(--nav-h, 88px) + 32px); align-self:start; }
.svc-num{
  font-size:clamp(3.6rem, 2.4rem + 4vw, 6.4rem); font-weight:300; line-height:.9; letter-spacing:-.05em;
  color:var(--burnt);
}
.svc-lead h3{ margin-top:26px; font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.7rem); font-weight:300; line-height:1.12; letter-spacing:-.015em; }
.svc-tag{
  display:inline-block; margin-top:22px; padding:8px 12px; border:1px solid var(--line-strong);
  font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-soft);
}
.svc-body > p{ font-size:var(--lede); font-weight:300; line-height:1.65; color:var(--ink); max-width:56ch; }
.svc-points{
  list-style:none; margin-top:clamp(32px, 3.4vw, 52px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2vw, 32px);
}
.svc-points li{
  position:relative; padding-top:22px; border-top:2px solid var(--ink);
  font-size:.95rem; line-height:1.55; color:var(--text-soft);
}
.svc-points li::before{
  content:""; position:absolute; top:-2px; left:0; width:38px; height:2px; background:var(--burnt);
}

/* ---------- Engagement ---------- */
.engagement{ overflow:hidden; }
.engagement > .lines{ --lc:var(--orange); --lo:.2; --lfade:radial-gradient(ellipse 60% 80% at 100% 0%, #000 0%, transparent 70%); }
.steps-grid{
  list-style:none; position:relative;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 2.6vw, 48px);
}
/* One line runs through all four markers. */
.steps-grid::before{
  content:""; position:absolute; left:0; right:0; top:9px; height:1px; background:var(--line-dark);
}
.step{ position:relative; }
.step-mark{
  position:relative; display:block; width:20px; height:18px; background:var(--orange);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.step-num{ margin-top:34px; font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--orange); }
.step h3{ margin-top:16px; font-size:var(--h3); font-weight:300; }
.step p:not(.step-num){ margin-top:14px; font-size:.97rem; color:var(--on-dark-mut); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .svc-points{ grid-template-columns:minmax(0,1fr); gap:0; }
  .svc-points li{ padding-block:16px; border-top-width:1px; border-top-color:var(--line-strong); }
  .svc-points li::before{ width:24px; top:-1px; }
  .steps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:56px; }
  .steps-grid::before{ display:none; }
}
@media (max-width: 980px){
  .svc-index{ max-width:none; }
  .svc-entry{ grid-template-columns:minmax(0,1fr); }
  .svc-lead{ position:static; }
}
@media (max-width: 640px){
  .svc-index ol{ grid-template-columns:minmax(0,1fr); }
  .steps-grid{ grid-template-columns:minmax(0,1fr); }
}