/* ============================================================================
   VAROLYN — Services page · Section 1 "Home Healthcare Services" HERO
   Built to the approved reference: copy left · glowing shield centre ·
   three floating feature cards right. Self-contained (.svh- prefix only).
   PERFORMANCE: no images (shield is inline SVG), no JS, no blur filters —
   glow = radial-gradients, beep = transform/opacity rings (GPU-only),
   disabled under prefers-reduced-motion. Buttery on low-end mobile.
   ============================================================================ */
.svh{
  --forest:#1a6b5a; --emerald:#25957a; --mint:#3dbf97; --gold:#f5c842;
  --ink:#0d1f1a; --sub:#4a6b62; --line:rgba(20,60,45,.12); --soft:#e9f6ef;
  color:var(--ink);
}
.svh *{box-sizing:border-box}
.svh-wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,5vw,56px);
  display:grid;gap:clamp(28px,4.5vw,44px);align-items:center}

/* ---------------- left copy ---------------- */
.svh-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--forest);
  background:var(--soft);border:1px solid var(--line);border-radius:100px;padding:7px 15px;margin-bottom:18px}
.svh-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(61,191,151,.25)}
.svh-title{font-weight:800;font-size:clamp(33px,4vw,47px);line-height:1.08;letter-spacing:-.025em;margin:0 0 14px}   /* sized so "Home Healthcare" holds ONE line beside the shield on PC (measured 386px < column) — reference match */
.svh-title .hl{display:block;color:var(--emerald)}
.svh-sub{font-weight:600;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.01em;margin:0 0 14px}   /* one clean line on PC (measured 378px < column) — reference match */
.svh-desc{color:var(--sub);font-size:clamp(15px,1.7vw,17px);line-height:1.75;max-width:46ch;margin:0 0 26px}
.svh-cta{display:flex;flex-wrap:wrap;gap:12px}
.svh-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;
  font-size:15px;font-weight:600;line-height:1;padding:15px 19px;border-radius:14px;cursor:pointer;
  text-decoration:none;border:1px solid transparent;min-height:50px;
  transition:transform .2s ease,box-shadow .25s ease}   /* padding sized so BOTH buttons sit side-by-side in the copy column on PC (407px total) — reference match */
.svh-btn svg{width:17px;height:17px;flex:none}
.svh-btn-primary{background:linear-gradient(180deg,#217e63,#1a6b5a 60%,#15584a);color:#fff;
  box-shadow:0 12px 26px rgba(26,107,90,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.svh-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(26,107,90,.42),inset 0 1px 0 rgba(255,255,255,.2)}
.svh-btn-ghost{background:#fff;color:var(--forest);border-color:rgba(26,107,90,.35);box-shadow:0 4px 14px rgba(20,60,45,.08)}
.svh-btn-ghost:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,60,45,.14)}
.svh-btn:focus-visible{outline:3px solid rgba(37,149,122,.55);outline-offset:3px}

/* ---------------- centre visual: shield + glow + beep ---------------- */
.svh-visual{position:relative;display:grid;place-items:center;min-height:clamp(280px,34vw,420px)}
/* FIX v4 — the home-healthcare SCENE replaces the shield (+ its backdrop/glow/sparks, all removed).
   Contained by BOTH max-width AND max-height so the landscape art fits the old shield slot and the
   section height NEVER changes; centred; aspect preserved (width/height auto); no overflow/distortion. */
.svh-scene{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(248px,33vw,398px);
  margin:0 auto;position:relative;z-index:1}
/* soft, cohesive green glow on the round PODIUM at the base — blinks via OPACITY only (GPU compositor, no
   repaint/layout); position:absolute → zero layout impact; sits behind the scene; frozen under reduced-motion. */
.svh-podium-glow{position:absolute;left:50%;bottom:clamp(8px,11%,60px);transform:translateX(-50%);
  width:min(60%,290px);height:clamp(24px,5vw,52px);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(78,194,50,.62) 0%,rgba(61,191,151,.34) 46%,rgba(61,191,151,0) 72%);
  filter:blur(2.5px);opacity:.5;will-change:opacity;
  animation:svh-podium 2.8s ease-in-out infinite}
@keyframes svh-podium{0%,100%{opacity:.3}50%{opacity:.82}}
/* small floating chip (white circle + green icon, left of the visual) */
.svh-chip{position:absolute;left:clamp(-6px,1vw,16px);top:14%;width:52px;height:52px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--forest);
  box-shadow:0 10px 24px rgba(20,74,58,.16)}
.svh-chip svg{width:26px;height:26px}

/* ---------------- right feature cards ---------------- */
.svh-cards{display:grid;gap:16px;align-content:center}
.svh-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:15px 18px;box-shadow:0 10px 26px rgba(20,74,58,.10)}
.svh-card .ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--soft);color:var(--forest)}
.svh-card .ic svg{width:24px;height:24px}
.svh-card b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}
.svh-card span{display:block;font-size:13px;color:var(--sub);line-height:1.3}

/* ---------------- responsive ---------------- */
/* mobile-first: stacked — copy, shield, cards */
@media (min-width:760px){
  .svh-wrap{grid-template-columns:1.05fr .95fr}             /* tablet: copy | shield */
  .svh-cards{grid-template-columns:repeat(3,1fr);grid-column:1 / -1}  /* cards in a row below */
  .svh-card{flex-direction:column;text-align:center;padding:18px 14px}
}
@media (min-width:1080px){
  .svh-wrap{grid-template-columns:1.3fr .85fr minmax(206px,.55fr)}    /* PC: wider copy | shield | cards column — copy wide enough for 1-line title/sub + side-by-side buttons */
  .svh-cards{grid-template-columns:1fr;grid-column:auto}
  .svh-card{flex-direction:row;text-align:left;padding:15px 18px}
}
/* accessibility — kill all motion for reduced-motion users */
@media (prefers-reduced-motion:reduce){
  .svh-podium-glow{animation:none}   /* steady glow, no blink */
}