/* ============================================================================
   VAROLYN — Services page · Section 4 "UNDER ONE ROOF + HOSPITAL TO HOME"
   Two premium light cards (reference match):
   LEFT  — copy + orbit diagram (Varolyn logo watermark centre, 6 service
           nodes on a dashed ring).
   RIGHT — "Hospital to Home. Better in Every Way." comparison columns with
           a glowing green heart-house between them.
   Self-contained (.svr- prefix only). PERFORMANCE: one tiny webp (the logo
   watermark), no JS, no filters; everything else is CSS + inline SVG. Geist.
   ============================================================================ */
.svr{
  --forest:#1a6b5a; --emerald:#25957a; --mint:#3dbf97; --ink:#0d1f1a;
  --sub:#4a6b62; --line:rgba(20,60,45,.12); --soft:#e9f6ef;
  font-family:'Geist',system-ui,-apple-system,sans-serif;color:var(--ink);
  background:#D6EEE4;                                  /* FIX_01 — exact requested section colour */
  padding:clamp(30px,5vw,64px) clamp(14px,4vw,56px) clamp(34px,5vw,64px);   /* SPACING TRIM: bottom 84→64 (page rhythm) */
  overflow:clip;                                       /* the orbiting ring layer is a rotating square — its corners would otherwise widen the page as it turns (mobile sideways-scroll bug); clipping at the section edge never touches visible content */
}
.svr *{box-sizing:border-box;min-width:0}
.svr-wrap{max-width:1180px;margin:0 auto;display:grid;gap:clamp(16px,2.5vw,26px)}
@media (min-width:1080px){ .svr-wrap{grid-template-columns:1.04fr .96fr} }

/* shared card shell */
.svr-card{background:#fff;border:1px solid rgba(255,255,255,.9);
  border-radius:clamp(22px,3vw,30px);padding:clamp(20px,3vw,38px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 44px -18px rgba(16,64,45,.18);
  transition:transform .3s ease,box-shadow .3s ease}
/* FIX_03 — live/touchable feel: soft lift + subtle scale + deeper shadow + gentle green glow */
.svr-card:hover,.svr-card:active{transform:translateY(-6px) scale(1.012);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 56px -20px rgba(16,64,45,.30),
    0 0 0 1px rgba(120,210,170,.35),0 0 34px rgba(61,191,151,.32)}

/* ============================ LEFT CARD ============================ */
.svr-left{display:grid;gap:clamp(18px,3vw,28px);align-items:center}
@media (min-width:760px){ .svr-left{grid-template-columns:.95fr 1.05fr} }
.svr-h{font-weight:800;font-size:clamp(20px,2.6vw,28px);line-height:1.2;
  letter-spacing:-.02em;color:#0e5240;margin:0 0 12px}
.svr-p{color:var(--sub);font-size:clamp(13.5px,1.5vw,16px);line-height:1.7;margin:0 0 20px;max-width:34ch}
.svr-btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;line-height:1;
  color:#fff;background:linear-gradient(180deg,#217e63,#1a6b5a 60%,#15584a);
  border-radius:12px;padding:14px 20px;text-decoration:none;min-height:46px;
  box-shadow:0 10px 24px -8px rgba(26,107,90,.45),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s ease,box-shadow .25s ease}
.svr-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(26,107,90,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.svr-btn svg{width:16px;height:16px;flex:none}
.svr-btn:focus-visible{outline:3px solid rgba(37,149,122,.55);outline-offset:3px}

/* ----- orbit diagram ----- */
.svr-orbit{position:relative;width:100%;max-width:380px;aspect-ratio:1/1;margin:0 auto}
.svr-orbit::before{content:"";position:absolute;inset:11%;border:2px dashed rgba(37,149,122,.38);border-radius:50%}
/* centre — Varolyn logo as a soft watermark in a glowing disc */
.svr-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34%;aspect-ratio:1/1;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 8px rgba(61,191,151,.08),0 0 36px rgba(61,191,151,.28),0 14px 30px -12px rgba(16,64,45,.25)}
.svr-core img{width:56%;height:auto;opacity:.45}   /* watermark blend — soft, never overpowering */
/* orbit nodes (6 services on the ring) */
.svr-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:5px;width:84px;text-align:center}
.svr-node .c{width:clamp(44px,6vw,56px);height:clamp(44px,6vw,56px);border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--forest);
  box-shadow:0 0 0 4px rgba(61,191,151,.10),0 10px 22px -10px rgba(16,64,45,.30)}
.svr-node .c svg{width:50%;height:50%}
.svr-node small{font-size:10.5px;font-weight:600;color:var(--sub);line-height:1.25}
.svr-node.n1{left:50%;top:9%}      .svr-node.n2{left:85.5%;top:29.5%}
.svr-node.n3{left:85.5%;top:70.5%} .svr-node.n4{left:50%;top:91%}
.svr-node.n5{left:14.5%;top:70.5%} .svr-node.n6{left:14.5%;top:29.5%}

/* FIX_02 — gentle orbit: the ring layer slowly revolves while every node
   counter-rotates the same amount, so circles, icons AND labels stay perfectly
   upright as they travel the circle. Pure transform keyframes on composited
   layers — zero layout work, buttery even on low-end phones. */
.svr-ring{position:absolute;inset:0;animation:svr-spin 48s linear infinite}
.svr-ring .svr-node{animation:svr-spin-rev 48s linear infinite}
@keyframes svr-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes svr-spin-rev{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
/* pause the orbit while the visitor hovers / touches it (comfortable reading) */
.svr-orbit:hover .svr-ring,.svr-orbit:hover .svr-ring .svr-node,
.svr-orbit:active .svr-ring,.svr-orbit:active .svr-ring .svr-node{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .svr-ring,.svr-ring .svr-node{animation:none}
  .svr-card{transition:none}
  .svr-card:hover,.svr-card:active{transform:none}
}

/* ============================ RIGHT CARD ============================ */
.svr-right{display:flex;flex-direction:column}
.svr-h2{text-align:center;font-weight:800;font-size:clamp(19px,2.4vw,26px);line-height:1.25;
  letter-spacing:-.02em;color:#0e5240;margin:0 0 clamp(18px,2.6vw,28px)}
.svr-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;flex:1;
  background:linear-gradient(168deg,#f6fcf9,#eef8f3);border:1px solid var(--line);
  border-radius:18px;padding:clamp(14px,2.2vw,24px);position:relative;
  overflow:clip}   /* LIGHT-LEAK FIX: the heart-house glow can never spill past the panel's rounded edge */
@media (min-width:760px){ .svr-cmp{grid-template-columns:1fr auto 1fr;gap:clamp(12px,1.8vw,22px)} }
.svr-col b{display:block;font-size:clamp(13.5px,1.5vw,16px);font-weight:700;color:var(--ink);margin:0 0 12px}
.svr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.svr-col li{display:flex;align-items:center;gap:8px;font-size:clamp(11.5px,1.3vw,14px);color:var(--sub);line-height:1.4}
.svr-col li .b{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,#3dbf97,#1a6b5a)}
.svr-col li .b svg{width:10px;height:10px}
/* centre — glowing green heart-house */
.svr-mid{display:none;align-self:center;justify-self:center}
@media (min-width:760px){ .svr-mid{display:grid;place-items:center} }
.svr-heart{width:clamp(86px,9vw,116px);height:clamp(86px,9vw,116px);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#ffffff 30%,#e9f6ef 70%,rgba(233,246,239,0) 100%);
  box-shadow:0 0 0 10px rgba(61,191,151,.10),0 0 0 22px rgba(61,191,151,.05),0 0 44px rgba(61,191,151,.30)}
.svr-heart svg{width:62%;height:62%}
/* mobile: heart-house above the two columns */
.svr-mid-m{display:grid;place-items:center;margin:4px 0 14px;grid-column:1/-1}
.svr-mid-m .svr-heart{width:78px;height:78px;
  box-shadow:0 0 0 6px rgba(61,191,151,.10),0 0 0 12px rgba(61,191,151,.05),0 0 22px rgba(61,191,151,.30)}   /* LIGHT-LEAK FIX: tighter halo on mobile — the glow fades out INSIDE the panel, so the clip edge is never visible */
@media (min-width:760px){ .svr-mid-m{display:none} }
.svr-cmp>.svr-col{padding-top:2px}