/* Basic, calm starter styles for HeartTouch */
:root{
  --bg:#ffffff;
  --ink:#1A1A1A;
  --muted:#6b7280;
  --brand:#cc2f4a;
  --brand-ink:#ffffff;
  --card:#f7f7f8;
  --ring:#e5e7eb;
  --softwhite:#f9fafb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--ring);z-index:10}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink)}
.brand img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.05))}
.nav nav{display:flex;gap:1rem}
.nav nav a{padding:.5rem .75rem;border-radius:.5rem}
.nav nav a:hover{background:var(--card)}
@media (max-width: 640px) {
  .site-header nav {
    display: none;
  }
	
  .brand span { font-size: 1rem; } /* smaller logo text */
}


.hero{display:grid;grid-template-columns:1fr;place-items:center;min-height:52vh;text-align:center; background-image: url('assets/heart-touch-london.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
@media (min-width: 1280px) {
  .hero {
    border-radius: 2rem;
	overflow: hidden;
  }
}

@media (max-width: 800px) {
  /* stronger overlay on mobile */
  .hero::before {
    background: rgba(0, 0, 0, 0.35);  /* darker tint only on small screens */
  }
}
.hero-text{max-width:800px;}
@media (max-width: 800px) {
.hero-text{position: relative;
  z-index: 1;
  padding: 1rem 1.25rem;
  background: linear-gradient(
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.1)
  );
  border-radius: 1rem;
	}
}

.hero h1{color:var(--softwhite); font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:.25rem 0 .75rem}
.hero p{color:var(--softwhite); font-size:1.1rem;margin:0 auto 1rem}
.cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--brand);color:var(--brand-ink);padding:.75rem 1rem;border-radius:.7rem;font-weight:600;border:1px solid transparent}
.btn:hover{opacity:.95;text-decoration:none}
.btn-secondary{background:transparent;color:var(--brand-ink);border-color:var(--brand-ink)}

.split{display:grid;grid-template-columns:1.5fr .9fr;gap:1.25rem;align-items:start}
.card{background:var(--card);border:1px solid var(--ring);border-radius:1rem;padding:1rem}
.bullets{margin:.5rem 0 0 1rem}
.bullets li{margin:.25rem 0}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.grid .card h3{margin-top:0}

.site-footer{border-top:1px solid var(--ring);margin-top:2rem}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-nav{display:flex;gap:.75rem;flex-wrap:wrap}

@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
}