/* Happy Medihome — Static HTML/CSS version */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@500;700&display=swap');

:root{
  --bg:hsl(36,45%,97%);
  --fg:hsl(24,30%,16%);
  --card:hsl(36,50%,99%);
  --muted:hsl(24,15%,42%);
  --border:hsl(30,30%,88%);
  --primary:hsl(18,78%,62%);
  --primary-deep:hsl(14,60%,48%);
  --primary-fg:hsl(36,50%,99%);
  --secondary:hsl(38,60%,90%);
  --gradient-warm:linear-gradient(135deg,hsl(22,90%,72%) 0%,hsl(18,78%,62%) 50%,hsl(14,60%,50%) 100%);
  --gradient-soft:linear-gradient(180deg,hsl(36,60%,98%) 0%,hsl(30,50%,94%) 100%);
  --gradient-sun:radial-gradient(circle at 30% 20%,hsl(38,90%,80%,.6),transparent 60%),radial-gradient(circle at 80% 70%,hsl(18,90%,75%,.5),transparent 55%);
  --shadow-card:0 4px 20px -8px hsl(24,30%,20%,.12);
  --shadow-warm:0 20px 50px -20px hsl(18,80%,55%,.35);
}

*{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.font-display{font-family:'Fraunces',Georgia,serif;letter-spacing:-.01em;font-weight:500}
.font-cn{font-family:'Noto Serif SC',serif}

.container{max-width:80rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:640px){.container{padding:0 2rem}}

/* Header */
.header{position:sticky;top:0;z-index:50;background:hsl(36,50%,99%,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem}
.brand img{width:36px;height:36px;border-radius:8px}
.nav{display:none;gap:1.75rem;font-size:.9rem;color:var(--muted)}
.nav a:hover{color:var(--primary-deep)}
@media(min-width:768px){.nav{display:flex}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.75rem 1.5rem;font-weight:500;font-size:.95rem;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;cursor:pointer}
.btn-primary{background:var(--gradient-warm);color:var(--primary-fg);box-shadow:var(--shadow-warm)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--border);background:hsl(36,50%,99%,.6);backdrop-filter:blur(8px);color:var(--fg)}
.btn-ghost:hover{border-color:hsl(18,78%,62%,.4);color:var(--primary-deep)}

/* Eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;font-weight:500;color:var(--primary-deep)}
.eyebrow::before{content:'';display:inline-block;width:2rem;height:1px;background:var(--primary)}
.center .eyebrow{justify-content:center}

/* Headings */
.heading-xl{font-size:clamp(2.25rem,5vw,4.5rem);line-height:1.05}
.heading-lg{font-size:clamp(1.875rem,4vw,3rem);line-height:1.2}
.text-gradient-warm{background:var(--gradient-warm);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:var(--gradient-sun);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;padding:2.5rem 0 5rem}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;padding:4rem 0 8rem}}
.hero p.lead{margin-top:1.5rem;font-size:1.125rem;color:hsl(24,30%,16%,.7);max-width:36rem;line-height:1.7}
.hero .cn{margin-top:.75rem;color:var(--primary-deep)}
.hero-ctas{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-tags{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.85rem;color:var(--muted)}
.hero-tags span{display:inline-flex;align-items:center;gap:.5rem}
.hero-tags span::before{content:'';width:6px;height:6px;border-radius:9999px;background:var(--primary)}
.hero-img-wrap{position:relative}
.hero-img-wrap::before{content:'';position:absolute;inset:-1.5rem;background:var(--gradient-warm);opacity:.18;filter:blur(60px);border-radius:9999px}
.hero-img{position:relative;border-radius:2.5rem;overflow:hidden;box-shadow:0 40px 80px -30px hsl(18,70%,40%,.45);border:1px solid var(--card)}
.hero-img img{width:100%;height:520px;object-fit:cover}
.hero-pill{position:absolute;left:-1.5rem;bottom:-1.5rem;display:none;align-items:center;gap:.75rem;padding:1rem;background:hsl(36,50%,99%,.85);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:1rem;box-shadow:0 10px 30px -12px hsl(18,50%,40%,.18)}
@media(min-width:640px){.hero-pill{display:flex}}
.hero-pill .dot{width:40px;height:40px;border-radius:9999px;background:var(--gradient-warm);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;font-size:1.1rem}

/* Sections */
section{padding:5rem 0}
.section-soft{position:relative}
.section-soft::before{content:'';position:absolute;inset:0;background:var(--gradient-soft)}
.section-soft > .container{position:relative}
.section-sun{position:relative}
.section-sun::before{content:'';position:absolute;inset:0;background:var(--gradient-sun);opacity:.7}
.section-sun > .container{position:relative}

.intro{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media(min-width:1024px){.intro{grid-template-columns:5fr 7fr}}
.intro p{font-size:1.125rem;color:hsl(24,30%,16%,.75);line-height:1.7}

/* Cards */
.card{background:var(--card);border:1px solid hsl(30,30%,88%,.6);border-radius:1.5rem;padding:1.75rem;box-shadow:var(--shadow-card);transition:transform .5s ease,box-shadow .5s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-warm)}
.card h3{font-size:1.25rem;margin-bottom:.5rem}
.card p{font-size:.9rem;color:hsl(24,30%,16%,.7);line-height:1.65}
.icon-pill{width:48px;height:48px;border-radius:1rem;background:var(--gradient-warm);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;font-size:1.2rem}
.icon-pill.alt{background:var(--secondary);color:var(--primary-deep)}

.grid-4{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:3.5rem}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.grid-3{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.grid-2{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}

.services-head{display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;margin-bottom:3rem}
@media(min-width:1024px){.services-head{flex-direction:row;align-items:flex-end}}
.service-row{display:flex;gap:1rem;align-items:flex-start}

/* Life-at gallery */
.life-head{text-align:center;max-width:36rem;margin:0 auto 3.5rem}
.life-head p{margin-top:1rem;color:hsl(24,30%,16%,.7)}
.life-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:768px){.life-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.life-grid{grid-template-columns:repeat(4,1fr)}}
.life-card{background:var(--card);border:1px solid hsl(30,30%,88%,.6);border-radius:1.5rem;overflow:hidden}
.life-card .img{aspect-ratio:4/5;overflow:hidden}
.life-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.life-card:hover img{transform:scale(1.05)}
.life-card .body{padding:1.25rem}
.life-card h3{font-size:1.05rem}
.life-card p{font-size:.85rem;color:hsl(24,30%,16%,.7);margin-top:.4rem;line-height:1.6}

/* Who we serve */
.who{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:1024px){.who{grid-template-columns:5fr 7fr}}
.who p{margin-top:1.25rem;color:hsl(24,30%,16%,.75);line-height:1.7}

/* CTA */
.cta{position:relative;overflow:hidden;border-radius:2.5rem;padding:2.5rem;color:var(--primary-fg);background:var(--gradient-warm)}
@media(min-width:768px){.cta{padding:4rem}}
.cta-inner{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:1024px){.cta-inner{grid-template-columns:7fr 5fr}}
.cta p{margin-top:1rem;font-size:1.125rem;color:hsl(36,50%,99%,.92);max-width:36rem}
.cta-btns{display:flex;flex-wrap:wrap;gap:.75rem}
@media(min-width:1024px){.cta-btns{justify-content:flex-end}}
.cta-btn-light{background:var(--card);color:var(--fg);border-radius:9999px;padding:.75rem 1.5rem;font-weight:500;display:inline-flex;align-items:center;gap:.5rem}
.cta-btn-glass{background:hsl(0,0%,0%,.1);backdrop-filter:blur(8px);border:1px solid hsl(0,0%,100%,.3);color:var(--primary-fg);border-radius:9999px;padding:.75rem 1.5rem;font-weight:500;display:inline-flex;align-items:center;gap:.5rem}

/* Footer */
.footer{background:hsl(24,30%,12%);color:hsl(36,50%,95%);padding:3rem 0 2rem;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer h4{font-family:'Fraunces',serif;font-size:1.05rem;margin-bottom:.75rem}
.footer p,.footer a{color:hsl(36,50%,95%,.7);font-size:.9rem;line-height:1.7}
.footer a:hover{color:hsl(36,50%,99%)}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid hsl(36,50%,95%,.15);text-align:center;font-size:.8rem;color:hsl(36,50%,95%,.55)}

.center{text-align:center}
.head-block{text-align:center;max-width:36rem;margin:0 auto 3rem}
.head-block p{margin-top:1rem;color:hsl(24,30%,16%,.7)}