/*
Theme Name: Dendera Care
Theme URI: https://denderacare.com
Author: Dendera Care
Author URI: https://denderacare.com
Description: A custom, hand-coded WordPress theme for Dendera Care, a CQC-rated home care provider serving London and Liverpool. Built for clarity, warmth and credibility, no page builder required.
Version: 2.3.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dendera-care
*/

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root{
  /* Brand colour: deep navy, per client brand guidelines (#15123A) —
     used as the single accent hue throughout. All "accent" variations
     are tints/shades of this one colour so nothing ever clashes.
     (Previously a teal palette — swapped per brand brief.) */
  --color-primary:        #15123A;
  --color-primary-dark:   #0F0D2A;
  --color-primary-darker: #0A091D;
  --color-primary-light:  #F1F1F3; /* tint used for soft section backgrounds */
  --color-primary-tint:   #DEDEE3; /* slightly deeper tint, for borders/dividers */

  /* Same colours as above, as comma-separated R,G,B numbers rather than hex.
     Needed anywhere a semi-transparent overlay is used (photo gradients,
     darkening layers) — rgba() can't take a hex value, and these let
     inline styles do `rgba(var(--color-primary-rgb), .85)` instead of
     hardcoding raw numbers that silently go stale on the next rebrand. */
  --color-primary-rgb:        21,18,58;
  --color-primary-darker-rgb: 10,9,29;

  /* Neutrals */
  --color-ink:      #1D1B2E; /* body text — near-black, navy-warmed to match the new primary */
  --color-ink-soft: #55536B; /* secondary text */
  --color-cream:    #FFFFFF; /* per brief: white backgrounds with plenty of whitespace (previously warm off-white) */
  --color-line:     #E7E7EC; /* hairline borders on white */

  /* Semantic */
  --color-good:     #146B4F; /* CQC "Good" green — kept as the CQC's own colour, independent of brand palette */

  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(var(--color-primary-darker-rgb), 0.06);
  --shadow-md: 0 12px 32px rgba(var(--color-primary-darker-rgb), 0.10);

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-pad: clamp(64px, 9vw, 128px);
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; height: auto; }
a{ color: var(--color-primary); text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-darker);
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 500; }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; }
.screen-reader-text{
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden; border: 0;
}
::selection{ background: var(--color-primary-tint); color: var(--color-primary-darker); }

/* =============================================================
   3. LAYOUT HELPERS
   ============================================================= */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--narrow{ max-width: 820px; }
section{ position: relative; }
.section{ padding: var(--section-pad) 0; }
.section--tight{ padding: clamp(48px, 6vw, 80px) 0; }

/* alternating backgrounds: only ever cream <-> the single light teal tint,
   so nothing ever looks mismatched */
.bg-cream{ background: var(--color-cream); }
.bg-tint{ background: var(--color-primary-light); }
.bg-primary{ background: var(--color-primary); color: #fff; }
.bg-primary h1, .bg-primary h2, .bg-primary h3{ color: #fff; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.bg-primary .eyebrow{ color: #CFE6E1; }

.section-head{ max-width: 640px; margin: 0 0 48px; }

/* Alternating image/text feature rows — used to present a short list of
   named activities (e.g. "Care in action") without it reading as a bare
   photo grid. Each row alternates image-left/image-right for rhythm. */
.feature-rows{ display: flex; flex-direction: column; gap: 72px; }
.feature-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.feature-row:nth-child(even) .feature-row__media{ order: 2; }
.feature-row__media{
  aspect-ratio: 5/4; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.feature-row__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-row__body .eyebrow{ margin-bottom: 12px; }
.feature-row__body h3{ font-size: 1.5rem; margin-bottom: 14px; }
.feature-row__body p{ color: var(--color-ink-soft); max-width: 46ch; }
.section-head--center{ margin-left: auto; margin-right: auto; text-align: center; }
.lede{ font-size: 1.15rem; color: var(--color-ink-soft); }

.grid{ display: grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* =============================================================
   4. BUTTONS
   ============================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--color-primary); color: #fff; }
.btn-primary:hover{ background: var(--color-primary-dark); color: #fff; }
.btn-outline{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary); color: #fff; }
.btn-on-dark{ background: #fff; color: var(--color-primary-dark); }
.btn-on-dark:hover{ background: var(--color-primary-light); }
.btn-ghost-on-dark{ background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost-on-dark:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn-sm{ padding: 10px 20px; font-size: 0.88rem; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.icon{ width: 18px; height: 18px; flex-shrink: 0; }

/* =============================================================
   5. SITE HEADER / NAV
   ============================================================= */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,244,0.92);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  box-shadow: var(--shadow-md);
  border-bottom-color: transparent;
}
/* The frosted-glass blur is applied on a pseudo-element rather than
   directly on .site-header. A blur/backdrop-filter on the header itself
   would turn it into the "containing block" for any position:fixed
   descendant (like the mobile menu below), trapping that menu inside
   the header's own 84px box instead of letting it cover the screen. */
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}
.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 96px; gap: 10px;
}
.brand{ display: flex; align-items: center; gap: 14px; color: var(--color-primary); font-family: var(--font-heading); min-width: 0; text-decoration: none; }
.brand__mark{ width: 54px; height: 54px; flex-shrink: 0; display: block; color: var(--color-primary); }
.brand__mark svg{ width: 100%; height: 100%; display: block; }
.brand__mark--full{ width: auto; height: 72px; }
.brand__mark--full img{ width: auto; height: 100%; display: block; }
.custom-logo-link{ display: flex; align-items: center; }
.custom-logo{ height: 44px; width: auto; max-width: none; display: block; }
.brand__wordmark{ display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand__name{ font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; line-height: 1.05; color: var(--color-primary); letter-spacing: -0.01em; }
.brand__subtitle{ font-family: var(--font-body); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-soft); margin-top: 3px; }

.main-nav ul{ display: flex; align-items: center; gap: 2px; }
.main-nav a{
  display: block; padding: 10px 16px; border-radius: var(--radius-pill);
  color: var(--color-ink); font-weight: 600; font-size: 0.96rem;
  transition: background .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav .current-menu-item > a{ background: var(--color-primary-light); color: var(--color-primary-dark); }
.main-nav .menu-item-has-children{ position: relative; }
.main-nav .sub-menu{
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .18s ease; border: 1px solid var(--color-line);
}
.main-nav .menu-item-has-children:hover > .sub-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu a{ padding: 10px 14px; border-radius: var(--radius-sm); }

.header-actions{ display: flex; align-items: center; gap: 12px; }
.nav-toggle{
  display: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
  position: relative; z-index: 101; /* stays above the open mobile panel */
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width: 20px; height: 2px; background: var(--color-ink); position: relative; transition: all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
/* Turn the three lines into a clear "X" once the menu is open, so it's
   obvious the button now closes the menu rather than opens it. */
body.nav-open .nav-toggle span{ background: transparent; }
body.nav-open .nav-toggle span::before{ top: 0; transform: rotate(45deg); background: var(--color-primary-dark); }
body.nav-open .nav-toggle span::after{ top: 0; transform: rotate(-45deg); background: var(--color-primary-dark); }
body.nav-open .nav-toggle{ border-color: var(--color-primary-tint); }

/* =============================================================
   6. HERO
   ============================================================= */
.hero{
  color: #fff;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: 640px;
}
.hero__photo{
  background-size: cover;
  background-position: center 30%;
  position: relative;
}
.hero__photo::before{
  /* A light vignette purely for polish on the photo's own edge; the
     card carries all the text now, so this no longer needs tuning
     per-photo the way a direct-on-image overlay would. */
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,11,38,0.18) 0%, rgba(13,11,38,0) 12%);
  pointer-events: none;
}
.hero__inner{
  background: var(--color-primary-darker);
  display: flex;
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset -1px 0 0 rgba(255,255,255,0.06);
}
.hero__inner::before{
  /* A soft diagonal sheen for a glass-like feel, layered on top of
     the solid navy rather than a true backdrop-blur — there's no
     photo behind this panel to blur (it sits in its own column), so
     a real frosted-glass effect would have nothing to show through. */
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}
.hero-card{
  position: relative;
  z-index: 1;

  max-width: 460px;
  width: 100%;
}
.hero h1{ color: #fff; font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.hero .lede{ color: #DCEEEA; max-width: 46ch; font-size: 1rem; }
.hero-badge{
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  padding: 10px 18px 10px 10px; border-radius: var(--radius-pill); margin-bottom: 20px;
}
.hero-badge__pip{
  background: var(--color-good); color: #fff; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.82rem; padding: 6px 14px; border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18); letter-spacing: 0.01em;
}
.hero-badge span{ font-size: 0.88rem; font-weight: 600; color: #EAF6F3; }

/* "Call Us Today" — reveals both branch numbers rather than guessing
   which one a visitor wants. Built as a popover so it fits in the
   same visual slot as a normal button. */
.call-today{ position: relative; display: inline-block; }
.call-today__panel{
  display: none;
  position: absolute; bottom: calc(100% + 10px); left: 0;
  background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 10px; min-width: 220px; z-index: 5;
}
.call-today.is-open .call-today__panel{ display: block; }
.call-today__panel a{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--color-ink); font-weight: 600; font-size: 0.92rem; text-decoration: none;
}
.call-today__panel a:hover{ background: var(--color-primary-light); }

.hero-panel{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(6px);
}
.hero-panel__row{
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.16);
}
.hero-panel__row:last-child{ border-bottom: 0; padding-bottom: 0; }
.hero-panel__row:first-child{ padding-top: 0; }
.hero-panel__icon{
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-panel__icon svg{ width: 22px; height: 22px; }
.hero-panel h2{ color: #fff; font-size: 1.05rem; margin-bottom: 2px; }
.hero-panel p{ color: #CFE6E1; font-size: 0.92rem; margin: 0; }

/* =============================================================
   7. LOCATIONS
   ============================================================= */
.locations-grid{ grid-template-columns: repeat(2, 1fr); }
.location-card{
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.location-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.location-card__media{
  height: 168px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  position: relative;
  display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.location-card__media svg{ position:absolute; opacity:.5; }
.location-card__tag{
  position: relative; z-index: 1; margin: 20px; color: #fff;
  font-family: var(--font-heading); font-size: 1.4rem;
}
.location-card__body{ padding: 26px; }
.location-card__body p{ color: var(--color-ink-soft); font-size: 0.95rem; }
.location-card__body .btn{ margin-top: 14px; }

/* =============================================================
   8. RECRUIT CTA BANNER
   ============================================================= */
.cta-banner{
  background: var(--color-primary-darker);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-banner h2{ color: #fff; margin-bottom: 6px; }
.cta-banner p{ color: #CFE6E1; margin: 0; }

/* =============================================================
   9. SERVICES
   ============================================================= */
.services-grid{ grid-template-columns: repeat(3, 1fr); }
.service-card{
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: 30px 26px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.service-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.service-card__icon{
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--color-primary-light); display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.service-card__icon svg{ width: 26px; height: 26px; color: var(--color-primary); stroke: var(--color-primary); }
.service-card h3{ margin-bottom: 8px; font-size: 1.14rem; }
.service-card p{ color: var(--color-ink-soft); font-size: 0.94rem; margin: 0; }

/* Compact variant: used on the homepage highlight strip. Icon + title
   only, no description — the missing detail is the reason to click
   through to the full Services page, by design. */
.services-grid--compact{ grid-template-columns: repeat(5, 1fr); gap: 18px; }
.service-card--compact{
  padding: 24px 18px; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.service-card--compact .service-card__icon{ margin-bottom: 14px; }
.service-card--compact h3{ margin-bottom: 0; font-size: 0.98rem; }

.service-detail{
  display: grid; grid-template-columns: 56px 1fr; gap: 22px;
  padding: 30px 0; border-bottom: 1px solid var(--color-line);
}
.service-detail:last-child{ border-bottom: 0; }
.service-detail__icon{
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--color-primary-light); display: flex; align-items: center; justify-content: center;
}
.service-detail__icon svg{ width: 28px; height: 28px; color: var(--color-primary); stroke: var(--color-primary); }
.service-detail h3{ margin-bottom: 8px; }
.service-detail p{ color: var(--color-ink-soft); }

/* Full service cards: used on the Services page. Each card shows a
   photo where one genuinely matches that service; services without a
   dedicated photo fall back to the icon treatment rather than reusing
   an unrelated image from elsewhere on the site. */
.service-cards-grid{ grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card--full{ padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.service-card--full .service-card__photo{
  aspect-ratio: 16/10; overflow: hidden; background: var(--color-primary-light);
}
.service-card--full .service-card__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card--full .service-card__body{ padding: 26px; flex: 1; display: flex; flex-direction: column; }
.service-card--full .service-card__icon{ margin-bottom: 16px; }
.service-card--full h3{ margin-bottom: 8px; font-size: 1.14rem; }
.service-card--full p{ color: var(--color-ink-soft); font-size: 0.94rem; margin: 0; }

/* =============================================================
   10. TESTIMONIALS
   ============================================================= */
.testimonials-grid{ grid-template-columns: repeat(2, 1fr); }
.testimonial{
  background: #fff; border-radius: var(--radius-md); padding: 32px;
  border: 1px solid var(--color-line); position: relative;
}
.testimonial__quote-mark{
  font-family: var(--font-heading); font-size: 3.2rem; color: var(--color-primary-tint);
  line-height: 1; margin-bottom: 4px; display:block;
}
.testimonial p{ font-size: 1.02rem; color: var(--color-ink); font-style: italic; }
.testimonial cite{
  display: block; margin-top: 18px; font-style: normal; font-weight: 700;
  font-size: 0.88rem; color: var(--color-primary-dark); letter-spacing: 0.01em;
}

/* =============================================================
   11. PAGE HERO (inner pages)
   ============================================================= */
.page-hero{
  background: var(--color-primary-light);
  padding-top: clamp(56px, 9vw, 96px);
  padding-bottom: clamp(48px, 7vw, 72px);
  border-bottom: 1px solid var(--color-primary-tint);
}
.page-hero .eyebrow{ margin-bottom: 16px; }
.page-hero p{ max-width: 62ch; color: var(--color-ink-soft); font-size: 1.08rem; }
.breadcrumb{ font-size: 0.85rem; color: var(--color-ink-soft); margin-bottom: 18px; }
.breadcrumb a{ color: var(--color-ink-soft); }
.breadcrumb a:hover{ color: var(--color-primary); }

/* =============================================================
   12. PROCESS STEPS (Become a Caregiver)
   ============================================================= */
.process{ counter-reset: step; grid-template-columns: repeat(3, 1fr); }
.process-step{
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: 28px; position: relative;
}
.process-step__num{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.05rem;
}
.process-step h3{ font-size: 1.05rem; margin-bottom: 6px; }
.process-step p{ font-size: 0.92rem; color: var(--color-ink-soft); }

.values-panel{
  background: var(--color-primary); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(36px,6vw,56px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.values-panel h2{ color: #fff; }
.values-panel p{ color: #CFE6E1; }

/* =============================================================
   13. CONTACT
   ============================================================= */
.contact-layout{ grid-template-columns: 1fr 1fr; align-items: start; }
.contact-card{
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 32px;
}
.contact-card h3{ margin-bottom: 4px; }
.contact-card__title{ font-size: 1.35rem; margin-bottom: 18px; }
.info-row{ display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-line); }
.info-row:last-child{ border-bottom: 0; }
.info-row__icon{
  width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-row__icon svg{ width: 19px; height: 19px; color: var(--color-primary); stroke: var(--color-primary); }
.info-row strong{ display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink-soft); margin-bottom: 2px; }
.info-row a, .info-row span{ color: var(--color-ink); font-weight: 600; }

.branch-picker{ grid-template-columns: repeat(2,1fr); }
.branch-pick{
  display: block; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: 24px; text-align: center; transition: all .2s ease;
}
.branch-pick:hover{ border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.branch-pick strong{ display:block; font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-primary-darker); margin-bottom: 4px; }
.branch-pick span{ font-size: 0.85rem; color: var(--color-ink-soft); }

.form-field{ margin-bottom: 20px; }
.form-field label{ display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select{
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-cream); color: var(--color-ink); transition: border-color .2s ease, background .2s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline: none; border-color: var(--color-primary); background: #fff;
}
.form-field textarea{ resize: vertical; min-height: 130px; }
.form-row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-notice{ padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem; margin-bottom: 20px; }
.form-notice--success{ background: var(--color-primary-light); color: var(--color-primary-dark); border: 1px solid var(--color-primary-tint); }
.form-notice--error{ background: #FBEAEA; color: #8A2C2C; border: 1px solid #F1CFCF; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =============================================================
   14. FOOTER
   ============================================================= */
.site-footer{ background: var(--color-primary-darker); color: #CFE6E1; }
.site-footer a{ color: #EAF6F3; }
.site-footer a:hover{ color: #fff; }
.footer-top{ padding-top: 72px; padding-bottom: 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.brand--footer{ color: #fff; }
.brand--footer .brand__mark{ width: 50px; height: 50px; color: #fff; }
.brand--footer .brand__mark--full{ width: auto; height: 56px; }
.brand--footer .brand__name{ color: #fff; }
.brand--footer .brand__subtitle{ color: #9EC7BF; }
.footer-cqc-badges{ display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.footer-cqc-badge{
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill); padding: 8px 16px 8px 8px;
  font-size: 0.85rem; font-weight: 600; color: #EAF6F3; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.footer-cqc-badge:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.footer-cqc-badge__pip{
  background: var(--color-good); color: #fff; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.76rem; padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: 0.01em;
}
.footer-brand p{ color: #9EC7BF; margin-top: 16px; font-size: 0.94rem; max-width: 32ch; }
.footer-col h4{ color: #fff; font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.footer-col li{ margin-bottom: 12px; font-size: 0.94rem; }
.footer-social{ display: flex; gap: 10px; margin-top: 20px; }
.footer-social a{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover{ background: rgba(255,255,255,.1); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14); padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 0.85rem; color: #9EC7BF;
}

/* =============================================================
   15. MISC / VISION PAGE
   ============================================================= */
.prose{ max-width: 72ch; }
.prose p{ color: var(--color-ink-soft); font-size: 1.05rem; }
.prose p:first-of-type{ color: var(--color-ink); font-size: 1.15rem; }

.stat-row{ grid-template-columns: repeat(3,1fr); text-align: center; }
.stat{ padding: 20px; }
.stat strong{ display: inline-block; min-width: 1.6ch; font-variant-numeric: tabular-nums; font-family: var(--font-heading); font-size: 2.4rem; color: var(--color-primary); }
.stat span{ color: var(--color-ink-soft); font-size: 0.92rem; }

/* =============================================================
   16. PHOTOGRAPHY
   ============================================================= */
.photo-banner{
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}
.photo-banner img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.photo-banner--wide{ aspect-ratio: 16/8; }
.photo-banner--tall{ aspect-ratio: 4/5; }
.photo-banner--square{ aspect-ratio: 1/1; }
.photo-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  background: linear-gradient(0deg, rgba(var(--color-primary-darker-rgb),.75), transparent);
  color: #fff; font-size: 0.85rem; font-weight: 600;
}
.img-frame{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.img-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }

.split-media{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-media.reverse{ direction: rtl; }
.split-media.reverse > *{ direction: ltr; }

/* =============================================================
   17. RESPONSIVE (photography)
   ============================================================= */
@media (max-width: 780px){
  .split-media{ grid-template-columns: 1fr; }
  .photo-banner--wide{ aspect-ratio: 16/11; }
}

@media (max-width: 960px){
  .hero{ grid-template-columns: 1fr 1fr; }
  .locations-grid, .testimonials-grid, .contact-layout, .grid-4, .footer-top{ grid-template-columns: repeat(2,1fr); }
  .services-grid, .process{ grid-template-columns: repeat(2,1fr); }
  .services-grid--compact{ grid-template-columns: repeat(3,1fr); }
  .service-cards-grid{ grid-template-columns: repeat(2,1fr); }
  .values-panel{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: repeat(3,1fr); }
}

/* Tablet range: the desktop nav is still showing here (mobile menu only
   kicks in below 780px), so give it slightly tighter type instead of
   letting it fight the "Get in touch" button and logo for space. */
@media (min-width: 781px) and (max-width: 960px){
  .main-nav ul{ gap: 0; }
  .main-nav a{ padding: 10px 11px; font-size: 0.9rem; }
  .brand__name{ font-size: 1.1rem; }
  .btn-sm{ padding: 9px 16px; font-size: 0.84rem; }
}
@media (max-width: 780px){
  .main-nav{ display: none; }
  .nav-toggle{ display: flex; }

  /* Body scroll is locked while the mobile menu is open (see main.js)
     so the page behind it can't be dragged around underneath it. */
  body.nav-open{ overflow: hidden; }

  body.nav-open .main-nav{
    display: block; position: fixed; inset: 0; background: var(--color-cream);
    padding: 100px 28px 32px; /* clears the 84px header + gives real breathing room */
    overflow-y: auto; z-index: 95; -webkit-overflow-scrolling: touch;
  }
  body.nav-open .main-nav ul{ flex-direction: column; align-items: stretch; gap: 6px; }
  body.nav-open .main-nav a{
    padding: 16px 18px; font-size: 1.08rem; border-radius: var(--radius-md);
  }
  body.nav-open .main-nav > ul > li{ border-bottom: 1px solid var(--color-line); }
  body.nav-open .main-nav > ul > li:last-child{ border-bottom: 0; }
  body.nav-open .main-nav .sub-menu{
    position: static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; padding-left: 16px; margin: 4px 0 10px; display:none;
  }
  body.nav-open .menu-item-has-children.is-open > .sub-menu{ display:block; }
  body.nav-open .header-actions .btn-primary{ display: none; } /* avoid duplicate CTA once menu is open */

  .footer-top, .grid-2, .grid-3, .grid-4, .locations-grid, .testimonials-grid, .contact-layout, .services-grid, .services-grid--compact, .service-cards-grid, .process, .branch-picker, .stat-row, .feature-row{ grid-template-columns: 1fr; }
  .feature-rows{ gap: 40px; }
  .feature-row{ gap: 20px; }
  .feature-row:nth-child(even) .feature-row__media{ order: 0; } /* no alternating once stacked — image always leads */
  .cta-banner{ flex-direction: column; align-items: flex-start; text-align: left; }
  .form-row-2{ grid-template-columns: 1fr; }

  /* Hero: the two grid columns stack on mobile. Photo comes first
     visually (via `order`, not DOM order — screen readers still meet
     the heading/content first, which is the right reading order) so
     visitors see the actual photo before any text. `order` is used
     rather than reordering the markup itself, so this stays a pure
     presentation change. */
  .hero{ grid-template-columns: 1fr; min-height: 0; }
  .hero__inner{ padding: 32px 22px 36px; order: 2; }
  .hero-card{ max-width: 100%; }
  .hero__photo{
    order: 1;
    height: 260px; min-height: 260px;
    background-color: var(--color-primary-darker); /* visible even if the image itself fails to load */
  }
  .hero .btn-row{ flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn, .hero .btn-row .call-today{ width: 100%; }
  .call-today__panel{ left: 0; right: 0; min-width: 0; }

  /* Breathing room: more side padding and slightly calmer text sizing
     so content doesn't press up against the edges of small screens. */
  :root{ --gutter: 24px; --section-pad: clamp(48px, 10vw, 88px); }
  body{ font-size: 16px; line-height: 1.7; }
  h1{ font-size: clamp(2.1rem, 8vw, 2.6rem); }
  h2{ font-size: clamp(1.6rem, 6vw, 2rem); }
  .section-head{ margin-bottom: 32px; }
  .lede{ font-size: 1.05rem; }
  .hero-panel{ padding: 24px; }
  .service-card, .location-card__body{ padding: 24px 20px; }

  /* The "Good / Rated by the CQC" badge is a single-line pill on desktop.
     On narrow screens the text has to wrap, and a pill radius on a
     two-line box stretches into an odd oval — so on mobile it becomes
     a proper rounded rectangle with the "Good" chip on its own row. */
  .hero-badge{
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    border-radius: var(--radius-md);
    padding: 16px 18px;
  }
  .hero-badge span{ font-size: 0.9rem; line-height: 1.4; }
}

@media (max-width: 480px){
  :root{ --gutter: 18px; }
  .btn{ padding: 14px 24px; font-size: 0.94rem; }

  /* Logo + "Get in touch" + hamburger no longer fit comfortably on one
     row below ~400px. Let the brand name truncate instead of forcing
     the hamburger off the edge of the screen, and shrink the pill. */
  .brand__name{ font-size: 1.2rem; }
  .brand__mark{ width: 44px; height: 44px; }
  .brand__mark--full{ width: auto; height: 52px; }
  .custom-logo{ height: 34px; width: auto; }
  .brand__subtitle{ font-size: 0.58rem; letter-spacing: 0.12em; }
  .header-actions{ gap: 8px; }
  .header-actions .btn-sm{ padding: 9px 14px; font-size: 0.82rem; }
}

@media (max-width: 360px){
  /* On the smallest phones, drop the header CTA entirely and rely on
     the hamburger — the "Get in touch" action is still one tap away
     inside the menu, and this guarantees the toggle is always visible. */
  .header-actions .btn-sm{ display: none; }
}

/* =============================================================
   INTERACTIVITY — scroll reveal, image hover, motion preferences
   ============================================================= */

/* Scroll-reveal: elements start slightly lower and transparent, then
   settle into place as they enter the viewport (see main.js). Only
   applied via JS to specific content blocks, never globally. */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children slightly within a grid/row so items don't all
   snap in at once — small, deliberate rhythm rather than a single flat pop. */
.feature-rows .reveal:nth-child(2){ transition-delay: .06s; }
.feature-rows .reveal:nth-child(3){ transition-delay: .12s; }
.feature-rows .reveal:nth-child(4){ transition-delay: .18s; }
.services-grid .reveal:nth-child(2),
.locations-grid .reveal:nth-child(2),
.testimonials-grid .reveal:nth-child(2){ transition-delay: .08s; }
.services-grid .reveal:nth-child(3),
.locations-grid .reveal:nth-child(3){ transition-delay: .16s; }

/* Photo hover: a gentle, premium zoom on hover/focus rather than a
   static image — used on any photo sitting inside a .img-frame. */
.img-frame:hover img, .img-frame:focus-within img{ transform: scale(1.045); }

/* Animated stat counters (see main.js) reserve their layout width so
   the surrounding text doesn't shift as the number counts up. */

/* Respect the OS-level reduced-motion preference completely — no
   reveal animation, no transform transitions, content simply present. */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  .img-frame img{ transition: none; }
  .site-header{ transition: none; }
}

/* =============================================================
   PAGE TRANSITION — branded overlay shown briefly while
   navigating between pages (see main.js for trigger logic).
   Hidden by default: if JS fails to load, this never appears
   and the site works exactly as normal — no dependency risk.
   ============================================================= */
#page-transition{
  position: fixed; inset: 0; z-index: 999;
  background: var(--color-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease;
}
#page-transition.is-active{
  opacity: 1; visibility: visible; pointer-events: all;
}
.page-transition__mark{
  width: 64px; height: 64px; color: #fff;
  animation: page-transition-pulse 1.1s ease-in-out infinite;
}
.page-transition__mark svg{ width: 100%; height: 100%; display: block; }
.page-transition__mark--full{ width: auto; height: 64px; }
.page-transition__mark--full img{ width: auto; height: 100%; display: block; }
.page-transition__word{
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0.02em; color: #fff; opacity: 0.92;
}
@keyframes page-transition-pulse{
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.88); opacity: .7; }
}
@media (prefers-reduced-motion: reduce){
  #page-transition{ display: none; } /* skipped entirely — instant navigation, no animation */
}