/* Palette and type follow carelancer.com: white first, purple as the single accent, cream for the
   quiet panels, lavender for the colour breaks. Headings are geometric (Jost stands in for
   Futura PT, which is licensed), body is Inter. No dark theme. */
:root {
  color-scheme: light;
  --bg: #fff; --surface: #fff; --tint: #fefcf0; --text: #101828; --muted: #475467;
  --line: #e4e7ec; --edge: #d0d5dd;
  --pri: #6941c6; --pri-hover: #482683; --on-pri: #fff; --focus: #6941c6;
  --band: #3c1d6e; --on-band: #edeafd; --band-muted: #d9ccf7; --band-focus: #e9d7fe;
  --err: #9b1c1c; --err-bg: #fdf0ef;
  --amber: #e9d7fe;
  --lilac: #edeafd;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 24px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(17px, 1.2vw + 14px, 19px)/1.65 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3 { font-family: Jost, Futura, 'Trebuchet MS', sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(38px, 6.6vw, 72px); letter-spacing: -.025em; line-height: 1.04; }
h2 { font-size: clamp(27px, 3.8vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
p { margin: 0; }
p + p { margin-top: 1em; }
a { color: var(--pri); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--pri-hover); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 62ch; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 99px; }
.skip:focus { left: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 99px; border: 2px solid var(--pri); background: transparent; color: var(--pri); text-decoration: none; font-weight: 600; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.btn:hover { background: var(--pri); color: var(--on-pri); }
.btn-solid { background: var(--pri); color: var(--on-pri); }
.btn-solid:hover { background: var(--pri-hover); border-color: var(--pri-hover); color: var(--on-pri); }
.btn[disabled] { opacity: .7; cursor: progress; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; padding-block: 10px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: var(--text); font: 600 21px/1.1 Jost, Futura, 'Trebuchet MS', sans-serif; letter-spacing: -.02em; }
.brand:hover { color: var(--text); }
.brand svg { width: 36px; height: 36px; flex: none; color: var(--pri); }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.head-actions a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; font-weight: 600; }
.head-actions .lang { border: 1px solid var(--edge); border-radius: 99px; color: var(--text); text-decoration: none; }
.head-actions .lang:hover { background: var(--tint); color: var(--text); }
.head-cta { min-height: 44px; padding: 0 22px; font-size: 16px; }
@media (max-width: 560px) { .head-cta { display: none; } }

/* Primary nav: one wrapping row, no JS and no disclosure. Six short labels fit a desktop row and
   wrap to two on a phone, which is fewer moving parts than a menu button and never hides the links. */
.site-nav { border-top: 1px solid var(--line); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: var(--text); background: var(--tint); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--pri); }

/* Services: a rate list. Cards would make five services look like five products to choose between;
   families are comparing one number across a short list, so the rate is the only figure that aligns. */
.rates { list-style: none; margin: 32px 0 0; padding: 0; }
.rates > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.rates > li:last-child { border-bottom: 1px solid var(--line); }
.rates h2 { font-size: 21px; margin: 0; }
.rates p { grid-column: 1; margin: 0; color: var(--muted); max-width: 60ch; }
.rates .rate { grid-row: 1 / span 2; grid-column: 2; font: 600 22px/1.2 Jost, Futura, 'Trebuchet MS', sans-serif; color: var(--text); white-space: nowrap; }
.rates .rate small { display: block; font: 400 15px/1.3 inherit; color: var(--muted); }
@media (max-width: 560px) { .rates > li { grid-template-columns: minmax(0, 1fr); } .rates .rate { grid-row: auto; grid-column: 1; } }

/* FAQ and Contact share the document rhythm already set by .doc; only the question needs weight. */
.qa { margin-top: 32px; }
.qa h2 { font-size: 21px; margin-top: 32px; }
.qa h2 + p { margin-top: 8px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; margin-top: 32px; }
.contact-grid h2 { font-size: 18px; margin: 0 0 6px; }
.contact-grid p { margin: 0; color: var(--muted); }

/* Positioning strip. Three facts, not three cards: cards would imply three things to choose
   between, and these are one claim in three parts. Hairlines carry the separation instead. */
.pitch { border-bottom: 1px solid var(--line); background: var(--surface); }
.pitch .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; padding-block: 0; }
.pitch > .wrap > div { padding: 28px 0; }
.pitch > .wrap > div + div { border-top: 1px solid var(--line); }
.pitch h2 { font-size: 18px; margin: 0 0 6px; }
.pitch p { margin: 0; color: var(--muted); max-width: 40ch; }
@media (min-width: 720px) {
  .pitch .wrap { gap: 0 40px; }
  .pitch > .wrap > div + div { border-top: 0; border-left: 1px solid var(--line); padding-left: 40px; }
}


/* Hero */
.hero { background: var(--tint); border-bottom: 1px solid var(--line); padding-block: clamp(28px, 5vw, 72px) clamp(36px, 6vw, 84px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero .lede { margin-top: 20px; font-size: clamp(19px, 2vw, 22px); max-width: 34ch; }
.hero .alt { margin-top: 24px; }
/* The card is the point of the page, so it stays in the reading column with the words; the
   photograph takes the other column at full height and says what the business is without copy. */
.hero-copy > #booking { margin-top: clamp(24px, 3vw, 36px); }
.hero-figure img { aspect-ratio: 4 / 5; box-shadow: 0 30px 70px -40px rgb(16 24 40 / .65); }
@media (max-width: 920px) { .hero-figure img { aspect-ratio: 16 / 10; } }

/* Pre-check card */
.check { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--pri); border-radius: 12px; padding: clamp(20px, 3.4vw, 32px); }
.check h2 { font-size: clamp(22px, 2.6vw, 28px); }
.check .sub { margin-top: 6px; color: var(--muted); }
.field { margin-top: 22px; }
.field > label, fieldset legend { display: block; font-weight: 600; padding: 0; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 16px; }
fieldset { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.choices { display: grid; gap: 8px; margin-top: 8px; }
.choice { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); }
.choice:hover { border-color: var(--edge); }
.choice input { width: 24px; height: 24px; flex: none; accent-color: var(--pri); margin: 0; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--pri); background: var(--tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.error { display: none; margin-top: 8px; padding: 10px 14px; background: var(--err-bg); color: var(--err); border-left: 4px solid var(--err); border-radius: 4px; font-weight: 500; }
.error.on { display: block; }
[aria-invalid="true"] { border-color: var(--err) !important; }
.check .btn { width: 100%; margin-top: 24px; }
.check .note { margin-top: 14px; font-size: 16px; color: var(--muted); }
/* The live region stays rendered (never display:none) so screen readers register it before it fills. */
.result.show { margin-top: 20px; padding: 18px; border-radius: 10px; background: var(--err-bg); border: 2px solid var(--err); }
.result.show.info { background: var(--tint); border-color: var(--pri); }
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.result a.tel { display: inline-block; margin-top: 8px; font: 600 clamp(24px, 4vw, 30px)/1.2 Inter, system-ui, sans-serif; }

/* Sections */
section { padding-block: clamp(48px, 9vw, 104px); }
.section-head { margin-bottom: clamp(24px, 4vw, 40px); }
.section-head p { margin-top: 12px; }

.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.services li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 32px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.services p { color: var(--muted); }
@media (max-width: 640px) { .services li { grid-template-columns: minmax(0, 1fr); } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: s; }
@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { counter-increment: s; border-top: 3px solid var(--pri); padding-top: 16px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pri); color: var(--on-pri); font: 600 20px/1 Inter, system-ui, sans-serif; margin-bottom: 12px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--muted); }
.tag { display: inline-block; font-weight: 600; color: var(--pri); }

.area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); }
@media (max-width: 760px) { .area-grid { grid-template-columns: minmax(0, 1fr); } }
.area-list { margin: 16px 0 0; padding-left: 1.2em; }
.area-list li + li { margin-top: 6px; }

.band { background: var(--band); color: var(--on-band); --focus: var(--band-focus); }
.band a { color: var(--on-band); }
.band a:hover { color: #fff; }
.band .muted { color: var(--band-muted); }
       .amount { color: var(--amber); font: 600 clamp(56px, 11vw, 112px)/1 Jost, Futura, 'Trebuchet MS', sans-serif; letter-spacing: -.04em; }
.amount small { font-size: .3em; letter-spacing: 0; font-weight: 600; margin-left: .15em; }
.deposit-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 760px) { .deposit-grid { grid-template-columns: minmax(0, 1fr); } }
.deposit-grid h2 { margin-bottom: 14px; }

details { border-bottom: 1px solid var(--line); }
.faq { border-top: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font-weight: 600; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--edge); border-radius: 50%; font-size: 22px; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details > :not(summary) { padding-bottom: 20px; max-width: 62ch; }

/* Documents (policies, thanks) */
.doc { padding-block: clamp(32px, 6vw, 72px); }
.doc section { padding-block: clamp(28px, 5vw, 56px); border-top: 1px solid var(--line); }
.doc h1 { margin-bottom: 16px; }
.doc h2 { margin-bottom: 16px; }
.doc h3 { margin: 28px 0 8px; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li + li { margin-top: 10px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
.jump a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--edge); border-radius: 99px; text-decoration: none; font-weight: 600; }
.jump a:hover { background: var(--tint); }
.callout { margin-top: 20px; padding: 16px 20px; background: var(--tint); border-left: 4px solid var(--pri); border-radius: 4px; }
.callout .tel { font-weight: 700; }
.rights { counter-reset: r; list-style: none; padding: 0 !important; }
.rights li { counter-increment: r; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.rights li::before { content: counter(r); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pri); color: var(--on-pri); font: 600 18px/1 Inter, system-ui, sans-serif; }
.rights strong { display: block; }

.site-footer { background: var(--tint); border-top: 1px solid var(--line); padding-block: 40px 48px; }
.site-footer .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 32px; }
.site-footer h2 { font-size: 18px; margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 48px; }
.fine { grid-column: 1 / -1; color: var(--muted); font-size: 16px; }

html.js .reveal { opacity: 0; transition: opacity .8s var(--ease); }
html.js .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transition: none; }
  .btn { transition: none; }
}

/* ---- Photography ---------------------------------------------------------
   One picture vocabulary for the whole site: everything is a cover-cropped
   figure with the same radius, so a real photograph of our own caregivers can
   replace any stock file without touching a rule. */
img { max-width: 100%; height: auto; }
.shot { display: block; width: 100%; border-radius: var(--radius); object-fit: cover; background: var(--tint); }
.shot-tall { aspect-ratio: 4 / 5; }
.shot-wide { aspect-ratio: 16 / 9; }
.shot-card { aspect-ratio: 4 / 3; border-radius: 0; }

/* Service cards: five kinds of care, each with the picture that says what it is. */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.cards li { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cards li:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgb(21 33 29 / .45); }
.cards li > :not(img) { padding-inline: 20px; }
.cards li > h3 { padding-top: 18px; }
.cards li > h3 + p { margin-top: 8px; }
.cards li > p:last-child { padding-bottom: 22px; }
.cards h3 { font-size: 20px; }
.cards p { color: var(--muted); font-size: 17px; }

/* Picture beside prose. Reversed by class so the rhythm alternates down the page. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.split-text > * + * { margin-top: 16px; }
.split .shot { box-shadow: 0 24px 60px -36px rgb(16 24 40 / .55); }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); } .split-flip > figure { order: -1; } }
figure { margin: 0; }

/* The lilac strip carelancer uses between white sections: a colour break, no content of its own. */
.tinted { background: var(--lilac); }

/* Rates keep their list, but each line now carries its own thumbnail. */
.rates > li { grid-template-columns: 88px minmax(0, 1fr) auto; }
.rates .thumb { grid-row: 1 / span 2; grid-column: 1; align-self: start; width: 88px; height: 88px; border-radius: 14px; object-fit: cover; }
.rates h2, .rates p { grid-column: 2; }
.rates .rate { grid-column: 3; }
@media (max-width: 560px) {
  .rates > li { grid-template-columns: 64px minmax(0, 1fr); }
  .rates .thumb { width: 64px; height: 64px; grid-row: 1 / span 2; }
  .rates h2, .rates p { grid-column: 2; }
  .rates .rate { grid-column: 2; grid-row: auto; }
}

/* One number carries the strip: the published hourly rate, which is the thing families are
   actually trying to find out. Everything around it stays at body size. */
.pitch .figure { margin: 0 0 10px; font: 600 clamp(34px, 4.6vw, 48px)/1 Jost, Futura, 'Trebuchet MS', sans-serif; color: var(--pri); }
.pitch .figure small { display: block; margin-top: 8px; font: 400 15px/1.4 Inter, system-ui, sans-serif; color: var(--muted); }


/* ---- Navigation with disclosure menus ------------------------------------
   Services and Resources hold more links than a row can carry, so each is a
   <details> the browser opens on its own: a menu with no JavaScript, and still
   a list of links when a pointer never arrives. */
.site-nav li { position: relative; }
.site-nav details > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; font-weight: 500; color: var(--muted); cursor: pointer; list-style: none; border-bottom: 3px solid transparent; }
.site-nav details > summary::-webkit-details-marker { display: none; }
.site-nav details > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.site-nav details[open] > summary { color: var(--text); }
.site-nav details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.site-nav details > summary:hover { color: var(--text); background: var(--tint); }
.site-nav .menu { list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 48px -32px rgb(16 24 40 / .5); }
.site-nav .menu a { min-height: 44px; white-space: nowrap; border-bottom: 0; border-radius: 8px; }
@media (min-width: 720px) {
  .site-nav .menu { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 16rem; }
}

/* Hero: two calls to action side by side, the way carelancer splits find care from give care. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note { margin-top: 16px; font-size: 16px; color: var(--muted); }

/* Trust row under the hero: short claims, each with its own tick. */
.badges { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; margin: 24px 0 0; padding: 0; font-size: 16px; font-weight: 500; }
.badges li { display: flex; align-items: center; gap: 8px; }
.badges li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pri); clip-path: polygon(22% 52%, 38% 68%, 78% 28%, 86% 38%, 38% 86%, 14% 62%); }

/* Why families choose us: one row per thing families compare, three columns of answer.
   On a phone the table becomes one card per row, with the column name beside each answer. */
.compare { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 17px; }
.compare caption { text-align: left; color: var(--muted); padding-bottom: 12px; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 600 17px/1.3 Jost, Futura, 'Trebuchet MS', sans-serif; border-bottom: 2px solid var(--text); }
.compare thead th.us { background: var(--surface); border-bottom-color: var(--pri); color: var(--pri-hover); border-radius: 10px 10px 0 0; }
.compare tbody th { font-weight: 600; }
.compare td.us { background: var(--surface); font-weight: 600; }
.compare .us { box-shadow: 1px 0 0 var(--line), -1px 0 0 var(--line); }
.compare tbody tr:last-child td.us { border-radius: 0 0 10px 10px; }
@media (max-width: 760px) {
  .compare thead { position: absolute; left: -9999px; }
  .compare tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 8px 4px; margin-bottom: 14px; }
  .compare th, .compare td { display: block; border-bottom: 0; padding: 6px 12px; }
  .compare td::before { content: attr(data-col) " "; font-weight: 600; color: var(--muted); }
  .compare td.us { border-radius: 10px; margin: 4px 8px; }
}

/* What you get: a plain grid of short promises, each with a mark. No cards, no shadows. */
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .features { grid-template-columns: minmax(0, 1fr); } }
.features h3 { font-size: 18px; margin-bottom: 6px; }
.features p { color: var(--muted); font-size: 16px; }
.features li::before { content: ""; display: block; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; background: var(--lilac); }

/* How it works runs to four steps now, so the row holds four. */
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps.four { grid-template-columns: minmax(0, 1fr); } }

/* Closing call to action, centred, on the lavender break. */
.closer { text-align: center; }
.closer p { margin: 14px auto 0; max-width: 54ch; color: var(--muted); }
.closer .btn { margin-top: 28px; }