:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#3f4f5f;
  --line:rgba(12,18,32,.10);
  --accent:#1f7a66;
  --accent2:#0f5e4e;
  --shadow:0 14px 40px rgba(10,20,30,.10);
  --radius:16px;
  --max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

a{color:inherit;text-decoration:none}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:24px;
}

/* ================= HEADER ================= */

.header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  z-index:20;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Logo */
.brand{
  display:flex;
  align-items:center;
}

.brand img{
  height:140px;
  width:auto;
}

/* Nav links */
.links{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.links a{
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  font-size:14px;
  color:var(--muted);
  transition:.15s ease;
}

.links a:hover{
  background:rgba(31,122,102,.12);
  color:var(--text);
}

/* PATCH: active page highlight (nav) */
.links a.active{
  background:rgba(31,122,102,.16);
  color:var(--text);
  border:1px solid rgba(31,122,102,.22);
}

/* Buttons */
.btn{
  padding:12px 18px;
  border-radius:14px;
  background:var(--accent);
  color:#fff !important;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:.15s ease;
  text-align:center;
}

.btn:hover{
  background:var(--accent2);
  transform:translateY(-1px);
}

/* PATCH: make ghost buttons more “equal strength” */
.btn.ghost{
  background:rgba(31,122,102,.06);
  border:1px solid rgba(31,122,102,.40);
  color:var(--accent) !important;
}

.btn.ghost:hover{
  background:rgba(31,122,102,.12);
}

/* ================= HERO ================= */

.hero{
  padding:20px 0 10px;
}

.hero-inner{
  max-width:none;   /* FULL WIDTH TEXT */
}
/* ================= HERO BACKGROUND IMAGE ================= */

.hero{
  position: relative;
  background-image: url("/assets/img/wellbeing-centre-hero.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 24px;
  overflow: hidden;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(255,255,255,.55),
    rgba(255,255,255,.35)
  );
}

.hero-inner{
  position: relative;
  z-index: 1;
}
/* Give the hero image some presence without changing layout elsewhere */
.hero{
  min-height: 340px;
  display: flex;
  align-items: center;
}

.hero-inner{
  padding: 36px 28px;
}
.h1{
  font-size:44px;
  margin:0 0 12px;
}

.p{
  font-size:18px;
  color:var(--muted);
  max-width:none;  /* FULL WIDTH */
  margin-bottom:14px;
}

/* CTA row */
.actions{
  display:flex;
  gap:14px;
  margin-top:16px;
}

.actions a{
  flex:1;
  min-width:220px;
}

/* ================= CONTENT ================= */

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
  margin-top:28px;
}

.col-6{grid-column:span 6}
.col-12{grid-column:span 12}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  
}
.card .p{
    color:#344454
}
/* ================= SURGICAL INSERT: programme card background images ================= */

.card.has-bg{
  position:relative;
  overflow:hidden;
}

/* faded image layer */
.card.has-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--card-bg);
  background-size:cover;
  background-position:center;
  opacity:.08;                  /* soft fade */
  filter:blur(1.5px) saturate(.85);
  z-index:0;
}

/* subtle wash to protect text legibility */
.card.has-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.62);
  z-index:0;
}

/* keep content above */
.card.has-bg > *{
  position:relative;
  z-index:1;
}

/* map each image (paths assume /assets/...) */
.card.bg-metal{ --card-bg:url("/assets/metal.jpg"); }
.card.bg-parasite{ --card-bg:url("/assets/parasite.jpg"); }
.card.bg-autism{ --card-bg:url("/assets/autism.jpg"); }
.card.bg-adhd{ --card-bg:url("/assets/adhd.png"); }
.card.bg-glutathione{ --card-bg:url("/assets/glutathione.jpg"); }
.card.bg-gut{ --card-bg:url("/assets/gut.jpg"); }

/* ================= END SURGICAL INSERT ================= */

.label{
  font-weight:850;
  margin-bottom:8px;
}

/* ================= FOOTER ================= */

.footer{
  margin-top:48px;
  border-top:1px solid var(--line);
  padding:24px 0;
  color:var(--muted);
  font-size:13px;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:14px;
}
/* ================= REVIEWS REFINEMENT (SURGICAL) ================= */

/* Pull reviews closer to cards above */
.reviews{
  margin-top:-6px;
}

/* Darker, calmer contrast than white cards */
.card.reviews{
  background:rgba(31,122,102,0.12);
  border:1px solid rgba(31,122,102,.16);
}

/* Slightly stronger text for readability */
.card.reviews .review-text{
  color:#23303a;
}
.card.reviews .review-meta{
  color:#2e3b46;
  opacity:.9;
}

/* Label emphasis without shouting */
.reviews .label{
  color:#1f3f38;
}
/* ================= REVIEWS (SURGICAL PATCH) ================= */
/* Only affects elements wrapped in .reviews — safe to add site-wide */
.reviews{
  margin-top:0px;
}

.reviews .reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.reviews .reviews-title{
  font-weight:800;
  font-size:18px;
  margin:0;
}

.reviews .reviews-sub{
  color:var(--muted);
  font-size:14px;
  margin:0;
}

.reviews .reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

/* Review Card */
.review-card{
  background:rgba(31,122,102,.04); /* soft tint */
  border:1px solid rgba(12,18,32,.10); /* matches site line tone */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  position:relative;
  overflow:hidden;
}

/* Quiet quote mark */
.review-card::before{
  content:"“";
  position:absolute;
  top:10px;
  left:14px;
  font-size:44px;
  line-height:1;
  color:rgba(31,122,102,.18);
  font-weight:800;
}

/* Text */
.review-card .review-text{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  padding-top:18px; /* clears the quote mark */
}

/* Person line */
.review-card .review-meta{
  margin-top:12px;
  font-weight:700;
  color:var(--muted);
  font-size:13px;
}

/* Hover: subtle lift (won't affect other cards) */
.review-card:hover{
  transform:translateY(-1px);
  transition:.15s ease;
}

/* Responsive: stack on mobile */
@media(max-width:900px){
  .reviews .reviews-grid{
    grid-template-columns:1fr;
  }
}
/* ================= MOBILE ================= */

@media(max-width:900px){
.hero{
    min-height: 260px;
  }

  .hero-inner{
    padding: 22px 16px;
  }
  .brand img{
    height:64px;
  }

  .nav{
    flex-direction:column;
    align-items:flex-start;
  }

  /* PATCH: avoid space-between gaps; allow clean wrapping */
  .links{
    width:100%;
    justify-content:flex-start;
    gap:10px;
  }

  .hero{
   padding-top:14px;
  }

  .h1{
    font-size:34px;
  }

  .actions{
    flex-direction:column;
  }

  /* PATCH: full-width CTAs on mobile */
  .actions a{
    min-width:0;
    width:100%;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .col-6,
  .col-12{
    grid-column:1;
  }
}