/*
Theme Name: Glowing Care
Theme URI: https://live-in.glowingcare.co.uk
Author: Sitemate Studio
Author URI: https://sitematestudio.com
Description: Block theme for Glowing Care (Live-In Care). Core blocks only, no page builder. Design source: .claude/archives/homepage/build in the repo. Font: Plus Jakarta Sans (SIL Open Font License 1.1).
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary, client build
Text Domain: glowing-care
*/

/* Ported from the signed-off build (styles.css). Tokens live in theme.json, aliased here so the ported rules read the same.
   Mobile first. Main breakpoint 992px. Each unit appends its own section below, in page order. */

:root {
  --navy: var(--wp--preset--color--navy);
  --gold: var(--wp--preset--color--gold);
  --cream: var(--wp--preset--color--cream);
  --white: var(--wp--preset--color--white);
  --charcoal: var(--wp--preset--color--charcoal);
  --charcoal-muted: var(--wp--preset--color--charcoal-muted);
  --gold-hover: var(--wp--custom--gold-hover);
  --gold-hero: var(--wp--custom--gold-hero);
  --gold-soft: var(--wp--custom--gold-soft);
  --gold-on-dark: var(--wp--custom--gold-on-dark);
  --border-soft: var(--wp--custom--border-soft);
  --border-subtle: var(--wp--custom--border-subtle);
  --green: var(--wp--custom--green);
  --green-bg: var(--wp--custom--green-bg);
  --slate: var(--wp--custom--slate);
  --ink: var(--wp--custom--ink);
  --grey-on-dark: var(--wp--custom--grey-on-dark);

  --font-main: var(--wp--preset--font-family--plus-jakarta-sans);

  --radius-sm: var(--wp--custom--radius--sm);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-pill: var(--wp--custom--radius--pill);
  --shadow-lg: var(--wp--preset--shadow--lg);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (max-width: 991.98px) { html { scroll-padding-top: 72px; } }

body { -webkit-font-smoothing: antialiased; }

img { max-width: 100%; height: auto; display: block; }
ul:not(.wp-block-list), ol:not(.wp-block-list) { list-style: none; }

.nb { white-space: nowrap; }

/* Core prints the skip link for block themes, this restyles it to the build's pill. */
body .skip-link.screen-reader-text:focus {
  left: 12px; top: 12px; z-index: 200; margin: 0; padding: 10px 18px;
  background: var(--gold); color: var(--charcoal); font-weight: 700; border-radius: var(--radius-pill);
}

/* Fallback template (index) for plain pages such as the privacy policy: the reset above flattens paragraphs and lists, so give them back their spacing. */
.container.prose { padding-block: 120px 64px; } /* clears the fixed header; doubled class so it beats .container's shorthand padding */
.prose > * + *, .prose .wp-block-post-content > * + * { margin-top: 1em; }
.prose .wp-block-list { padding-left: 1.5em; }
.prose a { text-decoration: underline; }
/* Legal template (privacy and terms): navy title band, then one reading column. The band clears the fixed header, the column does not need the prose top padding. */
.legal-hero { padding: 120px 0 56px; color: var(--white); }
@media (min-width: 992px) { .legal-hero { padding: 164px 0 88px; } }
.legal-hero h1 { color: var(--white); font-size: 2.3rem; font-weight: 800; }
@media (min-width: 768px) { .legal-hero h1 { font-size: 3.2rem; } }
.container.legal-page { max-width: 760px; padding-block: 56px 80px; }
.legal-page h2 { color: var(--navy); font-size: 1.5rem; font-weight: 800; margin-top: 2em; }
.legal-page .wp-block-table { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.legal-page .wp-block-table table { min-width: 560px; font-size: 0.95rem; border-collapse: collapse; }
.legal-page .wp-block-table th { background: var(--cream); color: var(--navy); font-weight: 700; text-align: left; }
.legal-page .wp-block-table th, .legal-page .wp-block-table td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.legal-page .wp-block-table tbody tr:last-child td { border-bottom: 0; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Section heads ---------- */
.section { padding: 64px 0; }
@media (min-width: 992px) { .section { padding: 96px 0; } }

.head { text-align: center; max-width: 680px; margin: 0 auto; }
.title { color: var(--navy); font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; }
.title--lg { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
@media (min-width: 768px) { .title--lg { font-size: 2.6rem; } }
.lede { font-size: 1.1rem; color: var(--charcoal-muted); }
.head .lede { margin: 0 auto; }

/* ---------- Buttons ---------- */
/* Core Button block: the wrapper carries the .btn classes, the link inside is what gets styled. */
.btn > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: 14px 28px;
  border: 2px solid transparent;
  cursor: pointer; text-align: center;
  transition: all 0.2s ease-in-out;
}
/* Charcoal on gold, never white on gold. */
.btn--gold > .wp-block-button__link { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.btn--gold > .wp-block-button__link:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn--outline-navy > .wp-block-button__link { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline-navy > .wp-block-button__link:hover { background: rgba(30, 48, 69, 0.05); }
/* Arrow and phone icon are decoration: CSS only, empty alt text so screen readers skip them. */
.btn--arrow > .wp-block-button__link::after { content: "\2192"; content: "\2192" / ""; }
.btn--phone > .wp-block-button__link::before,
.header-phone > .wp-block-button__link::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("assets/icons/phone.svg") center / contain no-repeat; mask: url("assets/icons/phone.svg") center / contain no-repeat;
}

/* ---------- Header ---------- */
/* Fixed bar at every width. Transparent over the hero with a soft fade, solid navy once the page has scrolled past 80px (header.js adds .scrolled),
   and always solid on pages without a hero.
   Below 992px: Enquire now (stretched below 768px), call icon, menu icon (logo too from 768px); the menu is core Navigation's overlay, restyled as a slide-in drawer.
   From 992px: taller bar with inline links. Core switches its overlay at 600px, so the block is set to "always overlay" and shown inline from 992px here. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 56px; background: none; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .site-header { top: 32px; } }
.site-header::before { content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(19, 31, 46, 0.75), rgba(19, 31, 46, 0)); transition: opacity 0.3s ease; }
.site-header.scrolled, body:not(.home) .site-header { background: var(--navy); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
.site-header.scrolled::before, body:not(.home) .site-header::before { opacity: 0; }
.site-header__inner {
  max-width: 1280px; height: 100%; margin: 0 auto; padding: 8px 12px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.site-header .logo { display: none; flex: none; margin-right: auto; }
.site-header .logo img { width: 120px; height: auto; }
@media (min-width: 768px) { .site-header .logo { display: flex; } }

/* Menu: drawer below 992px, inline links from 992px. In the rules below "NAV" is .site-header .wp-block-navigation.wp-block-navigation, doubled so it beats core's overlay colours. */
.site-header nav.wp-block-navigation { order: 3; position: relative; }
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
  width: 40px; height: 40px; border-radius: 50%; flex: none; align-items: center; justify-content: center;
}
.site-header .wp-block-navigation__responsive-container-open { display: flex; color: var(--white); background: rgba(255, 255, 255, 0.16); }
/* display flex centres the X: core leaves the button as a block, which pins the icon to its left edge. top 14px puts the X level with the 36px logo (centre y 34). */
.site-header .wp-block-navigation__responsive-container-close { display: flex; top: 14px; right: 20px; background: var(--gold); color: var(--navy); }
.site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
  padding: 0; overflow: hidden; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 40%, transparent);
}
.site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
  flex: 1; display: flex; max-width: none; margin: 0;
}
.site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-dialog {
  position: fixed; top: 0; right: 0; bottom: 0; flex: none; margin: 0; width: min(85vw, 360px);
  display: flex; flex-direction: column; padding: 16px 20px 24px; overflow-y: auto;
  background: var(--cream); box-shadow: var(--shadow-lg);
}
@media not (prefers-reduced-motion) {
  .site-header .wp-block-navigation__responsive-container.is-menu-open { animation: drawer-fade-in 240ms ease-out; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { animation: drawer-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .site-header.is-closing .wp-block-navigation__responsive-container.is-menu-open { animation: drawer-fade-out 200ms ease-in forwards; }
  .site-header.is-closing .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { animation: drawer-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }
}
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes drawer-fade-in { from { opacity: 0; } }
@keyframes drawer-fade-out { to { opacity: 0; } }
.site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
  flex: 1; padding: 0; align-items: stretch;
}
.site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  flex: 1; gap: 0; align-items: stretch;
}
.site-header .drawer-logo { margin-bottom: 20px; }
.site-header .drawer-logo img { height: 36px; width: auto; }
.site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  display: block; width: 100%; padding: 16px 0; font-size: 1.125rem; font-weight: 500; color: var(--navy); border-bottom: 1px solid var(--border-soft);
}
.site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current] { font-weight: 700; }
.site-header .drawer-cta { margin-top: auto; padding-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; }
.site-header .drawer-cta .wp-block-button, .site-header .drawer-cta .wp-block-button__link { width: 100%; }

.header-actions.header-actions { display: contents; }
.site-header .header-phone { order: 2; }
.site-header .header-phone > .wp-block-button__link {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: var(--white);
  font-size: 0; /* the number is the accessible name, shown as text from 992px */
}
.header-phone > .wp-block-button__link::before { width: 18px; height: 18px; }
.site-header .header-enquire { order: 1; flex: 1; max-width: 420px; }
.site-header .header-enquire > .wp-block-button__link { width: 100%; }
@media (min-width: 768px) { .site-header .header-enquire { flex: none; } }
.btn--sm > .wp-block-button__link { height: 44px; padding: 0 16px; font-size: 0.875rem; gap: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }

@media (min-width: 992px) {
  .site-header { height: 80px; }
  .site-header__inner { padding: 0 24px; justify-content: space-between; gap: 24px; }
  .site-header .logo { margin-right: 0; }
  .site-header .logo img { width: auto; height: 48px; transform-origin: left center; transition: transform 0.3s ease; }
  .site-header.scrolled .logo img { transform: scale(0.9); }

  .site-header nav.wp-block-navigation { order: 0; }
  .site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-navigation__responsive-container-close, .site-header .drawer-only { display: none; }
  /* Core wraps the drawer logo in an li, which would still take one 8px flex gap in the row. */
  .site-header .wp-block-navigation-item:has(> .drawer-only) { display: none; }
  .site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block; position: static; width: auto; z-index: auto;
  }
  .site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    flex-direction: row; align-items: center; gap: 8px; margin: 0;
  }
  .site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    display: inline-block; width: auto; color: rgba(255, 255, 255, 0.88); font-weight: 600; font-size: 0.925rem; padding: 8px 16px; border-bottom: 0; border-radius: var(--radius-pill); transition: all 0.2s;
  }
  .site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current] { color: var(--white); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .site-header .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover { color: var(--gold); }

  .header-actions.header-actions { display: flex; align-items: center; gap: 20px; }
  .site-header .header-phone { order: 0; }
  .site-header .header-phone > .wp-block-button__link {
    width: auto; height: auto; padding: 0; border-radius: 0; background: none; gap: 8px;
    font-weight: 700; font-size: 0.95rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .header-phone > .wp-block-button__link::before { width: 16px; height: 16px; background: var(--gold); }
  .site-header .header-enquire { order: 0; }
  .header-enquire > .wp-block-button__link::after { display: none; }
  .btn--sm > .wp-block-button__link { height: auto; padding: 10px 24px; font-size: 0.925rem; }
}

/* ---------- Hero ---------- */
/* Hero and trust strip fill the first screen together; the header floats over the top. The hero is a core Cover block (a real <img>), .fold is the Group around both. */
.fold { display: flex; flex-direction: column; min-height: max(700px, 100vh); min-height: max(700px, 100svh); }
@media (min-width: 992px) { .fold { min-height: max(820px, 100vh); min-height: max(820px, 100svh); } }
/* iPad landscape and small laptops: the 820px minimum pushed the one-line trust strip off a 768px-high screen. */
@media (min-width: 992px) and (max-width: 1179.98px) { .fold { min-height: max(700px, 100vh); min-height: max(700px, 100svh); } }
.fold .hero { flex: 1; min-height: 0; padding: 104px 0 40px; align-items: center; justify-content: center; overflow: hidden; }
.hero .wp-block-cover__inner-container { width: 100%; color: var(--white); }
.hero__inner { position: relative; z-index: 10; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) {
  /* Wide screens fade the dim across the photo. The Cover's inline background-color is what sets the flat dim, so it needs !important to step aside. */
  .hero > .wp-block-cover__background { background-color: transparent !important; background-image: linear-gradient(90deg, rgba(20, 36, 56, 0.68) 0%, rgba(20, 36, 56, 0.45) 45%, rgba(20, 36, 56, 0.12) 100%); opacity: 1; }
  .hero__inner { grid-template-columns: 1.18fr 0.82fr; gap: 48px; }
}
.hero h1 {
  font-size: clamp(2.1rem, 6.5vw, 3.1rem); line-height: 1.15; font-weight: 800; color: var(--white);
  letter-spacing: -0.025em; margin-bottom: 22px; max-width: 620px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero__sub { font-size: 1.05rem; line-height: 1.6; color: #F1F6F9; margin-bottom: 32px; max-width: 530px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
/* Core zeroes margin-bottom on the last child of a flow group (specificity 0,1,0, printed after this file), so bottom margins on last children use two classes. */
.hero .hero__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.btn--hero > .wp-block-button__link { background: var(--gold); border-color: var(--gold); color: var(--charcoal); padding: 13px 28px; font-size: 0.975rem; gap: 8px; }
.btn--hero > .wp-block-button__link:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn--call > .wp-block-button__link {
  gap: 8px; padding: 12px 24px; font-size: 0.95rem;
  border: 1.5px solid rgba(255, 255, 255, 0.75); background: transparent; color: var(--white);
}
.btn--call > .wp-block-button__link:hover { color: var(--gold); border-color: var(--gold); }
.btn--call > .wp-block-button__link::before { width: 17px; height: 17px; }
/* Phones: the fixed header already carries Enquire now and the call icon, and the review card pushed the trust strip off the first screen.
   From 768px (iPad) there is room for the buttons, so they come back; the review card stays desktop only. */
@media (max-width: 767.98px) { .hero .hero__ctas { display: none; } }
@media (max-width: 991.98px) { .hero .hero-card { display: none; } }

.hero-card { justify-self: end; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22); padding: 28px 24px; max-width: 390px; width: 100%; color: var(--charcoal); }
/* Stars are CSS, the words "5 out of 5 stars" stay in the page for screen readers. */
.hero-card__stars { color: var(--gold-hero); font-size: 1.15rem; letter-spacing: 0.25em; margin-bottom: 14px; }
.hero-card__stars::before { content: "\2605\2605\2605\2605\2605"; content: "\2605\2605\2605\2605\2605" / ""; }
.hero-card .hero-card__quote { font-size: 0.95rem; font-weight: 600; color: var(--charcoal); line-height: 1.55; margin: 0 0 20px; padding: 0; border: 0; }
.hero-card .hero-card__who { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #ECE8E1; margin-bottom: 18px; }
.hero-card__who::after { content: ""; width: 22px; height: 22px; flex: none; background: url("assets/icons/tick.svg") center / contain no-repeat; }
.who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #F1ECE4; color: var(--navy); font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex: none; }
.who__name { font-size: 0.925rem; font-weight: 800; color: var(--navy); line-height: 1.2; }
.who__meta { font-size: 0.775rem; color: #7B7871; font-weight: 500; }

/* ---------- Trust strip ---------- */
/* Icons are theme SVG files with the colours baked in (circle #E7F6ED, glyph #26A669, the theme's green and green-bg). */
.trust { background: var(--white); border-bottom: 1px solid #ECE7DE; min-height: 64px; padding: 16px 0; display: flex; align-items: center; }
.trust__list { list-style: none; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 16px 40px; flex-wrap: wrap; font-size: 0.95rem; color: var(--navy); }
/* Plain inline text, not flex: a flex li would turn each <strong> into its own item and space the words apart. */
.trust__item { white-space: nowrap; line-height: 24px; }
.trust__item strong { font-weight: 800; }
.trust__item::before { content: ""; display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin-right: 10px; background: center / contain no-repeat; }
.trust__item--shield::before { background-image: url("assets/icons/trust-shield.svg"); }
.trust__item--clock::before { background-image: url("assets/icons/trust-clock.svg"); }
.trust__item--check::before { background-image: url("assets/icons/trust-shield-check.svg"); }
/* Trustpilot claim: five green star tiles before the text, one green star after. Unverified claim, see the go-live checklist. */
.trust__item--tp::before { width: 108px; height: 22px; background-image: url("assets/icons/trust-stars.svg"); }
.trust__item--tp::after { content: "\2605"; content: "\2605" / ""; color: #00B67A; margin-left: 4px; }
.trust__item--logo::before { content: none; }
.trust__list:has(.trust__logo) { align-items: baseline; }
/* The global img rule is display: block, which would drop the text under the logo and ignore text-align. */
/* Both logos have their wordmark baseline about 20% up from the bottom of the image, so dropping the image by that much puts the text on the same baseline as the wordmark. */
.trust { --logo-h: 30px; }
.trust__logo { display: inline-block; height: var(--logo-h); width: auto; max-width: none; vertical-align: calc(var(--logo-h) * -0.2); margin-right: 8px; }
/* Phones and iPad (up to 1179px, below that all four fit in one row): one claim at a time, sliding up in a loop (3s each, 12s cycle). Pure CSS. */
@media (max-width: 1179.98px) {
  .trust__list { position: relative; height: 40px; overflow: hidden; padding: 0 12px; }
  .trust__item { position: absolute; inset: 0; text-align: center; line-height: 40px; opacity: 0; animation: trust-tick 12s ease-in-out infinite; }
  .trust__item:nth-child(2) { animation-delay: 3s; }
  .trust__item:nth-child(3) { animation-delay: 6s; }
  .trust__item:nth-child(4) { animation-delay: 9s; }
}
@media (max-width: 399.98px) { .trust { --logo-h: 24px; } }
@media (max-width: 359.98px) { .trust__list { font-size: 0.8rem; } .trust__item--tp::before { width: 90px; } }
@keyframes trust-tick {
  0% { opacity: 0; transform: translateY(14px); }
  3%, 22% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateY(-14px); }
}
/* Reduced motion: still one at a time, but a plain fade with no sliding. */
@keyframes trust-fade { 0% { opacity: 0; } 3%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (max-width: 1179.98px) and (prefers-reduced-motion: reduce) { .trust__item { animation-name: trust-fade; } }

/* ---------- What it covers ---------- */
/* The export gave this section 20px gutters at every width. Each row is a core Group with a core Image block and a text Group. The text sits in a white card so it reads as the partner of its image. Flip rows put the image on the right at desktop width. */
.covers { background: #FFFBF0; padding: 64px 0; }
.covers .container { padding: 0 20px; }
.covers .head { margin-bottom: 40px; }
.covers .lede { font-size: 15px; line-height: 1.6; }
.services { display: grid; gap: 40px; }
.service { display: grid; gap: 20px; align-items: center; }
.service__img { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: #EAE6DF; box-shadow: 0 0 0 10px rgba(245, 195, 68, 0.25); }
.service__img img { width: 100%; height: 100%; object-fit: cover; }
.service h3 { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: 0; line-height: 1.3; }
.service p { font-size: 16px; color: var(--charcoal-muted); line-height: 1.6; }
.service__text h3::before { content: ""; display: block; width: 36px; height: 3px; border-radius: var(--radius-pill); background: var(--gold); margin-bottom: 14px; }
.service__text { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 24px 22px; }
@media (min-width: 768px) {
	.service__text { padding: 40px 44px; }
	.service { grid-template-columns: 1fr 1fr; gap: 56px; }
	.service--flip .service__img { order: 2; }
	.service--flip .service__text { order: 1; }
}

/* ---------- How it works ---------- */
/* Each step is one Group block (a core List item cannot hold a heading). The number is a CSS counter on ::before, so it cannot be edited out of order, and the connector is ::after. */
.container--narrow { max-width: 900px; padding: 0 20px; }
.how { background: var(--white); }
.how .head { margin-bottom: 48px; }
.steps { display: flex; flex-direction: column; gap: 24px; counter-reset: step; }
.step { position: relative; margin-left: 80px; counter-increment: step; background: var(--white); border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); }
.step::before {
	content: counter(step); position: absolute; top: 3px; left: -75px; width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; background: var(--navy); color: #D4A93C; font-weight: 800; font-size: 1.15rem;
	box-shadow: 0 0 0 4px #F5EFE6, 0 0 0 6px var(--white), 0 2px 8px 4px rgba(0, 0, 0, 0.08);
}
.step:not(:last-child)::after { content: ""; position: absolute; left: -54px; top: 55px; bottom: -25px; width: 2px; background: var(--navy); }
.step h3 { font-size: 1.15rem; margin-bottom: 6px; letter-spacing: 0; }
.step p { font-size: 0.9rem; color: var(--charcoal-muted); line-height: 1.55; }
.how .how__cta { display: flex; justify-content: center; margin-top: 48px; }
.how__cta .btn--arrow > .wp-block-button__link::after {
	content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
	-webkit-mask: url("assets/icons/arrow.svg") center / contain no-repeat; mask: url("assets/icons/arrow.svg") center / contain no-repeat;
}

/* ---------- Cost ---------- */
/* The rates are Group rows of three Paragraphs (label, price with a <small> unit, optional note): core has no definition list block. */
.pricing { background: #FAF6F0; }
.pricing__head { max-width: 720px; margin-bottom: 24px; }
.cost-card { background: var(--navy); border-radius: var(--radius-lg); padding: 40px; box-shadow: 0 16px 36px rgba(30, 48, 69, 0.25); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.cost-card__main { flex: 1 1 340px; min-width: 260px; }
.cost-card h3 { font-size: 26px; color: var(--white); margin-bottom: 12px; line-height: 1.3; letter-spacing: 0; }
.cost-card__main p { font-size: 14px; line-height: 1.6; color: var(--grey-on-dark); max-width: 560px; margin-bottom: 24px; }
.btn--soft > .wp-block-button__link { background: var(--gold); border-color: var(--gold); color: var(--charcoal); font-size: 14px; padding: 12px 24px; gap: 8px; }
.btn--soft > .wp-block-button__link:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.rates { width: 100%; max-width: 280px; flex: none; }
.rates__label { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--grey-on-dark); margin-bottom: 4px; }
.rates__value { font-size: 16px; font-weight: 700; color: var(--gold-on-dark); }
.rates__value small { font-size: 13px; font-weight: 500; color: var(--grey-on-dark); }
.rates__row--lead .rates__value { font-size: 22px; font-weight: 800; line-height: 1.2; }
.rates__row--lead .rates__value small { font-size: 14px; }
.rates .rates__note { font-size: 12px; font-weight: 400; color: var(--grey-on-dark); margin-top: 3px; }
.rates__row--lead .rates__note { line-height: 1.2; }
.rates__row + .rates__row { border-top: 1px solid rgba(232, 226, 217, 0.15); margin-top: 16px; padding-top: 16px; }
/* Below 780px the card wraps to one column: text, then the rates, then the button under the hourly rate. */
@media (max-width: 779.98px) {
	.cost-card { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
	.cost-card__main { display: contents; }
	.cost-card__main .wp-block-buttons { order: 1; align-self: flex-start; margin-top: 28px; }
}
/* Small phones: less side padding so "Get a Personalised Quote" stays on one line. */
@media (max-width: 379.98px) {
	.cost-card { padding: 32px 20px; }
	.cost-card__main .btn > .wp-block-button__link { padding-inline: 16px; }
}

/* ---------- Care that fits ---------- */
/* Shared by the Home page and How it works. A round photo with six cards on a 600px ring around it from 901px up, stacked below. Cards sit at fixed hexagon offsets (--x, --y from the ring centre). The icon is a CSS mask on ::after in the circle, picked by the how-ico--<icon> variable. */
.fits { background: var(--white); }
.fits__orbit { margin-top: 48px; display: grid; gap: 16px; justify-items: stretch; }
@media (min-width: 640px) { .fits__orbit { grid-template-columns: 1fr 1fr; gap: 20px; } }
.fits .fits__photo { position: relative; grid-column: 1 / -1; justify-self: center; width: 280px; margin: 0 0 24px; padding: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 20px 48px rgba(30, 48, 69, 0.14), 0 0 0 10px rgba(245, 195, 68, 0.16); }
@media (min-width: 640px) { .fits .fits__photo { width: 340px; } }
.fits__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.fits__card { padding: 20px; border-radius: 20px; background: var(--cream); border: 1px solid var(--border-soft); box-shadow: 0 8px 24px rgba(30, 48, 69, 0.06); transition: box-shadow 0.3s; }
.fits__card:hover { box-shadow: 0 16px 36px rgba(30, 48, 69, 0.1); }
.fits__ico { position: relative; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--white); border: 1px solid var(--border-soft); }
.fits__ico::after { content: ""; position: absolute; inset: 0; background: var(--navy); -webkit-mask: var(--icon) center / 20px no-repeat; mask: var(--icon) center / 20px no-repeat; }
.fits__card h3 { font-size: 1rem; line-height: 1.25; color: var(--navy); margin-bottom: 6px; letter-spacing: -0.01em; }
.fits__card p { font-size: 0.9rem; line-height: 1.5; color: var(--charcoal-muted); }
.fits__card--navy { background: var(--navy); border-color: var(--navy); }
.fits__card--navy h3 { color: var(--white); }
.fits__card--navy p { color: #C9D5DF; }
.fits__card--navy .fits__ico { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.fits__card--navy .fits__ico::after { background: var(--gold); }
@media (min-width: 901px) {
	.fits__orbit { display: block; position: relative; width: 780px; max-width: 100%; height: 760px; margin: 8px auto 0; }
	.fits__orbit::before { content: ""; position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(30, 48, 69, 0.14); }
	.fits .fits__photo { position: absolute; left: 50%; top: 50%; width: 380px; margin: 0; padding: 10px; transform: translate(-50%, -50%); box-shadow: 0 24px 64px rgba(30, 48, 69, 0.12), 0 0 0 14px rgba(245, 195, 68, 0.16); }
		.fits__card { position: absolute; left: 50%; top: 50%; width: 260px; transform: translate(-50%, -50%) translate(var(--x), var(--y)); }
	.fits__card:nth-of-type(1) { --x: 0; --y: -300px; }
	.fits__card:nth-of-type(2) { --x: 260px; --y: -150px; }
	.fits__card:nth-of-type(3) { --x: 260px; --y: 150px; }
	.fits__card:nth-of-type(4) { --x: 0; --y: 300px; }
	.fits__card:nth-of-type(5) { --x: -260px; --y: 150px; }
	.fits__card:nth-of-type(6) { --x: -260px; --y: -150px; }
}

/* ---------- UK band ---------- */
.band { background: var(--navy); min-height: 120px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.band h2 { font-size: 28px; font-weight: 800; color: var(--white); margin-bottom: 10px; letter-spacing: 0; line-height: 1.25; }
.band h2::before { content: ""; display: block; width: 36px; height: 3px; border-radius: var(--radius-pill); background: var(--gold); margin: 0 auto 16px; }
.band p { font-size: 15px; font-weight: 500; color: #C9D4E2; max-width: 600px; line-height: 1.5; }

/* ---------- Reviews ---------- */
.reviews { background: var(--white); }
.reviews__head { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
@media (min-width: 768px) { .reviews__head { flex-direction: row; align-items: flex-end; } }
.reviews__intro { max-width: 580px; }
.reviews__head h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.reviews__head p { font-size: 14px; color: var(--slate); max-width: 520px; }
.rating { background: var(--white); border: 1px solid #E8E2D9; border-radius: var(--radius-pill); padding: 8px 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); display: inline-flex; align-items: center; gap: 8px; flex: none; }
.rating .rating__text { font-size: 13px; color: var(--navy); }
.rating strong { font-weight: 700; }
.rating strong span { font-weight: 500; color: var(--slate); }
/* Stars are one SVG mask, the words "5 stars" stay in the page for screen readers. */
.stars::before { content: ""; display: block; width: min(92px, calc(19px * var(--stars, 5) - 3px)); height: 16px; background: var(--gold-soft); -webkit-mask: url("assets/icons/stars.svg") 0 0 / 92px 16px no-repeat; mask: url("assets/icons/stars.svg") 0 0 / 92px 16px no-repeat; }
/* Carousel (assets/reviews.js): swipe or dots, auto-advance. One wide card below 992px, three across from 992px. The vertical padding keeps the card shadow from being clipped by the scroller. */
.review-carousel > .review-track { position: relative; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 6px 18px; margin-block: -6px 0; }
.review-track::-webkit-scrollbar { display: none; }
.review-track:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.review { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; background: var(--white); border: 1px solid #E8E2D9; border-radius: 12px; padding: 26px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; }
@media (min-width: 992px) { .review { flex-basis: calc((100% - 48px) / 3); } }
.review-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.review-ctrl[hidden] { display: none; }
.review-dots { display: flex; }
.review-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.review-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: rgba(30, 48, 69, 0.22); transition: width 0.25s ease, background-color 0.25s ease; }
.review-dots button[aria-current="true"]::before { width: 18px; background: var(--navy); }
.review-dots button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.review .stars { margin-bottom: 16px; }
.review blockquote { font-size: 14px; font-style: italic; color: #2D3748; line-height: 1.6; margin: 0 0 22px; padding: 0; border: 0; flex-grow: 1; }
.review blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
/* Long reviews stop at six lines so every card stays the same size. Hover or keyboard focus shows the full text, scrolling inside the same space. */
.review:hover blockquote p, .review blockquote:focus p { display: block; max-height: 9.6em; overflow-y: auto; scrollbar-width: thin; }
.review blockquote:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.review__by { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(232, 226, 217, 0.7); padding-top: 16px; }
.review .review__name { font-size: 14px; font-weight: 700; color: var(--navy); }
.review .avatar { width: 38px; height: 38px; background: #F2EDE6; font-weight: 700; font-size: 13px; }
/* One wide card at a time on big phones and iPad: roomier padding and larger text so the line length stays readable. */
@media (min-width: 600px) and (max-width: 991.98px) {
  .review { padding: 36px 40px; }
  .review blockquote { font-size: 18px; line-height: 1.65; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--cream); }
.faq .faq__list { max-width: 860px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-soft); overflow: hidden; transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.faq details[open] { background: var(--navy); border-color: var(--navy); box-shadow: var(--shadow-lg); }
.faq summary {
  list-style: none; padding: 22px 26px; font-size: 1.125rem; font-weight: 500; color: var(--navy);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; user-select: none;
  transition: color 250ms ease;
}
.faq details[open] summary { color: var(--white); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
/* The gold disc and its chevron are drawn here, the chevron SVG has the navy baked in. */
.faq summary::after { content: ""; width: 36px; height: 36px; border-radius: 50%; background: var(--gold) url("assets/icons/chevron.svg") center / 18px no-repeat; transition: transform 250ms ease; flex: none; }
.faq details[open] summary::after { transform: rotate(180deg); }
/* No negative margin: it pulled the top border outside the clipped details content, so the divider never showed. */
.faq .faq__a { position: relative; padding: 16px 26px 24px; margin-top: 0; color: var(--charcoal-muted); font-size: 0.975rem; line-height: 1.65; }
.faq .faq__a::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 1px; background: var(--border-subtle); }
.faq details[open] .faq__a { color: color-mix(in srgb, var(--cream) 85%, transparent); }
.faq details[open] .faq__a::before { background: color-mix(in srgb, var(--gold) 35%, transparent); }
/* Smooth open/close where the browser supports animating details content (Chromium); others open instantly. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 280ms cubic-bezier(0.2, 0.8, 0.2, 1), content-visibility 280ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- Enquiry ----------
   Ravi's form design (../source/enquiry-form.html). It has its own palette, kept scoped here so it can be swapped to the page tokens in one place. */
.enquiry {
  --eq-ink: #0E2A36;
  --eq-blue: #1C3D5A;
  --eq-gold: #DAA520;
  --eq-bg: #FAF7F2;
  --eq-sel: #F1EDE8;
  --eq-chip: #F5F2ED;
  --eq-line: #E8E2D9;
  --eq-muted: #6B6560;
  --eq-faint: #8A9BA8;
  --eq-done: #0E4F4F;
  background: var(--white); /* the FAQ above is cream, so the form alternates to white */
  padding: 64px 24px;
}
@media (min-width: 768px) { .enquiry { padding: 80px; } }
.eq { max-width: 720px; margin: 0 auto; }

/* Progress: under the Back / Continue row on phones, above the question from 768px (iPad, desktop). Markup is first in the card, `order` moves it. The `.eq-card` prefix lifts specificity: core zeroes the first child's top margin in a flow Group, and the progress is first. */
.eq-card .eq-progress { order: 1; display: flex; align-items: flex-start; width: 100%; max-width: 640px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid var(--eq-sel); }
@media (min-width: 768px) { .eq-card .eq-progress { order: 0; margin: 0 auto 32px; padding: 0 0 24px; border-top: 0; border-bottom: 1px solid var(--eq-sel); } }
.eq-mark { display: flex; align-items: flex-start; flex: 1; }
.eq-mark:last-child { flex: none; }
.eq-mark__col { display: flex; flex-direction: column; align-items: center; flex: none; }
.eq-mark__ring {
  width: 48px; height: 48px; border-radius: 50%; background: var(--white); border: 1px solid var(--eq-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center;
}
.eq-mark__n {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--eq-chip); color: var(--eq-ink);
  font: inherit; font-size: 14px; font-weight: 700; cursor: default; transition: all 0.3s ease;
}
.eq-mark.is-current .eq-mark__n, .eq-mark.is-done .eq-mark__n { background: var(--eq-ink); color: var(--white); }
.eq-mark__label {
  margin-top: 10px; max-width: 80px; text-align: center; font-size: 10px; line-height: 1.2; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 500; color: var(--eq-faint); transition: color 0.3s ease;
}
.eq-mark__line { flex: 1; height: 2px; margin: 24px 4px 0; background: rgba(232, 226, 217, 0.4); transition: background 0.3s ease; }
@media (min-width: 768px) { .eq-mark__line { margin-left: 8px; margin-right: 8px; } }
.eq-mark.is-current .eq-mark__label, .eq-mark.is-done .eq-mark__label { color: var(--eq-ink); font-weight: 700; }
.eq-mark.is-done .eq-mark__line { background: var(--eq-done); }
.eq-mark.is-done .eq-mark__n { cursor: pointer; }
.eq-mark.is-done .eq-mark__n:hover { transform: scale(0.98); }
.eq-mark__n:focus-visible { outline: 3px solid var(--eq-gold); outline-offset: 3px; }

.eq-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--eq-line); box-shadow: 0 12px 32px rgba(28, 61, 90, 0.08); padding: 32px; }
@media (min-width: 768px) { .eq-card { padding: 40px; } }
/* Phones: five circles must fit the card's inner width. Smaller rings, and only the current step keeps its label (pulled out of the layout so it cannot widen its column). */
@media (max-width: 479px) {
  .eq-card { padding: 24px 20px; }
  .eq-progress { padding-bottom: 32px; }
  .eq-mark__col { position: relative; }
  .eq-mark__ring { width: 40px; height: 40px; }
  .eq-mark__n { width: 30px; height: 30px; }
  .eq-mark__line { margin: 20px 2px 0; }
  .eq-mark__label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 80px; margin-top: 8px; }
  .eq-mark:not(.is-current) .eq-mark__label { display: none; }
}

.eq-head { margin-bottom: 32px; } /* title and lede use the page's .head / .title / .lede, same as the FAQ */
.eq-head .lede a { font-weight: 700; color: var(--eq-blue); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--eq-gold); text-decoration-thickness: 2px; text-underline-offset: 2px; }

.eq-steps { min-height: 280px; }
.eq-step { border: 0; min-width: 0; }
.eq-step[hidden] { display: none; }
.eq-title { float: left; width: 100%; font-size: 20px; font-weight: 700; color: var(--eq-blue); line-height: 1.5; letter-spacing: -0.02em; margin-bottom: 6px; }
.eq-title:focus { outline: none; }
.eq-title + * { clear: both; }
.eq-sub { font-size: 14px; line-height: 1.5; color: var(--eq-muted); margin-bottom: 20px; }
.eq-sub--lg { margin-bottom: 24px; }

.eq-opts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.eq-other { margin-top: 24px; } /* space below the Someone Else card, before its text field */
@media (min-width: 768px) { .eq-opts--2 { grid-template-columns: 1fr 1fr; } }
.eq-opt {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer;
  border: 1px solid var(--eq-line); border-radius: 10px; padding: 16px; background: var(--white); transition: all 0.2s ease;
}
.eq-opt input, .eq-pill input, .eq-time input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.eq-opt__text b { display: block; font-size: 15px; font-weight: 600; color: var(--charcoal); line-height: 1.5; }
.eq-opt__text small { display: block; font-size: 13px; color: var(--eq-muted); margin-top: 2px; line-height: 1.5; }
.eq-opt--sm .eq-opt__text b { font-size: 14px; }
.eq-opt--sm .eq-opt__text small { font-size: 12px; }
.eq-opt__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--eq-line); background: var(--white); flex: none; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
/* No tap highlight: iOS and Android draw a rounded flash on tap. Hover only where a pointer exists, so the tint does not stick after a tap. */
.eq-opt, .eq-pill, .eq-time { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .eq-opt:hover { border-color: rgba(28, 61, 90, 0.5); background: var(--eq-bg); } }
.eq-opt:has(input:checked) { border-color: var(--eq-blue); background: var(--eq-sel); box-shadow: 0 2px 12px rgba(28, 61, 90, 0.08); }
.eq-opt:has(input:checked) .eq-opt__dot { border-color: var(--eq-blue); background: var(--eq-blue); }
.eq-opt:has(input:checked) .eq-opt__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--eq-gold); }
.eq-opt:has(input:focus-visible), .eq-pill:has(input:focus-visible), .eq-time:has(input:focus-visible) { outline: 3px solid var(--eq-gold); outline-offset: 3px; }

.eq-picked { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--eq-ink); margin-top: 4px; }
.eq-picked:empty { display: none; }
.eq-group { margin-bottom: 20px; }
.eq-group__label { font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--eq-muted); margin-bottom: 12px; }

.eq-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.eq-group__head .eq-group__label { margin-bottom: 0; }
.eq-swipe { font-size: 12px; font-weight: 500; color: var(--eq-muted); white-space: nowrap; }
.eq-group.is-end .eq-swipe { visibility: hidden; } /* hidden, not removed, so the label row does not change height */

/* Day pills: one row, scrolls sideways on phones. The padding/negative margin leaves room for the focus ring inside the scroller. */
.eq-pills { display: flex; gap: 10px; overflow-x: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }
.eq-group:not(.is-end) .eq-pills { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.eq-pill {
  position: relative; display: block; flex: 1 0 90px; cursor: pointer; text-align: center; white-space: nowrap;
  background: var(--white); border: 1px solid var(--eq-line); border-radius: 12px;
  padding: 12px 18px; transition: all 0.2s ease;
}
.eq-pill b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--eq-ink); }
.eq-pill small { display: block; font-size: 12px; font-weight: 500; margin-top: 2px; line-height: 1.3; color: var(--eq-muted); }
@media (hover: hover) { .eq-pill:hover { border-color: rgba(14, 42, 54, 0.35); background: var(--eq-bg); } }
.eq-pill:has(input:checked) { background: var(--eq-bg); border-color: var(--eq-ink); box-shadow: inset 0 0 0 0.5px var(--eq-ink); }

/* Time cards: icon, two lines, check. Selected is a navy border all round (the inset shadow makes it 1.5px without shifting layout). */
.eq-times { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .eq-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eq-time {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--white); border: 1px solid var(--eq-line); border-radius: 12px; padding: 14px 16px; transition: all 0.2s ease;
}
.eq-time__ico { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--eq-sel); color: var(--eq-ink); }
.eq-time__ico .icon { width: 18px; height: 18px; }
.eq-time__text { flex: 1; min-width: 0; }
.eq-time__text b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--eq-ink); }
.eq-time__text small { display: block; font-size: 12px; font-weight: 500; margin-top: 2px; line-height: 1.3; color: var(--eq-muted); }
.eq-time__check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--eq-ink); color: var(--white); opacity: 0; transition: opacity 0.2s ease; }
.eq-time__check .icon { width: 12px; height: 12px; stroke-width: 3; }
@media (hover: hover) { .eq-time:hover { border-color: rgba(14, 42, 54, 0.35); background: var(--eq-bg); } }
.eq-time:has(input:checked) { background: var(--eq-bg); border-color: var(--eq-ink); box-shadow: inset 0 0 0 0.5px var(--eq-ink); }
.eq-time:has(input:checked) .eq-time__check { opacity: 1; }

.eq-fields { display: grid; gap: 16px; }
.eq-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .eq-row { grid-template-columns: 1fr 1fr; } }
.eq-field { min-width: 0; }
.eq-label { display: block; font-size: 13px; font-weight: 600; color: var(--eq-blue); margin-bottom: 6px; }
.eq-label--opt { font-weight: 500; color: var(--eq-muted); }
.eq-label__note { font-weight: 400; font-size: 12px; color: var(--eq-muted); margin-left: 4px; }
.eq-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.025em; background: var(--eq-sel); color: var(--eq-muted); padding: 2px 6px; border-radius: 4px; margin-left: 4px; }
.eq-input {
  display: block; width: 100%; font-family: var(--font-main); font-size: 15px; color: var(--charcoal); background: var(--white);
  border: 1px solid var(--eq-line); border-radius: 10px; padding: 14px 16px; line-height: 1.5; transition: all 0.2s ease;
}
.eq-input::placeholder { color: var(--eq-muted); opacity: 1; }
.eq-input:focus { outline: none; border-color: var(--eq-blue); box-shadow: 0 0 0 2px rgba(28, 61, 90, 0.1); }
.eq-input[aria-invalid="true"] { border-color: var(--eq-blue); }
.eq-input--area { font-size: 14px; padding: 12px 16px; resize: none; }
.eq-combo { position: relative; }
.eq-list {
  position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin-top: 4px; padding: 4px;
  max-height: 240px; overflow-y: auto; background: var(--white); border: 1px solid var(--eq-line); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.eq-list li { padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--eq-ink); cursor: pointer; }
.eq-list li:hover, .eq-list li[aria-selected="true"] { background: var(--eq-bg); }
.eq-err { font-size: 12px; color: var(--eq-blue); margin-top: 6px; }
.eq-err[hidden] { display: none; }
.eq-note { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-size: 12px; color: var(--eq-muted); }
.eq-note .icon { width: 14px; height: 14px; stroke-width: 1.8; }

.eq-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--eq-sel); }
@media (max-width: 479px) { .eq-nav { flex-direction: column-reverse; gap: 8px; } .eq-btn { width: 100%; } }
.eq-back { font: inherit; font-size: 14px; font-weight: 500; padding: 8px; background: none; border: 0; color: var(--eq-muted); cursor: pointer; transition: color 0.2s ease; }
.eq-back:hover { color: var(--eq-blue); }
/* Step 1 hides Back, so the forward button keeps the right edge. */
.eq-nav > .eq-btn { margin-left: auto; }
.eq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  padding: 14px 28px; border-radius: var(--radius-pill); border: 1px solid var(--gold); background: var(--gold); color: var(--charcoal);
  box-shadow: 0 4px 14px rgba(245, 195, 68, 0.35); transition: all 0.2s ease;
}
.eq-btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.eq-btn:disabled { background: var(--eq-sel); border-color: var(--eq-line); color: var(--eq-muted); box-shadow: none; cursor: not-allowed; }
.eq-btn[hidden] { display: none; }
.eq-back:focus-visible, .eq-btn:focus-visible, .eq-again:focus-visible { outline: 3px solid var(--eq-gold); outline-offset: 3px; }

.eq-done { text-align: center; padding: 32px 0; }
.eq-done[hidden] { display: none; }
.eq-done__tick { width: 64px; height: 64px; border-radius: 50%; background: rgba(218, 165, 32, 0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--eq-blue); }
.eq-done__h { font-size: 24px; font-weight: 700; color: var(--eq-blue); margin-bottom: 8px; }
.eq-done__p { font-size: 15px; color: var(--eq-muted); line-height: 1.625; max-width: 420px; margin: 0 auto 24px; }
.eq-done__p b { font-weight: 600; color: var(--charcoal); }
.eq-next { max-width: 420px; margin: 0 auto; text-align: left; background: var(--eq-sel); border: 1px solid var(--eq-line); border-radius: 12px; padding: 16px; font-size: 13px; color: var(--eq-muted); line-height: 1.625; }
.eq-next__h { font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.eq-next li::before { content: "- "; }
.eq-next__call { margin-top: 12px; font-size: 12px; }
.eq-next__call a { font-weight: 700; color: var(--eq-blue); text-decoration: underline; }
.eq-preview { margin-top: 16px; font-size: 12px; color: var(--eq-muted); }
.eq-again { margin-top: 24px; font: inherit; font-size: 13px; color: var(--eq-muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #CAD5DC; padding: 72px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-logo a { display: inline-block; }
/* Core's default-size rule (width 120px) is (0,2,1), the extra class lifts this over it. The build's logo is an inline image in a line of normal height,
   so it has a descender gap under it that core's line-height 0 and display block remove, and the rest of the column sits on it. */
.site-footer .footer-logo.wp-block-site-logo { line-height: inherit; }
.site-footer .footer-logo.wp-block-site-logo img { display: inline; height: 52px; width: auto; }
.footer-about { margin-top: 16px; font-size: 0.9rem; color: #9EAFBA; line-height: 1.6; max-width: 320px; }
.footer-cqc { margin-top: 20px; font-size: 0.85rem; color: #7D8F9A; }
.footer-social { display: flex; gap: 12px; margin-top: 24px; }
/* Colour goes on the li: core's icon rules force the link and svg to currentColor, and the logos-only style sets a brand colour on the li. */
.footer-social .wp-social-link { color: #B9C8D2; transition: color 0.2s ease; }
.footer-social .wp-social-link:hover { color: var(--gold); }
.footer-social .wp-social-link a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; transition: border-color 0.2s ease; }
.footer-social .wp-social-link:hover a { border-color: var(--gold); }
/* Core's glyphs fill 20 of 24 units, the build's fill their whole box, so 22px here matches the build's 18px. */
.footer-social .wp-social-link svg { width: 22px; height: 22px; }
.footer-title { font-size: 1rem; color: var(--white); margin-bottom: 20px; letter-spacing: 0.02em; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 0.9rem; color: #B9C8D2; }
.footer-links a:hover { color: var(--gold); }
.footer-links strong { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 32px; display: flex; flex-direction: column; gap: 16px; font-size: 0.825rem; color: #7D8F9A; }
.footer-legal .wp-block-navigation__container { gap: 8px 20px; }
/* Core sets the link to inherit at (0,3,0). */
.footer-legal .wp-block-navigation-item .wp-block-navigation-item__content.wp-block-navigation-item__content { color: #9EAFBA; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }

/* ---------- Contact page ---------- */
/* Ported from the Contact mockup (.claude/features/contact/build/contact.css). Cards are Groups, the phone, email and WhatsApp links come from shortcodes, icons are CSS masks. */
.wp-block-cover.page-hero { min-height: 0; padding: 120px 0 56px; align-items: flex-start; justify-content: flex-start; overflow: hidden; }
@media (min-width: 992px) { .wp-block-cover.page-hero { padding: 164px 0 88px; } }
.page-hero .wp-block-cover__inner-container { width: 100%; color: var(--white); }
.page-hero h1 { color: var(--white); font-size: 2.3rem; font-weight: 800; max-width: 20ch; }
@media (min-width: 768px) { .page-hero h1 { font-size: 3.2rem; } }
.page-hero .container > p { margin-top: 16px; max-width: 52ch; font-size: 1.1rem; color: #F1F6F9; }
.crumbs { margin-bottom: 20px; font-size: 0.875rem; font-weight: 600; color: var(--gold-on-dark); }
.crumbs p { display: flex; gap: 8px; }
.crumbs a { color: rgba(255, 255, 255, 0.78); }
.crumbs a:hover { color: var(--gold); }

/* Trust strip with three plain claims: the one-at-a-time ticker is built for four, so all three show at every width. */
.trust__item--lock::before { background-image: url("assets/icons/trust-lock.svg"); }
.trust__item--tick::before { background-image: url("assets/icons/tick.svg"); }
@media (max-width: 1179.98px) {
  .trust--static .trust__list { position: static; height: auto; overflow: visible; padding: 0 20px; }
  .trust--static .trust__item { position: static; inset: auto; opacity: 1; animation: none; line-height: 24px; text-align: left; }
}
@media (max-width: 767.98px) {
  .trust--static .trust__list { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; gap: 12px; }
  .trust--static .trust__item { white-space: normal; }
}

/* Ways to reach us: white cards on the cream page. */
.reach {
  /* Hand-drawn gold underline (a wobbly marker stroke) for the links in the cards. */
  --sketch: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 12%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 8.5C28 4 52 10.5 88 6.5S160 3.5 197 7.5%22 fill=%22none%22 stroke=%22%23F5C344%22 stroke-width=%223%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  --sketch-hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 12%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 8.5C28 4 52 10.5 88 6.5S160 3.5 197 7.5%22 fill=%22none%22 stroke=%22%23EAB228%22 stroke-width=%223%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  --sketch-lg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 12%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 8.5C28 4 52 10.5 88 6.5S160 3.5 197 7.5%22 fill=%22none%22 stroke=%22%23F5C344%22 stroke-width=%225%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  --sketch-lg-hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 12%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 8.5C28 4 52 10.5 88 6.5S160 3.5 197 7.5%22 fill=%22none%22 stroke=%22%23EAB228%22 stroke-width=%225%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  padding: 64px 0;
}
@media (min-width: 992px) { .reach { padding: 96px 0; } }
.reach__top { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 768px) { .reach__top { grid-template-columns: 1fr 1fr; } .rcard--phone { grid-column: 1 / -1; } }
@media (min-width: 992px) { .reach__top { grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; margin-bottom: 24px; } .rcard--phone { grid-column: auto; } }
.rcard { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 1px 3px rgba(30, 48, 69, 0.04); }
@media (min-width: 768px) { .rcard { padding: 36px; } }
.reach__kicker { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--charcoal-muted); margin-bottom: 16px; }
.reach__phone { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--navy); }
@media (min-width: 768px) { .reach__phone { font-size: 3.2rem; } }
.reach__phone a { display: inline-block; padding-bottom: 0.2em; background: var(--sketch-lg) no-repeat left bottom / 100% 0.28em; }
.reach__phone a:hover { background-image: var(--sketch-lg-hover); }
.reach__hours { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); }
.reach__hours::before, .reach__ico::before {
  content: ""; flex: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.reach__hours { --icon: url("assets/icons/clock.svg"); }
.reach__hours::before { width: 20px; height: 20px; color: var(--green); }
.reach__note { margin-top: 12px; max-width: 42ch; color: var(--charcoal-muted); }
.reach__call { margin-top: 24px; }
@media (min-width: 992px) { .reach__call { display: none; } } /* the number is already a big tap target, the button is for phones */

.reach__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #F5EFE6; color: var(--navy); margin-bottom: 24px; }
.reach__ico::before { width: 22px; height: 22px; }
.reach__ico--mail { --icon: url("assets/icons/mail.svg"); }
.reach__ico--whatsapp { --icon: url("assets/icons/whatsapp.svg"); }
.reach__ico--building { --icon: url("assets/icons/building.svg"); }
.reach__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal-muted); }
.reach__val { margin-top: 6px; font-size: 1.15rem; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.reach__val a { padding-bottom: 0.2em; background: var(--sketch) no-repeat left bottom / 100% 0.35em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.reach__val a:hover { background-image: var(--sketch-hover); }
.reach__sub { margin-top: 10px; color: var(--charcoal-muted); }

/* Head office: text on the left, the map filling the right half of the card from 992px. */
.rcard--office { padding: 0; overflow: hidden; display: grid; }
@media (min-width: 992px) { .rcard--office { grid-template-columns: 5fr 6fr; } }
.office__text { padding: 28px; }
@media (min-width: 768px) { .office__text { padding: 40px; } }
.office__addr { font-style: normal; margin-top: 16px; font-size: 1.35rem; font-weight: 700; line-height: 1.4; color: var(--navy); letter-spacing: -0.01em; }
.office__actions { margin-top: 28px; gap: 16px 24px; align-items: center; }
/* The map is a placeholder until the visitor asks for it (map.js swaps in the iframe). */
.office__map { min-height: 300px; background: #EAE6DF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: var(--charcoal-muted); }
.office__map.is-loaded { display: block; padding: 0; }
.office__map iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
@media (min-width: 992px) { .office__map, .office__map iframe { min-height: 420px; } }
.office__map-btn { font: inherit; font-size: 0.95rem; font-weight: 700; padding: 12px 24px; border-radius: var(--radius-pill); border: 2px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; transition: background-color 0.2s ease-in-out; }
.office__map-btn:hover { background: rgba(30, 48, 69, 0.05); }

/* What happens after: three centred steps. Phones stack them with a short connector, from 768px a line joins each number to the next. */
.after { background: var(--cream); padding: 64px 0; }
@media (min-width: 992px) { .after { padding: 96px 0; } }
.after .head { margin-bottom: 40px; }
.after__list { max-width: 1000px; margin: 0 auto; counter-reset: after; }
.after__item { position: relative; counter-increment: after; padding: 0 0 48px; text-align: center; }
.after__item:last-child { padding-bottom: 0; }
.after__item::before {
  content: counter(after); position: relative; z-index: 1;
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--gold); color: var(--charcoal); font-size: 1.25rem; font-weight: 800;
  box-shadow: 0 0 0 6px var(--cream);
}
.after__item:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: 8px; width: 2px; height: 28px; margin-left: -1px;
  background: color-mix(in srgb, var(--navy) 22%, transparent);
}
.after__item h3 { font-size: 1.15rem; margin-bottom: 6px; letter-spacing: 0; }
.after__item p { font-size: 0.95rem; color: var(--charcoal-muted); line-height: 1.6; max-width: 34ch; margin: 0 auto; }
@media (min-width: 768px) {
  .after__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .after__item, .after__item:last-child { padding: 0; }
  .after__item:not(:last-child)::after { left: calc(50% + 34px); right: calc(-50% - 6px); top: 27px; bottom: auto; width: auto; height: 2px; margin: 0; }
}

/* Message form: the single button sits on the right on desktop, full width on phones. */
.eq-nav--end { justify-content: flex-end; }
@media (max-width: 767.98px) { .eq-nav--end .eq-btn { width: 100%; } }

/* Cookie banner: Accept and Reject look the same, so neither is the easier choice. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--navy); color: #CAD5DC; padding: 20px 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: grid; gap: 14px; }
.cookie-banner__copy { display: grid; gap: 6px; }
.cookie-banner__title { color: var(--white); font-weight: 700; font-size: 1rem; margin: 0; }
.cookie-banner__text { font-size: 0.9rem; line-height: 1.6; margin: 0; max-width: 72ch; }
.cookie-banner__text a { color: var(--gold-on-dark); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner__btn { flex: 1 1 180px; min-height: 44px; padding: 10px 20px; border: 2px solid var(--gold); border-radius: var(--radius-pill); background: var(--gold); color: var(--charcoal); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.cookie-banner__btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
@media (min-width: 768px) {
  .cookie-banner__inner { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
  .cookie-banner__copy { display: grid; gap: 6px; }
  .cookie-banner__actions { flex-wrap: nowrap; }
  .cookie-banner__btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Costs page ---------- */
/* Ported from the Costs mockup (.claude/features/costs/build/costs.css). Page hero, crumbs and trust strip come from the Contact section above. Photos are labelled placeholders (no images yet). */
.ph { margin: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--charcoal-muted);
  border: 2px dashed #CFC6B6; border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, #F5EFE6 0 14px, #EFE7DA 14px 28px); }
.ph p { margin: 0; }
.ph > p:first-child { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ph > p:nth-child(2) { font-size: 0.85rem; font-weight: 500; max-width: 28ch; }
.ph--tall { aspect-ratio: 4 / 5; } .ph--wide { aspect-ratio: 16 / 10; } .ph--sq { aspect-ratio: 1; }
/* Image block fills the frame: upload prompt until a photo is added, then cover crop with no dashed frame */
.ph { position: relative; }
.ph .ph__img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.ph__img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ph:has(.ph__img img[src]) { border: 0; background: none; }

/* 1. Price card */
.price__wrap { display: grid; gap: 32px; align-items: center; }
@media (min-width: 992px) { .price { padding: 96px 0; } .price__wrap { grid-template-columns: 5fr 6fr; gap: 72px; } }
.rates3 { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 36px 28px; box-shadow: var(--shadow-lg); }
@media (min-width: 768px) { .rates3 { padding: 44px; } }
.rates3__kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-muted); }
.rates3__title { margin-top: 6px; font-size: 1.8rem; color: var(--navy); letter-spacing: -0.02em; }
.rates3__grid { margin: 28px 0; display: grid; gap: 0; border-top: 3px solid var(--gold); }
@media (min-width: 640px) { .rates3__grid { grid-template-columns: repeat(3, 1fr); } .rates3__item + .rates3__item { border-left: 1px solid var(--border-soft); padding-left: 20px; } }
.rates3__item { padding: 20px 0; }
@media (max-width: 639.98px) { .rates3__item + .rates3__item { border-top: 1px solid var(--border-soft); } }
.rates3__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-muted); }
.rates3__value { margin-top: 6px; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--navy); }
.rates3__value small { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0; color: var(--charcoal-muted); }
.rates3__note { margin-top: 8px; font-size: 0.9rem; color: var(--charcoal-muted); }
.rates3__notes { list-style: none; display: grid; gap: 8px; margin-bottom: 28px; color: var(--charcoal); font-weight: 600; }
.rates3__notes li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 10px; }
@media (max-width: 575.98px) { .rates3 .btn { white-space: nowrap; padding-inline: 18px; font-size: 0.95rem; } .rates3 > .btn { width: 100%; } }

/* Included and plan for separately: two-part sheet with a dashed divider */
.incl { background: var(--cream); }
.incl__sheet { margin-top: 44px; display: grid; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-lg); overflow: hidden; }
@media (min-width: 768px) { .incl__sheet { grid-template-columns: 1fr 1fr; } .incl__col--out { border-left: 2px dashed var(--border-soft); } }
.incl__col { padding: 32px; }
@media (min-width: 768px) { .incl__col { padding: 44px; } }
.incl__col--in { background: #F2F8F4; }
.incl__col h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: 20px; letter-spacing: -0.01em; }
.incl__col ul { list-style: none; display: grid; gap: 14px; }
.incl__col li { position: relative; padding-left: 34px; color: var(--charcoal); }
.incl__col li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 22px; height: 22px; border-radius: 50%; }
.incl__col--in li::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12 10 16 18 8'/%3E%3C/svg%3E") center / 100% no-repeat; }
.incl__col--out li::before { border: 2px solid var(--gold-soft); }

/* The TBD marker, draft only: remove once the client confirms the figure */
.tbd { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A5A00; background: #FFF1CC; border: 1px dashed #D4A23C; border-radius: 4px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }

/* 2. Needs ladder (navy) */
.ladder { background: var(--navy); color: var(--white); }
.ladder__wrap { display: grid; gap: 48px; }
@media (min-width: 992px) { .ladder { padding: 96px 0; } .ladder__wrap { grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; } }
.ladder .title { color: var(--white); }
.ladder .lede { color: #C9D5DF; margin-bottom: 32px; }
.ladder .ph { border-color: rgba(255, 255, 255, 0.3); background: repeating-linear-gradient(135deg, #1B3A4B 0 14px, #18344A 14px 28px); color: #C9D5DF; }
.rungs { position: relative; padding-left: 44px; }
.rung { position: relative; padding-bottom: 40px; }
.rung:last-child { padding-bottom: 0; }
.rung:not(:last-child)::before { content: ""; position: absolute; left: -33px; top: 29px; bottom: -4px; width: 3px; border-radius: 3px; background: var(--gold); }
.rung::after { content: ""; position: absolute; left: -44px; top: 4px; width: 25px; height: 25px; border-radius: 50%; background: var(--navy); border: 3px solid var(--gold); }
.rung h3 { font-size: 1.3rem; color: var(--white); margin-bottom: 6px; letter-spacing: -0.01em; }
.rung p { color: #C9D5DF; max-width: 46ch; }

/* 3. One or two people */
.duo { background: var(--cream); text-align: center; }
.duo__wrap { max-width: 820px; }
.duo__math { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 40px 0; flex-wrap: wrap; }
.duo__side { display: flex; flex-direction: column; align-items: center; padding: 28px 36px; border: 2px solid var(--navy); border-radius: 999px 999px var(--radius-lg) var(--radius-lg); font-weight: 600; color: var(--navy); min-width: 200px; text-align: center; max-width: 280px; }
.duo__side--win { background: var(--gold); border-color: var(--gold); }
.duo__side p { margin: 0; }
.duo__icons { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.duo__icon { width: 56px; height: 56px; background: var(--navy); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.duo__icon--building { --icon: url("assets/icons/building.svg"); }
.duo__icon--users { --icon: url("assets/icons/users.svg"); }
.duo__icon--home { --icon: url("assets/icons/home.svg"); }
.duo__icon--user-check { --icon: url("assets/icons/user-check.svg"); }
.duo__vs { font-weight: 700; font-style: italic; color: var(--charcoal-muted); }
.duo > .container > p { color: var(--charcoal-muted); font-size: 1.05rem; max-width: 56ch; margin: 0 auto 16px; }
@media (max-width: 767.98px) { .duo__math { flex-direction: column; flex-wrap: nowrap; } .duo__side { width: 100%; max-width: 320px; padding: 24px; } }
.compare__link { font-weight: 700; color: var(--navy); padding-bottom: 0.2em; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 12%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 8.5C28 4 52 10.5 88 6.5S160 3.5 197 7.5%22 fill=%22none%22 stroke=%22%23F5C344%22 stroke-width=%223%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.35em; }
.compare__link-wrap, .path__more { text-align: center; }

/* 4. Who pays and the FAQ */
.funding { background: var(--white); }
.funding__wrap { display: grid; gap: 40px; }
@media (min-width: 992px) { .funding { padding: 96px 0; } .funding__wrap { grid-template-columns: 4fr 6fr; gap: 80px; align-items: start; } .funding__side { position: sticky; top: 100px; } }
.funding__side .ph { margin: 28px 0 20px; }
.fund__note { color: var(--charcoal-muted); font-size: 0.95rem; }
.routes { border-top: 2px solid var(--navy); }
.routes__item { display: grid; gap: 4px 24px; padding: 24px 0; border-bottom: 1px solid var(--border-soft); }
@media (min-width: 768px) { .routes__item { grid-template-columns: 15rem 1fr; } .routes__tag { grid-row: span 2; } }
.routes__tag { white-space: nowrap; align-self: start; justify-self: start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 6px 12px; border-radius: 999px; }
.routes h3 { font-size: 1.35rem; color: var(--navy); letter-spacing: -0.01em; }
.routes__item > p:last-child { color: var(--charcoal-muted); max-width: 52ch; }

/* 5. Three steps */
.path { background: var(--white); }
.path__list { margin: 44px auto 0; max-width: 1040px; display: grid; gap: 12px; }
@media (min-width: 768px) { .path__list { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.path__step { position: relative; background: var(--cream); padding: 28px 28px 28px 32px; border-left: 6px solid var(--gold); }
@media (min-width: 768px) { .path__step { padding: 32px 48px 32px 40px; border-left: 0; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%); margin-left: -14px; }
  .path__step:first-child { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); margin-left: 0; padding-left: 32px; } }
.path__n { font-size: 3rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--navy); margin-bottom: 8px; }
.path__step h3 { font-size: 1.2rem; color: var(--navy); margin-bottom: 6px; letter-spacing: -0.01em; }
.path__step p:last-child { color: var(--charcoal-muted); }
.path__more { margin-top: 36px; color: var(--charcoal-muted); }
.path__more .compare__link { display: inline-block; margin-top: 10px; }


/* Photo placeholders: tall and square on tablet and phone are short, not full-height boxes */
@media (max-width: 991.98px) { .ph.ph--tall, .ph.ph--sq, .ph.ph--wide { aspect-ratio: 16 / 9; max-height: 300px; width: 100%; } }
@media (max-width: 575.98px) { .ph.ph--tall, .ph.ph--sq, .ph.ph--wide { aspect-ratio: 4 / 3; } }

/* Hero title: one line from tablet up, balanced when it wraps on phones */
@media (min-width: 768px) { .page-hero h1 { max-width: none; } }
.page-hero h1 { text-wrap: balance; }

/* ---------- How it works page ---------- */
/* Ported from the How It Works mockup (.claude/features/how-it-works/build/how.css), with the how- prefix so the homepage .how and .steps rules are not touched. Hero, crumbs, trust strip, photo placeholders, TBD marker, FAQ and quote band come from the sections above. Icons are empty groups (how-ico) with a CSS mask, as on the Costs page. */
.how-ico { display: block; width: 40px; height: 40px; background: var(--navy); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.how-ico--heart { --icon: url("assets/icons/heart.svg"); }
.how-ico--home { --icon: url("assets/icons/home.svg"); }
.how-ico--users { --icon: url("assets/icons/users.svg"); }
.how-ico--clipboard { --icon: url("assets/icons/clipboard.svg"); }
.how-ico--brain { --icon: url("assets/icons/brain.svg"); }
.how-ico--hospital { --icon: url("assets/icons/hospital.svg"); }
.how-ico--clock { --icon: url("assets/icons/clock.svg"); }
.how-ico--user-check { --icon: url("assets/icons/user-check.svg"); }
.how-ico--shield-check { --icon: url("assets/icons/shield-check.svg"); }
.how-ico--sun { --icon: url("assets/icons/sun.svg"); }
.how-ico--cloud-sun { --icon: url("assets/icons/cloud-sun.svg"); }
.how-ico--moon { --icon: url("assets/icons/moon.svg"); }

/* What is live-in care, then the spec bar */
.how-what { background: var(--white); }
.how-what__wrap { display: grid; gap: 32px; align-items: center; }
@media (min-width: 992px) { .how-what { padding: 96px 0; } .how-what__wrap { grid-template-columns: 6fr 5fr; gap: 72px; } }
.how-what__lead { font-size: 1.35rem; line-height: 1.5; font-weight: 600; color: var(--navy); margin: 16px 0; max-width: 34ch; }
.how-what__copy p:not(.how-what__lead) { color: var(--charcoal-muted); max-width: 52ch; }
.how-spec { margin-top: 48px; display: grid; border-top: 3px solid var(--gold); background: var(--cream); }
@media (min-width: 768px) { .how-spec { grid-template-columns: repeat(4, 1fr); } }
.how-spec__item { padding: 22px 20px; display: flex; align-items: center; gap: 14px; }
.how-spec__item + .how-spec__item { border-top: 1px solid var(--border-soft); }
@media (min-width: 768px) { .how-spec__item + .how-spec__item { border-top: 0; border-left: 1px solid var(--border-soft); } }
.how-spec__item p { margin: 0; font-weight: 700; color: var(--navy); }
.how-spec__item .how-ico { width: 36px; height: 36px; flex: none; }

/* What a live-in carer does: four open columns split by hairlines, no cards */
.how-does { background: var(--cream); }
.how-does__grid { margin-top: 48px; display: grid; }
@media (min-width: 768px) { .how-does__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .how-does__grid { grid-template-columns: repeat(4, 1fr); } }
.how-does__item { padding: 28px 24px; border-top: 1px solid var(--border-soft); }
@media (min-width: 1100px) { .how-does__item { border-top: 0; } .how-does__item + .how-does__item { border-left: 1px solid var(--border-soft); } }
.how-does__item .how-ico { width: 56px; height: 56px; margin-bottom: 16px; }
.how-does__item h3 { font-size: 1.25rem; color: var(--navy); margin-bottom: 6px; letter-spacing: -0.01em; }
.how-does__item p { color: var(--charcoal-muted); }
.how-does .ph--band { margin-bottom: 8px; }
.how-does__note { margin: 40px auto 0; max-width: 760px; padding: 20px 24px; border: 2px dashed var(--gold-soft); border-radius: var(--radius-md); background: var(--white); color: var(--charcoal); }
.how-does__note + .how-does__note { margin-top: 16px; }
.how-does__note strong { color: var(--navy); }

/* Photo band under a section heading (desktop wide strip, tablet and phone use the shared short placeholder) */
.ph--band { margin-top: 40px; aspect-ratio: 21 / 8; }

/* A typical day: a sky band from morning to night over four stops */
.how-day { background: var(--cream); }
.how-day__band { height: 10px; border-radius: 10px; margin-top: 48px; background: linear-gradient(90deg, #F5C344, #F8DE9A 35%, #E9A15A 65%, #1E3045); }
.how-day__list { display: grid; margin-top: -5px; }
@media (min-width: 992px) { .how-day__list { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.how-day__stop { position: relative; padding: 34px 0 20px; }
.how-day__stop::before { content: ""; position: absolute; top: -17px; left: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); }
.how-day__stop .how-ico { position: absolute; top: -17px; left: 0; width: 36px; height: 36px; -webkit-mask-size: 20px; mask-size: 20px; }
.how-day__stop h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 4px; }
.how-day__stop p { color: var(--charcoal-muted); font-size: 0.95rem; }
.how-day__note { margin-top: 28px; color: var(--charcoal-muted); font-size: 0.9rem; }
@media (max-width: 991.98px) {
  .how-day__band { display: none; }
  .how-day__list { margin-top: 36px; border-left: 3px solid var(--gold); padding-left: 28px; }
  .how-day__stop { padding: 0 0 28px; }
  .how-day__stop::before, .how-day__stop .how-ico { top: 0; left: -49px; }
  .how-day__stop:last-child { padding-bottom: 0; }
}

/* What your home needs: a navy door-hanger tag beside the copy */
.how-room { background: var(--white); }
.how-room__wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) { .how-room { padding: 96px 0; } .how-room__wrap { grid-template-columns: 5fr 6fr; gap: 72px; } }
.how-room__tag { position: relative; max-width: 460px; margin-inline: auto; background: var(--navy); color: var(--white); border-radius: 28px; padding: 76px 32px 36px; box-shadow: var(--shadow-lg); }
.how-room__tag::before { content: ""; position: absolute; top: 24px; left: 50%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--white); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.how-room__tag::after { content: ""; position: absolute; top: -34px; left: 50%; width: 22px; height: 72px; margin-left: -11px; border: 3px solid var(--gold-soft); border-radius: 50%; pointer-events: none; }
.how-room__tag h3 { color: var(--white); font-size: 1.4rem; margin-bottom: 18px; }
.how-room__list { list-style: none; display: grid; gap: 14px; }
.how-room__item { display: flex; gap: 12px; align-items: flex-start; color: #E3EBF0; }
.how-room__item::before { content: ""; width: 22px; height: 22px; flex: none; margin-top: 2px; background: var(--gold); -webkit-mask: url("assets/icons/check.svg") center / contain no-repeat; mask: url("assets/icons/check.svg") center / contain no-repeat; }
.how-room__copy { order: -1; }
@media (min-width: 992px) { .how-room__copy { order: 0; } }
.how-room__copy p { color: var(--charcoal-muted); margin-top: 12px; max-width: 50ch; }
.how-room__copy .ph { margin-top: 28px; }

/* From first call to carer moving in: sticky intro beside four numbered steps */
.how-start { background: var(--cream); }
.how-start__wrap { display: grid; gap: 48px; }
@media (min-width: 992px) { .how-start { padding: 96px 0; } .how-start__wrap { grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; } .how-start__intro { position: sticky; top: 120px; } }
.how-start__stats { margin-top: 28px; display: grid; gap: 14px; }
.how-start__stat { margin: 0; padding: 18px 22px; border-left: 6px solid var(--gold); background: var(--white); }
.how-start__stat strong { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1.1; }
.how-start__stat span { color: var(--charcoal-muted); font-size: 0.95rem; }
.how-start__cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 575.98px) { .how-start__cta .btn { width: 100%; white-space: nowrap; padding-inline: 18px; font-size: 0.95rem; } }
.how-start__steps { position: relative; padding-left: 64px; }
.how-start__steps::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; border-left: 3px dashed var(--gold-soft); }
.how-start__step { position: relative; padding-bottom: 36px; }
.how-start__step:last-child { padding-bottom: 0; }
.how-start__n { position: absolute; left: -64px; top: -4px; width: 44px; height: 44px; margin: 0; border-radius: 50%; display: grid; place-content: center; background: var(--navy); color: var(--white); font-weight: 800; font-size: 1.1rem; box-shadow: 0 0 0 6px var(--cream); }
.how-start__step h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: 6px; letter-spacing: -0.01em; }
.how-start__text { color: var(--charcoal-muted); max-width: 46ch; }
.review-feature { background: var(--navy); color: var(--white); padding: 64px 0; }
@media (min-width: 992px) { .review-feature { padding: 88px 0; } }
.review-feature__wrap { max-width: 900px; display: grid; gap: 20px 24px; align-items: center; }
@media (min-width: 600px) { .review-feature__wrap { grid-template-columns: 1fr auto; } .review-feature .review-feature__quote { grid-column: 1 / -1; } }
.review-feature .review-feature__quote { margin: 0; padding: 0 0 0 24px; border: 0; border-left: 4px solid var(--gold); font-size: clamp(1.1rem, 1.6vw + 0.6rem, 1.45rem); font-style: italic; line-height: 1.6; color: var(--white); }
.review-feature__who { display: flex; flex-direction: column; gap: 2px; }
.review-feature__who strong { font-size: 1.1rem; color: var(--gold-on-dark); }
.review-feature__who span { font-size: 0.95rem; color: var(--grey-on-dark); }

/* Price link band (navy) */
.how-price { padding: 40px 0; background: var(--navy); color: var(--white); }
.how-price__wrap { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
@media (min-width: 768px) { .how-price__wrap { flex-direction: row; align-items: center; justify-content: space-between; } }
.how-price h2 { font-size: 1.6rem; color: var(--white); }
.how-price p { color: #C9D5DF; margin-top: 4px; }

/* CTA band: one centred navy card, no photo, same on every page. Reusable pattern glowing-care/cta-band. */
.cta { padding: 64px 0 96px; background: var(--white); }
.cta__card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--navy); border-radius: var(--radius-lg); padding: 48px 24px; box-shadow: 0 16px 36px rgba(30, 48, 69, 0.25); }
.cta__card h2 { font-size: 1.9rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--white); max-width: 22ch; margin: 0 0 14px; }
.cta__card p { max-width: 680px; margin: 0; font-size: 1.05rem; line-height: 1.6; color: color-mix(in srgb, var(--white) 80%, transparent); }
.cta__actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn--white > .wp-block-button__link { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--white > .wp-block-button__link:hover { background: var(--cream); border-color: var(--cream); }
.cta__trust { list-style: none; width: 100%; margin: 32px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; font-size: 0.9rem; color: color-mix(in srgb, var(--white) 65%, transparent); }
.cta__item { display: flex; align-items: center; gap: 8px; }
.cta__item::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--gold-on-dark); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.cta__item--shield { --icon: url("assets/icons/shield-check.svg"); }
.cta__item--lock { --icon: url("assets/icons/lock.svg"); }
.cta__item--check { --icon: url("assets/icons/check.svg"); }
@media (max-width: 575.98px) { .cta__actions { width: 100%; } .cta__actions .btn { width: 100%; } .cta__actions .btn > .wp-block-button__link { width: 100%; white-space: nowrap; } }
@media (min-width: 768px) { .cta__card { padding: 64px 48px; } .cta__card h2 { font-size: 2.5rem; max-width: none; } }