/* ProTech Innovations — service-pages template (redesign agent 06)
   Presentation only: no copy, link, or behaviour changes. Loaded after
   main.css on solutions.html, ai-transformation-strategy.html,
   ai-automation-agents.html and managed-ai-solutions.html only.
   Shared contract tokens; supporting neutrals extend the brand anchors.
   Motion: transform + opacity only. No external requests, no webfonts. */

:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6;
  --ink:#0B1220; --muted:#5B6472; --paper:#F2F4F7; --line:#E5E7EB;
  --line-strong:#CBD2DC; --teal-soft:#E6F7F6; --blue-soft:#EEF4FF;
  --teal-deep:#0B3B38; --hero-text:#D7DEE8;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 20px 48px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:150ms; --dur-normal:300ms; --dur-slow:600ms;
}

/* ---------- Reveal (content stays fully visible without JS) ---------- */
.js .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible{opacity:1; transform:none}
.js .svc-grid > .reveal:nth-child(2){transition-delay:60ms}
.js .svc-grid > .reveal:nth-child(3){transition-delay:120ms}
.js .svc-grid > .reveal:nth-child(n+4){transition-delay:0ms}

/* ---------- Service hero: layered geometric art, no layout shift ---------- */
.svc-hero{position:relative; overflow:hidden}
.svc-hero-art{
  position:absolute; top:0; right:0; bottom:0; width:44%;
  pointer-events:none; z-index:0;
}
.svc-hero-art svg{display:block; width:100%; height:100%}
.svc-hero .wrap{position:relative; z-index:1}
@media(max-width:900px){.svc-hero-art{display:none}}

/* ---------- Section rhythm ---------- */
.svc-section{padding:84px 0}
.svc-section--tint{background:var(--paper)}
.svc-section > .wrap > h2{position:relative; padding-top:20px; margin-bottom:18px}
.svc-section > .wrap > h2::before{
  content:""; position:absolute; top:0; left:0;
  width:56px; height:4px; border-radius:2px; background:var(--teal);
}
/* The closing CTA band carries its own treatment; no opener bar there. */
.svc-cta-band{padding:84px 0}

/* ---------- Cards: corner-arc motif, hover lift (paint only) ---------- */
.svc-card{position:relative; overflow:hidden;
  transition:transform var(--dur-normal) var(--ease-out),
             box-shadow var(--dur-normal) var(--ease-out),
             border-color var(--dur-normal) var(--ease-out)}
.svc-card::after{
  content:""; position:absolute; top:-34px; right:-34px;
  width:96px; height:96px; border-radius:50%;
  border:1.5px solid var(--teal); opacity:.18; pointer-events:none;
}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong)}
.svc-trio .svc-card{border-top:4px solid var(--teal)}
.svc-trio .svc-card::after{opacity:.28}

/* ---------- Process: abstract node rhythm above the step pills ---------- */
.svc-flow{
  position:relative; height:28px; margin:4px 0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.svc-flow::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1.5px; background:var(--line-strong);
}
.svc-flow-dot{
  position:relative; z-index:1; width:14px; height:14px; border-radius:50%;
  background:var(--navy); flex:none;
}
.svc-flow-dot:nth-child(2){background:#fff; border:2px solid var(--blue); width:14px; height:14px}
.svc-flow-dot:nth-child(3){background:var(--teal)}
.svc-flow-dot:nth-child(4){background:#fff; border:2px solid var(--line-strong)}
.svc-process .steps{position:relative}
.svc-process .step-pill{
  transition:transform var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.svc-process .step-pill:hover{transform:translateY(-2px); border-color:var(--teal); box-shadow:var(--shadow-sm)}

/* ---------- FAQ: quiet hover + open emphasis, text untouched ---------- */
.faq details{
  transition:box-shadow var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.faq details:hover{box-shadow:var(--shadow-md)}
.faq details[open]{border-color:var(--teal)}

/* ---------- Closing CTA band ---------- */
.svc-cta{
  background:var(--navy); border-color:var(--navy); color:#fff;
  padding:44px 40px; box-shadow:var(--shadow-lg);
}
.svc-cta::after{opacity:.30}
.svc-cta h2{color:#fff; position:relative; padding-top:20px}
.svc-cta h2::before{
  content:""; position:absolute; top:0; left:0;
  width:56px; height:4px; border-radius:2px; background:var(--teal);
}
.svc-cta p{color:var(--hero-text)}
.svc-cta .btn.ghost{background:transparent; color:#fff!important; border-color:#fff; box-shadow:none}
.svc-cta .btn.ghost:hover{background:rgba(255,255,255,.10)}
.svc-cta:hover{border-color:var(--navy)}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .svc-section,.svc-cta-band{padding:60px 0}
  .svc-cta{padding:32px 24px}
}

/* ---------- Reduced motion: everything fully visible, no motion ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1!important; transform:none!important; transition:none!important}
  .svc-card,.svc-process .step-pill,.faq details{transition:none!important}
  .svc-card:hover,.svc-process .step-pill:hover{transform:none!important}
}