/* ==========================================================================
   MEENA DIGI SOLUTIONS — Services page
   Loaded after css/style.css — inherits the design system. Adds only the
   services-page components: discipline sub-nav, deep service blocks,
   sub-service rows, abstract discipline marks, process strip and FAQ.
   ========================================================================== */

/* ---------- Hero ---------- */
.svc-hero{ min-height:78vh; }
.svc-hero .about-hero-sub{ max-width:56ch; }

/* ---------- Discipline sub-nav ----------
   Sticks on the SAME line as the fixed nav dock (top:22px), so when
   scrolled the page reads as one bar: discipline pills left, MEENA
   dock right. Right padding reserves the dock's zone so pills never
   run underneath it. */
.svc-subnav{
  position:sticky; top:22px; z-index:840;
  width:var(--container); margin:0 auto;
  display:flex; gap:10px; flex-wrap:wrap;
  padding:7px 460px 7px 0;
  min-height:52px; align-items:center;
  pointer-events:none;
}
.svc-subnav a{ pointer-events:auto; }
@media (max-width:1100px){
  .svc-subnav{ padding-right:300px; }
}
.svc-subnav a{
  padding:10px 20px; border-radius:100px;
  border:1px solid var(--border); background:var(--glass);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font-size:0.82rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); transition:all .35s var(--ease);
}
.svc-subnav a:hover{ color:var(--text); border-color:var(--accent); }
.svc-subnav a.is-active{
  color:var(--bg); background:var(--accent); border-color:var(--accent);
}

/* ---------- Service blocks ---------- */
.svc-block{
  width:var(--container); margin-inline:auto;
  padding:clamp(80px, 13vw, 150px) 0;
  position:relative;
  scroll-margin-top:140px;
}
.svc-block + .svc-block{ border-top:1px solid var(--border); }
.svc-index{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3.4rem, 9vw, 7.5rem); line-height:1;
  color:var(--text); opacity:0.06;
  position:absolute; top:clamp(36px, 6vw, 64px); right:0;
  pointer-events:none; user-select:none;
}
.svc-head{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:clamp(36px, 6vw, 90px); align-items:center;
  margin-bottom:clamp(40px, 6vw, 70px);
}
.svc-lead{
  margin-top:24px; color:var(--text-dim);
  font-size:clamp(1.05rem, 1.7vw, 1.25rem); line-height:1.6; max-width:52ch;
}
.svc-visual{ position:relative; }
.svc-svg{ width:min(380px, 92%); margin-inline:auto; overflow:visible; }
.svc-draw{
  fill:none; stroke:var(--accent); stroke-width:1.4px;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.svc-thin{ stroke-width:0.8px; opacity:0.35; }
.svc-dot{ fill:var(--action); }
.svc-facet{
  fill:var(--accent); fill-opacity:0.1;
  stroke:var(--accent); stroke-width:0.8px; vector-effect:non-scaling-stroke;
}

/* sub-service rows — editorial index list, not cards */
.svc-rows{ border-top:1px solid var(--border); }
.svc-row{
  display:grid; grid-template-columns:64px 1fr 1.4fr auto;
  gap:clamp(16px, 3vw, 40px); align-items:baseline;
  padding:26px 8px; border-bottom:1px solid var(--border);
  position:relative; transition:padding .4s var(--ease);
}
.svc-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--accent); opacity:0.07; transition:width .45s var(--ease);
}
@media (hover:hover){
  .svc-row:hover{ padding-left:22px; }
  .svc-row:hover::before{ width:100%; }
}
.svc-row-num{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:0.82rem; color:var(--accent); letter-spacing:0.08em;
}
.svc-row h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.05rem, 2vw, 1.5rem); letter-spacing:0.02em;
}
.svc-row p{ color:var(--text-dim); font-size:0.98rem; max-width:52ch; }
.svc-row-tag{
  font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-faint); white-space:nowrap;
}
.svc-cta-row{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Process strip ---------- */
.svc-process{
  width:var(--container); margin-inline:auto;
  padding:clamp(72px, 12vw, 130px) 0;
}
.svc-process-grid{
  margin-top:54px; display:grid; grid-template-columns:repeat(5, 1fr);
  gap:18px; counter-reset:step;
}
.svc-step{
  padding:24px 20px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  position:relative;
}
.svc-step::before{
  counter-increment:step; content:'0' counter(step);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:0.78rem; color:var(--accent); letter-spacing:0.1em;
}
.svc-step h3{
  margin-top:12px; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:1rem;
}
.svc-step p{ margin-top:8px; color:var(--text-dim); font-size:0.9rem; }

/* ---------- FAQ ---------- */
.svc-faq{
  width:var(--container); margin-inline:auto;
  padding:clamp(72px, 12vw, 130px) 0;
}
.faq-list{ margin-top:44px; border-top:1px solid var(--border); max-width:900px; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:24px 4px; text-align:left;
  font-family:var(--font-body); font-weight:600; font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:var(--text); transition:color .3s var(--ease);
}
.faq-q:hover{ color:var(--accent); }
.faq-icon{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); position:relative;
  transition:transform .45s var(--ease), border-color .3s var(--ease);
}
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute; inset:0; margin:auto;
  background:currentColor;
}
.faq-icon::before{ width:12px; height:1.6px; }
.faq-icon::after{ width:1.6px; height:12px; transition:transform .45s var(--ease); }
.faq-item.is-open .faq-icon{ transform:rotate(180deg); border-color:var(--accent); }
.faq-item.is-open .faq-icon::after{ transform:scaleY(0); }
.faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a-inner p{
  padding:0 44px 26px 4px; color:var(--text-dim); font-size:1rem; max-width:70ch;
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .svc-head{ grid-template-columns:1fr; }
  .svc-visual{ order:-1; }
  .svc-process-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .svc-row{ grid-template-columns:44px 1fr; }
  .svc-row p{ grid-column:2; }
  .svc-row-tag{ grid-column:2; }
  .svc-process-grid{ grid-template-columns:1fr; }
}
/* Mobile: the top-left logo occupies the nav line, so the pills
   stick just below the compact nav instead. */
@media (max-width:800px){
  .svc-subnav{ top:78px; padding-right:0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .svc-row, .svc-row::before, .faq-a, .faq-icon{ transition:none; }
}