/* ===== LeMaster Plumber — retro brand styles ===== */
:root {
  --ink: #13171C;
  --ink-2: #1c222b;
  --pink: #F47EA8;
  --pink-dark: #d75c8a;
  --pink-deep: #b9426e;
  --cream: #F4EADA;
  --cream-2: #FBF4E8;
  --gray: #E5E5E5;
  /* Booking blue — reserved for the "Book Online" (Housecall Pro) CTA so the
     primary action reads differently from the pink call/secondary buttons. */
  --blue: #0f77cc;
  --blue-dark: #0b5da0;
  --text: #13171C;
  --muted: #6a6256;
  --radius: 14px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --maxw: 1140px;

  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --script: "Pacifico", cursive;
  --body: "DM Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .015em;
  margin: 0 0 .35em;
}
h1 { font-size: clamp(3rem, 7.5vw, 5.6rem); }
h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h3 { font-size: 1.5rem; letter-spacing: .03em; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ===== Eyebrow (script kicker) ===== */
.eyebrow {
  font-family: var(--script);
  font-size: 1.4rem;
  color: var(--pink-dark);
  margin: 0 0 .2rem;
  line-height: 1.1;
}
.eyebrow--pink { color: var(--pink); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.7rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
}
.btn--primary { background: var(--pink); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn--primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); background: var(--pink); }
.btn--ghost { background: var(--cream-2); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn--ghost:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); background: var(--ink); color: var(--cream-2); }
.btn--block { width: 100%; }

/* Primary "Book Online" CTA. Housecall Pro injects its own button.hcp-button
   styles once its widget script loads, so the selector is doubled up to win on
   specificity and keep our pill shape in booking blue. */
.btn--book,
button.hcp-button.btn {
  background: var(--blue); color: #fff;
  border: 2.5px solid var(--ink); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 1rem 2.1rem; font-size: 1.55rem; line-height: 1.1;
  font-family: var(--display); letter-spacing: .05em; text-transform: uppercase;
}
.btn--book:hover,
button.hcp-button.btn:hover {
  transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink);
  background: var(--blue-dark); color: #fff;
}
/* Compact variant for the header bar */
.btn--sm,
button.hcp-button.btn.btn--sm { font-size: 1.05rem; padding: .45rem 1.1rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--sm:hover,
button.hcp-button.btn.btn--sm:hover { box-shadow: 4px 4px 0 var(--ink); }

/* Submit-button loading state (applied by script.js while a form sends) */
.btn--loading,
.btn--loading:hover {
  background: var(--gray);
  color: var(--muted);
  transform: none;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: wait;
  pointer-events: none;
}
.btn__spinner {
  width: 1em;
  height: 1em;
  flex: none;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ===== Top bar ===== */
.topbar { background: var(--ink); color: var(--cream); font-size: .82rem; letter-spacing: .03em; }
.topbar__inner { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .5rem 24px; }
.topbar__item { opacity: .85; }
.topbar__phone { color: var(--pink); font-weight: 700; }
.topbar__phone:hover { text-decoration: underline; }

/* ===== Header ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream-2);
  border-bottom: 3px solid var(--ink);
}
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 5px;
  background: repeating-linear-gradient(45deg, var(--pink) 0 14px, var(--ink) 14px 28px);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 24px; }
/* The wordmark is an <img> with an intrinsic width — without flex:none it gets
   squeezed by the nav + CTA cluster and overflows its box. */
.header__inner .brand { flex: none; }

.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); }
.brand__logo { height: 46px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-family: var(--display); font-size: 1.25rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
}
.nav a:hover { color: var(--pink-dark); }
/* Header CTA cluster: Book Online (blue, primary) + Call (pink, secondary).
   Lives outside .nav so both stay visible when the mobile drawer is closed. */
.header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; padding-left: 1.2rem; }
.header__actions .btn--call {
  background: var(--pink); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  border-radius: 999px; padding: .45rem 1.1rem;
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.header__actions .btn--call:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }

/* Between the mobile drawer breakpoint and full desktop the nav links plus both
   CTAs get tight — pull the spacing in rather than wrapping the header. */
@media (min-width: 901px) and (max-width: 1120px) {
  .nav { gap: 1rem; }
  .nav a { font-size: 1.1rem; }
  .header__actions { gap: .45rem; padding-left: .6rem; }
  .header__actions .btn--call { font-size: .95rem; padding: .4rem .8rem; }
  button.hcp-button.btn.btn--sm, .btn--sm { font-size: .95rem; padding: .4rem .8rem; }
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 26px; height: 3px; background: var(--ink); border-radius: 3px; transition: .25s; }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; background: var(--cream); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.hero::before {
  content: ""; position: absolute; top: -220px; right: -220px;
  width: 620px; height: 620px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(244,126,168,.16) 0deg 9deg, transparent 9deg 18deg);
  z-index: 0;
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.6rem; align-items: stretch; }
.hero__content { align-self: center; }
.hero h1 { margin-bottom: .25em; }
.hero__lead { font-size: 1.12rem; color: var(--muted); max-width: 34rem; }
.accent { color: var(--pink-dark); }

/* 60 Minute Promise block — same treatment as /60-minute-promise/, retuned for
   the homepage's light hero (pink-dark reads on cream; pink does not) and its
   narrower left column, so the promise outsizes the question above it. */
.hero h1 { font-size: clamp(3.7rem, 7vw, 5.6rem); margin-bottom: .06em; }
.hero__starting {
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing: .2em;
  color: var(--pink-dark); margin: 0 0 .15em;
}
.hero__price {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.5rem, 6.4vw, 5.2rem); line-height: .84;
  letter-spacing: .01em; color: var(--pink-dark);
  max-width: 11ch; margin: 0 0 .6rem;
}
.hero__points {
  list-style: none; padding: 0; margin: .4rem 0 .8rem;
  display: grid; gap: .35rem; max-width: 34rem;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem); color: var(--ink); font-weight: 500;
}
.hero__fine { font-size: .85rem; line-height: 1.5; color: var(--muted); max-width: 44ch; margin: 0; }
.hero__fine a { text-decoration: underline; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 1.4rem; }
.hero__trust {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.2rem;
  font-weight: 600; font-size: .95rem; color: var(--ink);
}

/* Hero photo — the CTAs all live in the left column now, so the right side is
   just the image. It fills the column top to bottom so it anchors the hero
   instead of floating in the middle of it. */
.hero__photo {
  display: block; width: 100%; height: 100%;
  min-height: 24rem; max-height: 34rem; align-self: center;
  object-fit: cover; object-position: center 35%;
  border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--pink);
}
@media (max-width: 900px) {
  /* Stacked below the copy: let the portrait shot keep its natural 3:4 frame
     instead of desktop's fill-the-column crop. */
  .hero__photo { height: auto; min-height: 0; max-height: none; }
}

/* ===== Sections ===== */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
/* Booking CTA that closes out a section */
.section-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.section--soft { background: var(--cream-2); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark h2 { color: var(--cream-2); }
.section__head { text-align: center; max-width: 42rem; margin: 0 auto 2.6rem; }
.section__sub { color: var(--muted); font-size: 1.05rem; margin: 0; }
.section--dark .section__sub { color: #b3aa9a; }

/* ===== Grids / cards ===== */
.grid { display: grid; gap: 1.6rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--cream-2); border: 2.5px solid var(--ink);
  border-radius: var(--radius); padding: 1.8rem;
  box-shadow: var(--shadow-hard);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--pink); }
.card__icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--pink); border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 1rem;
}
.card h3 { font-size: 1.55rem; }
.card p { color: var(--muted); margin: 0; }

/* ===== Stats ===== */
.stat { text-align: center; padding: 1.2rem; }
.stat__num { display: block; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--pink); letter-spacing: .02em; }
.stat__label { color: #b3aa9a; font-size: .95rem; }

.why__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
.why__point { border-top: 4px solid var(--pink); padding-top: 1rem; }
.why__point h3 { color: var(--cream-2); font-size: 1.5rem; }
.why__point p { color: #b3aa9a; margin: 0; }

/* ===== About ===== */
.about__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
.about__media {
  background: var(--pink); border: 3px solid var(--ink); box-shadow: var(--shadow-hard);
  border-radius: var(--radius); aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
}
.about__media--photo { background: none; border: 0; box-shadow: none; aspect-ratio: auto; }
/* Team photo — shared by the homepage About section and landing-page heroes */
.team-photo {
  display: block; width: 100%; height: auto;
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-hard);
}
.hero__photo { margin-top: 1.6rem; }
/* rubber-stamp badge */
.about__badge {
  text-align: center;
  border: 3px dashed var(--ink); border-radius: 50%;
  width: 78%; aspect-ratio: 1/1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-7deg);
}
.about__badge img { margin-bottom: .6rem; }
.about__badge p { font-family: var(--display); font-size: 1.5rem; letter-spacing: .04em; color: var(--ink); margin: 0; line-height: 1; }
.about__content p { color: var(--muted); }
.about__content .btn { margin-top: .6rem; }

/* ===== Service area ===== */
.area__list {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.area__list li {
  background: var(--cream); border: 2.5px solid var(--ink);
  border-radius: 999px; padding: .8rem; text-align: center;
  font-family: var(--display); font-size: 1.35rem; letter-spacing: .04em;
  box-shadow: 3px 3px 0 var(--ink);
}
.area__note { text-align: center; color: var(--muted); }
.area__note a { color: var(--pink-dark); font-weight: 700; }

/* ===== Service area map ===== */
.areamap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.areamap__svg { width: 100%; max-height: 560px; display: block; margin: 0 auto; }
.areamap__county {
  fill: var(--pink); stroke: var(--ink); stroke-width: 4;
  stroke-linejoin: round; paint-order: stroke;
}
.areamap__community {
  fill: var(--cream-2); stroke: var(--ink); stroke-width: 3;
  stroke-linejoin: round;
}
.areamap__label {
  font-family: var(--display); font-size: 26px; letter-spacing: .05em;
  fill: var(--ink); text-transform: uppercase;
}
.areamap__label--county { font-size: 44px; }
.areamap__label--home { font-size: 22px; fill: var(--ink); }
.areamap__home path { fill: var(--cream-2); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.areamap__aside h3 {
  font-family: var(--display); font-size: 2rem; letter-spacing: .03em;
  margin: 0 0 .6rem;
}
.areamap__aside p { color: var(--muted); }
.areamap__aside .ticklist { margin: 1rem 0 1.4rem; }
.areamap__aside .ticklist a { color: var(--pink-dark); font-weight: 700; }
.area__note--left { text-align: left; margin: .4rem 0; }
.areamap--solo { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto 1rem; }
.areamap--solo .areamap__svg { max-height: 500px; }

/* ===== Contact ===== */
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact__info p { color: #b3aa9a; }
.contact__book { margin-top: 1.4rem; }
.contact__list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1rem; }
.contact__list li { display: flex; flex-direction: column; gap: .15rem; }
.contact__list span { font-family: var(--script); font-size: 1.05rem; color: var(--pink); }
.contact__list a, .contact__list li { color: var(--cream); }
.contact__list a { font-size: 1.4rem; font-family: var(--display); letter-spacing: .03em; }

.contact__form { background: var(--cream-2); border: 3px solid var(--ink); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-hard); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; font-size: .9rem; color: var(--ink); margin-bottom: .35rem; letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; border: 2px solid var(--ink); border-radius: 10px;
  font: inherit; color: var(--ink); background: var(--cream);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; box-shadow: 4px 4px 0 var(--pink);
}
.form__consent { font-size: .72rem; line-height: 1.4; color: var(--muted); margin: .7rem 0 0; }
.form__consent a { color: var(--pink-dark); text-decoration: underline; font-weight: 600; }
.form__status { font-family: var(--script); font-size: 1.05rem; color: var(--pink-dark); margin: .8rem 0 0; min-height: 1.2em; }

/* ===== Footer ===== */
.footer { background: var(--ink); color: var(--cream); padding: 2.6rem 0; text-align: center; border-top: 5px solid var(--pink); }
.brand--footer { justify-content: center; margin-bottom: .8rem; }
.footer__logo { height: 64px; width: auto; }
.footer__tag { color: #b3aa9a; font-size: .95rem; margin: .4rem 0; letter-spacing: .02em; }
.footer__address { color: #b3aa9a; font-size: .95rem; margin: .4rem 0; letter-spacing: .02em; }
.footer__address a { color: var(--pink); font-weight: 600; }
.footer__address a:hover { text-decoration: underline; }
.footer__copy { color: #6b6354; font-size: .85rem; margin: .6rem 0 0; }

/* ===== Sticky mobile call bar =====
   Booking is the primary CTA everywhere on the page, so the bottom bar is the
   one-tap fallback for people who would rather just call. Mobile only. */
.callbar { display: none; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .topbar__item--hide { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 30%;
    background: var(--cream-2); flex-direction: column;
    align-items: flex-start; gap: 1.4rem; padding: 5rem 2rem;
    transform: translateX(100%); transition: transform .25s ease;
    border-left: 3px solid var(--ink);
    z-index: 70; /* above the header's ::after stripe and the call bar */
  }
  .nav.open { transform: translateX(0); }
  .nav-toggle { display: flex; position: relative; z-index: 80; } /* stays tappable to close */
  .hero__inner, .about__inner, .contact__inner, .areamap { grid-template-columns: 1fr; }
  .areamap__svg { max-height: 440px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .why__points { grid-template-columns: 1fr; }
  .area__list { grid-template-columns: repeat(2, 1fr); }

  /* Mobile header is just logo + menu toggle: the sticky bottom bar handles
     calls and the hero/section CTAs handle booking. */
  .header__actions { display: none; }

  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--pink); border-top: 3px solid var(--ink);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 56px; color: var(--ink);
    font-family: var(--display); font-size: 1.5rem; letter-spacing: .04em;
  }
  /* keep the footer clear of the fixed bar */
  body { padding-bottom: 56px; }
}
@media (max-width: 560px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .header__inner { padding: .7rem 16px; gap: .4rem; }
  .brand__logo { height: 38px; }
  button.hcp-button.btn.btn--sm, .btn--sm { font-size: .95rem; padding: .4rem .8rem; }
}

/* ============================================================
   Sub-page components (services, locations, resources)
   ============================================================ */

/* ===== Breadcrumbs ===== */
.crumbs { background: var(--cream-2); border-bottom: 2px solid var(--ink); font-size: .9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .6rem 0; }
.crumbs a { color: var(--pink-dark); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li[aria-current] { color: var(--muted); }
.crumbs__sep { color: var(--muted); }

/* ===== Sub-page hero (answer-first) ===== */
.subhero { background: var(--cream); padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.6rem, 3vw, 2.4rem); border-bottom: 3px solid var(--ink); position: relative; overflow: hidden; }
.subhero::before {
  content: ""; position: absolute; top: -180px; right: -200px; width: 460px; height: 460px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(244,126,168,.14) 0deg 9deg, transparent 9deg 18deg); z-index: 0;
}
.subhero .wrap { position: relative; z-index: 1; }
.subhero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); max-width: 18ch; }
.subhero__tagline { font-size: 1.12rem; color: var(--muted); max-width: 40rem; margin: 0 0 1.2rem; }
.subhero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }

/* ===== Answer-first callout ===== */
.answer {
  background: var(--cream-2); border: 2.5px solid var(--ink); border-left: 8px solid var(--pink);
  border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow-hard);
  max-width: 46rem; margin: 1.2rem 0;
}
.answer__label { font-family: var(--script); font-size: 1.05rem; color: var(--pink-dark); margin: 0 0 .2rem; }
.answer p:last-child { margin: 0; color: var(--text); font-size: 1.04rem; }

/* ===== CTA band ===== */
.ctaband { background: var(--pink); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ctaband__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem 24px; }
.ctaband p { font-family: var(--display); font-size: 1.6rem; letter-spacing: .03em; margin: 0; color: var(--ink); }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ===== Prose ===== */
.prose { max-width: 56rem; }
.prose .lead { font-size: 1.15rem; color: var(--text); }
.prose h2 { margin-top: 1.8rem; }
.prose h3 { margin-top: 1.2rem; }
.prose p { color: var(--muted); }
.prose__cta { background: var(--cream-2); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 1.2rem; box-shadow: 4px 4px 0 var(--pink); color: var(--text) !important; font-weight: 500; }
.prose__cta-text { margin: 0 0 .9rem; }
.prose__cta-alt { margin: .8rem 0 0; font-size: .95rem; }
.prose__call { color: var(--pink-dark); font-weight: 700; white-space: nowrap; }
.prose__cta a { text-decoration: underline; }
.rule { border: 0; border-top: 2px dashed var(--ink); margin: 2.2rem 0; opacity: .6; }
.related__h { font-size: 1.3rem; }

/* feature grid flush (no icon circles) */
.grid--flush .card { padding: 1.4rem; }
.grid--flush .card h3 { font-size: 1.35rem; }

/* ===== Tick / bullet list ===== */
.ticklist { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem; }
.ticklist li { position: relative; padding-left: 1.8rem; color: var(--muted); }
.ticklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pink-dark); font-weight: 700; }
.ticklist li strong { color: var(--text); }

/* ===== Process steps ===== */
.steps { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; counter-reset: step; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step__num {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--pink); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.4rem; color: var(--ink);
}
.step h3 { font-size: 1.3rem; margin: .15rem 0 .2rem; }
.step p { margin: 0; color: var(--muted); }

/* ===== Chips / related links ===== */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; }
.chip {
  display: inline-block; background: var(--cream-2); border: 2px solid var(--ink); border-radius: 999px;
  padding: .45rem 1rem; font-weight: 600; font-size: .95rem; color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.chip:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--pink); background: var(--pink); }

/* ===== Linkable cards ===== */
.card--link { display: flex; flex-direction: column; color: var(--ink); }
.card--link .card__more { margin-top: auto; padding-top: .8rem; font-family: var(--display); font-size: 1.2rem; letter-spacing: .03em; color: var(--pink-dark); }
.card__tag { font-family: var(--script); font-size: 1rem; color: var(--pink-dark); margin: 0 0 .2rem; }

/* ===== FAQ (details) ===== */
.faq { border: 2.5px solid var(--ink); border-radius: 12px; background: var(--cream-2); box-shadow: 3px 3px 0 var(--ink); margin-bottom: .9rem; overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-weight: 700; font-size: 1.05rem; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.6rem; color: var(--pink-dark); line-height: 1; }
.faq[open] summary::after { content: "–"; }
.faq__a { padding: 0 1.2rem 1.1rem; }
.faq__a p { margin: 0; color: var(--muted); }

/* ===== Footer nav ===== */
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; margin: 1rem auto; max-width: 40rem; }
.footer__nav a { color: var(--pink); font-size: .9rem; font-weight: 600; }
.footer__nav a:hover { text-decoration: underline; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin: .2rem auto .6rem; }
.footer__legal a { color: #b3aa9a; font-size: .82rem; text-decoration: underline; }
.footer__legal a:hover { color: var(--pink); }

/* ===== Linkable area list ===== */
.area__list--links li { padding: 0; }
.area__list--links a { display: block; padding: .8rem; color: var(--ink); width: 100%; }
.area__list--links li:hover { background: var(--pink); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }

@media (max-width: 900px) {
  .ctaband__inner { flex-direction: column; align-items: flex-start; }
  .subhero h1 { max-width: none; }
}

/* ===== Booking modal =====
   Opened by /booking.js on the landing pages, in place of the Housecall Pro
   widget. Uses <dialog> + showModal() so the focus trap, Escape handling,
   background inerting and top-layer stacking come from the platform rather
   than being hand-rolled (and so it clears .header/.callbar/.fab z-indexes). */
.bk {
  width: min(34rem, calc(100vw - 2rem));
  max-width: none; max-height: min(46rem, calc(100dvh - 2rem));
  padding: 0; overflow: hidden;
  background: var(--cream-2);
  border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  color: var(--text); font-family: var(--body);
}
.bk::backdrop { background: rgba(19,23,28,.72); }
.bk[open] { display: flex; flex-direction: column; }

/* Header: offer name stays pinned for the whole flow, so the visitor never
   loses track of which special they're booking. */
.bk__head { background: var(--ink); color: var(--cream); padding: 1.1rem 3rem 1.1rem 1.4rem; flex: none; }
.bk__title { font-family: var(--display); font-size: 1.9rem; line-height: .95; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.bk__title b { color: var(--pink); font-weight: inherit; }
.bk__sub { font-size: .85rem; color: #b3aa9a; margin: .3rem 0 0; line-height: 1.4; }
.bk__sub:empty { display: none; }
.bk__close {
  position: absolute; top: .6rem; right: .6rem; width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: transparent; border: 2px solid transparent; border-radius: 50%;
  color: var(--cream); font-size: 1.5rem; line-height: 1;
}
.bk__close:hover { border-color: var(--pink); color: var(--pink); }

/* The whole form is sized to fit without scrolling — a scrollbar inside a
   short form reads as "this is long" and costs completions. overflow-y stays
   auto purely as a safety valve for very small viewports or bumped-up font
   sizes; in normal use it never engages. */
.bk__body { padding: 1.1rem 1.3rem; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; }
.bk__h { font-family: var(--display); font-size: 1.45rem; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 .35rem; }
.bk__note { font-size: .85rem; color: var(--muted); margin: 0 0 .8rem; }
.bk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
.bk__row--3 { grid-template-columns: 1.3fr 1.1fr .6fr; }

/* Tighter rhythm than the page forms: this one has to fit in a viewport. */
.bk .field { margin-bottom: .65rem; }
.bk .field label { font-size: .82rem; margin-bottom: .25rem; }
.bk .field input, .bk .field textarea { padding: .55rem .75rem; }
.bk .form__consent { margin: .5rem 0 0; line-height: 1.35; }

/* Time-preference chips. Tap targets rather than a date picker — a native date
   picker is the biggest single drop-off point in a short mobile form.
   Laid out as an even grid, not wrapped flex: ragged rows with one orphan chip
   are what made this read as cluttered. */
.bk__chips { display: grid; gap: .4rem; }
.bk__chips--4 { grid-template-columns: repeat(4, 1fr); }
.bk__chips--3 { grid-template-columns: repeat(3, 1fr); }
.bk__chip {
  padding: .45rem .3rem; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem;
  text-align: center; white-space: nowrap;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 999px;
}
.bk__chip:hover { background: #fff; box-shadow: 3px 3px 0 var(--pink); }
.bk__chip[aria-pressed="true"] { background: var(--pink); box-shadow: 3px 3px 0 var(--ink); }

.bk__foot { flex: none; display: flex; padding: .85rem 1.3rem; border-top: 2px solid var(--ink); background: var(--cream-2); }
.bk__foot .btn { width: 100%; font-size: 1.15rem; padding: .7rem 1.2rem; }

.bk__err { font-family: var(--script); font-size: 1rem; color: var(--pink-dark); margin: .5rem 0 0; min-height: 0; }
.bk__err:empty { display: none; }
.bk__ok { text-align: center; padding: 1rem 0; }
.bk__ok .bk__h { font-size: 2.1rem; }

/* The sticky mobile call bar is position:fixed z-index:60 and would otherwise
   show through the dialog's top layer. */
body.booking-open .callbar,
body.booking-open .fab { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .bk__chip { transition: background .15s ease, box-shadow .12s ease; }
}

@media (max-width: 640px) {
  /* Full-screen sheet. The footer stays put so the primary CTA clears the
     on-screen keyboard. */
  .bk {
    width: 100vw; height: 100dvh; max-height: none;
    margin: 0; border: 0; border-radius: 0;
  }
  .bk__row, .bk__row--3 { grid-template-columns: 1fr; }
  .bk__foot { position: sticky; bottom: 0; padding: .7rem 1.1rem; }

  /* Everything below buys vertical room so the panel fits a 375x812 screen
     without a scrollbar. */
  .bk__head { padding: .8rem 2.6rem .8rem 1.1rem; }
  .bk__title { font-size: 1.5rem; }
  .bk__sub { font-size: .78rem; margin-top: .2rem; }
  .bk__body { padding: .9rem 1.1rem; }
  .bk__h { font-size: 1.3rem; }
  .bk__note { font-size: .8rem; margin-bottom: .6rem; }
  .bk .field { margin-bottom: .5rem; }
  .bk .field input, .bk .field textarea { padding: .5rem .7rem; }
  .bk .form__consent { font-size: .66rem; line-height: 1.3; }
  .bk__chip { font-size: .78rem; padding: .45rem .2rem; }
}

/* Short viewports (iPhone SE and similar): drop the nice-to-haves so the form
   still fits. */
/* Short viewports (iPhone SE and similar). The form must never scroll, so
   everything that isn't a tap target gets smaller before anything is cut. */
@media (max-height: 730px) {
  .bk__note { display: none; }
  .bk__head { padding: .55rem 2.4rem .55rem 1.1rem; }
  .bk__title { font-size: 1.3rem; }
  .bk__sub { font-size: .7rem; margin-top: .1rem; }
  .bk__body { padding: .7rem 1.1rem; }
  .bk__h { font-size: 1.15rem; margin-bottom: .4rem; }
  .bk .field { margin-bottom: .3rem; }
  .bk .field label { font-size: .74rem; margin-bottom: .12rem; }
  .bk .field input, .bk .field textarea { padding: .35rem .6rem; font-size: .95rem; }
  .bk__chip { font-size: .74rem; padding: .35rem .2rem; }
  .bk .form__consent { font-size: .58rem; line-height: 1.25; margin-top: .35rem; }
  .bk__foot { padding: .5rem 1.1rem; }
  .bk__foot .btn { font-size: 1rem; padding: .5rem 1rem; }
}

/* Shortest phones (360x640 and below): the offer subtitle is the least
   load-bearing thing left, since the title still names the offer. */
@media (max-height: 650px) {
  .bk__sub { display: none; }
}