/* ===================== Home Sweet Home Care (HSH Care) — Stylesheet ===================== */

:root {
  --ink-900: #14200f;
  --ink-800: #22331b;
  --ink-700: #2f4526;
  --ink-600: #3c5730;
  --sage-700: #526b4b;
  --sage-600: #6f8a68;
  --sage-500: #86a17e;
  --sage-400: #a6bd9e;
  --sage-100: #eef2ea;
  --paper: #faf9f6;
  --white: #ffffff;
  --ink: #26301f;
  --muted: #5b6472;
  --muted-2: #8992a0;
  --line: rgba(38, 48, 31, 0.09);
  --line-strong: rgba(38, 48, 31, 0.14);

  --glass-light: rgba(255, 255, 255, 0.6);
  --glass-light-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-dark: rgba(20, 32, 15, 0.5);
  --glass-dark-strong: rgba(20, 32, 15, 0.68);
  --glass-dark-border: rgba(255, 255, 255, 0.14);

  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-organic: 32px 32px 32px 8px;
  --radius-organic-b: 32px 8px 32px 32px;
  --radius-organic-c: 8px 32px 32px 32px;
  --shadow-sm: 0 2px 10px rgba(20, 32, 15, 0.06);
  --shadow-md: 0 16px 40px rgba(20, 32, 15, 0.12);
  --shadow-lg: 0 24px 60px rgba(20, 32, 15, 0.18);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(rgba(38, 48, 31, 0.1) 1.4px, transparent 1.4px) 0 0 / 22px 22px,
    var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--ink-800);
  line-height: 1.15;
  margin: 0 0 0.55em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--muted); }

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

.section { padding: 110px 0; }
.section--tight { padding: 64px 0; }
.section--sage,
.section--navy {
  position: relative;
  clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%);
}
.section--sage { background: var(--sage-100); }
.section--navy { background: var(--ink-800); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: rgba(255, 255, 255, 0.72); }

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink-800); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--ink-700); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink-800); }
.btn-outline:hover { background: var(--white); border-color: var(--ink-800); box-shadow: var(--shadow-sm); }
.btn-light { background: var(--white); color: var(--ink-800); }
.btn-light:hover { background: var(--sage-100); }
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.22); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Glass utility ---------- */
.glass {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.glass-dark {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* ---------- Header / floating glass nav ---------- */
.site-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
.nav {
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px 10px 18px;
  border-radius: var(--radius-xl);
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 8px 30px rgba(20, 32, 15, 0.08);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled .nav {
  background: var(--glass-light-strong);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 255, 255, 0.75);
}

.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { height: 56px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 1.12rem; color: var(--ink-800); letter-spacing: -0.02em; }
.brand-name span { color: var(--sage-600); font-weight: 700; }
.brand-tag { font-size: 0.68rem; color: rgb(33, 33, 33); letter-spacing: 0.02em; }

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 0.85rem;
}
.nav-links a {
  display: block;
  color: var(--ink-700);
  padding: 9px 12px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-links a:hover { color: var(--ink-900); background: rgba(38, 48, 31, 0.06); }
.nav-links a.active { color: var(--white); background: var(--ink-800); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink-800);
  padding: 9px 8px;
}
.nav-phone svg { flex-shrink: 0; color: var(--sage-600); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-800);
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.2s;
}

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 15, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
}
.nav-scrim.open { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--white); }

/* ---------- Hero backgrounds ----------
   Patterns drawn in CSS/SVG rather than photography: they stay razor sharp at any
   screen size, weigh a couple of KB, and can never be cropped badly. Every hero
   shares a dark sage base; the pattern itself lives in ::before. */
.hero,
.page-hero {
  background: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-800) 58%, var(--ink-700) 100%);
}
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Soft gradient mesh — blurred sage blooms, no hard edges anywhere */
.hero--mesh::before {
  background:
    radial-gradient(ellipse 55% 60% at 12% 18%, rgba(134, 161, 126, 0.5), transparent 62%),
    radial-gradient(ellipse 50% 55% at 88% 10%, rgba(82, 107, 75, 0.6), transparent 64%),
    radial-gradient(ellipse 65% 55% at 72% 96%, rgba(111, 138, 104, 0.42), transparent 66%);
}

/* Botanical sprigs — the same leaf language as the circular brand mark */
.hero--leaf::before {
  background: url("../assets/patterns/leaves.svg") repeat;
  background-size: 210px 210px;
  opacity: 0.09;
}

/* Flowing contour lines — calm, drifting, never a rigid grid */
.hero--contour::before {
  background: url("../assets/patterns/contours.svg") repeat;
  background-size: 460px 293px;
  opacity: 0.14;
}

/* Oversized monogram, cropped so it bleeds off the right edge.
   The logo file is sage, so it is flattened to a white silhouette first. */
.hero--monogram::before {
  background: url("../assets/logo-icon.png") no-repeat right -70px center;
  background-size: auto 165%;
  filter: brightness(0) invert(1);
  opacity: 0.07;
}

/* Two patterns are used on more than one page — shift the base tone so the pages
   don't read as identical */
.hero--tint-deep { background: linear-gradient(160deg, #0f1a0b 0%, var(--ink-900) 60%, var(--ink-800) 100%); }
.hero--tint-soft { background: linear-gradient(150deg, var(--ink-800) 0%, var(--ink-700) 70%, var(--ink-600) 100%); }
.hero .container { position: relative; z-index: 2; padding-top: 190px; padding-bottom: 120px; max-width: 760px; }
.hero h1 { color: var(--white); }
.hero-lede { font-size: 1.2rem; color: rgba(255, 255, 255, 0.82); max-width: 560px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

.hero-stats {
  position: relative;
  z-index: 2;
  margin-top: -46px;
}
.hero-stats .container { padding: 0; max-width: var(--container); }
.hero-stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-stat {
  padding: 26px 24px;
  background: var(--glass-light-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(38, 48, 31, 0.07);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-stat:last-child { border-right: none; }
.hero-stat .icon-badge { margin-bottom: 0; flex-shrink: 0; }
.hero-stat strong { display: block; color: var(--ink-800); font-size: 0.98rem; font-weight: 700; }
.hero-stat span { font-size: 0.84rem; color: var(--muted); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  color: var(--white);
  overflow: hidden;
  padding: 170px 0 90px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}
.page-hero .container { position: relative; z-index: 2; max-width: 700px; }
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { color: rgba(255, 255, 255, 0.78); max-width: 600px; font-size: 1.05rem; margin: 0; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  padding: 7px 14px;
  border-radius: 999px;
}
.breadcrumb a:hover { color: var(--white); }

/* ---------- Cards / Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.guarantee {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  background: var(--sage-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-organic);
  padding: 44px 40px;
  box-shadow: 0 1px 2px rgba(20, 32, 15, 0.04), 0 22px 40px -28px rgba(20, 32, 15, 0.22);
}
.guarantee-lede { font-size: 1.05rem; color: var(--ink); margin: 0; }

.card {
  /* Every themed colour is a variable so the filled variant is a single override */
  --card-bg: linear-gradient(165deg, #ffffff 0%, #fbfaf6 100%);
  --card-heading: var(--ink-800);
  --card-text: var(--muted);
  --card-numeral: rgba(111, 138, 104, 0.16);
  --card-rule: var(--sage-600);
  --card-badge-bg: var(--sage-100);
  --card-badge-fg: var(--sage-600);
  --card-link: var(--ink-800);
  --card-arrow: var(--sage-600);

  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-organic);
  padding: 34px 30px;
  box-shadow: 0 1px 2px rgba(20, 32, 15, 0.04), 0 22px 40px -28px rgba(20, 32, 15, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(20, 32, 15, 0.04), 0 30px 54px -22px rgba(20, 32, 15, 0.26); border-color: transparent; }

.grid-3 .card:nth-child(3n+2) { border-radius: var(--radius-organic-b); }
.grid-3 .card:nth-child(3n+3) { border-radius: var(--radius-organic-c); }
.grid-2 .card:nth-child(2n) { border-radius: var(--radius-organic-b); }

/* Editorial numerals — counter avoids hand-numbering every card in the markup */
.grid-3, .grid-2 { counter-reset: card-counter; }
.card { counter-increment: card-counter; }
.card::before {
  content: counter(card-counter, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 24px;
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  pointer-events: none;
}
.card h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
}

/* Alternating sage fills — 3-col checkerboards on 2n, 2-col on 4n+2/4n+3 */
.grid-3 .card:nth-child(2n),
.grid-2 .card:nth-child(4n+2),
.grid-2 .card:nth-child(4n+3) {
  --card-bg: var(--sage-700);
  --card-heading: var(--white);
  --card-text: rgba(255, 255, 255, 0.86);
  --card-numeral: rgba(255, 255, 255, 0.2);
  --card-rule: rgba(255, 255, 255, 0.5);
  --card-badge-bg: rgba(255, 255, 255, 0.16);
  --card-badge-fg: var(--white);
  --card-link: var(--white);
  --card-arrow: var(--sage-100);
  border-color: transparent;
}

/* Consumers — these read whichever set of values is in scope */
.card h3 { color: var(--card-heading); }
.card p { color: var(--card-text); }
.card::before { color: var(--card-numeral); }
.card h3::after { background: var(--card-rule); }
.card .icon-badge { background: var(--card-badge-bg); color: var(--card-badge-fg); }
.card .card-link { color: var(--card-link); }
.card .card-link svg { color: var(--card-arrow); }

.photo-card {
  position: relative;
  border-radius: var(--radius-organic);
  overflow: hidden;
  /* Photography is 3:2 landscape. 4:3 trims only ~11% off the sides, which keeps
     both people in frame — a portrait box would cut faces off. */
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}
.service-block.reverse .photo-card { border-radius: var(--radius-organic-b); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); }
.photo-card-note {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  color: var(--white);
}
.photo-card-note p { color: rgba(255, 255, 255, 0.92); margin: 0; font-size: 0.92rem; font-weight: 600; }

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sage-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--sage-600);
  flex-shrink: 0;
}
.icon-badge svg { width: 26px; height: 26px; }

.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-weight: 700;
  color: var(--ink-800);
  font-size: 0.88rem;
}
.card-link svg { transition: transform 0.15s ease; color: var(--sage-600); }
.card:hover .card-link svg { transform: translateX(4px); }

/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(165deg, #ffffff 0%, #fbfaf6 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-organic);
  padding: 32px 28px 26px;
  box-shadow: 0 1px 2px rgba(20, 32, 15, 0.04), 0 22px 40px -28px rgba(20, 32, 15, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(20, 32, 15, 0.04), 0 30px 54px -22px rgba(20, 32, 15, 0.26); }
.testimonial-grid .testimonial-card:nth-child(3n+2) { border-radius: var(--radius-organic-b); }
.testimonial-grid .testimonial-card:nth-child(3n+3) { border-radius: var(--radius-organic-c); }
.testimonial-stars { display: flex; gap: 3px; color: var(--sage-500); }
.testimonial-stars svg { width: 15px; height: 15px; }
.testimonial-quote { color: var(--ink); font-size: 0.96rem; margin: 0; flex-grow: 1; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-800);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.testimonial-author svg { width: 17px; height: 17px; color: var(--sage-500); flex-shrink: 0; }

/* ---------- Service detail blocks ---------- */
.service-block {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
  padding: 70px 0;
  border-bottom: 1px solid var(--line);
}
.service-block:last-child { border-bottom: none; }
.service-block.reverse { grid-template-columns: 1.15fr 0.85fr; }
.service-block.reverse > *:first-child { order: 2; }

.check-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-size: 0.98rem; }
.check-list .check-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.check-list .check-ico svg { width: 12px; height: 12px; }

/* ---------- Why us ---------- */
/* Photo-backed section. The image sits behind the content and is feathered out on
   every edge with a radial mask, so it melts into the sage instead of ending on a
   hard rectangle — the section is wider than the photo on most screens. */
.section--photo { position: relative; overflow: hidden; }
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/photos/our-carers.jpg");
  background-size: cover;
  /* biased upward so the faces sit in view and the baked-in caption band falls away */
  background-position: center 22%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 82% 70% at 50% 40%, #000 30%, transparent 76%);
  mask-image: radial-gradient(ellipse 82% 70% at 50% 40%, #000 30%, transparent 76%);
  pointer-events: none;
}
/* Scrim: the photo is bright in places, and white body copy needs to stay readable
   over it. Darkest at top and bottom, lightest across the middle of the image. */
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 32, 15, 0.55) 0%,
    rgba(20, 32, 15, 0.28) 42%,
    rgba(20, 32, 15, 0.62) 100%);
  pointer-events: none;
}
/* Keep copy above both the photo and the scrim */
.section--photo > .container { position: relative; z-index: 1; }

/* Same treatment for light sections: photo ghosted behind cream instead of sage,
   so dark body copy stays readable. */
.section--photo-light { position: relative; overflow: hidden; }
.section--photo-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/photos/carer-companionship.jpg");
  background-size: cover;
  background-position: center 32%;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 80% 68% at 50% 45%, #000 26%, transparent 76%);
  mask-image: radial-gradient(ellipse 80% 68% at 50% 45%, #000 26%, transparent 76%);
  pointer-events: none;
}
.section--photo-light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(250, 249, 246, 0.68) 0%,
    rgba(250, 249, 246, 0.46) 45%,
    rgba(250, 249, 246, 0.78) 100%);
  pointer-events: none;
}
.section--photo-light > .container { position: relative; z-index: 1; }

.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 48px;
}
.why-list li { display: flex; gap: 20px; align-items: flex-start; }
.why-list h3 { margin-bottom: 6px; font-size: 1.08rem; }
.why-list p { margin: 0; font-size: 0.95rem; }

/* ---------- Values ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cqc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.cqc-intro { max-width: 640px; margin: -24px auto 40px; text-align: center; font-size: 0.95rem; color: rgba(255, 255, 255, 0.65); }

.cqc-rating {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 660px;
  margin: 56px auto 0;
  padding: 24px 30px 24px 24px;
  border-radius: var(--radius-organic-b);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.cqc-rating img {
  width: 104px;
  height: auto;
  flex-shrink: 0;
  border-radius: 10px;
}
.cqc-rating-text h3 { color: var(--white); margin-bottom: 6px; }
.cqc-rating-text p { margin: 0; font-size: 0.92rem; }
.value-item { text-align: center; padding: 8px; }
.value-item .icon-badge { margin: 0 auto 16px; }
.section--navy .icon-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--sage-400);
}
.value-item h3 { font-size: 1.05rem; }
.value-item p { font-size: 0.92rem; }

/* ---------- Locations ---------- */
.location-card {
  background: var(--white);
  border-radius: var(--radius-organic-c);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.location-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.grid-3 .location-card:nth-child(2) { border-radius: var(--radius-organic-b); }
.location-card-head {
  background: var(--ink-800);
  color: var(--white);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 700;
}
.location-card-body { padding: 22px 24px; }
.location-card-body p { margin-bottom: 6px; }
.location-card--stacked { margin-bottom: 18px; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  background: linear-gradient(120deg, var(--ink-800), var(--ink-700) 60%, var(--sage-600));
  color: var(--white);
  border-radius: var(--radius-organic-b);
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  top: -160px;
  right: -80px;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); margin-bottom: 6px; }
.cta-banner p { color: rgba(255, 255, 255, 0.85); margin: 0; }
.cta-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact-info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}
.contact-info-item .icon-badge { margin-bottom: 0; }
.contact-info-item h3 { margin-bottom: 4px; font-size: 1.02rem; }
.contact-info-item p { margin-bottom: 0; }
.contact-info-item a:hover { color: var(--sage-600); }

.form-card {
  background: var(--glass-light-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: var(--radius-organic-b);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--ink-800);
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--sage-500);
  background: var(--white);
}
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 0.8rem; color: var(--muted-2); margin-top: 10px; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink);
}
.checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--sage-600);
  cursor: pointer;
}
.form-success {
  display: none;
  background: var(--sage-100);
  border: 1px solid var(--sage-400);
  color: var(--sage-600);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  margin-bottom: 18px;
}
.form-success.visible { display: block; }

/* Honeypot: must be invisible to people but present in the DOM for bots.
   Positioned off-screen rather than display:none, which many bots check for. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  display: none;
  background: #fdf0ee;
  border: 1px solid #d9a99f;
  color: #8f3a28;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-bottom: 18px;
}
.form-error.visible { display: block; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.65);
  padding: 72px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { height: 58px; }
.footer-brand-name { font-size: 1.1rem; font-weight: 800; color: var(--white); letter-spacing: -0.01em; }
.footer-brand-name span { color: var(--sage-400); }
.footer-tag { color: var(--sage-400); font-size: 0.86rem; margin-bottom: 14px; font-weight: 600; }
.site-footer h4 {
  color: var(--white);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 20px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 0.92rem; }
.footer-links a:hover { color: var(--white); }
.footer-office { margin-bottom: 16px; font-size: 0.9rem; }
.footer-office strong { color: var(--white); display: block; margin-bottom: 2px; }
.footer-desc { font-size: 0.9rem; }
.footer-email { margin-bottom: 8px; }
.footer-phone { margin-bottom: 20px; }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a:hover { color: var(--white); }

.footer-compliance {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.footer-cqc {
  width: 76px;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}
.footer-dspt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}
.footer-dspt svg { width: 15px; height: 15px; color: var(--sage-400); flex-shrink: 0; }

/* ---------- Legal / policy pages ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 {
  font-size: 1.35rem;
  margin-top: 48px;
  margin-bottom: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.legal p { font-size: 1rem; }
.legal a { color: var(--sage-700); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink-800); }
.legal-updated { font-size: 0.88rem; color: var(--muted-2); margin-bottom: 28px; }
.legal-list { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 11px; }
.legal-list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 1rem;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-500);
}
.legal-list strong { color: var(--ink); }
.legal-draft {
  background: #fdf8e8;
  border: 1px solid #e0cd8a;
  color: #6b551d;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 40px;
  font-size: 0.93rem;
  line-height: 1.6;
}
.legal-draft code {
  background: rgba(107, 85, 29, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.88em;
}

/* ---------- Motion: scroll reveal ---------- */
/* .reveal is applied by JS, so with JS off nothing is ever hidden */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 85ms);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Micro-interactions ---------- */
.icon-badge { transition: transform 0.25s ease, background 0.25s ease; }
.card:hover .icon-badge,
.location-card:hover .icon-badge,
.why-list li:hover .icon-badge { transform: translateY(-3px) scale(1.07); }

.card:hover .card-link svg { transform: translateX(6px); }
.card-link { position: relative; }
.card-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card:hover .card-link::after { transform: scaleX(1); }

.btn:active { transform: translateY(0); }
.location-card-head { transition: background 0.25s ease; }
.location-card:hover .location-card-head { background: var(--ink-700); }

.footer-links a { position: relative; }
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--sage-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.footer-links a:hover::after { transform: scaleX(1); }

/* Keyboard users get the same affordances the mouse does */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sage-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.text-sage { color: var(--sage-600); }
/* Mid sage is too dim on the dark bands — brighten it there */
.section--navy .text-sage { color: var(--sage-400); }
.mt-40 { margin-top: 40px; }
.grid-align-center { align-items: center; }
.section-subheading { margin-top: 48px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .cqc-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-block, .service-block.reverse { grid-template-columns: 1fr; gap: 32px; }
  .service-block.reverse > *:first-child { order: 0; }
  .service-block .photo-card { aspect-ratio: 3 / 2; }
  .hero-stats-inner { grid-template-columns: 1fr; }
  .hero-stat { border-right: none; border-bottom: 1px solid rgba(38, 48, 31, 0.07); }
  .hero-stat:last-child { border-bottom: none; }
}

@media (max-width: 1240px) {
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 16px;
    right: 16px;
    background: var(--glass-light-strong);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-border);
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    gap: 4px;
    z-index: 95;
  }
  .nav-links.open a { padding: 13px 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-two { grid-template-columns: 1fr; }
  .hero .container { padding-top: 150px; padding-bottom: 90px; }
  .page-hero { padding: 140px 0 70px; }
}

/* Below ~411px the "Enquire Now" pill and the hamburger no longer both fit in the
   nav bar — the button was overflowing off the right edge of the screen entirely,
   taking the menu toggle with it and making the nav unusable on most phones.
   Measured with real rendering, not estimated: the overflow starts precisely at
   411px, so 480px gives a safety margin for font-rendering differences across
   devices. Fix: hide the top-bar button here and surface an equivalent one inside
   the mobile menu instead, so the call-to-action isn't lost, just relocated. */
.nav-links-cta { display: none; }
@media (max-width: 480px) {
  .nav-cta > .btn-primary { display: none; }
  .nav-links-cta { display: block; margin-top: 6px; }
  .nav-links.open .nav-links-cta a.btn { padding: 15px 28px; }
}

@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .grid-3, .grid-2, .value-grid, .testimonial-grid, .cqc-grid, .why-list { grid-template-columns: 1fr; }
  .cta-banner { padding: 40px 26px; flex-direction: column; text-align: center; }
  .cta-banner-actions { justify-content: center; }
  .contact-info-item { flex-direction: column; }
  .cqc-rating { flex-direction: column; text-align: center; padding: 26px 24px; }
  .brand img { height: 46px; }
  .brand-tag { display: none; }
  .footer-brand img { height: 50px; }
}