/* ============================================================================
   VAROLYN — Services page · Section 2 "6 SERVICE CARDS" (Zoho bookings)
   Built to the approved card reference: mint glass card, icon tile top-left,
   bold title, description with green keywords, BANGALORE·PAN-INDIA pill,
   vivid-green full-width "Book Now →" with a contained warm glow that beeps
   on hover/touch. Self-contained (.sv6- prefix only) — touches nothing else.
   PERFORMANCE: no images (line-SVG icons), no JS, no blur filters; hover lift
   is transform-only; glow beep animates box-shadow on ONE small element and
   ONLY while hovered → zero scroll cost. Geist strictly.
   ============================================================================ */
.sv6{
  --forest:#1a6b5a; --emerald:#25957a; --mint:#3dbf97; --ink:#0d1f1a;
  --sub:#3c5c50; --line:rgba(20,60,45,.12);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  background:linear-gradient(180deg,#b3dcc8 0%,#a6d6c1 38%,#9bd0b8 100%);   /* sage field like the reference */
  padding-block:clamp(28px,5vw,64px);                                       /* trimmed */
  margin-top:clamp(10px,1.5vw,18px);                                        /* SPACING TRIM: hero→cards strip 44→18 (the page's only between-box gap) */
  overflow:hidden;                                                          /* hard guard: nothing inside can ever break the green band / cause sideways scroll */
}
.sv6 *{box-sizing:border-box;min-width:0}                                   /* kill CSS-grid "blowout": no child can force columns wider than the screen (the mobile break-out bug) */
.sv6-wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(14px,4vw,56px)}
.sv6-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(11px,2.2vw,24px)}   /* mobile: clean 2 per row; minmax(0,1fr) = tracks can NEVER exceed the container */
@media (min-width:768px){ .sv6-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }               /* tablet + PC: 3 columns */

/* ---------------- card (whole card = one link) ---------------- */
.sv6-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:#E0F3ED;                                                       /* strict requested card surface colour — exact hex, solid */
  border:1px solid rgba(255,255,255,.65);
  border-radius:clamp(20px,3vw,30px);
  padding:clamp(13px,2.2vw,24px);                                          /* trimmed */
  overflow:hidden;                                                          /* belt-and-braces: card clips its own content, can never push the layout */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -12px rgba(16,64,45,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
/* FIX_02 — hover/touch: the whole card emits a soft warm-green ambient glow on all
   sides (even halo, elegant — pure box-shadow, no blur filter, no scroll cost) */
.sv6-card:hover,.sv6-card:active,.sv6-card:focus-visible{transform:translateY(-6px);
  border-color:rgba(160,228,196,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 50px -14px rgba(16,64,45,.34),
    0 0 0 1px rgba(120,210,170,.5),0 0 38px 3px rgba(61,191,151,.45)}
.sv6-card:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:3px}

/* icon tile */
.sv6-ic{position:relative;width:clamp(76px,11vw,92px);height:clamp(76px,11vw,92px);
  border-radius:24%;                                   /* app-icon squircle tile (style unchanged) */
  background:linear-gradient(165deg,#f2faf6 0%,#ecf7f1 55%,#e6f4ee 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 22px -10px rgba(16,64,45,.30);
  color:var(--forest);margin-bottom:clamp(11px,1.8vw,18px)}   /* REFINED size: ~76px mobile · ~84px tablet · 92px PC — uniform per breakpoint, balanced inside the card */
.sv6-ic svg{width:56%;height:56%}
.sv6-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:5px}   /* MINIMAL inset: illustration fills the tile with a ~5px hairline of breathing room — contain, never cropped/stretched/touching the edge; CLS 0 */

.sv6-card h3{font-weight:800;font-size:clamp(16.5px,2.2vw,26px);line-height:1.16;
  letter-spacing:-.015em;color:#10503f;margin:0 0 clamp(7px,1.2vw,11px)}
.sv6-card p{font-size:clamp(12.5px,1.5vw,16px);line-height:1.58;color:var(--sub);
  margin:0 0 clamp(11px,1.8vw,16px)}
.sv6-card p b{color:var(--emerald);font-weight:700}

/* BANGALORE · PAN-INDIA pill — ROOT-CAUSE FIX for the mobile break-out:
   the old pill was nowrap + hug-content, so on narrow/font-boosted phones it grew
   wider than its card and blew the grid out of the viewport (cards cut off, green
   band "ending" on sideways scroll). Now it spans the card, centred, and may wrap —
   it can NEVER be wider than the card on any device or font setting. */
.sv6-pill{display:flex;align-items:center;justify-content:center;gap:7px;align-self:stretch;
  max-width:100%;text-align:center;
  font-size:clamp(8.5px,2.3vw,11px);font-weight:700;letter-spacing:.1em;
  color:#2c5a4b;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);
  border-radius:100px;padding:7px 10px;margin-bottom:clamp(12px,2vw,18px);
  box-shadow:0 4px 12px -4px rgba(16,64,45,.18)}
.sv6-pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px rgba(61,191,151,.22)}

/* Book Now — vivid green, contained warm glow, beeps on hover/touch */
.sv6-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:clamp(13.5px,1.6vw,17px);line-height:1;color:#fff;
  background:linear-gradient(180deg,#4ec232 0%,#33a818 55%,#27930f 100%);
  border-radius:100px;padding:clamp(13px,1.8vw,17px) 10px;min-height:46px;
  box-shadow:0 10px 24px -6px rgba(47,160,22,.55),inset 0 1px 0 rgba(255,255,255,.35);
  transition:box-shadow .25s ease,transform .2s ease}
.sv6-btn svg{width:16px;height:16px;flex:none}
.sv6-card:hover .sv6-btn,.sv6-card:active .sv6-btn{
  animation:sv6-beep 1.2s ease-in-out infinite;transform:translateY(-1px)}
@keyframes sv6-beep{                       /* contained glow pulse — warm green, no scatter */
  0%,100%{box-shadow:0 10px 24px -6px rgba(47,160,22,.55),0 0 0 0 rgba(78,194,50,.42),inset 0 1px 0 rgba(255,255,255,.35)}
  50%{box-shadow:0 12px 30px -6px rgba(47,160,22,.75),0 0 0 9px rgba(78,194,50,0),inset 0 1px 0 rgba(255,255,255,.4)}
}
@media (prefers-reduced-motion:reduce){
  .sv6-card,.sv6-btn{transition:none}
  .sv6-card:hover .sv6-btn,.sv6-card:active .sv6-btn{animation:none}
  .sv6-card:hover{transform:none}
}

/* layout-regression repair */
.sv6-card h3{min-height:2.32em}  /* reserve 2 title lines so 1-line vs 2-line titles do not unbalance card height */
.sv6-card p{min-height:4.74em}  /* reserve 3 lines so clamp-short descriptions still equalize card height */
.sv6-grid{grid-auto-rows:1fr}
.sv6-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}