/* ============================================================================
   VAROLYN — Services page · Section 3 "GETTING CARE AT HOME IS SIMPLE"
   6-step horizontal timeline in a light liquid-glass card (reference match):
   white circles with line icons, dotted connectors, titles + short subs.
   Self-contained (.svt- prefix only) — touches nothing else.
   PERFORMANCE: no images, no JS; ONE static backdrop-filter surface (same
   budget the navbar + footer already use). Pulse = transform/opacity ring,
   staggered, off under reduced-motion. Geist strictly.
   ============================================================================ */
.svt{
  --forest:#1a6b5a; --emerald:#25957a; --mint:#3dbf97; --ink:#0d1f1a;
  --sub:#4a6b62; --line:rgba(20,60,45,.12);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  background:#04100a;                              /* EXACT footer frame colour — the band reads as one piece with the footer below */
  position:relative;overflow:hidden;
  padding:clamp(34px,5.5vw,64px) clamp(14px,4vw,56px) clamp(34px,5vw,64px);   /* SPACING TRIM: bottom 76→64 (page rhythm) */
}   /* WHITE-GAP FIX: top margin removed — the sage cards band now meets this dark band directly (each section's own padding keeps the content rhythm; no pearl strip between them) */
main#services-main{padding-bottom:0}               /* scoped: removes the pearl strip after this section so the dark band meets the footer seamlessly (higher specificity than the page-shell rule, which comes later in source order; affects nothing else — this section is the last block) */
.svt *{box-sizing:border-box;min-width:0}
/* soft green light pools behind the glass (same recipe as the footer's blobs) — gives the blur something real to frost */
.svt::before{content:"";position:absolute;width:46vw;height:46vw;max-width:640px;max-height:640px;
  left:-10vw;top:-18vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(61,191,151,.16),transparent 68%)}
.svt::after{content:"";position:absolute;width:42vw;height:42vw;max-width:560px;max-height:560px;
  right:-8vw;bottom:-16vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(26,107,90,.16),transparent 68%)}
/* STRICT liquid morphism: true frosted glass — heavy blur + transparency + inner glow + subtle border
   (backdrop-filter is already part of this site's budget: the navbar + footer use it) */
.svt-card{position:relative;z-index:1;max-width:1180px;margin:0 auto;border-radius:clamp(22px,3vw,32px);
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 44px rgba(61,191,151,.07),0 26px 60px -22px rgba(0,0,0,.65);
  padding:clamp(22px,3.5vw,42px) clamp(16px,3vw,40px)}
@supports not (backdrop-filter:blur(1px)){
  .svt-card{background:rgba(13,34,25,.88)}         /* old browsers: solid dark glass fallback */
}
.svt-title{text-align:center;font-weight:800;font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.02em;color:#eafff6;margin:0 0 clamp(22px,3.5vw,38px)}

/* ---------------- the 6 steps ---------------- */
.svt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3.5vw,28px) clamp(10px,2vw,16px)}
.svt-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}

/* circle + icon */
.svt-dot{position:relative;width:clamp(58px,8vw,72px);height:clamp(58px,8vw,72px);border-radius:50%;
  display:grid;place-items:center;color:var(--forest);background:#fff;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 6px rgba(61,191,151,.16),0 0 22px rgba(61,191,151,.30),0 12px 26px -10px rgba(0,0,0,.6);   /* soft green glow on all sides, tuned for the dark glass */
  margin-bottom:clamp(10px,1.6vw,16px);
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .35s ease,background-color .35s ease}   /* smooth glow in AND fade-out back to normal */
/* TOUCH/HOVER GLOW — hover (PC/tablet) + active press (mobile touch, incl. tapping the step):
   the circle's own background warms to light mint and a soft, even green halo breathes
   out on all sides. Pure box-shadow + background-color transition on an already-
   composited element — no filters, no layout, zero scroll cost. */
.svt-dot:hover,.svt-dot:active,.svt-step:active .svt-dot{
  background-color:#e6fbf2;                                     /* the circle itself gently glows light green */
  box-shadow:0 0 0 8px rgba(61,191,151,.24),0 0 30px 4px rgba(61,191,151,.48),
    0 0 60px 12px rgba(61,191,151,.22),0 12px 26px -10px rgba(0,0,0,.55)}
.svt-dot svg{width:46%;height:46%;display:block;margin:auto}   /* perfectly centred: grid place-items + block + auto margins (no baseline drift) */
/* gentle beep/pulse ring — transform+opacity only, staggered so it feels alive */
.svt-dot::before{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(61,191,151,.65);opacity:0;
  animation:svt-pulse 3.4s ease-out infinite}
.svt-step:nth-child(2) .svt-dot::before{animation-delay:.55s}
.svt-step:nth-child(3) .svt-dot::before{animation-delay:1.1s}
.svt-step:nth-child(4) .svt-dot::before{animation-delay:1.65s}
.svt-step:nth-child(5) .svt-dot::before{animation-delay:2.2s}
.svt-step:nth-child(6) .svt-dot::before{animation-delay:2.75s}
@keyframes svt-pulse{0%{transform:scale(.92);opacity:.55}70%{opacity:.1}100%{transform:scale(1.28);opacity:0}}

.svt-step b{display:block;font-weight:700;font-size:clamp(13.5px,1.5vw,16px);line-height:1.3;
  color:#f2faf7;margin:0 0 6px}
.svt-step b + span{display:block;font-size:clamp(11.5px,1.25vw,13.5px);line-height:1.5;
  color:#9fc4b5;max-width:21ch}   /* description ONLY (b + span) — must never match .svt-dot, which is also a span: it overrode the circle's display:grid and pushed icons off-centre */

/* ---------------- responsive ---------------- */
@media (min-width:760px){ .svt-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:759.98px){ .svt-step b{min-height:2.6em} }   /* 2-col: "Staff & Equipment Deployment" wraps to 2 lines; reserve the slot so paired descriptions align */
@media (min-width:1080px){
  .svt-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .svt-step b{min-height:2.6em}   /* reserve 2 title lines so every description starts at the same Y (Staff/Recovery titles wrap to 2 lines here) */
  /* dotted connector from each circle to the next (PC row only — geometry guaranteed) */
  .svt-step:not(:last-child)::after{content:"";position:absolute;
    top:calc(clamp(58px,8vw,72px)/2 - 1px);
    left:calc(50% + clamp(58px,8vw,72px)/2 + 8px);
    width:calc(100% - clamp(58px,8vw,72px) - 16px);
    border-top:2px dotted rgba(120,210,170,.45)}
}
@media (prefers-reduced-motion:reduce){ .svt-dot::before{animation:none;display:none} }