/*
  Hearthside Home Care (H10)
  Harmony: SPLIT-COMPLEMENTARY around green. Pine green (hue 160deg) is the base: steady, dependable, the color of
  a well-kept garden. Its complement would be red-orange; instead we use the two colors on either side of it,
  marigold (hue 33deg) for warmth and action, and plum (hue 330deg) for a quieter second voice. The photo shoot
  (Centre for Ageing Better) is full of red cardigans, orange dresses and green kitchens, so the palette is theirs.
  Older visitors read this site, so type is large (19px body), contrast is AAA for all body text, and every
  control is big enough for a hand that shakes a little.
  60%  --sage     #F0F4EE  page background; --white #FFFFFF panels
  30%  --pine     #1E4A3C  headings, dark bands, primary buttons; --ink #17251F body text; --grey #44544C secondary
       --moss     #DCE6D8  tints; --butter #FBE7C4 warm tint behind the estimate
  10%  --marigold #E08A1E  action fills with ink text, the estimate figure background; --amber #8A5200 small accent text
       --plum     #7E3457  quotes, second-level marks
  Contrast (WCAG, AAA is 7:1): ink on sage 14.29, ink on white 15.90, grey on sage 7.21, grey on white 8.02,
  pine on sage 8.99, white on pine 10.00, sage on pine 8.99, butter on pine 8.25, moss-text #C9DACF on pine 6.86
  (secondary only), ink on marigold 5.92 (large button text), ink on butter 13.12, plum on sage 7.50,
  plum on butter 6.89, amber on sage 5.74 (small accent text, never body).
  Shapes: gentle, 18px panels, 10px inputs, pill buttons, 2px borders so edges are easy to see.
*/
:root {
  --sage: #F0F4EE; --white: #FFFFFF; --pine: #1E4A3C; --pine-deep: #153629; --ink: #17251F; --grey: #44544C; --moss: #DCE6D8; --butter: #FBE7C4;
  --marigold: #E08A1E; --marigold-deep: #C77712; --amber: #8A5200; --plum: #7E3457; --line: #C4D1C7;
  --serif: "Literata", Georgia, serif; --sans: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --pad: clamp(1.1rem, 4vw, 3.5rem); --max: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sage); color: var(--ink); font: 400 1.1875rem/1.6 var(--sans); overflow-x: hidden; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.01em; text-wrap: balance; color: var(--pine); }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; }
p + p { margin-top: .9em; }
.muted { color: var(--grey); }
.lede { font-size: 1.3rem; max-width: 30em; color: var(--grey); }
:focus-visible { outline: 4px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none !important; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--pine); color: var(--white); padding: .6rem 1rem; z-index: 60; border-radius: 8px; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: .9rem 1.7rem; font: 700 1.1rem/1 var(--sans); text-decoration: none; border: 2px solid transparent; border-radius: 999px; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--pine { background: var(--pine); color: var(--white); }
.btn--pine:hover { background: var(--pine-deep); }
.btn--marigold { background: var(--marigold); color: var(--ink); }
.btn--marigold:hover { background: var(--marigold-deep); }
.btn--line { border-color: var(--pine); color: var(--pine); }
.btn--line:hover { background: var(--pine); color: var(--white); }
.btn--white { background: var(--white); color: var(--pine); }
.btn--white:hover { background: var(--moss); }
.btn--wide { width: 100%; }
.link { color: var(--pine); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { color: var(--plum); }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: var(--sage); border-bottom: 2px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 1.4rem; min-height: 78px; }
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; font: 700 1.35rem/1 var(--serif); color: var(--pine); margin-right: auto; }
.logo svg { width: 40px; height: 40px; }
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); font-weight: 700; font-size: 1.05rem; }
.nav a { text-decoration: none; padding: .4rem 0; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--marigold); }
.top .btn { min-height: 48px; padding-inline: 1.3rem; font-size: 1rem; }
.burger { display: none; min-height: 48px; padding: .5rem 1rem; border: 2px solid var(--pine); border-radius: 999px; background: transparent; font: 700 1rem var(--sans); color: var(--pine); cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.hero__copy { display: grid; gap: 1.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__phone { display: grid; gap: .1rem; border-left: 4px solid var(--marigold); padding-left: 1rem; }
.hero__phone a { font: 700 1.6rem/1.1 var(--serif); color: var(--pine); text-decoration: none; }
.hero__phone span { color: var(--grey); font-size: 1rem; }
.hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 18px; }

/* Example weeks */
.weeks { padding: clamp(2rem, 5vw, 4rem) 0; }
.weeks__head { display: grid; gap: .7rem; max-width: 36em; margin-bottom: 1.6rem; }
.weeks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.week { background: var(--white); border: 2px solid var(--line); border-radius: 18px; padding: 1.5rem; display: grid; gap: .8rem; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.week:hover { border-color: var(--pine); transform: translateY(-3px); }
.week--warm { background: var(--butter); border-color: var(--butter); }
.week__hours { font: 700 2.6rem/1 var(--serif); color: var(--pine); }
.week__hours small { font: 700 1rem/1 var(--sans); color: var(--grey); margin-left: .3rem; }
.week ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: 1.02rem; color: var(--grey); }
.week li { padding-left: 1.3rem; position: relative; }
.week li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--marigold); }
.week__price { border-top: 2px solid rgba(23, 37, 31, .12); padding-top: .8rem; display: grid; gap: .1rem; }
.week__price b { font: 700 1.5rem/1.1 var(--serif); color: var(--ink); }
.week__price span { font-size: .95rem; color: var(--grey); }

/* Services on home */
.kinds { background: var(--pine); color: var(--white); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.kinds h2 { color: var(--white); }
.kinds__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: 2rem; }
.kinds__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.kinds__list li { padding: 1.1rem 0; border-top: 2px solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; align-items: baseline; }
.kinds__list b { font: 600 1.4rem/1.2 var(--serif); }
.kinds__list span { color: #C9DACF; font-size: 1.05rem; grid-column: 1; }
.kinds__list em { font-style: normal; color: var(--butter); font-weight: 700; white-space: nowrap; grid-column: 2; grid-row: 1; }
.kinds__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.kinds .btn { margin-top: 2rem; }

/* Hiring sequence */
.hiring { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.hiring__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
.hstep { display: grid; gap: .5rem; border-top: 4px solid var(--marigold); padding-top: 1rem; }
.hstep b { font: 700 1.1rem/1 var(--serif); color: var(--plum); }
.hstep h3 { font-size: 1.3rem; }
.hstep p { color: var(--grey); font-size: 1.02rem; }

/* Quote */
.quote { padding: 0 0 clamp(2.5rem, 6vw, 5rem); }
.quote__in { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--white); border-radius: 18px; overflow: hidden; }
.quote__in img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.quote blockquote { margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) 0; font: 500 clamp(1.4rem, 2.4vw, 1.9rem)/1.4 var(--serif); color: var(--plum); }
.quote figcaption { margin-top: 1rem; font: 400 1.05rem/1.4 var(--sans); color: var(--grey); }

/* Practical */
.practical { border-top: 2px solid var(--line); padding: clamp(2rem, 5vw, 4rem) 0; }
.practical__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.practical h2 { font-size: 1.7rem; }
.practical p { margin-top: .8rem; }
.practical a.tel { font: 700 1.6rem/1.2 var(--serif); color: var(--pine); text-decoration: none; }

.foot { background: var(--white); border-top: 2px solid var(--line); padding: 2rem 0; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 1rem; color: var(--grey); }

/* Page head */
.page-head { padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; }
.page-head > * { max-width: 34em; }

/* Services page */
.svc-list { display: grid; gap: 1.2rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.svc { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(1.4rem, 3vw, 3rem); background: var(--white); border: 2px solid var(--line); border-radius: 18px; overflow: hidden; }
.svc img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.svc__body { padding: clamp(1.3rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2.2rem) 0; display: grid; gap: .9rem; align-content: center; }
.svc__rate { display: inline-flex; align-items: center; gap: .5rem; background: var(--butter); border-radius: 999px; padding: .4rem 1rem; font-weight: 700; font-size: 1rem; justify-self: start; }
.svc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: 1.05rem; }
.svc li { padding-left: 1.4rem; position: relative; }
.svc li::before { content: ""; position: absolute; left: 0; top: .52em; width: 10px; height: 10px; border-radius: 50%; background: var(--pine); }
.svc--flip img { order: 2; }
.svc--flip .svc__body { padding: clamp(1.3rem, 3vw, 2.2rem) 0 clamp(1.3rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2.2rem); }

/* Caregivers page */
.cg-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 3rem); align-items: center; padding-bottom: clamp(2rem, 5vw, 4rem); }
.cg-intro img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.checks { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: .7rem; align-items: start; font-size: 1.05rem; }
.checks li::before { content: ""; width: 24px; height: 24px; margin-top: .1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231E4A3C'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23FFFFFF' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.cg { background: var(--white); border: 2px solid var(--line); border-radius: 18px; padding: 1.5rem; display: grid; grid-template-columns: 72px 1fr; gap: 1.2rem; align-items: start; }
.cg__mark { width: 72px; height: 72px; border-radius: 50%; background: var(--marigold); color: var(--ink); display: grid; place-items: center; font: 700 1.8rem/1 var(--serif); }
.cg:nth-child(2n) .cg__mark { background: var(--moss); color: var(--pine); }
.cg__body { display: grid; gap: .4rem; }
.cg__body h3 { font-size: 1.4rem; }
.cg__facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .3rem; padding: 0; list-style: none; }
.cg__facts li { background: var(--sage); border-radius: 999px; padding: .3rem .8rem; font-size: .95rem; font-weight: 700; color: var(--pine); }
.cg__body q { color: var(--grey); font-size: 1.05rem; font-style: italic; }

/* Plan builder page */
.builder { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.form { display: grid; gap: 1.4rem; background: var(--white); border: 2px solid var(--line); border-radius: 18px; padding: clamp(1.3rem, 3vw, 2.2rem); }
.form h2 { font-size: 1.6rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
legend, .field label, .field > span { font-weight: 700; font-size: 1.05rem; }
legend { margin-bottom: .4rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field input, .field select, .field textarea { font: 400 1.1rem/1.4 var(--sans); color: var(--ink); padding: .85rem 1rem; border: 2px solid var(--grey); border-radius: 10px; background: var(--white); width: 100%; min-height: 56px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 4px solid var(--marigold); outline-offset: 1px; border-color: var(--pine); }
.field textarea { min-height: 120px; resize: vertical; }
.field small { color: var(--grey); font-size: .95rem; }
.range { display: grid; gap: .6rem; }
.range__out { display: flex; align-items: baseline; gap: .6rem; }
.range__out b { font: 700 2.4rem/1 var(--serif); color: var(--pine); }
.range__out span { color: var(--grey); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--pine) var(--fill, 20%), var(--moss) var(--fill, 20%)); outline-offset: 6px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--marigold); border: 4px solid var(--white); box-shadow: 0 2px 8px rgba(23, 37, 31, .35); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--marigold); border: 4px solid var(--white); box-shadow: 0 2px 8px rgba(23, 37, 31, .35); cursor: pointer; }
.range__marks { display: flex; justify-content: space-between; font-size: .95rem; color: var(--grey); }
.kind { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind label { display: grid; gap: .25rem; padding: 1rem 1rem 1rem 3.2rem; border: 2px solid var(--grey); border-radius: 12px; cursor: pointer; position: relative; min-height: 96px; background: var(--white); }
.kind label::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--grey); }
.kind label::after { content: ""; position: absolute; left: calc(1rem + 6px); top: calc(1.15rem + 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--pine); transform: scale(0); transition: transform .15s ease; }
.kind input:checked + label { border-color: var(--pine); background: var(--moss); }
.kind input:checked + label::before { border-color: var(--pine); }
.kind input:checked + label::after { transform: scale(1); }
.kind input:focus-visible + label { outline: 4px solid var(--marigold); outline-offset: 3px; }
.kind b { font: 700 1.2rem/1.2 var(--serif); }
.kind span { color: var(--grey); font-size: 1rem; }
.kind em { font-style: normal; font-weight: 700; color: var(--amber); font-size: .98rem; }
.note { font-size: 1rem; color: var(--grey); }
.success { display: grid; gap: .8rem; background: var(--butter); border-radius: 18px; padding: 2rem; }
.success[hidden] { display: none; }
.success h2 { font-size: 1.8rem; }

.estimate { position: sticky; top: 100px; display: grid; gap: 1rem; }
.estimate__card { background: var(--butter); border-radius: 18px; padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: .9rem; }
.estimate__card h2 { font-size: 1.4rem; color: var(--ink); }
.estimate__big { font: 700 clamp(2.6rem, 4.5vw, 3.6rem)/1 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.estimate__big small { font: 700 1.1rem/1 var(--sans); color: var(--grey); margin-left: .3rem; }
.estimate__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; border-top: 2px solid rgba(23, 37, 31, .12); padding-top: 1rem; font-size: 1.05rem; }
.estimate__rows li { display: flex; justify-content: space-between; gap: 1rem; }
.estimate__rows li span:last-child { font-weight: 700; text-align: right; }
.estimate__note { font-size: .98rem; color: var(--grey); }
.estimate__call { background: var(--white); border: 2px solid var(--line); border-radius: 18px; padding: 1.4rem; display: grid; gap: .4rem; }
.estimate__call a.tel { font: 700 1.7rem/1.1 var(--serif); color: var(--pine); text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { opacity: 0; transform: translateY(10px); animation: up .6s ease-out forwards; }
  .hero__copy > :nth-child(2) { animation-delay: .1s; } .hero__copy > :nth-child(3) { animation-delay: .2s; } .hero__copy > :nth-child(4) { animation-delay: .3s; }
  @keyframes up { to { opacity: 1; transform: none; } }
}

@media (max-width: 1000px) {
  .weeks__grid { grid-template-columns: 1fr; }
  .hiring__grid { grid-template-columns: 1fr 1fr; }
  .practical__grid { grid-template-columns: 1fr; }
  .builder, .cg-grid, .cg-intro, .kinds__grid { grid-template-columns: 1fr; }
  .estimate { position: static; }
  .kinds__media { max-width: 420px; }
}
@media (max-width: 800px) {
  body { font-size: 1.125rem; }
  .nav, .top .btn--marigold { display: none; }
  .burger { display: inline-flex; }
  .top.is-open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--sage); border-bottom: 2px solid var(--line); padding: 1rem var(--pad) 1.4rem; gap: .3rem; font-size: 1.2rem; }
  .top.is-open .nav a { padding: .8rem 0; }
  .hero, .svc, .svc--flip, .quote__in, .row, .kind { grid-template-columns: 1fr; }
  .hero__media img { aspect-ratio: 4 / 3; }
  .svc img, .svc--flip img { order: 0; min-height: 0; max-height: 280px; }
  .svc__body, .svc--flip .svc__body { padding: 1.3rem; }
  .hiring__grid { grid-template-columns: 1fr; }
  .quote__in img { min-height: 0; max-height: 300px; }
  .quote blockquote { padding: 1.4rem; }
  .kinds__list li { grid-template-columns: 1fr; }
  .kinds__list em { grid-column: 1; grid-row: auto; }
  .cg { grid-template-columns: 1fr; }
}