/* ==========================================================================
   Refined premium layer — loaded AFTER styles.css on the home page.
   Polish only: depth, type, spacing, motion. No content or structure change.
   ========================================================================== */
:root{
  /* softer, layered shadows = quiet premium depth */
  --shadow-sm:0 1px 2px rgba(16,28,45,.04), 0 8px 18px -10px rgba(16,28,45,.10);
  --shadow:0 6px 16px -8px rgba(16,28,45,.08), 0 26px 50px -20px rgba(16,28,45,.18);
  --shadow-lg:0 16px 36px -14px rgba(16,28,45,.16), 0 48px 88px -30px rgba(16,28,45,.26);
  --radius-lg:20px;
}

/* Typography — finer hierarchy */
body{letter-spacing:-.006em}
h1,h2,h3,h4,h5{letter-spacing:-.028em}
.h-section{font-size:clamp(1.95rem,3.8vw,2.95rem)}
.lead{line-height:1.75}
.eyebrow{letter-spacing:.2em;font-size:.75rem;gap:11px;margin-bottom:16px}
.eyebrow::before{height:2px;width:30px}

/* More breathing room between sections */
.section{padding-block:clamp(66px,8.5vw,124px)}
.section-head{margin:0 auto clamp(42px,5vw,64px)}

/* Premium icon cards — icons sit in a soft chip, calmer motion, deeper lift */
.icard{padding:34px 26px;border-radius:20px;border-color:var(--line-2);box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.icard:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--red-soft)}
.icard__img{height:86px;width:86px;padding:16px;margin:0 auto 18px;object-fit:contain;background:var(--bg-cool);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line-2);animation:none;transition:transform .45s var(--ease)}
.icard--lg .icard__img{height:98px;width:98px;padding:17px}
.icard:hover .icard__img{transform:scale(1.07)}
.icard h3{font-size:1.16rem}

/* Dark "More Ways" cards — chip icons + matching depth */
.dcard{padding:30px;border-radius:20px;box-shadow:var(--shadow-sm)}
.dcard:hover{box-shadow:var(--shadow)}
.dcard__img{height:62px;width:62px;padding:13px;object-fit:contain;background:var(--bg-cool);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line-2)}

/* Cards: unified radius + soft shadow */
.review{padding:32px;border-radius:20px;box-shadow:var(--shadow-sm)}
.info-card,.form,.map-embed,.split__media{border-radius:20px}

/* Buttons — quieter, premium depth */
.btn--red{box-shadow:0 10px 24px -12px rgba(225,29,42,.55)}
.btn--red:hover{box-shadow:0 16px 32px -12px rgba(225,29,42,.66)}

/* Hero headline a touch tighter; ticker slightly airier */
.hero h1{letter-spacing:-.038em}
.marquee span{font-size:.98rem;letter-spacing:.05em;padding:15px 30px}

/* Smoother, calmer reveals */
.reveal{transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .icard:hover .icard__img{transform:none}
}

/* ==========================================================================
   Services page — lift the dark checklist panels to airy, premium light.
   Vibe-only: same sections, same copy, same checklist items — just brighter,
   with each "we fix" item as its own soft white chip. Matches the home look.
   ========================================================================== */
.svc-panel{
  background:var(--bg-cool);
  color:var(--ink);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow);
}
.svc-panel::after{display:none}                 /* remove dark grid overlay */
.svc-panel h3{
  color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
}
.svc-panel h3::before{
  content:"";width:22px;height:3px;background:var(--red);border-radius:3px;
}
/* checklist items become soft white chips */
.svc-panel .checklist{gap:12px 14px}
.svc-panel .checklist li{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:13px;
  padding:13px 15px;
  align-items:center;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;
}
.svc-panel .checklist li:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:var(--red-soft);
}
.svc-panel .checklist svg{color:var(--red)}

/* Hacked-device alert panel — soft red tint, not near-black */
.svc-panel--alert{
  background:linear-gradient(135deg,#FFF6F6,#FDECEC);
  border-color:var(--red-soft);
}
.svc-panel--alert .svc-warn{color:var(--ink-soft)}
.svc-panel--alert .checklist li{border-color:var(--red-soft)}
