/* =========================================================
   Health Star Home Care — Light-Only Design System
   Centered layout, mobile-first
   ========================================================= */

/* -----------------------------
   Theme Tokens (edit these)
   ----------------------------- */
:root{
  /* Brand */
  --brand:#2c7c89;            /* teal */
  --brand-600:#256a75;
  --brand-50:#e6f3f4;
  --accent:#c9a34e;           /* gold */
  --accent-700:#a07f34;

  /* Back-compat aliases */
  --burgundy:var(--brand);
  --burgundy-600:var(--brand-600);
  --burgundy-50:var(--brand-50);
  --blue:var(--accent);
  --blue-700:var(--accent-700);

  /* Base */
  --ink:#0b1220;
  --muted:#4b5563;
  --muted-2:#6b7280;
  --bg:#ffffff;
  --border:#e5e7eb;

  /* Focus ring / status */
  --ring: rgba(44,124,137,.28);
  --success:#065f46;
  --success-bg:#ecfdf5;
  --danger:#b91c1c;

  /* Layout / radii / shadows */
  --wrap:1100px;
  --radius:12px; --radius-lg:18px; --radius-xl:22px; --round:999px;
  --header-h:70px;

  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow-md:0 8px 20px rgba(16,24,40,.12);
  --shadow-lg:0 14px 36px rgba(16,24,40,.16);
  --shadow-glow-teal:0 12px 28px rgba(44,124,137,.22);
  --shadow-glow-gold:0 12px 28px rgba(201,163,78,.22);

  /* Fluid Type Scale */
  --fs-100:clamp(12px,.75vw,13px);
  --fs-200:clamp(14px,.9vw,15px);
  --fs-300:clamp(15px,1vw,16px);
  --fs-400:clamp(16px,1.1vw,18px);
  --fs-500:clamp(18px,1.3vw,20px);
  --fs-600:clamp(22px,2.2vw,28px);
  --fs-700:clamp(28px,3vw,36px);
  --fs-800:clamp(34px,5vw,56px);

  /* Gradients */
  --grad-brand:linear-gradient(90deg, var(--brand), var(--accent));
  --grad-teal:linear-gradient(180deg, #2c7c89, #256a75);
  --grad-gold:linear-gradient(180deg, #c9a34e, #a07f34);

  /* Glass */
  --glass-bg:rgba(255,255,255,.86);
  --glass-blur:saturate(120%) blur(10px);

  /* Motion */
  --ease-spring:cubic-bezier(.2,.9,.2,1);

  /* Hero (shadow components read these if hooked) */
  --hero-fg:#072328;
  --hero-bg:
    radial-gradient(1200px 560px at 15% -10%, rgba(44,124,137,.26), transparent 60%),
    radial-gradient(900px 420px at 85% -20%, rgba(201,163,78,.22), transparent 60%),
    linear-gradient(180deg, #fff, #fff);
}

/* ------------------
   Base + Typography
   ------------------ */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block; margin-left:auto; margin-right:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* Center text by default in sections/cards/utility containers */
.section, .wrap, .wrap-narrow, .card, .hero, .reviews, .services, .about, .contact {
  margin-left:auto; margin-right:auto; text-align:center;
}

h1{font-size:var(--fs-800); line-height:1.05; margin:.6rem 0 .3rem; letter-spacing:-.02em}
h2{font-size:var(--fs-700); line-height:1.12; margin:0 0 .8rem; letter-spacing:-.01em}
h3{font-size:var(--fs-600); line-height:1.18; margin:.25rem 0 .6rem}
p,li,span,button,input,textarea,select{font-size:var(--fs-400)}
.small{font-size:var(--fs-300); color:var(--muted)}
.lead{font-size:var(--fs-500); color:var(--muted-2)}
.oneline{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Links & focus */
a{color:var(--brand); text-underline-offset:2px; text-decoration-thickness:.08em}
a:hover{text-decoration:underline}
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px var(--ring); border-radius:8px}

/* -----------------------
   Sections & Backgrounds
   ----------------------- */
.section{padding:84px 0; position:relative}

.surface{
  position:relative; overflow:hidden; color:var(--ink);
  background:
    radial-gradient(1000px 520px at 12% -12%, rgba(44,124,137,.22), transparent 70%),
    radial-gradient(900px 420px at 110% -6%, rgba(201,163,78,.20), transparent 70%),
    linear-gradient(180deg, var(--brand-50), #fff);
}
.surface::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(44,124,137,.12) 1px, transparent 1px),
    radial-gradient(rgba(201,163,78,.10) 1px, transparent 1px);
  background-size:26px 26px, 32px 32px;
  background-position:0 0, 13px 13px;
  mix-blend-mode:multiply; opacity:.4;
}

.surface--bold{
  position:relative; overflow:hidden; color:#072328;
  background:linear-gradient(135deg,#2c7c89 0%,#c9a34e 100%);
  box-shadow:var(--shadow-glow-teal), var(--shadow-glow-gold);
}
.surface--bold::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.30;
  background-image:
    radial-gradient(rgba(44,124,137,.18) 1px, transparent 1px),
    radial-gradient(rgba(201,163,78,.14) 1px, transparent 1px);
  background-size:26px 26px, 32px 32px; background-position:0 0, 13px 13px;
}

/* Section header */
.section-head{display:grid; place-items:center; gap:10px; text-align:center; margin-bottom:22px}
.section .lead{max-width:760px; margin:0 auto}
.eyebrow{
  display:inline-block; font-size:var(--fs-200); letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-50);
  border:1px solid rgba(44,124,137,.4);
  padding:6px 10px; border-radius:var(--round); box-shadow:var(--shadow-xs);
}
.section-head h2{position:relative}
.section-head h2::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px;
  width:96px; height:6px; border-radius:999px;
  background:var(--grad-brand);
  box-shadow:0 6px 18px rgba(44,124,137,.35);
}

/* Decorative blobs (subtle) */
.blob{
  position:absolute; filter:blur(18px); opacity:.18; pointer-events:none;
  background:radial-gradient(closest-side, var(--brand), transparent 70%);
  width:260px; height:260px; border-radius:50%;
}
.blob--gold{background:radial-gradient(closest-side, var(--accent), transparent 70%)}
.blob.tl{top:-60px; left:-40px} .blob.tr{top:-60px; right:-40px}
.blob.bl{bottom:-60px; left:-40px} .blob.br{bottom:-60px; right:-40px}

/* -----------------------
   Cards & Surfaces
   ----------------------- */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease-spring), box-shadow .25s ease;
  position:relative; overflow:hidden; container-type:inline-size;
  margin-left:auto; margin-right:auto; text-align:center;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md), var(--shadow-glow-teal) }
.card--lined::before{
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:var(--grad-brand);
}

/* Card header row */
.card-head{display:flex; justify-content:center; align-items:center; gap:12px; margin:2px 0 10px}
.icon{
  width:48px; height:48px; border-radius:16px; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand-50), #fff);
  border:1px solid var(--border);
  box-shadow:inset 0 0 0 2px rgba(44,124,137,.1);
}
.icon svg{width:24px; height:24px; color:var(--brand)}

/* Chips/Tags */
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; justify-content:center}
.tag{
  font-size:var(--fs-300); padding:6px 8px;
  border:1px solid rgba(201,163,78,.38);
  background:#fff; border-radius:var(--round);
  color:#0e3a43; box-shadow:var(--shadow-xs);
}

/* Lists */
.list{margin:12px auto 0; padding-left:18px; text-align:left; max-width:900px}
.list li{margin:6px 0}
.list li::marker{color:var(--brand)}

/* Check list */
.list-check{list-style:none; padding:0; margin:12px auto 0; max-width:900px}
.list-check li{display:flex; gap:10px; align-items:flex-start; margin:8px 0}
.list-check .dot{
  width:10px; height:10px; border-radius:50%; margin-top:8px;
  background:radial-gradient(closest-side, var(--brand), var(--accent));
  box-shadow:0 0 0 2px rgba(44,124,137,.2);
}

/* -----------------------
   Buttons & CTAs
   ----------------------- */
.btn{
  --btn-bg:#fff; --btn-fg:var(--brand); --btn-bd:var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:12px 16px; border-radius:var(--radius);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  font-weight:700; cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow-xs);
  transition:transform .18s var(--ease-spring), box-shadow .18s ease, background .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.btn:active{transform:none}
.btn.primary{--btn-bg:var(--grad-brand); --btn-fg:#fff; --btn-bd:transparent; box-shadow:0 8px 22px rgba(44,124,137,.26)}
.btn.primary:hover{box-shadow:0 14px 32px rgba(44,124,137,.28)}
.btn.ghost{--btn-bg:#fff; --btn-fg:var(--brand); --btn-bd:var(--border)}
.btn.gold{--btn-bg:var(--grad-gold); --btn-fg:#1f2937; --btn-bd:transparent; box-shadow:0 8px 22px rgba(201,163,78,.26)}
.btn-halo{position:relative}
.btn-halo::after{
  content:""; position:absolute; inset:-8px; border-radius:calc(var(--radius) + 12px);
  background:radial-gradient(closest-side, rgba(44,124,137,.26), transparent 70%);
  opacity:.6; filter:blur(10px); z-index:-1;
}

/* -----------------------
   Forms
   ----------------------- */
label{display:block; margin:10px 0 6px; color:var(--muted)}
input,textarea,select{
  width:100%; padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--border); background:#fff; color:var(--ink); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
input:focus,textarea:focus,select:focus{ box-shadow:0 0 0 3px var(--ring); border-color:#377b83 }
.error{color:var(--danger); font-size:var(--fs-300); margin-top:6px}
.success{
  margin-top:12px; padding:12px; border-radius:var(--radius);
  background:var(--success-bg); border:1px solid rgba(6,95,70,.34); color:var(--success);
}
.input-hint{font-size:var(--fs-300); color:var(--muted); margin-top:6px}

/* -----------------------
   Grids & Sliders
   ----------------------- */
.grid-2{
  display:grid; gap:18px; align-items:stretch;
  grid-template-columns:repeat(2, 1fr);
  justify-items:center;
}
.grid-fit{
  display:grid; gap:18px; align-items:stretch;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  justify-items:center;
}

/* Slider dots */
.dots{display:flex; gap:8px; justify-content:center; margin-top:12px}
.dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(180deg, #2c7c89, #94cbd2); transition:transform .2s ease, background .2s ease}
.dot.is-active{transform:scale(1.2); background:var(--brand)}

/* -----------------------
   Navigation helpers
   ----------------------- */
.menu .btn.primary{background:var(--grad-brand); color:#fff}
main, section{scroll-margin-top:calc(var(--header-h) + 20px)}

/* Hash-arrival pulse */
@keyframes hashPulse{
  0%{box-shadow:0 0 0 0 rgba(44,124,137,.45)}
  100%{box-shadow:0 0 0 14px rgba(0,0,0,0)}
}
.hash-pulse{animation:hashPulse .6s ease-out; border-radius:12px}

/* -----------------------
   Hero / Banner (light)
   ----------------------- */
.hero{
  padding:clamp(64px,8vw,108px) 0 clamp(28px,4vw,48px);
  position:relative; overflow:hidden; color:var(--hero-fg);
  background:var(--hero-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; /* centered */
}
.hero .title{font-size:var(--fs-800); letter-spacing:-.02em; font-weight:700; line-height:1.05; margin:0}
.hero .subtitle{font-size:var(--fs-500); color:#20464c; font-weight:400; line-height:1.4; margin-top:.6rem}

/* -----------------------
   Dividers & Utilities
   ----------------------- */
.hr{height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); border:0; margin:28px 0}
.kbd{
  padding:2px 6px; border-radius:8px; border:1px solid var(--border);
  background:#fff; box-shadow:var(--shadow-xs); font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Glass surface card */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
  border:1px solid rgba(229,231,235,.8);
  box-shadow:var(--shadow-sm), var(--shadow-glow-teal);
  border-radius:var(--radius-lg);
}

/* Selection & Scrollbar */
::selection{background:rgba(44,124,137,.7); color:#fff}
::-webkit-scrollbar{height:12px; width:12px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #2c7c89, #1f5e68); border-radius:var(--round); border:3px solid var(--bg)}

/* =========================
   Mobile polish (<=768px)
   ========================= */
@media (max-width: 768px){
  :root{ --wrap:100%; --header-h:64px; --radius:14px; --radius-lg:18px }
  body{ line-height:1.7 }

  /* Full-width container with safe areas */
  .wrap, .wrap-narrow, .section{
    max-width:100%;
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
    text-align:center;
  }

  /* Type scale / spacing */
  .section{ padding:44px 0 }
  h1{ font-size:clamp(28px,8vw,40px) }
  h2{ font-size:clamp(22px,6vw,30px) }
  .lead{ font-size:clamp(16px,4.5vw,18px) }

  /* Buttons: comfortable taps */
  .btn, button{ min-height:46px; font-size:16px; padding:12px 16px }

  /* 2-col becomes horizontal snap carousel */
  .grid-2{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding-bottom:12px; -webkit-overflow-scrolling:touch;
  }
  .grid-2::-webkit-scrollbar{ display:none }
  .grid-2 > .card{ flex:0 0 86%; scroll-snap-align:start }

  /* Map / find-us patterns */
  .findus-card{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); margin:16px 0; background:#fff }
  .findus-head{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:14px 16px;
    background:linear-gradient(180deg, var(--burgundy-50), #fff);
  }
  @media (max-width:420px){
    .findus-head{ grid-template-columns:1fr }
    .findus-head .btn{ width:100% }
  }
  .map-wrap{
    position:relative; width:100%; aspect-ratio:4 / 3; min-height:280px; background:#f8fafc;
  }
  .map-wrap iframe, .map-wrap > div, .map-wrap .map{
    position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0 0 16px 16px;
  }

  /* Footer links centered with roomy taps */
  .footer-links, .site-footer .links{
    display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center; padding:14px 0;
  }
  .footer-links a{ padding:6px 2px; font-size:16px }

  /* Lighter blobs on phones */
  .blob{ filter:blur(14px); opacity:.16 }
}

/* -----------------------
   Reveal on scroll (opt)
   ----------------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; will-change:transform, opacity}
  .reveal.in{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}