/* pages.css: the inner pages (services, towns, help, legal, holiday).
   Loaded after home.css, which already sets the colours, type, header,
   footer, pills, section labels, leaves, brush marks, FAQ and reviews. */

/* ------------------------------------------------------------ breadcrumb */
.trail { padding: 14px 0; border-bottom: 1px solid var(--cream-3); background: var(--white); font-size: .8rem; }
.trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-faint); }
.trail li { display: inline-flex; align-items: center; gap: 10px; }
/* the dot ends the item before it, so a wrapped line never starts with a dot */
.trail li:not(:last-child)::after { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--tan); }
.trail a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px; padding-inline: 4px; margin-inline: -4px; color: var(--sage-ink); text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 3px; }
.trail [aria-current] { color: var(--ink-soft); }
/* phones: the current page gets its own line, so no separator dot is left hanging at the end of the line above */
@media (max-width: 600px) { .trail li:last-child { flex-basis: 100%; } .trail li:nth-last-child(2)::after { display: none; } }
@media (max-width: 1024px) { .trail a { margin-block: 0; } }

/* ------------------------------------------------------------ page cover
   The top of each inner page: words on the left, the page photo in the
   arch on the right. On phones the photo sits behind the words under a soft
   cream fade, the same as the homepage. */
.cover { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 7vw, 92px); background: var(--white); }
.cover__grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .cover__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
.cover__title { font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.1; }
.cover__copy > p { max-width: 36rem; margin-top: 16px; font-size: 1.02rem; color: var(--ink-soft); text-wrap: pretty; }
.cover__copy > p.offer { padding: 14px 18px; border: 1px solid var(--edge); border-radius: 14px; background: var(--cream); font-size: .95rem; }
.cover__copy > p.offer strong { display: block; color: var(--green-deep); font-weight: 600; }
.cover__copy > p.offer a, .cover__copy > p a { color: var(--sage-ink); text-decoration: underline; text-underline-offset: 3px; }
.cover .actions { margin-top: 26px; }
.cover__facts { display: grid; gap: 8px; max-width: 36rem; margin-top: 22px; }
.cover__facts li { display: flex; align-items: baseline; gap: 10px; font-size: .93rem; color: var(--ink-soft); }
.cover__facts li > i { flex: none; width: 16px; color: var(--olive); }
.cover__facts strong { color: var(--ink); font-weight: 500; }
.cover__photo { position: relative; justify-self: center; width: min(100%, 420px); }
.cover__photo::before { content: ''; position: absolute; inset: 8% -6% -5% 12%; border-radius: 999px 999px 32px 32px; background: var(--cream); }
.cover__arch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 6px solid var(--white); border-radius: 999px 999px 24px 24px; box-shadow: var(--lift-big); }
.cover__arch img { width: 100%; height: 100%; object-fit: cover; animation: settle 14s ease-in-out infinite alternate; }
.cover__credit { position: relative; text-wrap: balance; margin-top: 12px; font-size: .72rem; line-height: 1.4; text-align: center; color: var(--ink-faint); }
/* photo credit links: quiet underline, with a taller tap area that does not move the text */
.cover__credit a { padding-block: 15px; margin-block: -15px; white-space: nowrap; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cover__leaf { top: -30px; right: -34px; z-index: 1; width: 96px; rotate: 18deg; }
.cover__sprig { display: none; }
@media (min-width: 720px) {
  .cover__leaf { top: 4px; right: 10px; z-index: 0; width: 140px; }
  .cover__sprig { display: block; bottom: 30px; left: -30px; z-index: 0; width: 104px; }
}
/* tablets: the words run the full width here, so the leaf tucks into the corner, clear of the heading */
@media (min-width: 720px) and (max-width: 979px) { .cover__leaf { top: -64px; right: -44px; width: 116px; } }
/* pages without a photo: centred words on cream */
.cover--plain { background: var(--cream); text-align: center; }
.cover--plain .cover__grid { display: block; }
.cover--plain .cover__copy { max-width: 46rem; margin-inline: auto; }
.cover--plain .cover__copy > p { margin-inline: auto; }
.cover--plain .actions { justify-content: center; }
@media (max-width: 719px) {
  .cover--photo { padding: 28px 0 30px; }
  .cover--photo .cover__grid { position: static; z-index: auto; display: block; }
  .cover--photo .cover__copy { position: relative; z-index: 2; }
  .cover--photo .cover__photo { position: absolute; inset: 0; z-index: 0; justify-self: stretch; width: auto; }
  .cover--photo .cover__photo[data-rise] { transform: none; }
  .cover--photo .cover__photo::before { display: none; }
  .cover--photo .cover__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248, 241, 225, .74) 0%, rgba(248, 241, 225, .88) 36%, rgba(248, 241, 225, .95) 100%); }
  .cover--photo .cover__arch { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
  .cover--photo .cover__credit { position: absolute; right: 12px; bottom: 8px; left: 12px; z-index: 1; margin: 0; text-align: right; }
  .cover--photo .cover__copy { padding-bottom: 18px; }
  .cover__title { font-size: clamp(1.85rem, 8.4vw, 2.4rem); }
  .cover .actions .pill { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ shared bits */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.lede .actions, .finale .actions { justify-content: center; }
.fine { margin-top: 18px; font-size: .8rem; line-height: 1.6; color: var(--ink-faint); }
.lede .fine, .tiles + .fine, .pairs + .fine { text-align: center; }
.stamp { display: inline-block; margin-bottom: 18px; padding: 4px 12px; border-radius: 999px; background: var(--cream); font-size: .78rem; font-weight: 500; color: var(--sage-ink); }
.minor-head { margin-top: 28px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* reading column for prose-led sections */
.read { max-width: 44rem; margin-inline: auto; }
/* left-aligned section headings use the homepage's left-aligned heading size (.story__text h2) */
.read > h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.read > h3, .duo__text > h3 { margin-top: 30px; font-size: 1.3rem; }
.read > h2 + p, .read > h2 + ul, .duo__text > h2 + p { margin-top: 16px; }
/* a heading followed straight by cards gets the usual heading-to-card gap */
.read > h2 + .tiles, .duo__text > h2 + .tiles { margin-top: 26px; }
.read > p, .duo__text > p { margin-top: 14px; color: var(--ink-soft); }
.read > h3 + p { margin-top: 8px; }
.read a:not(.pill), .duo__text a:not(.pill), .tile a:not(.pill), .qa__a a, .finale p a, .lede p a, .fine a { color: var(--sage-ink); text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.read > .cue, .duo__text > .cue { margin-bottom: 16px; }
.read > ul, .read > ol, .duo__text > ul { margin-top: 18px; }
/* long documents: headings stay plain so the page reads as a document */
.read--doc > h2 { margin-top: 44px; font-size: clamp(1.45rem, 3vw, 1.85rem); }
.read--doc > h2:first-of-type { margin-top: 24px; }
.read--doc > * + .cue { margin-top: 44px; }
.read--doc > .cue + h2 { margin-top: 0; }
.read--doc > h3 { font-size: 1.12rem; }

/* plain lists */
.list { display: grid; gap: 8px; padding-left: 0; }
.list li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.list li::before { content: ''; position: absolute; top: .72em; left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
ol.list { counter-reset: n; }
ol.list li { counter-increment: n; padding-left: 30px; }
ol.list li::before { content: counter(n); top: .1em; left: 0; width: 22px; height: 22px; display: grid; place-items: center; background: var(--cream); border: 1px solid var(--edge); font-size: .72rem; font-weight: 600; color: var(--green); }

/* ticked lists */
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; align-items: baseline; gap: 12px; color: var(--ink-soft); }
.ticks li > i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(88, 129, 64, .14); color: var(--green); font-size: .66rem; transform: translateY(-2.8px); }
/* the circle lines up on its glyph's baseline, which leaves it 2.8px below the middle of the first line of words; the lift above centres it */
.ticks--plus li > i { background: var(--cream-3); color: var(--sage-ink); }
/* things we do not do: a red cross, never a green check */
.ticks--no li > i { background: #f6e7e1; color: #9c3a24; }

/* neighborhoods and places */
.places { display: grid; gap: 12px; }
@media (min-width: 720px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.places li { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid var(--edge); border-radius: 14px; background: var(--white); font-size: .92rem; color: var(--ink-soft); }
.places li > i { flex: none; margin-top: 4px; color: var(--olive); }
.places strong { color: var(--ink); font-weight: 500; }
.band--cream .places li { background: var(--white); }

/* ------------------------------------------------------------ photo and words side by side */
.duo { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .duo--top { align-items: start; } }
.duo__photo { position: relative; }
.duo__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--round); box-shadow: var(--lift-big); }
.duo__photo figcaption { margin-top: 10px; font-size: .76rem; color: var(--ink-faint); }
.duo__text > h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }

/* ------------------------------------------------------------ cards */
.tiles { display: grid; gap: 18px; }
@media (min-width: 680px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 680px) and (max-width: 999px) { .tiles--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tiles--1 { max-width: 40rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr) !important; }
.tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; border: 1px solid var(--edge); border-radius: var(--round); background: var(--white); box-shadow: var(--lift); transition: transform .3s var(--glide), box-shadow .3s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--lift-big); }
.band--cream .tile { background: var(--white); }
.tile h3 { font-size: 1.22rem; }
.tile p, .tile li { font-size: .93rem; color: var(--ink-soft); }
.tile .ticks { margin-top: 8px; gap: 8px; }
.tile--soft { border-style: dashed; background: var(--cream); box-shadow: none; }
.band--cream .tile--soft { background: var(--cream-2); }
.tile__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border: 1.5px solid var(--edge); border-radius: 14px; background: var(--cream); color: var(--green); font-size: 1.1rem; }
.tile .tile__figure { font-family: var(--serif); font-size: 2.6rem; line-height: 1.1; color: var(--green); }
.tile__figure small { display: block; margin-top: 4px; font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-ink); }
.tile__num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; background: var(--green); font-family: var(--serif); font-size: 1.1rem; color: var(--cream); }
.rates { display: grid; gap: 10px; margin-top: 6px; }
.rates li { padding: 12px 14px; border-radius: 12px; background: var(--cream); }
.rates strong { display: block; color: var(--green-deep); font-weight: 600; }

/* numbered steps */
.path { display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 760px) { .path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .path--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .path--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.duo .path { grid-template-columns: minmax(0, 1fr); }
.path > li { counter-increment: step; }
@media (min-width: 1100px) { .path--4 .tile h3 { min-height: calc(2em * 1.15); } }
@media (min-width: 1000px) { .tiles--even-heads .tile h3 { min-height: calc(2em * 1.15); } }
.path > li .tile__num::before { content: counter(step); }

/* ------------------------------------------------------------ green bands */
.band--green { background: var(--green); color: var(--on-green); }
.band--green h2, .band--green h3 { color: var(--cream); }
.band--green .lede p, .band--green .read > p, .band--green .duo__text > p, .band--green .list li, .band--green .ticks li { color: var(--on-green); }
.band--green .mark { color: var(--tan); }
.band--green .cue { border-color: rgba(211, 199, 161, .45); background: rgba(248, 241, 225, .08); color: var(--tan-soft); }
.band--green .cue__dot { background: var(--tan); }
.band--green .fine, .band--green .minor-head { color: rgba(248, 241, 225, .78); }
.band--green .tile { border-color: rgba(211, 199, 161, .3); background: rgba(248, 241, 225, .07); box-shadow: none; }
.band--green .tile p, .band--green .tile li { color: var(--on-green); }
.band--green .tile__figure { color: var(--tan); }
.band--green .tile__figure small { color: var(--tan-soft); }
.band--green .rates li { background: rgba(248, 241, 225, .1); }
.band--green .rates strong { color: var(--cream); }
.band--green .list li::before { background: var(--tan); }
.band--green .ticks li > i { background: rgba(211, 199, 161, .2); color: var(--tan-soft); }
.band--green a:not(.pill) { color: var(--tan-soft); text-decoration-color: rgba(211, 199, 161, .6); }
.band--green .leaf { color: var(--sage-light); opacity: .45; }
.band--green.band--rule { border-top-color: rgba(211, 199, 161, .3); }

/* ------------------------------------------------------------ closing call to action */
.finale { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(64px, 9vw, 104px) 0; background: var(--green); text-align: center; color: var(--on-green); }
.finale__inner { max-width: 40rem; }
.finale h2 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); color: var(--cream); }
.finale p { margin-top: 14px; color: var(--on-green); }
.finale .mark { color: var(--tan); }
.finale .leaf { z-index: -1; color: var(--sage-light); opacity: .45; }
.finale a:not(.pill) { color: var(--tan-soft); }

/* "Prefer we call you?" card where the live page had its own form */
.callcard { padding: 28px; border: 1px solid rgba(211, 199, 161, .4); border-radius: var(--round); background: rgba(248, 241, 225, .08); }
.callcard :is(h2, h3) { font-size: 1.5rem; color: var(--cream); }
.callcard p { margin-top: 10px; color: var(--on-green); }
.band:not(.band--green) .callcard { border-color: var(--edge); background: var(--cream); }
.band:not(.band--green) .callcard :is(h2, h3) { color: var(--green-deep); }
.band:not(.band--green) .callcard p { color: var(--ink-soft); }
.reach { display: grid; gap: 10px; margin-top: 22px; }
.reach li { display: flex; align-items: baseline; gap: 12px; font-size: .93rem; }
.reach li > i { flex: none; width: 18px; color: var(--tan); }
.band:not(.band--green) .reach li > i { color: var(--olive); }

/* at-a-glance strip on the landing pages */
.strip { background: var(--green); padding: 22px 0; }
.strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.strip li { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--cream); }
.strip li > i { color: var(--tan); }
.strip p { margin-top: 12px; font-size: .8rem; text-align: center; color: var(--on-green); }

/* ------------------------------------------------------------ the one real review */
.said { position: relative; margin-top: 22px; padding: 30px 28px 24px; border: 1px solid var(--edge); border-radius: var(--round); background: var(--white); box-shadow: var(--lift); }
.said::before { content: '\201C'; position: absolute; top: -6px; left: 20px; font-family: var(--serif); font-size: 4.4rem; line-height: 1; color: var(--tan); }
.said blockquote { margin: 0; }
.said blockquote p { font-family: var(--serif); font-size: 1.12rem; font-style: italic; line-height: 1.6; color: var(--ink); }
.said figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: .86rem; color: var(--ink-soft); }
.said figcaption strong { color: var(--green-deep); font-weight: 600; }
.said .stars { color: #c99a2e; }

/* ------------------------------------------------------------ FAQ page */
.qa-groups { display: grid; gap: 44px; max-width: 52rem; margin-inline: auto; }
.qa-group h3 { margin-bottom: 16px; font-size: 1.45rem; }
.qa-list { display: grid; gap: 12px; }
.qa__a > ul, .qa__a > ol { padding: 0 22px 18px 44px; list-style: disc; }
.qa__a > p + p { margin-top: -6px; }

/* ------------------------------------------------------------ before and after pairs */
.pairs { display: grid; gap: 22px; }
@media (min-width: 900px) { .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pair { overflow: hidden; border-radius: var(--round); background: var(--white); box-shadow: var(--lift); }
.pair__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--white); }
.pair__shot { position: relative; }
.pair__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair__tag { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--green-deep); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.pair__tag--after { background: var(--cream); color: var(--green-deep); }
.pair figcaption { padding: 14px 18px; font-size: .88rem; color: var(--ink-soft); }

/* ------------------------------------------------------------ checklist table */
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-bottom: 22px; font-size: .86rem; color: var(--ink-soft); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.mark-yes, .mark-add, .mark-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .7rem; font-weight: 700; }
.mark-yes { background: rgba(88, 129, 64, .16); color: var(--green); }
.mark-add { background: var(--tan-soft); color: var(--green-deep); }
.mark-no { background: var(--cream-3); color: var(--ink-faint); }
.matrix-wrap { position: relative; overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--round); background: var(--white); box-shadow: var(--lift); }
.matrix { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; }
.matrix th, .matrix td { padding: 12px 14px; border-bottom: 1px solid var(--cream-3); text-align: center; }
.matrix tbody th { font-weight: 400; text-align: left; color: var(--ink-soft); }
.matrix thead th { position: sticky; top: 0; background: var(--green); font-weight: 500; color: var(--cream); }
.matrix thead th:first-child { text-align: left; }
.matrix thead a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px -4px; padding: 0 4px; color: var(--cream); text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 3px; }
.matrix__group th { background: var(--cream); font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--green-deep); text-align: left; }
/* on phones the table fits the screen: the three service columns stay narrow and the task names wrap */
@media (max-width: 719px) {
  .matrix { min-width: 0; table-layout: fixed; font-size: .84rem; }
  .matrix th, .matrix td { padding: 10px 4px; }
  .matrix tbody th, .matrix thead th:first-child { padding-inline: 12px 6px; }
  .matrix thead th { font-size: .78rem; line-height: 1.3; }
  .matrix thead th:not(:first-child) { width: 19%; }
  .matrix__group th { padding-inline: 12px; }
}
.tile > .tile__more { margin-top: auto; }
.tile__more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------------------ card on file */
.vault { max-width: 34rem; margin-inline: auto; padding: 34px 30px; border: 1px solid var(--edge); border-radius: var(--round); background: var(--white); box-shadow: var(--lift-big); }
.vault h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); }
.vault p { margin-top: 12px; color: var(--ink-soft); }
.vault label { display: block; margin-top: 22px; font-size: .86rem; font-weight: 500; }
.vault input[type="text"] { width: 100%; min-height: 48px; margin-top: 6px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 12px; font: inherit; }
.vault #card-container { margin-top: 18px; min-height: 90px; }
.vault button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 12px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--green); font-weight: 500; color: var(--cream); cursor: pointer; }
.vault button[type="submit"]:hover { background: var(--green-deep); }
.vault .sc-status:empty { display: none; }
.vault .sc-fine { font-size: .84rem; }
.vault a { color: var(--sage-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ town lists */
.every--page { margin-top: 30px; }
.read .every__list { justify-content: flex-start; }
.read .every__list a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------ small fixes for narrow columns and phrases */
.read .tiles--3, .duo .tiles { grid-template-columns: minmax(0, 1fr); }
.tint { font-style: italic; color: var(--olive); }
.band--green .tint, .finale .tint { color: var(--tan); }
.kicker { font-size: .78rem !important; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink) !important; }
.cover__copy > .kicker + .kicker { margin-top: 4px; }
@media (max-width: 719px) { .on-desk { display: none; } }
@media (min-width: 720px) { .on-phone { display: none; } }

/* links inside list items get a taller touch area on phones and tablets, without moving the text */
@media (max-width: 1024px) { .ticks li a, .list li a, .places li a { padding-block: 12px; margin-block: -12px; } }
.reach li a { padding-block: 12px; margin-block: -12px; }