/* Humble Hands Care - site stylesheet
   Base: the approved CareClients landing-page design system (Aug 2026).
   Brand magenta #92288C sampled from the Humble Hands logo. Do not eyeball-replace.
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --vio:#33204A; --vio-deep:#1E1130; --vio-mid:#5C3D78;
  --mag:#92288C; --mag-deep:#6E1A6A; --mag-pale:#F9ECF8; --lilac:#C77BC2;
  --moss:#3C785A; --moss-pale:#E7F1EB;
  --paper:#FBF8FB; --paper-2:#F3ECF4; --paper-3:#E2D7E4;
  --ink:#191320; --ink-2:#4E4655; --ink-3:#716977;
  --line:rgba(51,32,74,.14);
  /* NEVER DELETE: --ink-3 was #89808F and --moss was #3F7D5E on the August advert page.
     Both failed WCAG AA on white and on --paper-2 (3.79:1 and 4.22:1 against a 4.5 floor),
     which put 8 components on this site below AA. Darkened at token level 26 Sep 2026,
     hue and saturation preserved. Measured after: ink-3 5.26/4.99/4.54:1, moss 5.22/4.52:1. */
  --r:14px;
  --fd:"Bricolage Grotesque",system-ui,sans-serif;
  --fb:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:64px}
@media(min-width:760px){body{padding-bottom:0}}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hd{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0}
.wm{font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--vio);line-height:1.1}
.wm i{font-style:normal;color:var(--mag)}
.wm span{display:block;font-family:var(--fb);font-size:11.5px;font-weight:500;letter-spacing:.05em;color:var(--ink-3);margin-top:3px;text-transform:uppercase}
.hd-r{display:flex;align-items:center;gap:16px}
.hd-tel{display:none;text-align:right}
@media(min-width:900px){.hd-tel{display:block}}
.hd-tel b{font-family:var(--fd);font-size:19px;font-weight:800;color:var(--vio);letter-spacing:-.02em}
.hd-tel span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.015em;padding:15px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.p{background:var(--mag);color:#fff}
.btn.o{background:transparent;border-color:var(--vio);color:var(--vio)}
.btn.sm{font-size:14.5px;padding:11px 19px}
.btn.full{width:100%}
.btn.gh{background:transparent;border-color:var(--line);color:var(--ink-2);font-weight:700}

/* ---------- hero ---------- */
.hero{background:
  radial-gradient(120% 90% at 88% -10%,rgba(199,123,194,.20),transparent 58%),
  linear-gradient(180deg,var(--paper-2),var(--paper) 62%);
  border-bottom:1px solid var(--line);padding:44px 0 52px}
.hgrid{display:grid;gap:34px}
@media(min-width:980px){.hgrid{grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}}
.eyebrow{font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mag-deep);margin-bottom:14px}
h1{font-family:var(--fd);font-size:clamp(33px,4.9vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--vio)}
h1 em{font-style:normal;color:var(--mag)}
.lede{font-size:17.5px;color:var(--ink-2);line-height:1.62;margin-top:19px;max-width:600px}
.lede b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-family:var(--fd);font-size:13px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;color:var(--vio)}
.chip.m{background:var(--moss-pale);border-color:rgba(63,125,94,.24);color:var(--moss)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- the qualifying form ---------- */
.qf{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 44px rgba(51,32,74,.10);overflow:hidden;position:relative}
.qf-top{background:var(--vio);padding:20px 24px 18px;color:#fff}
.qf-top h2{font-family:var(--fd);font-size:21px;font-weight:800;letter-spacing:-.028em;line-height:1.2}
.qf-top p{font-size:13.5px;color:rgba(255,255,255,.72);margin-top:7px;line-height:1.55}
.prog{display:flex;gap:4px;margin-top:16px}
.prog i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
.prog i.on{background:var(--lilac)}
.qf-body{padding:24px}
.step{display:none}
.step.on{display:block}
.qlab{font-family:var(--fd);font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--vio);line-height:1.25}
.qhint{font-size:13.5px;color:var(--ink-3);margin-top:6px;line-height:1.55}
.opts{display:grid;gap:9px;margin-top:17px}
@media(min-width:520px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;font-family:var(--fb);font-size:15.5px;font-weight:500;color:var(--ink);cursor:pointer;line-height:1.35}
.opt:hover{border-color:var(--mag);background:var(--mag-pale)}
.opt.sel{border-color:var(--mag);background:var(--mag-pale);font-weight:600}
.opt .k{font-family:var(--fd);font-size:11px;font-weight:800;color:var(--mag-deep);background:#fff;border:1px solid var(--line);border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.opt small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.fld{margin-top:14px}
.fld label{display:block;font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--fb);font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--mag);background:#fff}
.fld textarea{min-height:74px;resize:vertical}
.req{color:var(--mag-deep)}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:19px}
.back{background:none;border:none;font-family:var(--fd);font-size:14px;font-weight:700;color:var(--ink-3);cursor:pointer;padding:8px 2px}
.back:hover{color:var(--vio)}
.fine{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:13px}
.orcall{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}
.orcall .t{font-family:var(--fd);font-size:13px;font-weight:800;color:var(--ink-3);line-height:1.25;text-transform:uppercase;letter-spacing:.07em}
.orcall a{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--mag-deep);text-decoration:none;letter-spacing:-.03em}
.jobs{background:var(--paper-2);border-top:1px solid var(--line);padding:13px 24px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.jobs a{font-weight:700;color:var(--mag-deep)}
.done{text-align:center;padding:8px 0 4px}
.done .tick{width:52px;height:52px;border-radius:50%;background:var(--moss-pale);border:2px solid var(--moss);margin:0 auto 15px;position:relative}
.done .tick::after{content:"";position:absolute;left:17px;top:12px;width:12px;height:22px;border-right:3px solid var(--moss);border-bottom:3px solid var(--moss);transform:rotate(42deg)}
.done h3{font-family:var(--fd);font-size:22px;font-weight:800;letter-spacing:-.028em;color:var(--vio);line-height:1.22}
.done p{font-size:15px;color:var(--ink-2);margin-top:11px;line-height:1.6}
.recap{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-top:17px;text-align:left}
.recap div{font-size:14px;color:var(--ink-2);line-height:1.55;display:flex;justify-content:space-between;gap:14px;padding:4px 0}
.recap b{color:var(--vio);font-weight:600;text-align:right}

/* ---------- sections ---------- */
.pad{padding:64px 0}
.pad.tint{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-hd{max-width:720px}
.sec-hd h2{font-family:var(--fd);font-size:clamp(27px,3.6vw,38px);font-weight:800;letter-spacing:-.032em;line-height:1.1;color:var(--vio)}
.sec-hd h2 em{font-style:normal;color:var(--mag)}
.sec-hd p{font-size:16.5px;color:var(--ink-2);margin-top:15px;line-height:1.64}

/* ---------- cards / grids ---------- */
.g2{display:grid;gap:20px}
@media(min-width:860px){.g2{grid-template-columns:1fr 1fr}}
.g3{display:grid;gap:18px}
@media(min-width:860px){.g3{grid-template-columns:repeat(3,1fr)}}
.g4{display:grid;gap:16px}
@media(min-width:700px){.g4{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 26px}
.card .ic{width:34px;height:34px;border-radius:9px;background:var(--mag-pale);border:1px solid rgba(146,40,140,.2);margin-bottom:15px}
.card h3{font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:-.024em;color:var(--vio);line-height:1.25;margin-bottom:9px}
.card p{font-size:15px;color:var(--ink-2);line-height:1.62}
ul.tick{list-style:none;margin-top:14px}
ul.tick li{position:relative;padding-left:24px;font-size:15.5px;color:var(--ink-2);line-height:1.55;margin-bottom:10px}
ul.tick li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--mag)}
ul.tick.m li::before{background:var(--moss)}
ul.tick b{color:var(--ink);font-weight:600}

/* ---------- photography ---------- */
.ph{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.wide{aspect-ratio:16/8}
.ph.tall{aspect-ratio:4/3}
.band{position:relative;overflow:hidden;height:clamp(200px,28vw,350px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,17,48,.20) 0%,rgba(30,17,48,.02) 42%,rgba(30,17,48,.26) 100%)}

/* ---------- trust row ---------- */
.trust{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
@media(min-width:760px){.trust{grid-template-columns:repeat(3,1fr)}}
.trust div{padding:21px 23px;border-bottom:1px solid var(--line)}
@media(min-width:760px){.trust div{border-bottom:none;border-right:1px solid var(--line)}.trust div:last-child{border-right:none}}
.trust div:last-child{border-bottom:none}
.trust b{display:block;font-family:var(--fd);font-size:16px;font-weight:800;color:var(--vio);letter-spacing:-.02em;margin-bottom:6px}
.trust span{font-size:14.5px;color:var(--ink-2);line-height:1.56}

/* ---------- rate band ---------- */
.rate{background:var(--vio);color:#fff;padding:42px 0;position:relative;overflow:hidden}
.rate::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 6% 0%,rgba(199,123,194,.24),transparent 62%)}
.rate .wrap{position:relative;z-index:2;display:grid;gap:24px;align-items:center}
@media(min-width:940px){.rate .wrap{grid-template-columns:auto 1fr auto;gap:38px}}
.rate .n{font-family:var(--fd);font-size:clamp(42px,6vw,62px);font-weight:800;letter-spacing:-.045em;line-height:.95}
.rate .n small{display:block;font-family:var(--fb);font-size:14px;font-weight:500;color:rgba(255,255,255,.7);letter-spacing:0;margin-top:9px;line-height:1.4}
.rate h2{font-family:var(--fd);font-size:clamp(21px,2.7vw,27px);font-weight:800;letter-spacing:-.028em;line-height:1.2}
.rate p{font-size:15.5px;color:rgba(255,255,255,.78);margin-top:12px;line-height:1.62;max-width:600px}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.area{font-family:var(--fd);font-size:14px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--vio)}
.area.hi{background:var(--vio);border-color:var(--vio);color:#fff}

/* ---------- steps ---------- */
.flow{display:grid;gap:18px;margin-top:34px;counter-reset:f}
@media(min-width:860px){.flow{grid-template-columns:repeat(4,1fr)}}
.flow div{counter-increment:f;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px;position:relative}
.flow div::before{content:"0" counter(f);font-family:var(--fd);font-size:13px;font-weight:800;color:var(--mag);letter-spacing:.08em;display:block;margin-bottom:11px}
.flow h3{font-family:var(--fd);font-size:17px;font-weight:800;letter-spacing:-.024em;color:var(--vio);margin-bottom:8px;line-height:1.25}
.flow p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);margin-top:34px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-family:var(--fd);font-size:17.5px;font-weight:700;letter-spacing:-.02em;color:var(--vio);padding:19px 40px 19px 0;position:relative;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:25px;width:10px;height:10px;border-right:2.5px solid var(--mag);border-bottom:2.5px solid var(--mag);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(225deg);top:29px}
.faq p{font-size:15.5px;color:var(--ink-2);line-height:1.65;padding:0 20px 21px 0;max-width:780px}

/* ---------- closing band ---------- */
.close-band{background:var(--vio-deep);color:#fff;position:relative;overflow:hidden}
.close-band::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 33px,rgba(255,255,255,.03) 33px 34px),
  radial-gradient(90% 110% at 8% 0%,rgba(199,123,194,.22),transparent 60%)}
.close-band .wrap{position:relative;z-index:2;padding:58px 22px;text-align:center}
.close-band h2{font-family:var(--fd);font-size:clamp(27px,4vw,39px);font-weight:800;letter-spacing:-.032em;line-height:1.08}
.close-band h2 em{font-style:normal;color:var(--lilac)}
.close-band p{font-size:16.5px;color:rgba(255,255,255,.76);margin:15px auto 0;max-width:600px;line-height:1.62}
.close-cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:26px}
.close-band .btn.o{border-color:rgba(255,255,255,.5);color:#fff}

/* ---------- footer ---------- */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:38px 0 32px}
.ft{display:grid;gap:24px}
@media(min-width:860px){.ft{grid-template-columns:1.3fr 1fr 1fr}}
.ft h4{font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.ft p,.ft li{font-size:14px;color:var(--ink-2);line-height:1.65}
.ft ul{list-style:none}
.legal{margin-top:28px;padding-top:21px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);line-height:1.65}

/* ---------- mobile sticky call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--vio);display:grid;grid-template-columns:1fr 1fr;gap:1px;box-shadow:0 -6px 20px rgba(0,0,0,.16)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 10px;font-family:var(--fd);font-size:15px;font-weight:800;color:#fff;text-decoration:none;background:var(--vio)}
.callbar a.p{background:var(--mag)}
@media(min-width:760px){.callbar{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   MULTI-PAGE EXTENSIONS
   Everything above this line is the approved landing-page design system,
   carried over unchanged so the website and the advert page are one brand.
   Everything below exists only because a website has navigation, breadcrumbs,
   a price table and local pages, and a single advert page does not.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--vio);color:#fff;
  font-family:var(--fd);font-weight:800;padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--mag);outline-offset:2px;border-radius:4px}

/* ---------- primary navigation ---------- */
.nav{display:none}
@media(min-width:1000px){
  .nav{display:flex;align-items:center;gap:26px}
  .nav a{font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:-.012em;
    color:var(--vio);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
  .nav a:hover{border-bottom-color:var(--lilac)}
  .nav a[aria-current="page"]{border-bottom-color:var(--mag);color:var(--mag-deep)}
}
.burger{display:flex;align-items:center;gap:9px;background:none;border:1.5px solid var(--line);
  border-radius:999px;padding:9px 15px;font-family:var(--fd);font-size:14px;font-weight:800;
  color:var(--vio);cursor:pointer}
@media(min-width:1000px){.burger{display:none}}
.burger i{display:block;width:16px;height:2px;background:var(--vio);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--vio)}
.burger i::before{top:-5px}.burger i::after{top:5px}
.mnav{display:none;border-top:1px solid var(--line);background:#fff;padding:8px 0 18px}
.mnav.on{display:block}
@media(min-width:1000px){.mnav,.mnav.on{display:none}}
.mnav a{display:block;font-family:var(--fd);font-size:16.5px;font-weight:700;color:var(--vio);
  text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line)}
.mnav a[aria-current="page"]{color:var(--mag-deep)}
.mnav .sub{font-family:var(--fb);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:18px 0 4px;border:0}

/* ---------- breadcrumb ---------- */
.crumb{background:var(--paper-2);border-bottom:1px solid var(--line);padding:12px 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13.5px;color:var(--ink-3)}
.crumb a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--paper-3)}
.crumb a:hover{color:var(--mag-deep)}
.crumb li:not(:last-child)::after{content:"›";margin-left:8px;color:var(--paper-3)}
.crumb li[aria-current]{color:var(--vio);font-weight:600}

/* ---------- page head (interior pages) ---------- */
.phead{background:
  radial-gradient(110% 80% at 92% -20%,rgba(199,123,194,.18),transparent 60%),
  linear-gradient(180deg,var(--paper-2),var(--paper) 70%);
  border-bottom:1px solid var(--line);padding:40px 0 44px}
.phead h1{font-size:clamp(30px,4.3vw,45px)}
.phead .lede{margin-top:17px}
.phead .hero-cta{margin-top:24px}

/* ---------- prose ---------- */
.prose{max-width:66ch}
.prose h2{font-family:var(--fd);font-size:clamp(23px,2.9vw,30px);font-weight:800;
  letter-spacing:-.03em;line-height:1.16;color:var(--vio);margin:38px 0 13px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--fd);font-size:19px;font-weight:800;letter-spacing:-.024em;
  color:var(--vio);margin:26px 0 9px;line-height:1.3}
.prose p{font-size:16.5px;color:var(--ink-2);line-height:1.68;margin-bottom:15px}
.prose p b,.prose li b{color:var(--ink);font-weight:600}
.prose a{color:var(--mag-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- side-by-side content + rail ---------- */
.railed{display:grid;gap:34px}
@media(min-width:1000px){.railed{grid-template-columns:1fr 340px;gap:52px;align-items:start}}
.rail{display:grid;gap:16px}
@media(min-width:1000px){.rail{position:sticky;top:92px}}
.railcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px}
.railcard.v{background:var(--vio);border-color:var(--vio);color:#fff}
.railcard h3{font-family:var(--fd);font-size:17.5px;font-weight:800;letter-spacing:-.024em;
  color:var(--vio);line-height:1.25;margin-bottom:10px}
.railcard.v h3{color:#fff}
.railcard p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-bottom:14px}
.railcard.v p{color:rgba(255,255,255,.78)}
.railcard .tel{font-family:var(--fd);font-size:25px;font-weight:800;letter-spacing:-.035em;
  color:var(--mag-deep);text-decoration:none;display:block;line-height:1.1}
.railcard.v .tel{color:#fff}
.railcard .telsub{font-size:13px;color:var(--ink-3);margin-top:6px}
.railcard.v .telsub{color:rgba(255,255,255,.62)}

/* ---------- price table ---------- */
.ptab{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.ptab-row{display:grid;gap:0;border-bottom:1px solid var(--line)}
@media(min-width:680px){.ptab-row{grid-template-columns:1.35fr auto}}
.ptab-row:last-child{border-bottom:0}
.ptab-row.hd{background:var(--vio);color:#fff}
.ptab-row.hd b{font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:.02em}
.ptab-l{padding:20px 22px}
.ptab-l b{display:block;font-family:var(--fd);font-size:17.5px;font-weight:800;
  letter-spacing:-.024em;color:var(--vio);line-height:1.25;margin-bottom:6px}
.ptab-row.hd .ptab-l b{color:#fff;font-size:15px;margin:0}
.ptab-l span{font-size:14.5px;color:var(--ink-2);line-height:1.58}
.ptab-r{padding:20px 22px;border-top:1px solid var(--line);background:var(--paper)}
@media(min-width:680px){.ptab-r{border-top:0;border-left:1px solid var(--line);text-align:right;
  min-width:210px;display:flex;flex-direction:column;justify-content:center}}
.ptab-row.hd .ptab-r{background:transparent;border:0;color:#fff}
.ptab-r .fig{font-family:var(--fd);font-size:28px;font-weight:800;letter-spacing:-.04em;
  color:var(--vio);line-height:1;font-variant-numeric:tabular-nums}
.ptab-r .per{font-size:13.5px;color:var(--ink-3);margin-top:7px;line-height:1.4}

/* an unconfirmed figure is marked, never presented as fact */
.tbc{display:inline-flex;align-items:center;gap:6px;font-family:var(--fb);font-size:11px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#FDF3E3;
  border:1px solid #E8C98A;color:#8A5B16;border-radius:999px;padding:3px 9px;margin-top:9px}
.draftbar{background:#FDF3E3;border:1px solid #E8C98A;border-left:4px solid #C98A1E;
  border-radius:10px;padding:15px 18px;margin-bottom:26px}
.draftbar b{font-family:var(--fd);font-size:15px;color:#7A5214;display:block;margin-bottom:5px}
.draftbar p{font-size:14.5px;color:#7A5214;line-height:1.6;margin:0}

/* ---------- comparison ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:15px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  font-variant-numeric:tabular-nums}
.cmp th,.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--paper-2);font-family:var(--fd);font-size:12.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td b{color:var(--vio);font-weight:700}
.cmp .r{text-align:right}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- town grid ---------- */
.towns{display:grid;gap:14px}
@media(min-width:620px){.towns{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.towns{grid-template-columns:repeat(3,1fr)}}
.town{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:19px 21px 21px;text-decoration:none}
.town:hover{border-color:var(--mag);box-shadow:0 10px 26px rgba(51,32,74,.08)}
.town b{display:block;font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:-.026em;
  color:var(--vio);line-height:1.2;margin-bottom:6px}
.town span{display:block;font-size:14px;color:var(--ink-2);line-height:1.55}
.town .go{display:inline-block;font-family:var(--fd);font-size:13.5px;font-weight:800;
  color:var(--mag-deep);margin-top:11px}

/* ---------- key-fact strip ---------- */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
@media(min-width:680px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts div{background:#fff;padding:20px 22px}
.facts dt{font-family:var(--fb);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.facts dd{font-family:var(--fd);font-size:17px;font-weight:800;letter-spacing:-.022em;
  color:var(--vio);line-height:1.3}
.facts dd small{display:block;font-family:var(--fb);font-size:13.5px;font-weight:400;
  color:var(--ink-2);margin-top:5px;line-height:1.5}

/* ---------- note / callout ---------- */
.callout{background:var(--moss-pale);border:1px solid rgba(63,125,94,.26);
  border-left:4px solid var(--moss);border-radius:10px;padding:18px 20px;margin:22px 0}
.callout b{font-family:var(--fd);font-size:16px;color:var(--moss);display:block;margin-bottom:6px}
.callout p{font-size:15px;color:var(--ink-2);line-height:1.62;margin:0}

/* ---------- carer / applicant diverter ---------- */
.divert{background:var(--vio-deep);color:#fff;border-radius:var(--r);padding:26px 26px 28px;
  display:grid;gap:18px}
@media(min-width:760px){.divert{grid-template-columns:1fr auto;align-items:center;gap:28px}}
.divert h3{font-family:var(--fd);font-size:21px;font-weight:800;letter-spacing:-.028em;
  line-height:1.22;margin-bottom:8px}
.divert p{font-size:15px;color:rgba(255,255,255,.76);line-height:1.6;margin:0}
.divert .btn.o{border-color:rgba(255,255,255,.55);color:#fff}

/* ---------- thank-you ---------- */
.ty{text-align:center;max-width:620px;margin:0 auto;padding:68px 0 64px}
.ty .tick{width:70px;height:70px;border-radius:50%;background:var(--moss-pale);
  border:2px solid var(--moss);margin:0 auto 24px;position:relative}
.ty .tick::after{content:"";position:absolute;left:24px;top:17px;width:16px;height:29px;
  border-right:4px solid var(--moss);border-bottom:4px solid var(--moss);transform:rotate(42deg)}
.ty h1{font-size:clamp(28px,4.4vw,42px)}
.ty p{font-size:17px;color:var(--ink-2);line-height:1.66;margin-top:17px}
.ty .hero-cta{justify-content:center}

/* ---------- footer nav columns ---------- */
.ft ul li{margin-bottom:8px}
.ft ul a{text-decoration:none;border-bottom:1px solid transparent}
.ft ul a:hover{color:var(--mag-deep);border-bottom-color:var(--lilac)}
.ft .tel{font-family:var(--fd);font-size:21px;font-weight:800;letter-spacing:-.03em;
  color:var(--mag-deep);text-decoration:none;display:inline-block;margin-bottom:4px}


/* ══════════════════════════════════════════════════════════════════════════
   HERO WITH PHOTOGRAPHY
   The advert page had no hero image because it had one job and a form to get to.
   A website is judged on its first screen, so this carries a photograph with a
   violet scrim heavy enough to hold white type at AA on the copy side.
   ══════════════════════════════════════════════════════════════════════════ */
.hero.shot{background:var(--vio-deep);border-bottom:0;padding:0;position:relative;overflow:hidden}
.hero.shot .shot-media{position:absolute;inset:0}
.hero.shot .shot-media img{width:100%;height:100%;object-fit:cover;object-position:72% 42%}
.hero.shot .shot-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(24,13,38,.96) 0%,rgba(24,13,38,.93) 38%,rgba(24,13,38,.72) 62%,rgba(24,13,38,.52) 100%)}
/* On a phone the photograph stops being a background and becomes the picture.
   Laying white type over a full-bleed image at 390 needs a scrim so heavy that the
   photograph disappears, which defeats the point of having one. So below 980 the
   image sits on top at its own aspect ratio and the copy sits under it on solid
   violet, where white type runs at about 16:1 with no scrim at all. */
@media(max-width:979px){
  .hero.shot{display:flex;flex-direction:column;background:var(--vio-deep)}
  .hero.shot .shot-media{position:relative;inset:auto;width:100%;aspect-ratio:16/10;flex:0 0 auto}
  .hero.shot .shot-media img{object-position:62% 38%}
  .hero.shot .shot-media::after{background:linear-gradient(180deg,
    rgba(24,13,38,0) 62%,rgba(24,13,38,.45) 84%,rgba(24,13,38,1) 100%)}
  .hero.shot .wrap{padding-top:22px;padding-bottom:34px}
  /* the hero was carrying four chips on three rows and two stacked buttons, with the
     sticky call bar repeating one of them at the foot of the screen */
  .hero.shot .eyebrow{font-size:11px;letter-spacing:.09em;margin-bottom:11px}
  .hero.shot .chips{gap:7px;margin-top:18px}
  .hero.shot .chip{font-size:12.5px;padding:6px 12px}
  .hero.shot .chip.m{display:none}
  .hero.shot .hero-cta{margin-top:20px}
  .hero.shot .hero-cta .btn.o{display:none}
  .hero.shot .hero-cta .btn.p{width:100%}
  .hero.shot .lede{font-size:16.5px;margin-top:15px}
}
@media(max-width:400px){
  .hero.shot .shot-media{aspect-ratio:3/2}
}
.hero.shot .wrap{position:relative;z-index:2;padding-top:52px;padding-bottom:58px}
.hero.shot h1{color:#fff}
.hero.shot h1 em{color:var(--lilac)}
.hero.shot .eyebrow{color:var(--lilac)}
.hero.shot .lede{color:rgba(255,255,255,.88)}
.hero.shot .lede b{color:#fff}
.hero.shot .chip{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.42);color:#fff}
.hero.shot .chip.m{background:rgba(160,220,190,.16);border-color:rgba(160,220,190,.42);color:#DCF2E6}
.hero.shot .btn.o{border-color:rgba(255,255,255,.62);color:#fff}

/* ---------- who we care for ---------- */
.who{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:32px}
@media(min-width:640px){.who{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.who{grid-template-columns:repeat(3,1fr)}}
.who div{background:#fff;padding:22px 23px 24px}
.who h3{font-family:var(--fd);font-size:17px;font-weight:800;letter-spacing:-.024em;
  color:var(--vio);line-height:1.28;margin-bottom:8px}
.who p{font-size:14.5px;color:var(--ink-2);line-height:1.62}

/* ---------- a morning with us ---------- */
.tl{margin-top:34px;border-left:2px solid var(--paper-3);padding-left:26px;
  display:grid;gap:26px;max-width:640px}
.tl div{position:relative}
.tl div::before{content:"";position:absolute;left:-33px;top:5px;width:13px;height:13px;
  border-radius:50%;background:var(--mag);border:3px solid var(--paper)}
.tl b{display:block;font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mag-deep);margin-bottom:6px}
.tl h3{font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:-.024em;
  color:var(--vio);line-height:1.28;margin-bottom:7px}
.tl p{font-size:15.5px;color:var(--ink-2);line-height:1.64}

/* ---------- questions to ask ---------- */
.qa{display:grid;gap:16px;margin-top:32px}
@media(min-width:880px){.qa{grid-template-columns:1fr 1fr}}
.qa div{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 23px 24px;border-top:3px solid var(--mag)}
.qa h3{font-family:var(--fd);font-size:17.5px;font-weight:800;letter-spacing:-.024em;
  color:var(--vio);line-height:1.3;margin-bottom:9px}
.qa p{font-size:15px;color:var(--ink-2);line-height:1.63}
.qa p b{color:var(--ink)}

/* ---------- our carers ---------- */
.crew{display:grid;gap:22px;align-items:center}
@media(min-width:960px){.crew{grid-template-columns:.95fr 1.05fr;gap:44px}}
.crew .ph{aspect-ratio:5/4}

/* ---------- guidance links ---------- */
.links{display:grid;gap:14px;margin-top:28px}
@media(min-width:720px){.links{grid-template-columns:1fr 1fr}}
.links a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;text-decoration:none}
.links a:hover{border-color:var(--mag);box-shadow:0 10px 24px rgba(51,32,74,.07)}
.links b{display:block;font-family:var(--fd);font-size:16.5px;font-weight:800;
  letter-spacing:-.022em;color:var(--vio);margin-bottom:5px}
.links span{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.58}

/* ---------- promises ---------- */
.prom{display:grid;gap:16px;margin-top:30px}
@media(min-width:760px){.prom{grid-template-columns:1fr 1fr}}
.prom div{display:flex;gap:15px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.prom .n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--mag-pale);
  border:1px solid rgba(146,40,140,.28);color:var(--mag-deep);font-family:var(--fd);
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
.prom h3{font-family:var(--fd);font-size:16.5px;font-weight:800;letter-spacing:-.022em;
  color:var(--vio);margin-bottom:6px;line-height:1.3}
.prom p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ---------- image + text pairing, either way round ---------- */
.crew.rev > *:first-child{order:2}
.crew.rev .ph{aspect-ratio:4/5}
@media(max-width:959px){.crew.rev > *:first-child{order:0}}
.band.tall{height:clamp(220px,32vw,420px)}
.ph.frame{box-shadow:0 18px 44px rgba(51,32,74,.13)}

/* ══════════════════════════════════════════════════════════════════════════
   REGISTRATION BADGE
   This is OUR mark, not the CQC's. The CQC does not licence its logo to
   providers as a trust mark; what it licences is the official ratings widget,
   and that widget renders this provider's current status, which is "Not rated".
   So the badge carries the one thing that is both true and checkable: the
   registration, the location ID, and a link straight to the regulator's own
   page. Inviting the visitor to verify is a stronger signal than a logo.
   WHEN A RATING IS AWARDED: set CQC_RATING in the build script and swap this
   for the official widget, which CQC requires providers to display.
   ══════════════════════════════════════════════════════════════════════════ */
.cqc{display:flex;gap:15px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--moss);
  border-radius:12px;padding:17px 19px}
.cqc .mark{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--moss-pale);
  border:1px solid rgba(60,120,90,.32);display:flex;align-items:center;justify-content:center}
.cqc .mark svg{width:20px;height:20px;display:block}
.cqc b{display:block;font-family:var(--fd);font-size:15.5px;font-weight:800;
  letter-spacing:-.018em;color:var(--vio);line-height:1.3;margin-bottom:4px}
.cqc p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}
.cqc .id{font-family:var(--fm);font-size:12.5px;color:var(--ink-2)}
.cqc a{display:inline-block;margin-top:7px;font-family:var(--fd);font-size:13.5px;
  font-weight:800;color:var(--moss);text-decoration:none;border-bottom:1.5px solid rgba(60,120,90,.38)}
.cqc a:hover{color:var(--vio);border-bottom-color:var(--vio)}
.cqc.onvio{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  border-left-color:#9FD9BE}
.cqc.onvio b{color:#fff}
.cqc.onvio p,.cqc.onvio .id{color:rgba(255,255,255,.82)}
.cqc.onvio a{color:#9FD9BE;border-bottom-color:rgba(159,217,190,.45)}
.cqc.onvio .mark{background:rgba(159,217,190,.16);border-color:rgba(159,217,190,.4)}
.qf + .cqc{margin-top:14px}

/* ---------- phone header ----------
   At 390 the wordmark, the CTA pill and the Menu button fight for one row and the
   wordmark strapline wraps to three lines. The sticky call bar at the bottom of the
   screen already carries both calls to action on phones, so the header pill is
   redundant there and comes out. */
@media(max-width:620px){
  .hd .btn.p.sm{display:none}
  .wm{font-size:18.5px}
  .wm span{font-size:10.5px;letter-spacing:.04em}
}
@media(max-width:430px){
  .wm span{display:none}
  .burger{padding:9px 13px}
}

@media print{.callbar,.nav,.burger,.mnav,.skip{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
  scroll-behavior:auto!important}}