/* =============================================================================
   Fixx Me Now - Global Stylesheet
   -----------------------------------------------------------------------------
   Token system → base/typography → layout primitives → components → sections
   → header/footer → motion → responsive.
   Every color and type decision derives from the tokens block below, so a
   rebrand is a token edit, not a find-and-replace.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette. --accent is sampled straight from the logo artwork (#047C68);
     everything else is derived from it, so a rebrand is a handful of edits. */
  --accent:      #047C68;   /* logo teal, buttons + highlights */
  --accent-2:    #03604F;   /* hover / pressed teal */
  --accent-soft: #7FC4B6;   /* light teal for fine accents on dark */
  --accent-ink:  #03604F;   /* teal readable as text on light bg (5.9:1 on bone) */
  --accent-tint: #E7F1EE;   /* faintest teal wash for panels */

  /* Secondary brand yellow/gold, client-specified as rgb(206,159,66). --deep
     and --light are the same hue at lower/higher lightness for the hero
     gradient; --ink and --muted are darkened further still to clear 4.5:1
     against --yellow-deep, the darkest point of that gradient, so they stay
     legible from the top of the band down. */
  --yellow:       #CE9F42;
  --yellow-deep:  #B6892F;  /* gradient start, top of the hero */
  --yellow-light: #F5ECDB;  /* gradient end, bottom of the hero */
  --yellow-ink:    #181206;  /* eyebrows / labels over the yellows (5.8:1 on --yellow-deep) */
  --yellow-muted:  #1F190C;  /* secondary copy over the yellows   (5.5:1 on --yellow-deep) */
  --ink:         #14201D;   /* near-black with a green cast, dark sections */
  --charcoal:    #1E2E2A;   /* secondary dark sections */
  --bone:        #F5F8F7;   /* off-white light sections */
  --bone-2:      #E6EDEB;   /* slightly deeper neutral */
  --white:       #FFFFFF;

  /* Functional text colors */
  --text-on-dark:        rgba(255,255,255,0.92);
  --text-on-dark-muted:  rgba(255,255,255,0.62);
  --text-on-light:       #1E242C;
  --text-on-light-muted: #565E68;
  --line-on-dark:        rgba(255,255,255,0.14);
  --line-on-light:       rgba(0,0,0,0.10);

  /* Typography */
  --font-display: "Poppins", system-ui, sans-serif;    /* titles, labels, buttons, nav */
  --font-body:    "Source Sans 3", Arial, Helvetica, "Liberation Sans", sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: clamp(0.78rem, 0.7rem + 0.4vw, 0.95rem);
  --fs-body:    clamp(1.05rem, 1rem + 0.2vw, 1.14rem);
  --fs-lead:    clamp(1.18rem, 1.06rem + 0.5vw, 1.4rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 4.8vw, 5.4rem);
  /* The hero tagline is a full sentence, so it sits below the h1 display size
     that suits short page titles. Tune the tagline here, not via --fs-h1. */
  --fs-hero:    clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1.1rem, 0.6rem + 2.5vw, 2.6rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius: 6px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  /* Elevation */
  --shadow-card: 0 18px 40px -22px rgba(0,0,0,0.45);
  --shadow-lift: 0 30px 60px -28px rgba(0,0,0,0.55);
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-on-light);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  /* A long email or URL breaks instead of pushing a narrow phone sideways. */
  overflow-wrap: break-word;
}
body.nav-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* No runts. Headings balance their lines; running text wraps "pretty",
   which keeps the last line from being a lone word in Chromium/Safari. The
   nbsp fallback for other engines lives in main.js (initNoRunts). */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 700; text-wrap: balance; }
p, li, dd, figcaption, blockquote, .lead, .statement, .subhero__sub, .split__lead, .mega__desc, .svc-card__desc, .review-quote, .tile__label, .cat-card__lead, .contact-page__lead { text-wrap: pretty; }
h1 { font-size: var(--fs-h1); letter-spacing: 0.01em; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: 0.01em; }
h3 { font-size: var(--fs-h3); }

.lead { font-size: var(--fs-lead); }
.text-accent { color: var(--accent-ink); }
.muted { color: var(--text-on-light-muted); }
.is-hidden { display: none !important; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.75rem;
}
.eyebrow--center { display: block; text-align: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--bone { background: var(--bone); }
.section--bone2 { background: var(--bone-2); }
.section--white { background: var(--white); }
/* Light brand washes for the services bands: gold for interior, green for
   exterior. Full-width, so the tint runs edge to edge behind the tiles. */
.section--tint-yellow { background: var(--yellow-light); }
.section--tint-green  { background: var(--accent-tint); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }
.section--dark .muted { color: var(--text-on-dark-muted); }
.section--dark .eyebrow { color: var(--accent-soft); }

/* Brand-teal section, the "green" band in the alternating white/green/white
   rhythm on the homepage. */
.section--accent { background: var(--accent); color: var(--white); }
.section--accent .muted { color: rgba(255,255,255,0.78); }
.section--accent .eyebrow { color: rgba(255,255,255,0.72); }

/* The same deep-to-light brand gold as the hero, reused as a full section
   background. Text stays dark ink the whole way down, white is unreadable on
   the deep end, and the eyebrow/muted copy take the darker tokens the hero
   uses so they clear contrast against the gold at the top of the band. */
.section--yellow {
  background: linear-gradient(180deg,
              var(--yellow-deep) 0%,
              var(--yellow) 34%,
              var(--yellow-light) 100%);
  color: var(--text-on-light);
}
.section--yellow .eyebrow { color: var(--yellow-ink); }
.section--yellow .muted { color: var(--yellow-muted); }

.section-head { max-width: 68ch; margin-bottom: 2.5rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--wide { max-width: 980px; }
.section-head--wide .lead { max-width: 60ch; margin-inline: auto; }

/* --- House peek -------------------------------------------------------------
   The logo's roof peak as a section decoration (templates/_house.html). It sits
   on a section's bottom edge, filled with the *next* section's background, so
   it reads as the section below pushing a peak up through the boundary.

   .section--house reserves the bottom padding that keeps body copy clear of the
   peak, and clips its horizontal bleed. The .wrap inside is lifted onto its own
   stacking layer so text always sits above the graphic. --house-h drives both
   the artwork height and that reserved padding, so they can never drift apart.

   The peak is not mirrored on the right-hand placement: the chimney stays on
   the right slope, exactly as it sits in the logo. */
.section--house {
  --house-h: clamp(4.5rem, 2.5rem + 6vw, 10rem);
  position: relative;
  /* Clips sideways only. The peak deliberately overhangs the bottom edge by a
     pixel (see .house-peek) to close the sub-pixel seam, so vertical overflow
     has to stay visible. */
  overflow-x: clip;
  padding-bottom: calc(var(--section-y) + var(--house-h));
}
.section--house > .wrap { position: relative; z-index: 1; }

.house-peek {
  position: absolute;
  /* -1px, not 0: the section boundary can land on a fractional device pixel,
     which leaves a hairline of the wrong colour between the peak and the
     section it is meant to be continuous with. Overhanging by a pixel closes
     it, and costs nothing because the fill matches what is underneath. */
  bottom: -1px;
  z-index: 0;
  height: var(--house-h);
  width: auto;
  pointer-events: none;
}
.house-peek path { fill: currentColor; }

.house-peek--left  { left: clamp(0rem, 4vw, 5rem); }
.house-peek--right { right: clamp(0rem, 4vw, 5rem); }

/* Fill = the background of the section the peak rises out of. */
.house-peek--fill-accent { color: var(--accent); }
.house-peek--fill-white  { color: var(--white); }
.house-peek--fill-tint   { color: var(--accent-tint); }
.house-peek--fill-cream  { color: var(--yellow-light); }

/* --- House lights ---
   The logo's window squares, dark until main.js puts .is-lit on the peak as it
   passes the trigger line on the way down, then warming to the brand yellow
   like lights coming on. Scrolling back up past that line takes the class off
   again and the fill transitions the other way, so the animation plays
   backwards rather than restarting.

   Each window is delayed a little further than the last so they light in
   sequence rather than snapping on together, the stagger is what sells it as
   lights rather than a colour change.

   These are the only part of the peak that does not use currentColor: the
   silhouette's fill is whatever the next section's background is, and the
   windows have to stay legible against both the teal and the white variants,
   so they carry their own colours. */
.house-peek__window {
  fill: var(--ink);
  transition: fill 0.5s var(--ease);
}
.house-peek.is-lit .house-peek__window { fill: var(--yellow); }

/* The stagger is declared twice on purpose. A transition takes its delay from
   the state it is moving *to*, so the .is-lit rules time the warm-up and the
   bare rules time the cool-down. Running them in opposite orders means the
   windows go out in the reverse order they came on, last lit, first dark -
   instead of the sequence restarting from the same corner both ways. */
.house-peek.is-lit .house-peek__window:nth-of-type(1) { transition-delay: 0s; }
.house-peek.is-lit .house-peek__window:nth-of-type(2) { transition-delay: 0.1s; }
.house-peek.is-lit .house-peek__window:nth-of-type(3) { transition-delay: 0.2s; }
.house-peek.is-lit .house-peek__window:nth-of-type(4) { transition-delay: 0.3s; }
.house-peek__window:nth-of-type(1) { transition-delay: 0.3s; }
.house-peek__window:nth-of-type(2) { transition-delay: 0.2s; }
.house-peek__window:nth-of-type(3) { transition-delay: 0.1s; }
.house-peek__window:nth-of-type(4) { transition-delay: 0s; }

/* !important because the per-window delay rules above are more specific than
   any plain .house-peek__window selector could be, and this has to beat both
   sets of them. */
@media (prefers-reduced-motion: reduce) {
  .house-peek__window { transition: none !important; }
}

.grid { display: grid; gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--shadow-card);
}

/* --- Services page ----------------------------------------------------------
   Two groups (interior / exterior), each a grid of plain cards: photo on top,
   name, one-line summary, "Learn more". No hover-only content, so the same
   markup serves sighted users, screen readers and crawlers. */
.svc-cat__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.svc-cat__head svg { width: 28px; height: 28px; color: var(--accent); flex: none; }
.svc-cat__head h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.svc-cat__count { margin-left: auto; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-light-muted); }

.svc-grid { --svc-cols: 4; --svc-gap: clamp(0.9rem, 1.6vw, 1.4rem); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--svc-gap); }
.svc-card { min-width: 0; flex: 0 0 calc((100% - (var(--svc-cols) - 1) * var(--svc-gap)) / var(--svc-cols)); display: flex; flex-direction: column; }
.svc-card__link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.svc-card__link:hover, .svc-card__link:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); }
.svc-card__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Icon plate, the same Font Awesome glyph the nav menus use for the service */
.svc-card__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 1.3rem 1.1rem 0; border-radius: 14px; background: linear-gradient(160deg, var(--accent-tint), #d9ebe6); border: 1px solid rgba(4,124,104,0.18); color: var(--accent); font-size: 1.7rem; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.svc-card__link:hover .svc-card__icon { background: var(--accent); color: var(--white); }
.svc-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.svc-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--ink); }
.svc-card__desc { color: var(--text-on-light-muted); font-size: 0.93rem; line-height: 1.5; flex: 1; }
.svc-card__cta { margin-top: 0.35rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-ink); }
.svc-card__cta::after { content: " \2192"; }
@media (max-width: 1080px) { .svc-grid { --svc-cols: 3; } }
@media (max-width: 720px)  { .svc-grid { --svc-cols: 2; } }
@media (max-width: 420px)  { .svc-grid { --svc-cols: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile::before, .tile img, .tile__icon, .tile__more { transition: none; }
  .tile:hover { transform: none; }
  .svc-card__link, .svc-card__media img { transition: none; }
  .svc-card__link:hover { transform: none; }
  .svc-card__link:hover .svc-card__media img { transform: none; }
}

/* --- Split ------------------------------------------------------------------
   Image beside a block of text, the homepage band layout. Single column on
   small screens (text first, so the message is read before the photo loads);
   two columns from 900px up. --reverse puts the image on the left instead, so
   the image side can alternate down the page opposite the roof peaks. */
.split { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  /* Text carries the band: two thirds copy, one third photo. */
  .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .split--reverse .split__media { order: -1; }
  /* In the narrow column the photo stands taller than it is wide, so it holds
     its own beside a full column of copy instead of floating in the middle. */
  .split .split__media img { aspect-ratio: 4 / 5; }
  .svc-split .split__media img { aspect-ratio: 3 / 4; }
}

.split__media { margin: 0; }
.split__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  /* Hairline ring as well as the lift: the drilling photo is largely white
     wall, and without an edge it reads as an empty box on a white band. */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), var(--shadow-card);
}

/* A single sentence carrying a whole band. Deliberately below --fs-h2: these
   run past 100 characters and become unreadable at display size. */
.statement {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
}
/* The one phrase in each statement worth the eye landing on: a marker-style
   highlight, yellow on the teal bands and teal-tint on white. */
.statement mark {
  background: linear-gradient(transparent 68%, var(--yellow) 68%, var(--yellow) 94%, transparent 94%);
  color: inherit; padding: 0 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.section--white .statement mark { background: linear-gradient(transparent 68%, #BFE0D7 68%, #BFE0D7 94%, transparent 94%); }
.split__text .eyebrow { margin-bottom: 1rem; }
.section--accent .split__text .eyebrow { color: var(--yellow); }
.split__lead { margin-top: 1.25rem; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-light-muted); }
.section--accent .split__lead { color: rgba(255,255,255,0.86); }

/* Interior / Exterior service split on a teal band. */
.section--accent .svc-list li { color: var(--white); }
.section--accent .svc-list a { color: var(--white); }
.section--accent .svc-list a:hover { color: var(--yellow); }
.section--accent .svc-list li::before { background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23047C68' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section--accent .statement { color: var(--white); }
.section--accent .split__media--framed::before { background: var(--yellow); opacity: 0.9; }
.section--white .split__media--framed::before { background: var(--accent-tint); opacity: 1; }
.section--accent .pill { border-color: rgba(255,255,255,0.8); color: var(--white); }
.section--accent .pill__count { background: rgba(255,255,255,0.18); color: var(--white); }
.section--accent .pill:hover { background: var(--white); color: var(--accent-ink); }
.section--accent .pill:hover .pill__count { background: var(--accent-tint); color: var(--accent-ink); }
.check-list.check-list--band { margin-top: 1.75rem; gap: 0.8rem; }
.check-list.check-list--band li { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }

/* Plain facts row under a statement: icon + label, divided by a hairline. */
.facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0; }
.facts__item { display: inline-flex; align-items: center; gap: 0.55rem; padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid var(--line-on-light); font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); letter-spacing: 0.01em; }
.facts__item:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.facts__item svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--white); flex: none; }
.section--accent .facts__item { color: var(--white); border-right-color: rgba(255,255,255,0.3); }
.section--accent .facts__item svg { background: var(--yellow); color: var(--ink); }

/* Inline fact chips under a statement (teal bands). */
.fact-chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fact-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem 0.55rem 0.8rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; }
.fact-chip svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }
.section--white .fact-chip { background: var(--accent-tint); border-color: rgba(4,124,104,0.35); color: var(--accent-ink); }
.section--white .fact-chip svg { color: var(--accent); }

/* Three-up proof figures under a statement. */
.proof-row { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2.25rem; }
.proof-row li { display: flex; flex-direction: column; padding: 0.4rem 0; }
.proof-row__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1; color: var(--yellow); }
.proof-row__label { font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.35rem; color: rgba(255,255,255,0.8); }

/* Interior / Exterior pills. */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.pill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem 0.6rem 1.1rem; border: 1.5px solid var(--accent); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent-ink); text-decoration: none; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.pill__count { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-ink); }
.pill:hover { background: var(--accent); color: var(--white); }
.pill:hover .pill__count { background: rgba(255,255,255,0.18); color: var(--white); }

/* Text link with an arrow, for a secondary action beside a button. */
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; align-self: center; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: inherit; text-decoration: none; }
.link-arrow::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.section--white .link-arrow { color: var(--accent-ink); }

/* Check list on the teal bands. */
/* Doubled class beats the base .check-list rules, which sit later in the file. */
.check-list.check-list--on-dark { margin-top: 1.75rem; gap: 0.8rem; }
.check-list.check-list--on-dark li { color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.check-list.check-list--on-dark li::before { width: 20px; height: 20px; margin-top: 2px; background-color: var(--white); background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23047C68' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section--accent .split__lead { color: var(--white); }

/* Framed photo: an offset yellow plate behind the image gives the band a
   second shape besides the rectangle of the photo. */
.split__media--framed { position: relative; }
.split__media--framed::before { content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border-radius: var(--radius); background: var(--yellow); z-index: -1; opacity: 0.9; }
.section--white .split__media--framed::before { background: var(--accent-tint); opacity: 1; }
.split--reverse .split__media--framed::before { inset: 1.1rem 1.1rem -1.1rem -1.1rem; }
.split__media--framed img { box-shadow: 0 0 0 1px rgba(0,0,0,0.08), var(--shadow-lift); }
.section--accent, .section--white { overflow-x: clip; }

/* --- Photo tiles (homepage "What we do") ------------------------------------
   Ported from ShingleMe's opening row: photo, icon, label, "explore" line,
   with a teal wash on hover instead of their gold. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 1.6vw, 1.2rem); margin-top: 0.5rem; }
/* Four photo cards in one row: full-bleed picture, dark wash, centred copy. */
.tile {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px;
  border-radius: var(--radius); overflow: hidden; color: var(--white); text-decoration: none;
  background: var(--ink); box-shadow: var(--shadow-card); isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.7s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,32,29,0.45) 0%, rgba(20,32,29,0.72) 100%); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(180deg, rgba(4,124,104,0.55) 0%, rgba(4,124,104,0.8) 100%); transition: opacity 0.35s var(--ease); }
.tile:hover, .tile:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
.tile:hover .tile__more, .tile:focus-visible .tile__more { color: var(--white); }
.tile:hover .tile__icon, .tile:focus-visible .tile__icon { transform: translateY(-2px); }
.tile:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.tile__body { padding: 1.4rem 1rem; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tile__icon { display: block; width: 44px; height: 44px; color: var(--yellow); margin: 0 auto 1rem; transition: transform 0.35s var(--ease); }
.tile__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile__label { display: block; font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem); letter-spacing: 0.03em; line-height: 1.15; white-space: nowrap; }
.tile__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); transition: color 0.35s var(--ease); }
.tile__more svg { width: 13px; height: 13px; }
.tiles > * { min-width: 0; }
@media (max-width: 1240px) { .tile__body { padding: 1.1rem; } .tile__label { font-size: 0.95rem; } }
@media (max-width: 1080px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .tiles { grid-template-columns: 1fr; } .tile { min-height: 150px; } }

/* Eyebrow with short rules either side, ShingleMe's centred heading style. */
.section-head--lined { max-width: 960px; }
.section-head--lined .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; }
.section-head--lined .eyebrow::before, .section-head--lined .eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.7; }
.section--accent .section-head--lined .eyebrow { color: var(--yellow); }
/* Yellow accent that follows the roof: a ground line along the section's
   bottom edge, broken by the house, plus a stroke up and over the roofline
   and chimney. The line is drawn by the section (z 0) and the house sits on
   top of it (z 1), so the house body hides the line where it passes. */
.section--house-lined::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px; background: var(--yellow); z-index: 0; pointer-events: none; }
.section--house-lined .house-peek { z-index: 1; }
.house-peek__ridge { stroke: var(--yellow); stroke-width: 5px; stroke-linejoin: round; stroke-linecap: butt; }
.section--accent .section-head h2 { color: var(--white); }
.section--accent .section-head .lead { color: rgba(255,255,255,0.82); }
.section--accent .section-head .eyebrow { color: var(--yellow); }

/* --- Service split sections (homepage Interior / Exterior) -----------------
   Photo beside the category's full list of service links. */
.svc-split { align-items: start; }
.svc-split .split__text .eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; }
.eyebrow__icon { width: 18px; height: 18px; }
.svc-split .statement { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.svc-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.25rem; }
.svc-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; line-height: 1.35; }
.svc-list li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 0.2rem; border-radius: 50%; background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px 10px; }
.svc-list a { color: var(--ink); text-decoration: none; }
.svc-list a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.svc-split .btns { margin-top: 1.75rem; }
.section--tint-yellow .split__media--framed::before { background: var(--accent); opacity: 0.85; }
.section--tint-yellow .split__lead, .section--tint-green .split__lead { color: var(--text-on-light-muted); }
.section--tint-yellow .link-arrow, .section--tint-green .link-arrow, .section--white .link-arrow { color: var(--accent-ink); }
@media (max-width: 480px) { .svc-list { grid-template-columns: 1fr; } }

/* --- Category cards (homepage "What we do") --------------------------------
   Two photo cards, Interior and Exterior, each carrying the full list of its
   services as links. The photo is the hook; the list is the substance. */
.cat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); margin-top: 0.5rem; }
.cat-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.cat-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bone-2); }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.cat-card__media:hover img { transform: scale(1.04); }
.cat-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,29,0) 45%, rgba(20,32,29,0.55) 100%); pointer-events: none; }
.cat-card__badge { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border-radius: var(--radius-pill); background: var(--white); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--shadow-card); }
.cat-card__badge svg { width: 18px; height: 18px; color: var(--accent); }
.cat-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 2.4vw, 2.1rem); }
.cat-card__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.cat-card__title a { color: var(--ink); text-decoration: none; }
.cat-card__title a:hover { color: var(--accent-ink); }
.cat-card__lead { margin-top: 0.6rem; color: var(--text-on-light-muted); }
.cat-card__list { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.25rem; flex: 1; }
.cat-card__list li { display: flex; align-items: flex-start; gap: 0.5rem; font-family: var(--font-display); font-weight: 500; font-size: 0.93rem; line-height: 1.35; }
.cat-card__list li::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 0.2rem; border-radius: 50%; background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px 10px; }
.cat-card__list a { color: var(--ink); text-decoration: none; }
.cat-card__list a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cat-card .btn { align-self: flex-start; }
@media (max-width: 899px) { .cat-cards { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .cat-card__list { grid-template-columns: 1fr; } }

/* Single-column (phone / small tablet) treatment of the statement bands. */
@media (max-width: 899px) {
  .statement { font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2rem); }
  .split__lead { font-size: 1.05rem; }
  /* Three figures stay on one row, sized to fit a phone. */
  .proof-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
  .proof-row li { padding: 0.9rem 0.6rem; background: rgba(255,255,255,0.08); border-radius: var(--radius); text-align: center; align-items: center; }
  .proof-row__num { font-size: 1.5rem; }
  .proof-row__label { font-size: 0.62rem; letter-spacing: 0.06em; line-height: 1.25; }
  /* Buttons stack full width; the text link centres beneath. */
  .split__text .btns { flex-direction: column; align-items: stretch; margin-top: 1.5rem; }
  .split__text .btns .btn { width: 100%; justify-content: center; }
  .split__text .btns .link-arrow { justify-content: center; padding: 0.4rem 0; }
  .pill-row .pill { flex: 1 1 auto; justify-content: center; }
  /* The offset plate tucks bottom-right inside the gutter instead of hanging
     past the viewport edge. */
  .split__media--framed::before, .split--reverse .split__media--framed::before { inset: 0.75rem 0 -0.75rem 0.75rem; }
  .split__media--framed { margin-bottom: 0.75rem; }
}
.split { isolation: isolate; }
.split__text .btns { margin-top: 2rem; }
.btns--center { justify-content: center; }
/* Centered button rows that follow a block of copy get more room above them
   than the default flex gap gives, so the CTA reads as its own beat. */
.section-head .btns--center, .video__note + .btns, p + .btns--center { margin-top: 2.25rem; }
.how-steps + .btns { margin-top: 3.5rem; }

/* --- Video ------------------------------------------------------------------
   A single embedded film centred in a narrow band. The player holds a fixed
   16:9 box whether or not a source has loaded, so the section keeps its shape
   before the video (or its poster) is dropped in. */
.video { margin: 0; }
.video__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), var(--shadow-card);
}
.video__note { max-width: 58ch; margin: 2rem auto 0; text-align: center; }

/* --- How it works -----------------------------------------------------------
   Three client-supplied SVG step bars (number + title + copy baked in), stacked
   and indented so they descend and step rightward, 1 top-left, 3 bottom-right;
   equal widths so their right edges march across in step. */
.how-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* keep each bar's set width; don't stretch to full */
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: 3rem;
}
.how-step { width: 72%; position: relative; }
.how-step:nth-child(1) { margin-left: 0; }
.how-step:nth-child(2) { margin-left: 14%; }
.how-step:nth-child(3) { margin-left: 28%; }
/* The offset shadow behind each bar lives inside the SVG (id="bar-shadow"),
   so it sits under the parallelogram only and leaves the step numbers alone.
   No CSS filter here on purpose: a filter would shadow the numerals too. */
.how-step__img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  /* Stack full width: drop the list indent, and match the :nth-child
     specificity above so the stagger margins actually reset. */
  .how-steps { padding-left: 0; }
  .how-step, .how-step:nth-child(n) { width: 100%; margin-left: 0; }
}

/* -----------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btns { display: flex; flex-wrap: wrap; gap: 0.85rem; }
/* Two buttons under a tag grid: on phones they split the row evenly, matching
   the grid's columns and gap, instead of stacking at their own widths. */
@media (max-width: 640px) {
  .btns--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .btns--pair .btn { width: 100%; justify-content: center; text-align: center; padding-inline: 0.75rem; white-space: normal; }
}
@media (max-width: 400px) { .btns--pair .btn { padding-inline: 0.4rem; font-size: 0.9rem; } }
/* Where the tag grid above drops to one column, so do the buttons. */
@media (max-width: 342px) { .btns--pair { grid-template-columns: 1fr; } }

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.02em; text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--white); }
.btn--accent:hover { --btn-bg: var(--accent-2); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:hover { --btn-bg: var(--charcoal); }
/* For use on teal backgrounds, where a teal button would disappear. */
.btn--white { --btn-bg: var(--white); --btn-fg: var(--accent-ink); }
.btn--white:hover { --btn-bg: var(--bone-2); }
.btn--outline {
  --btn-bg: transparent; --btn-fg: currentColor;
  border-color: currentColor;
}
.btn--outline:hover { --btn-bg: rgba(0,0,0,0.06); }
.section--accent .btn--outline:hover,
.hero .btn--outline:hover { --btn-bg: rgba(255,255,255,0.14); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }

/* -----------------------------------------------------------------------------
   5. LOGO
   -------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo__img { height: 76px; width: auto; }
/* The nav carries the full lockup, which needs its own height, matching the
   footer's roofline-only mark would leave it reading as a much smaller logo.

   These numbers are very nearly the height of the mark itself, because
   logo-nav.svg is cropped tight to its artwork. It originally shipped with 44%
   of its height as empty padding, so the mark rendered at barely half its box
   and the only way to enlarge it was to grow the box, and with it the whole
   nav bar. Cropping the viewBox decoupled the two. Do not reuse these numbers
   for the footer's mark, which is a different file with its own framing.

   118px puts the lockup at ~107px wide by ~215px, clearing .main-nav__inner's
   144px bar with 13px either side, and renders the "HOME REPAIR SERVICES"
   tagline at a size that is actually legible. Phones step down to 78px inside
   their 108px bar. */
.main-nav .logo__img { height: 112px; }
/* The bar is a flex row, and the global img max-width let the links squeeze
   the lockup down to nothing just above the drawer breakpoint. Hold it at
   full size; the links give up padding instead (see .nav-link below). */
.main-nav .logo { flex-shrink: 0; }
.main-nav .logo__img { max-width: none; }
@media (max-width: 640px) {
  .main-nav .logo__img { height: 78px; }
}
.logo__wordmark { display: none; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: 0.04em; }
.logo--wordmark .logo__wordmark { display: inline-flex; gap: 0.35em; }
.logo__me { color: var(--accent); }
.logo--white .logo__text { color: var(--white); }
.logo--white .logo__me { color: var(--accent); }

/* -----------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; }

/* Address + phone strip above the nav. Centered and set large enough to read
   at a glance; the phone is the brightest thing on the bar. Socials (when the
   BIZ links are filled in) sit to the left without pushing the contact off
   centre, and stack above it on phones. */
.utility-bar { background: var(--accent); color: var(--white); font-size: 1.02rem; }
.utility-bar__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.25rem; min-height: 48px; flex-wrap: wrap; }
.utility-socials { display: flex; gap: 0.75rem; }
.utility-socials:not(:empty) { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); }
.utility-socials a { display: inline-flex; color: rgba(255,255,255,0.75); transition: color 0.2s var(--ease); }
.utility-socials a:hover { color: var(--white); }
.utility-socials svg { width: 18px; height: 18px; }
.utility-right { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; text-align: center; }
.utility-address { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; color: var(--white); }
.utility-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.45); margin-inline: 0.6rem; }
.utility-cta { padding: 0.3rem 0.8rem; font-size: 0.82rem; }
.utility-hours { display: inline-flex; align-items: center; gap: 0.9rem; font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.03em; color: var(--white); white-space: nowrap; }
.utility-hours__sep { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.6); }
@media (max-width: 1180px) {
  /* Tighter bar: shrink type a notch, keep it on one line. */
  .utility-bar { font-size: 0.92rem; }
  .utility-right { gap: 0.9rem; flex-wrap: nowrap; }
  .utility-cta { font-size: 0.78rem; padding: 0.26rem 0.7rem; }
  .utility-hours { font-size: 0.92rem; gap: 0.6rem; }
}
@media (max-width: 640px) {
  .utility-bar { font-size: 0.95rem; }
  .utility-socials:not(:empty) { position: static; transform: none; width: 100%; justify-content: center; padding-top: 0.5rem; }
  .utility-divider { display: none; }
  .utility-right { flex-direction: column; gap: 0.35rem; padding: 0.55rem 0; }
}

.main-nav { background: var(--white); border-bottom: 1px solid var(--line-on-light); transition: box-shadow 0.3s var(--ease); }
.main-nav.is-scrolled { box-shadow: 0 8px 24px -18px rgba(0,0,0,0.6); }
.main-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 122px; }
@media (max-width: 640px) {
  .main-nav__inner { min-height: 108px; }
}

.nav-list { display: flex; align-items: center; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.nav-item { position: relative; }
/* Primary links: larger, generously padded, with a teal underline that grows
   in on hover and stays on the current page, rather than a filled pill. */
.nav-list { gap: 0.3rem; }
.nav-link {
  --nav-pad: 0.55rem;
  position: relative;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: 0.01em;
  color: var(--ink);
  padding: 0.65rem var(--nav-pad); border-radius: var(--radius);
  text-decoration: none; white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-link::before {
  content: ""; position: absolute; left: var(--nav-pad); right: var(--nav-pad); bottom: 0.3rem; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.nav-link:hover, .nav-item.is-open > .nav-link, .nav-item--has-dropdown:hover > .nav-link { color: var(--accent-ink); background: var(--bone); }
.nav-link:hover::before, .nav-link[aria-current="page"]::before, .nav-item--has-dropdown:hover > .nav-link::before { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--accent-ink); background: transparent; }
.nav-cta--desktop { margin-left: 0.5rem; flex: none; white-space: nowrap; padding-block: 0.85rem; box-shadow: 0 10px 22px -14px rgba(4,124,104,0.7); }
/* Logo, six links and the CTA only just fit the 1240px wrap. Between the
   drawer breakpoint and here, step everything down a notch so the row still
   fits with the logo at a readable size, rather than letting it collapse. */
@media (min-width: 1121px) and (max-width: 1280px) {
  .main-nav__inner { gap: 1rem; }
  .main-nav .logo__img { height: 90px; }
  .nav-list { gap: 0.2rem; }
  .nav-link { --nav-pad: 0.5rem; font-size: 1.05rem; }
  .nav-cta--desktop { margin-left: 0; padding-inline: 1.3rem; }
}
.nav-link__caret { flex-shrink: 0; }
.nav-link__caret svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.nav-item--has-dropdown:hover .nav-link__caret svg,
.nav-item.is-open .nav-link__caret svg { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  list-style: none; margin: 0; padding: 0.4rem;
  background: var(--white); border: 1px solid var(--line-on-light);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav-item--has-dropdown:hover .dropdown,
.nav-item--has-dropdown:focus-within .dropdown,
.nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.6rem 0.8rem; border-radius: 4px; text-decoration: none; font-size: 0.93rem; }
.dropdown a:hover { background: var(--bone); color: var(--accent-ink); }

/* --- Mega menu (Interior / Exterior) ---------------------------------------
   A full-width panel under the nav bar: a two-column grid of service tiles
   (thumbnail, name, one-line lead) and a photo card for the category on the
   right. The panel is positioned against .main-nav__inner, not the nav item,
   so it spans the bar; a small padding bridge above it keeps hover alive
   between the link and the panel. */
.main-nav__inner { position: relative; }
.nav-item--mega { position: static; }
/* The panel hangs from the bottom of the bar, ~50px below the link, and the
   pointer has to cross that gap without leaving the item or :hover drops and
   the panel closes. An invisible strip under the link keeps it counted as
   hovered the whole way down (it is a descendant of .nav-item). */
.nav-item--mega > .nav-link { position: relative; }
.nav-item--mega > .nav-link::after { content: ""; position: absolute; left: -0.5rem; right: -0.5rem; top: 100%; height: 48px; }
.dropdown--mega {
  left: 0; right: 0; min-width: 0; width: 100%;
  top: calc(100% + 2px); margin-top: 0; padding: 0;
  border-radius: 12px; box-shadow: var(--shadow-lift);
}
.mega__inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr); gap: 1rem; padding: 0.9rem 1rem 0.8rem; }
.mega__list { min-width: 0; }
.mega__eyebrow { display: block; text-align: center; font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1.2; padding: 0 0.6rem 0.25rem; }
.mega__eyebrow::after { content: ""; display: block; width: 40px; height: 3px; margin: 0.3rem auto 0; background: var(--accent); border-radius: 2px; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.6rem; }
.dropdown--mega .mega__tile { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0.6rem; border-radius: 8px; min-width: 0; align-content: start; }
/* Locations: four counties, so the tiles spread down the column and each
   carries its largest towns rather than a count. */
.dropdown--mega[aria-label="Locations services"] .mega__list { display: flex; flex-direction: column; }
.dropdown--mega[aria-label="Locations services"] .mega__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 0.6rem; flex: 1; align-content: stretch; }
.dropdown--mega[aria-label="Locations services"] .mega__tile { align-items: flex-start; padding: 0.8rem 0.8rem; border: 1px solid var(--line-on-light); background: var(--bone); }
.dropdown--mega[aria-label="Locations services"] .mega__thumb { background: var(--white); }
.dropdown--mega[aria-label="Locations services"] .mega__name { font-size: 1.02rem; }
.dropdown--mega[aria-label="Locations services"] .mega__desc { font-size: 0.86rem; line-height: 1.45; margin-top: 0.15rem; }
.mega__grid { align-content: start; }
.dropdown--mega .mega__tile:hover, .dropdown--mega .mega__tile:focus-visible { background: var(--bone); color: inherit; }
.mega__thumb { flex: none; width: 46px; height: 46px; border-radius: 8px; border: 1px solid var(--line-on-light); background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; overflow: hidden; }
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega__thumb svg { width: 22px; height: 22px; }
.mega__thumb .fa-solid { font-size: 19px; line-height: 1; }
.mega__text { display: flex; flex-direction: column; min-width: 0; }
.mega__name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); line-height: 1.25; }
.mega__desc { font-size: 0.82rem; color: var(--text-on-light-muted); line-height: 1.35; }
.dropdown--mega .mega__feature {
  position: relative; display: flex; align-items: flex-end; align-self: stretch;
  min-height: 300px; height: auto; box-sizing: border-box;
  padding: 1.4rem; border-radius: 10px; overflow: hidden; color: var(--white);
  background: var(--ink); isolation: isolate; text-decoration: none;
}
.dropdown--mega .mega__feature:hover { background: var(--ink); color: var(--white); }
.dropdown--mega .mega__feature > img { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; margin: 0; transition: transform 0.6s var(--ease); }
.dropdown--mega .mega__feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,32,29,0.15) 0%, rgba(20,32,29,0.55) 45%, rgba(20,32,29,0.92) 100%); }
.dropdown--mega .mega__feature:hover > img { transform: scale(1.04); }
.mega__feature-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; width: 100%; min-width: 0; overflow-wrap: anywhere; }
.mega__feature-title { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.mega__feature-copy { font-size: 0.9rem; color: rgba(255,255,255,0.85); line-height: 1.45; }
.mega__feature .btn { margin-top: 0.4rem; font-size: 0.88rem; padding: 0.7rem 1.1rem; }
.dropdown--mega .mega__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.6rem; border-top: 1px solid var(--line-on-light); border-radius: 0 0 12px 12px; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--accent-ink); }
.dropdown--mega .mega__foot:hover { background: var(--bone); }
.mega__foot svg { width: 1em; height: 1em; }
/* Between the drawer breakpoint and a comfortable desktop width the side
   column gets too narrow for the card's copy, so the panel stacks: tiles
   first, the photo card as a wide banner beneath. */
@media (min-width: 1121px) and (max-width: 1320px) {
  /* Keep the two-column layout, just tighter: narrower photo card, denser
     tiles, so the panel stays short instead of stacking into a wall. */
  .mega__inner { grid-template-columns: minmax(0, 1.8fr) minmax(230px, 0.7fr); gap: 0.75rem; padding: 0.75rem 0.75rem 0.65rem; }
  .mega__grid { gap: 0 0.25rem; }
  .dropdown--mega .mega__tile { padding: 0.3rem 0.5rem; gap: 0.6rem; }
  .mega__thumb { width: 38px; height: 38px; }
  .mega__name { font-size: 0.9rem; }
  .mega__desc { font-size: 0.78rem; }
  .dropdown--mega .mega__feature { padding: 1rem; min-height: 0; }
  .mega__feature-title { font-size: 1.1rem; }
  .mega__feature-copy { font-size: 0.82rem; }
  .mega__feature .btn { font-size: 0.8rem; padding: 0.55rem 0.9rem; }
  .mega__eyebrow { font-size: 1rem; padding-bottom: 0.15rem; }
  .dropdown--mega .mega__foot { padding: 0.65rem 1.25rem; font-size: 0.85rem; }
}

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line-on-light); border-radius: var(--radius);
  cursor: pointer; position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 50%; width: 20px; height: 2px;
  background: currentColor; transform: translateX(-50%);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after { top: 6px; left: 0; transform: none; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-cta--mobile { display: none; }
.dropdown .dropdown__all { display: none; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 40; }

@media (max-width: 1120px) {
  .nav-toggle { display: block; }
  .nav-cta--desktop { display: none; }
  .nav-cta--mobile { display: inline-flex; margin-top: 1rem; }
  .primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
    background: var(--white); z-index: 45;
    padding: 5.5rem var(--gutter) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s var(--ease);
  }
  body.nav-open .primary-nav { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { --nav-pad: 0.95rem; padding: 0.9rem 0; justify-content: space-between; border-bottom: 1px solid var(--line-on-light); border-radius: 0; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 0 0.85rem;
    max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease);
  }
  .nav-item.is-open .dropdown { max-height: 500px; }
  /* Mega menus fold down to a plain list in the drawer. */
  .nav-item.is-open .dropdown--mega { max-height: 1400px; }
  .dropdown--mega { width: auto; border-radius: 0; }
  .dropdown .dropdown__all { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; padding: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent-ink); text-decoration: none; }
  .dropdown__all:hover { background: var(--bone); }
  .dropdown__all svg { width: 1em; height: 1em; flex-shrink: 0; }
  /* The overview link above replaces the feature card, which in the drawer
     read as just another service ("Interior home repair"). */
  .dropdown--mega .mega__feature { display: none; }
  .mega__inner { display: block; padding: 0.25rem 0 0.5rem; }
  .mega__eyebrow, .mega__feature img, .mega__desc, .mega__thumb, .mega__feature-copy { display: none; }
  .mega__grid { grid-template-columns: 1fr; gap: 0; }
  .dropdown--mega .mega__feature { min-height: 0; padding: 0.6rem 0.6rem; background: none; color: var(--ink); border-radius: 0; }
  .dropdown--mega .mega__feature:hover { background: var(--bone); color: var(--ink); }
  .mega__feature::before { display: none; }
  .mega__feature-title { font-size: 0.95rem; font-weight: 600; }
  .mega__feature .btn { display: none; }
  .dropdown--mega .mega__foot { padding: 0.6rem; border: 0; }
}

/* -----------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
/* The brand yellow runs deep at the top of the hero and washes out toward the
   bottom, so the roof peak on the boundary still reads against it.

   Text stays dark the whole way down. White would need the top to stay dark
   far enough to cover the hero copy, and white on this gold only measures
   ~3.2:1 at the deepest point of the gradient, unreadable. Dark ink is
   4.9:1 there and only improves as the gradient lightens. */
/* Photo hero: a northeastern PA home under a dark teal-ink wash so white type
   reads at every point. The image sits on a pseudo-element (not a background)
   so it can scale on hover-free parallax later without repainting the band. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--ink) url('/static/images/hero-splash-poster.jpg') center / cover no-repeat; }
@media (prefers-reduced-motion: reduce) { .hero__media video { display: none; } .hero__media { background: var(--ink) url('/static/images/hero-splash-poster.jpg') center / cover no-repeat; } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.38) 100%);
}
.hero__inner::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 100vw); height: 110%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(20,32,29,0.52) 0%, rgba(20,32,29,0.30) 45%, rgba(20,32,29,0) 70%); z-index: -1; pointer-events: none; }
.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(3.25rem, 2.25rem + 3vw, 4.9rem);
  padding-bottom: 0;
  /* Centered composition: headline, copy and buttons all on the page axis. */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__inner .btns { justify-content: center; }
/* The hero keeps the roof peak but not the full section padding under the
   buttons: enough for the peak to clear the CTA row, so the next band shows
   above the fold. */
.hero.section--house { padding-bottom: calc(var(--house-h) + 0.5rem); }
.hero__inner .eyebrow { color: var(--accent-soft); }
.hero h1 { font-size: var(--fs-hero); max-width: 26ch; margin-inline: auto; text-wrap: balance; text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 8px 28px rgba(0,0,0,0.45); }
.hero__h1-lead { color: var(--white); }
.hero__h1-accent { color: var(--white); }
/* The second half of the H1 is the keyword sentence; it is set like the old
   supporting paragraph (white, body weight) so the question stays the headline. */
.hero__h1-sub { display: block; margin: 1.1rem auto 0; max-width: 72ch; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; letter-spacing: 0; text-transform: none; text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4); color: var(--white); }
.hero p { max-width: 58ch; margin-inline: auto; color: rgba(255,255,255,0.86); margin-top: 1.25rem; font-size: var(--fs-lead); }
.hero .muted { color: rgba(255,255,255,0.75); }
.hero .btns { margin-top: 2.25rem; }
.hero .btn--outline { --btn-fg: var(--white); border-color: rgba(255,255,255,0.7); }

/* 1-2-3 process line under the hero CTA: a quiet preview of the "How It
   Works" section further down the page, not a rival to it. */
.hero__steps { margin-top: 2.1rem; text-align: center; }
/* Brighter than --accent-soft on purpose: that muted teal read as fine print
   on the busy hero video, this needs to pop as its own headline. */
.hero__steps-title { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.3rem; color: #4FE3B4; text-shadow: 0 2px 6px rgba(0,0,0,0.65), 0 8px 20px rgba(0,0,0,0.45); }
.hero__steps-row { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 0.9rem; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.01em; color: rgba(255,255,255,0.95); text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.hero__step { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__step-num { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.6); font-size: 0.85em; font-weight: 700; }
.hero__step-sep { width: 32px; height: 1px; background: rgba(255,255,255,0.35); }
@media (max-width: 640px) {
  .hero__steps-row { gap: 0.7rem 1rem; font-size: 1.02rem; margin-top: 0.75rem; }
  .hero__step-sep { display: none; }
}

/* -----------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.field { display: grid; gap: 0.35rem; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-on-light); border-radius: var(--radius);
  background: var(--white); color: var(--text-on-light);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field__err { font-size: 0.85rem; color: #c00; min-height: 1.1em; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c00; }

/* Form-level status line. Hidden until form.js adds .is-visible, then colored
   by .form-msg--error / .form-msg--ok. */
.form-msg { display: none; font-weight: 600; }
.form-msg.is-visible { display: block; }
.form-msg--error { color: #C00000; }
.form-msg--ok { color: #2A7A2A; }
.form-success { padding: 1.5rem; border-radius: var(--radius); background: var(--bone-2); }

/* -----------------------------------------------------------------------------
   9. ERROR PAGE (404)
   Its own block rather than utility classes, so the one-off spacing the error
   page needs never leaks into the marketing sections.
   -------------------------------------------------------------------------- */
.error-page { padding-block: clamp(4rem, 3rem + 4vw, 6rem); text-align: center; }
.error-page h1 { margin-bottom: 1.25rem; }
.error-page .btns { justify-content: center; }

/* -----------------------------------------------------------------------------
   10. CROSS-PROMO BAND (ShingleMe Roofing)
   -------------------------------------------------------------------------- */
/* ShingleMe's own gold (#A8995F, their --gold token) and logo, so the band is
   visibly their brand handing off from ours. Text is their ink-on-gold. */
.crosspromo { background: #A8995F; color: #1c1a11; padding-block: clamp(2rem, 1rem + 3vw, 3.25rem); }
.crosspromo__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
/* ShingleMe's lockup (their supplied SVG, filled in their ink) on the gold band. */
.crosspromo__logo { flex: 0 0 auto; display: block; width: clamp(220px, 26vw, 320px); }
.crosspromo__logo img { width: 100%; height: auto; }
.crosspromo__text { flex: 1 1 320px; min-width: 0; }
.crosspromo__text .eyebrow { color: #3a3318; margin-bottom: 0.35rem; }
.crosspromo__text strong { display: block; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; color: #14120b; }
.crosspromo__sub { margin: 0.6rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.3; color: #2a2612; }
.crosspromo .btn--dark { --btn-bg: #0D0D0D; --btn-fg: #fff; }
.crosspromo .btn--dark:hover { --btn-bg: #262626; }
@media (max-width: 640px) {
  .crosspromo__inner { flex-direction: column; align-items: center; text-align: center; }
  /* In a column the 320px flex-basis above becomes a height; size to content. */
  .crosspromo__text { flex: 0 0 auto; }
}

/* -----------------------------------------------------------------------------
   10b. PARKED, quote flick marks
   The three white marks that fanned out above the old single-quote card. The
   band is a carousel now and the marks are off, but they are coming back, so
   the rules stay here next to the component they belong to rather than being
   deleted and rewritten later. The markup is parked in templates/_quote-marks.html,
   which documents how to reinstate both halves.
   -------------------------------------------------------------------------- */
.testimonial__marks {
  position: absolute;
  top: -2.6rem;
  right: 0.5rem;
  width: clamp(72px, 9vw, 112px);
  height: auto;
  color: var(--white);
}
/* .testimonial__marks path only reaches the template shape sitting in <defs>;
   the <use> clones inherit fill from their own place in the tree, so the
   rule needs to target them directly or they default to SVG's initial
   black fill. */
.testimonial__marks use { fill: currentColor; }

/* -----------------------------------------------------------------------------
   10c. REVIEW CAROUSEL
   Three bubbles on stage at once, centre largest, the two flanking it scaled
   back, wheeled with the arrows.

   The cards are absolutely positioned and placed purely by transform, so
   moving between slots is a single cheap animation and nothing reflows. That
   is also why .reviews__stage carries an explicit height set from JS: absolute
   children give it none, and the tallest card has to fit whatever copy lands
   in it. Slot classes (.is-prev/.is-centre/.is-next) come from main.js.
   -------------------------------------------------------------------------- */
.reviews {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 1rem);
  margin-top: 2.5rem;
  /* How far the centre card rides above the stage midline. Lives here rather
     than inline in the slot transform because main.js needs the same number to
     work out where the card's top edge lands. */
  --centre-lift: 14px;
}

.reviews__stage {
  position: relative;
  flex: 1;
  min-width: 0;
  /* Fallback only. JS overwrites this with the tallest card's real height plus
     room for the stagger, once it can measure. */
  height: 380px;
}

/* Decorative flick marks fanning off the top-right corner of the centre card.
   --corner-x/--corner-y are that corner's position relative to the stage
   centre, written by main.js: the card's width is a vw clamp and its height is
   measured from the longest review, so the corner moves and a fixed offset
   cannot follow it. Each mark then radiates from that corner on its own ray and
   bobs on its own delay. Dropped below 860px, where the flanking cards collapse
   and the marks would push past the viewport. */
.reviews__marks {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: var(--white);
  pointer-events: none;
  /* Fallbacks for the widest card at the height cap, in case JS never runs. */
  --corner-x: 195px;
  --corner-y: -204px;
}
.reviews__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(15px, 1.5vw, 23px);
  /* Placed in polar terms, so the marks burst out of the corner instead of
     drifting near it: travel to the corner, turn to face along this mark's ray,
     then push the mark out that way. Every step has to pivot on the corner
     rather than the mark's own middle, hence the origin. The final translate
     is -100% of the mark's own length, which parks its tail exactly on the
     corner, and --mark-gap then backs it off by a hair. */
  transform-origin: 0 0;
  transform: translate(var(--corner-x), var(--corner-y))
             rotate(var(--mark-angle))
             scale(var(--mark-scale))
             translate(-50%, calc(-100% - var(--mark-gap)));
  --mark-angle: 45deg;
  --mark-scale: 1;
  --mark-gap: 12px;
}
.reviews__mark svg { display: block; width: 100%; height: auto; }
.reviews__mark path { fill: currentColor; }
/* Angles are measured off vertical, so the fan sweeps from nearly straight up
   round to nearly straight out, sitting either side of the corner's own 45°
   diagonal. Lengths are near enough equal with the middle mark longest, which
   is what makes the three read as one burst. */
.reviews__mark--a { --mark-angle: 8deg;  --mark-scale: 0.95; opacity: 0.9; }
.reviews__mark--b { --mark-angle: 45deg; --mark-scale: 1.05; opacity: 0.85; }
.reviews__mark--c { --mark-angle: 82deg; --mark-scale: 0.9;  opacity: 0.8; }
/* The float rides on the inner svg so it doesn't clobber the wrapper's
   position + rotation transform. It inherits the wrapper's rotation, so each
   mark now bobs along its own ray, in and out of the corner rather than
   straight up. */
.reviews__mark svg { animation: mark-float 6s ease-in-out infinite; }
.reviews__mark--b svg { animation-delay: -2s; }
.reviews__mark--c svg { animation-delay: -3.7s; }
@keyframes mark-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (max-width: 860px) { .reviews__marks { display: none; } }
@media (prefers-reduced-motion: reduce) { .reviews__mark svg { animation: none; } }

.review-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(250px, 29vw, 390px);
  margin: 0;
  /* Slot transforms all start from this centring pair, so each slot rule below
     only has to express its own offset. */
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The three live slots. The Y offsets are deliberately unequal, a symmetric
   pair would still read as a straight line with a dip in the middle, which is
   exactly the tidy arrangement this is meant to avoid. */
.review-bubble.is-prev {
  transform: translate(-50%, -50%) translateX(-86%) translateY(26px) scale(0.8);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.review-bubble.is-centre {
  transform: translate(-50%, -50%) translateY(calc(-1 * var(--centre-lift))) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
}
.review-bubble.is-next {
  transform: translate(-50%, -50%) translateX(86%) translateY(44px) scale(0.8);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
/* Waiting in the wings: parked past either edge, invisible, so the slide into
   a live slot comes from outside rather than from under the centre card. */
.review-bubble.is-far-prev { transform: translate(-50%, -50%) translateX(-170%) translateY(26px) scale(0.7); }
.review-bubble.is-far-next { transform: translate(-50%, -50%) translateX(170%) translateY(44px) scale(0.7); }

/* Bubble proper. The inner element owns the idle float so it does not fight
   the slot transform on the outer one, two animations on the same transform
   would clobber each other. */
.review-bubble__inner {
  margin: 0;
  /* JS gives every card the tallest card's height so the bubbles line up as a
     set; the column layout with justify-content centre keeps short reviews
     optically middled rather than stranded at the top of an oversized bubble,
     and lets an optional star row and author stack above and below the quote
     without a card that has them laying out any differently from one that
     does not. */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  background: var(--white);
  color: var(--text-on-light);
  border-radius: 28px;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  box-shadow: 0 26px 50px -24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.06);
  animation: bubble-float 7s ease-in-out infinite;
}
/* Type stays one size in every slot. Growing the centre card's text as well as
   scaling it made it far taller than its neighbours, and the row stopped
   reading as three of the same thing at different depths, scale alone does
   the emphasis, and equal type is what lets the heights match. */
.review-bubble__inner p {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.55;
  /* When a review is longer than the capped card, the quote, and only the
     quote, scrolls; min-height:0 lets it shrink below its content height in
     the flex column so overflow-y actually engages instead of spilling out.
     overscroll-behavior keeps a flick at the end of the text from scrolling
     the page behind it. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The star row and author name never shrink, so the quote is the one part the
   flexbox takes height from when a card is over the cap. */
.review-bubble__stars,
.review-bubble__author { flex: none; }
.review-bubble__stars { display: flex; gap: 0.15rem; color: var(--yellow); }
.review-bubble__stars svg { width: 18px; height: 18px; fill: currentColor; }
.review-bubble__author {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  font-style: normal;      /* <footer> is not italic, but be explicit */
  color: var(--accent-ink);
}
.review-bubble__author::before { content: none; }

/* Offset start times so the bubbles bob independently instead of in lockstep. */
.review-bubble:nth-child(2) .review-bubble__inner { animation-delay: -1.6s; }
.review-bubble:nth-child(3) .review-bubble__inner { animation-delay: -3.1s; }
.review-bubble:nth-child(4) .review-bubble__inner { animation-delay: -4.4s; }
.review-bubble:nth-child(5) .review-bubble__inner { animation-delay: -2.3s; }
.review-bubble:nth-child(6) .review-bubble__inner { animation-delay: -5.5s; }

@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

.reviews__arrow {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.reviews__arrow:hover { background: rgba(255,255,255,0.16); border-color: var(--white); }
.reviews__arrow:active { transform: scale(0.94); }
.reviews__arrow svg { width: 22px; height: 22px; }

/* Below the point where three cards stop fitting side by side, the flanking
   two are dropped entirely and the centre runs full width, scaling them down
   further would just produce three unreadable slivers. */
@media (max-width: 860px) {
  .review-bubble { width: min(420px, 100%); }
  .review-bubble.is-centre { transform: translate(-50%, -50%) scale(1); }
  /* Hiding these needs the sideways offset dropped as well, not just the
     opacity: an invisible card still parked at translateX(86%) sticks out past
     the stage and gives the whole page horizontal scroll. Collapsing them back
     to centre keeps them out of the way in both senses. */
  .review-bubble.is-prev,
  .review-bubble.is-next {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* On phones the arrows drop below the bubble. Flanking a card that is already
   the full width of a narrow screen, they eat about a third of the line and
   the review ends up wrapping every three words. */
@media (max-width: 640px) {
  .reviews { flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
  .reviews__stage { flex: 0 0 100%; order: 1; }
  .reviews__arrow { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .review-bubble { transition: none; }
  .review-bubble__inner { animation: none; }
}

/* -----------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--text-on-dark); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; }

.footer-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2.5rem; }
.footer-brand { max-width: 46ch; }
.footer-brand p { margin-top: 1.1rem; color: var(--text-on-dark-muted); }
.footer-cta { display: grid; gap: 0.6rem; justify-items: flex-start; }
.footer-kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.footer-phone { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--accent); text-decoration: none; }
.footer-hours { margin: 0; color: var(--text-on-dark); max-width: 30ch; }

.footer-divider { height: 1px; background: var(--line-on-dark); margin-block: 2.5rem; }

/* Fixed tracks, not auto-fit: auto-fit orphaned Service Area on its own row
   between ~470-700px and stacked all three into one long column on phones. */
.footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  /* Office spans the top; the two link lists sit side by side beneath it. */
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer-cols > .footer-col:first-child { grid-column: 1 / -1; }
}
.footer-h { font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-links a { color: var(--text-on-dark-muted); text-decoration: none; transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--accent); }
.footer-loc { font-style: normal; color: var(--text-on-dark-muted); display: grid; gap: 0.35rem; }

.footer-license { display: inline-block; margin-left: 0.6rem; padding-left: 0.6rem; border-left: 1px solid var(--line-on-dark); }
@media (max-width: 640px) { .footer-license { display: block; margin: 0.35rem 0 0; padding: 0; border: 0; } }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-on-dark);
  font-size: 0.85rem; color: var(--text-on-dark-muted);
}
.footer-credit a { color: var(--accent); text-decoration: none; }

/* -----------------------------------------------------------------------------
   12. MOTION
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}

/* =============================================================================
   PROGRAMMATIC SEO, location + service pages
   -----------------------------------------------------------------------------
   Ported from the sister site (www-shingleme) so the two share one page shape:
   photo sub-hero with breadcrumb, trust strip, info cards, town-tag directory,
   service cards, two-column facts, check lists, CTA band. Colours re-tokened:
   ShingleMe's gold is our teal (--accent) for chrome and our yellow for bands.
   ========================================================================== */

/* compact photo hero for interior pages */
.subhero { position: relative; min-height: clamp(360px, 52vh, 540px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--white); background: var(--ink); }
.subhero__media { position: absolute; inset: 0; z-index: -2; }
.subhero__media img { width: 100%; height: 100%; object-fit: cover; }
.subhero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,32,29,0.45) 0%, rgba(20,32,29,0.35) 40%, rgba(20,32,29,0.88) 100%); }
.subhero__inner { padding-block: clamp(2.4rem, 5vw, 4rem); max-width: 820px; }
.subhero h1 { color: var(--white); font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1; }
.subhero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; font-weight: 600; color: var(--white); margin-bottom: 1rem; text-shadow: 0 1px 3px rgba(13,13,13,0.8); }
.subhero__crumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.subhero__crumb a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.subhero__crumb [aria-hidden="true"] { color: rgba(255,255,255,0.5); }
.subhero__sub { font-size: var(--fs-lead); color: rgba(255,255,255,0.9); margin-top: 1rem; max-width: 56ch; }

/* rule under a section heading */
.rule { width: 56px; height: 3px; background: var(--accent); border: 0; margin: 1.1rem 0 0; }
.section-head--center .rule { margin-inline: auto; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.12; }

/* trust proof band below the sub-hero (yellow, like the homepage bands) */
.stat-strip { background: var(--accent); padding-block: clamp(1.2rem, 2.2vw, 1.8rem); border-bottom: 4px solid var(--yellow); }
.stat-strip__inner { display: flex; justify-content: center; align-items: center; row-gap: 1.4rem; column-gap: clamp(1.25rem, 4vw, 3.5rem); flex-wrap: wrap; max-width: 1120px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.stat-strip__item { text-align: center; }
.stat-strip__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); line-height: 1; color: var(--white); }
.stat-strip__label { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 500; color: rgba(255,255,255,0.9); margin-top: 0.35rem; }
.stat-strip__divider { width: 1px; height: 2.4rem; background: rgba(255,255,255,0.35); flex: none; }
@media (max-width: 780px) {
  .stat-strip__divider { display: none; }
  .stat-strip__item { flex: 0 0 40%; }
}

/* closing CTA band (teal) */
.cta-band { background: var(--accent); color: var(--white); padding-block: clamp(2.4rem, 5vw, 4rem); }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.8rem; }
.cta-band__copy h2 { color: var(--white); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); max-width: 24ch; margin-inline: auto; }
.cta-band__copy p { color: rgba(255,255,255,0.85); margin-top: 0.8rem; max-width: 52ch; margin-inline: auto; font-size: 1.1rem; }
.cta-band__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.btn--outline-white { --btn-bg: transparent; --btn-fg: var(--white); border-color: rgba(255,255,255,0.7); }
.btn--outline-white:hover { --btn-bg: rgba(255,255,255,0.14); }

/* info cards (local facts, service summaries) */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.info-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); padding: clamp(1.6rem, 2.4vw, 2.2rem); border-top: 3px solid var(--accent); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.info-card h3 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.info-card p { color: var(--text-on-light-muted); flex: 1; }
.info-card__link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 1rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-ink); text-decoration: none; }
.info-card__link:hover { color: var(--accent-2); }
.info-card__link::after { content: "→"; font-size: 0.75rem; transition: transform 0.2s var(--ease); }
.info-card__link:hover::after { transform: translateX(3px); }

/* two-column facts (service area + service pages) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }

/* check list */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text-on-light); line-height: 1.45; }
.check-list li::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
}

/* town tag chips: dense directory grid, 40-55 links per county */
/* Flex, not an auto-fill grid, so a short last row centres instead of
   leaving one tile hanging at the left. */
.area-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 1.4rem; }
.area-grid > .area-tag { flex: 0 0 160px; }
.area-tag { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--white); border: 1px solid var(--line-on-light); border-radius: 8px; padding: 0.6rem 0.9rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; line-height: 1.2; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease); }
.area-tag:hover { border-color: var(--accent); box-shadow: 0 3px 10px -6px rgba(0,0,0,0.18); color: var(--accent-ink); }
/* Collapsible grid: preview a first batch, reveal the rest via "See More".
   Hidden tiles stay in the DOM (display:none) so their links remain crawlable. */
.area-tag--extra { display: none; }
.area-grid.is-expanded .area-tag--extra { display: flex; }
.area-more { display: flex; justify-content: flex-start; margin-top: 1.5rem; }
@media (max-width: 640px) {
  /* Phones: tiles grow to fill each row edge to edge; See More goes full width. */
  .area-grid > .area-tag { flex: 1 1 140px; }
  .area-more .btn { width: 100%; justify-content: center; }
}

/* county block on the directory index + homepage */
.county-section { padding-block: clamp(2.4rem, 4vw, 3.6rem); border-bottom: 1px solid var(--line-on-light); }
.county-section:last-child { border-bottom: 0; }
.county-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.county-section__head h2, .county-section__head h3 { margin: 0; }
.county-section__head a { color: var(--ink); text-decoration: none; }
.county-section__head a:hover { color: var(--accent-ink); }
.county-section__count { font-size: 0.82rem; color: var(--text-on-light-muted); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 540px) {
  .county-section__head { flex-direction: column; align-items: flex-start; }
}

/* service cards (services directory) */
.prob-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.4rem; }
.prob-card { background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); border-left: 4px solid var(--accent); padding: clamp(1.4rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; gap: 0.7rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.prob-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.prob-card--high { border-left-color: #c0392b; }
.prob-card--medium { border-left-color: #d4830a; }
.prob-card--low { border-left-color: #2e7d32; }
.prob-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; line-height: 1.25; }
.prob-card__name:hover { color: var(--accent-ink); }
.prob-card__summary { color: var(--text-on-light-muted); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.prob-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.4rem; flex-wrap: wrap; }
.prob-card__link { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.prob-card__link:hover { color: var(--accent-2); }
.prob-card__link::after { content: "→"; transition: transform 0.2s var(--ease); }
.prob-card__link:hover::after { transform: translateX(3px); }

/* urgency badge */
.badge { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); border: 1.5px solid; }
.badge--high { background: #fff0ef; border-color: #e5a19c; color: #a02020; }
.badge--medium { background: #fff8ec; border-color: #e8c077; color: #96580a; }
.badge--low { background: #edf7ee; border-color: #89c98d; color: #255d28; }

/* estimate form + "prefer to talk" sidebar on town pages */
.form-card { background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-card); }
.form-card form { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.form-note { font-size: 0.85rem; color: var(--text-on-light-muted); }
.loc-contact { display: flex; flex-direction: column; gap: 0.4rem; }
.loc-phone { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); color: var(--ink); letter-spacing: 0.02em; text-decoration: none; }
.loc-phone:hover { color: var(--accent-ink); }
.price-list { list-style: none; padding: 0; margin: 1.4rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.price-list li { display: flex; align-items: center; gap: 0.85rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--ink); }
.price-list li::before { content: ""; width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); flex: none; }
.split--start { align-items: flex-start; }

/* Grid children default to min-width:auto which lets content force columns
   wider than allocated; 0 lets them compress to their assigned fr. */
.info-cards > *, .two-col > *, .prob-grid > * { min-width: 0; }

@media (max-width: 820px) {
  .info-cards { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .prob-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   HOME CARE CLUB + STAFF ACCOUNT CHROME (ported from www-shingleme)
   -----------------------------------------------------------------------------
   The member area, pricing page and header account menu were written against
   ShingleMe's gold/ink tokens. Rather than rewrite every rule, the gold names
   are aliased onto our teal so the same markup lands on-brand here.
   ========================================================================== */
:root {
  --gold: var(--accent);
  --gold-2: var(--accent-2);
  --gold-deep: var(--accent-2);
  --gold-soft: var(--accent-soft);
  --gold-ink: var(--accent-ink);
  --gold-ink-deep: var(--accent-ink);
  --gold-tint: var(--accent-tint);
  --peak: 18px;
}
.section--ink .eyebrow, .section--charcoal .eyebrow,
.hero .eyebrow, .photo-head .eyebrow, .reward-card .eyebrow { color: var(--accent-soft); }
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.h3, h3 { font-size: var(--fs-h3); font-weight: 900; letter-spacing: 0.02em; line-height: 1.1; }
.on-dark .muted, .muted-d { color: var(--text-on-dark-muted); }
.section--ink      { background: var(--ink);      color: var(--text-on-dark); }
.section--charcoal { background: var(--charcoal);  color: var(--text-on-dark); }
.section--gold     { background: var(--gold);      color: #1d1a10; }
.section--ink, .section--charcoal { }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3 { color: var(--white); }
.peak-top {
  clip-path: polygon(0 var(--peak), 50% 0, 100% var(--peak), 100% 100%, 0 100%);
  margin-top: calc(var(--peak) * -1);
  padding-top: calc(var(--section-y) + var(--peak));
}
.peak-top--ridge { position: relative; }
.peak-top--ridge::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%;
  height: calc(var(--peak) + 4px); background: var(--gold);
  clip-path: polygon(
    0 var(--peak), 50% 0, 100% var(--peak),
    100% calc(var(--peak) + 4px), 50% 4px, 0 calc(var(--peak) + 4px)
  );
  pointer-events: none;
}
.peak-accent { width: 58px; height: auto; color: var(--gold); }
.peak-accent path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.btn--gold    { background: var(--gold); color: var(--white); }
.btn--gold:hover { background: var(--ink); color: #fff; box-shadow: var(--shadow-card); }
.btn--outline-dark { border-color: var(--ink); color: var(--ink); }
.btn--outline-dark:hover { background: var(--ink); color: var(--white); }
/* Club / staff links in the (teal) utility bar: white like the phone. */
.utility-account {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--white) !important; font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.02em;
}
.utility-account svg { color: var(--white); }
/* The person glyph only fills ~60% of its viewBox, so it needs to run larger
   than the text around it to read at the same weight, and must not shrink. */
.utility-account > svg:first-child,
.nav-cta--mobile > svg:first-child { width: 1.4em; height: 1.4em; flex-shrink: 0; }
.utility-account:hover { color: var(--accent-soft) !important; }
.acct-slot { display: inline-flex; align-items: center; gap: 0.7rem; }
.acct-slot:empty { display: none; }
.rcc-menu { position: relative; display: inline-flex; }
.rcc-menu__btn { cursor: pointer; }
.rcc-menu--utility .rcc-menu__btn {
  background: none; border: 0; padding: 0;
  font-family: var(--font-display); font-size: 0.95rem; line-height: inherit;
}
.rcc-menu__caret { width: 0.65em; height: 0.65em; flex-shrink: 0; display: inline-flex; transition: transform 0.25s var(--ease); }
.rcc-menu__caret svg { width: 100%; height: 100%; color: currentColor; }
.rcc-menu.is-open .rcc-menu__caret { transform: rotate(180deg); }
.rcc-menu__panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px;
  display: flex; flex-direction: column;
  background: var(--bone); border: 1px solid var(--line-on-light);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 0.4rem; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.rcc-menu.is-open .rcc-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.rcc-menu__panel a {
  padding: 0.65rem 0.85rem; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
  color: var(--text-on-light) !important; white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.rcc-menu__panel a:hover { background: var(--white); color: var(--gold-deep) !important; }
.rcc-menu--mobile { display: none; }
.rcc-menu--mobile .rcc-menu__btn { width: 100%; justify-content: center; }
.rcc-menu--mobile .rcc-menu__panel {
  position: static; opacity: 1; transform: none; transition: none;
  min-width: 0; margin-top: 0.5rem; display: none;
}
.rcc-menu--mobile.is-open .rcc-menu__panel { display: flex; visibility: visible; }
.rcc-menu--mobile .rcc-menu__panel a { text-align: center; }
.cta-block { text-align: center; }
.cta-block .phone-em { color: #14120b; font-family: var(--font-display); letter-spacing: 0.05em; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; white-space: nowrap; }
.cta-block .phone-em:hover { color: #000; }
.footer-cta .btn--gold:hover { color: var(--white); }
.call-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 900; display: none;
  width: 58px; height: 58px; border-radius: 50%; background: var(--gold);
  color: #1c1a11; place-items: center; box-shadow: var(--shadow-lift);
  border: 2px solid #1c1a11;
  animation: fab-in 0.4s var(--ease) 1s both;
}
.call-fab svg { width: 24px; height: 24px; }
.photo-head { position: relative; overflow: hidden; isolation: isolate; }
.photo-head__media { position: absolute; inset: 0; z-index: -2; }
.photo-head__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-head__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,13,13,0.66) 0%, rgba(13,13,13,0.6) 45%, rgba(13,13,13,0.82) 100%); }
.section--ink .info-card, .section--charcoal .info-card { background: rgba(255,255,255,0.04); border-color: var(--line-on-dark); }
.section--ink .info-card h3, .section--charcoal .info-card h3 { color: var(--white); }
.section--ink .info-card p, .section--charcoal .info-card p { color: var(--text-on-dark-muted); }
.office-card .h3 { color: var(--white); margin-top: 0.5rem; }
.section--ink .muted-d a {
  color: var(--gold-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.section--ink .muted-d a:hover { color: #fff; }
.section--ink .filter-btn, .section--charcoal .filter-btn { color: var(--text-on-dark); border-color: var(--line-on-dark); }
.section--ink .filter-btn.is-active, .section--charcoal .filter-btn.is-active { background: var(--gold); color: #1c1a11; border-color: var(--gold); }
.section--ink .gallery-count, .section--charcoal .gallery-count { color: var(--text-on-dark-muted); }
@media (max-width: 1120px) {
/* The wrapper carries the spacing so the panel sits tight under the button. */
  .rcc-menu--mobile { display: block; margin: 1.2rem 0 0; }
.rcc-menu--mobile .rcc-menu__btn.nav-cta--mobile { margin: 0; }
.call-fab { display: grid; }
}
.rcc-intro {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.7rem);
  bottom: clamp(0.8rem, 2vw, 1.7rem);
  z-index: 1150;
  width: min(384px, calc(100vw - 1.6rem));
  pointer-events: none;
}
.rcc-intro > * { pointer-events: auto; }
.rcc-intro__card {
  filter: drop-shadow(0 26px 44px rgba(0,0,0,0.40));
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.42s var(--ease), transform 0.55s var(--ease),
              visibility 0s linear 0.55s;
}
.rcc-intro.is-open .rcc-intro__card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
.rcc-intro__pane {
  position: relative;
  background: var(--white);
  color: var(--ink);
  clip-path: polygon(50% 0, 100% 42px, 100% 100%, 0 100%, 0 42px);
}
.rcc-intro__media { position: relative; height: 170px; }
.rcc-intro__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.rcc-intro__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,32,29,0.28) 0%, rgba(20,32,29,0) 55%);
}
.rcc-intro__close {
  position: absolute; top: 50px; right: 0.7rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(13,13,13,0.55);
  border: 1px solid var(--line-on-dark);
  color: var(--white);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rcc-intro__close:hover { background: var(--gold); color: #1c1a11; }
.rcc-intro__close svg { width: 15px; height: 15px; }
.rcc-intro__body { padding: 0.35rem 1.4rem 1.4rem; }
.rcc-intro__body .eyebrow { color: var(--accent-ink); font-size: 0.7rem; letter-spacing: 0.22em; }
.rcc-intro__title {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0.55rem 0 0.6rem;
}
.rcc-intro__copy {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--text-on-light-muted);
}
.rcc-intro__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.15rem; }
.rcc-intro__actions .btn { padding: 0.72rem 1.3rem; font-size: 0.86rem; }
.rcc-intro__more {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-ink);
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* The pane behind this link is white, so the hover state must stay dark. */
.rcc-intro__more:hover { color: var(--accent); border-bottom-color: currentColor; }
.rcc-intro__tab {
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.35rem;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              visibility 0s linear 0s, background 0.2s var(--ease);
}
.rcc-intro__tab:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }
.rcc-intro__tab svg { width: 18px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rcc-intro.is-open .rcc-intro__tab {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition-delay: 0s, 0s, 0.3s, 0s;
}
@media (prefers-reduced-motion: reduce) {
.rcc-intro__card, .rcc-intro__tab { transition: opacity 0.2s linear, visibility 0s linear; }
.rcc-intro__card, .rcc-intro.is-open .rcc-intro__tab { transform: none; }
}

/* =============================================================================
   REVIEWS PAGE (ported from www-shingleme)
   ========================================================================== */
.wrap--wide { max-width: 1440px; }
.reviews-grid { columns: 3 330px; column-gap: clamp(1rem, 2vw, 1.6rem); }
.review-card { break-inside: avoid; margin-bottom: clamp(1rem, 2vw, 1.6rem); background: var(--white); border: 1px solid var(--line-on-light); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(1.4rem, 2.2vw, 1.9rem); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.review-stars { color: var(--gold-ink); letter-spacing: 3px; font-size: 1rem; line-height: 1; }
.review-quote { margin-top: 0.9rem; color: var(--text-on-light); line-height: 1.6; }
.review-author { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line-on-light); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.92rem; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.review-author::before { content: ""; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
.review-verified { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 400; color: var(--text-on-light-muted); }
@media (max-width: 720px) {
.reviews-grid { columns: 1; }
}
.rating-hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.rating-hero__stars { color: var(--gold); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); letter-spacing: 6px; line-height: 1; }
.rating-hero__label { color: var(--text-on-dark-muted); font-size: 0.95rem; }
.review-card:last-child { margin-bottom: 0; }
.lr-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.lr-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 2;
  /* Keep both tiles fully visible without scrolling on a laptop viewport. */
  max-height: 42vh;
  overflow: hidden;
  isolation: isolate;
  border-radius: 6px;
  text-decoration: none;
  color: var(--white);
  background: var(--charcoal);
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,0.14);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lr-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.14) saturate(1.05);
  transition: transform 0.5s var(--ease);
}
.lr-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Light at the top so the photo shows, weighted at the bottom where the
     centred name/address/button sit. */
  background: linear-gradient(180deg, rgba(13,13,13,0.06) 0%, rgba(13,13,13,0.22) 40%, rgba(13,13,13,0.82) 100%);
  transition: background 0.35s var(--ease);
}
.lr-tile__body { padding: clamp(1.3rem, 2.6vw, 2.1rem); width: 100%; text-align: center; }
.lr-tile__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  font-size: clamp(1.3rem, 0.95rem + 1.3vw, 2rem);
}
.lr-tile__addr {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
}
.lr-tile__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1c1a11;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lr-tile__cue span[aria-hidden] { transition: transform 0.25s var(--ease); }
.lr-tile:hover img, .lr-tile:focus-visible img { transform: scale(1.06); }
.lr-tile:hover, .lr-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.22);
  border-color: var(--gold);
}
.lr-tile:hover::after, .lr-tile:focus-visible::after {
  background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.14) 40%, rgba(13,13,13,0.78) 100%);
}
.lr-tile:hover .lr-tile__cue, .lr-tile:focus-visible .lr-tile__cue {
  background: var(--white);
  color: var(--ink);
}
.lr-tile:hover .lr-tile__cue span[aria-hidden],
.lr-tile:focus-visible .lr-tile__cue span[aria-hidden] { transform: translateX(4px); }
.lr-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 720px) {
.lr-tiles { grid-template-columns: 1fr; }
.lr-tile { aspect-ratio: 16 / 9; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
.lr-tile, .lr-tile img, .lr-tile::after, .lr-tile__cue, .lr-tile__cue span[aria-hidden] { transition: none; }
.lr-tile:hover img, .lr-tile:focus-visible img { transform: none; }
.lr-tile:hover, .lr-tile:focus-visible { transform: none; }
}
.lr-tiles--one { grid-template-columns: minmax(0, 520px); justify-content: center; }


/* =============================================================================
   CONTACT PAGE (Jobber request form)
   ========================================================================== */
.contact-page { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem); }
.contact-page__head { text-align: center; margin: 0 auto clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.contact-page__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); line-height: 1.1; max-width: 32rem; margin-inline: auto; }
.contact-page__lead { margin: 0.9rem auto 0; color: var(--text-on-light-muted); font-size: 1.05rem; }
.jobber-embed { background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.jobber-embed iframe { display: block; width: 100%; height: 1150px; border: 0; }
.contact-page__note { margin-top: 1rem; font-size: 0.92rem; text-align: center; }
@media (max-width: 640px) { .jobber-embed iframe { height: 1350px; } }


/* =============================================================================
   TOWN DIRECTORY BACKGROUND (homepage "Serving Northeastern Pennsylvania")
   Soft teal blooms, corner-heavy: two in the top corners, one low-centre,
   three small mid-field. Full-width wrap so the town grid can breathe.
   ========================================================================== */
.nepa-directory { position: relative; overflow: hidden; background: var(--bone); }
.nepa-directory .wrap { position: relative; z-index: 1; }
.nd-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.nd-blob--1 { width: 720px; height: 720px; top: -260px; right: -220px; background: radial-gradient(circle, rgba(4,124,104,0.34) 0%, transparent 70%); filter: blur(70px); }
.nd-blob--2 { width: 620px; height: 620px; top: 8%; left: -260px; background: radial-gradient(circle, rgba(4,124,104,0.28) 0%, transparent 70%); filter: blur(80px); }
.nd-blob--3 { width: 820px; height: 820px; bottom: -380px; left: 30%; background: radial-gradient(circle, rgba(127,196,182,0.45) 0%, transparent 70%); filter: blur(90px); }
.nd-blob--4 { width: 360px; height: 360px; top: 42%; right: 12%; background: radial-gradient(circle, rgba(206,159,66,0.16) 0%, transparent 70%); filter: blur(55px); }
.nd-blob--5 { width: 420px; height: 420px; top: 58%; left: 10%; background: radial-gradient(circle, rgba(4,124,104,0.26) 0%, transparent 70%); filter: blur(60px); }
.nd-blob--6 { width: 300px; height: 300px; top: 24%; left: 48%; background: radial-gradient(circle, rgba(127,196,182,0.36) 0%, transparent 70%); filter: blur(50px); }
.nepa-directory .county-section { border-bottom-color: rgba(4,124,104,0.14); }
/* Teal header band across the top of the directory, over the blobs. */
.nepa-directory { padding-top: 0; }
.nepa-head { position: relative; z-index: 1; background: var(--accent); color: var(--white); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); margin-bottom: clamp(2rem, 1rem + 2vw, 3rem); border-bottom: 5px solid var(--yellow); }
.nepa-head .section-head { margin-bottom: 0; }
.nepa-head .eyebrow { color: var(--yellow); }
.nepa-head h2 { color: var(--white); }
.nepa-head .lead { color: rgba(255,255,255,0.85); margin-top: 1rem; max-width: 60ch; margin-inline: auto; }
.nepa-directory .area-tag { background: rgba(255,255,255,0.85); }

/* Home Care Club band on the homepage: the club photo under a deep teal wash
   so the band still reads as the "green" beat in the page rhythm. */
.club-band { color: var(--white); }
.club-band .section-head { margin-bottom: 0; }
.club-band h2 { color: var(--white); }
.club-band .eyebrow { color: var(--yellow); }
.club-band .muted-d { color: rgba(255,255,255,0.88); margin-top: 1rem; }
.club-band .photo-head__media img { object-position: center 40%; }
.club-band .photo-head__overlay { background: linear-gradient(180deg, rgba(4,58,50,0.84) 0%, rgba(4,58,50,0.7) 50%, rgba(4,58,50,0.88) 100%); }
.club-band .btns { margin-top: 1.6rem; }
.club-band .btn { box-shadow: 0 8px 22px rgba(0,0,0,0.32); }

/* Closing "get started" band: photo under a dark wash, white type. */
.get-started { color: var(--white); }
.get-started .section-head { margin-bottom: 0; }
.get-started h2 { color: var(--white); }
.get-started .eyebrow { color: var(--accent-soft); }
.get-started .muted-d { color: rgba(255,255,255,0.85); margin-top: 1rem; }
.get-started .photo-head__overlay { background: linear-gradient(180deg, rgba(20,32,29,0.72) 0%, rgba(20,32,29,0.6) 50%, rgba(20,32,29,0.82) 100%); }

/* Contact call-to-action block on town pages: copy + buttons beside a phone
   card. Every request goes through the Jobber form on /inquire/. */
.contact-cta { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.contact-cta__copy .lead { margin-top: 1rem; max-width: 56ch; }
.contact-cta__copy .btns { margin-top: 1.6rem; }
.contact-cta__aside { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--accent-tint); border-radius: var(--radius); border-top: 3px solid var(--accent); }
.contact-cta__aside .loc-phone { margin-top: 0.2rem; }
.contact-cta__aside .price-list { margin: 1.2rem 0 0; }
@media (max-width: 860px) { .contact-cta { grid-template-columns: 1fr; } }

/* --- Locations menu: county silhouettes ---------------------------------- */
.mega__thumb--county { width: 64px; height: 64px; background: linear-gradient(160deg, var(--accent-tint), #d9ebe6); border-color: rgba(4,124,104,0.18); }
.mega__thumb--county svg { width: 52px; height: 52px; overflow: visible; }
.mega__thumb--county path { fill: var(--accent); stroke: var(--white); stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(4,124,104,0.35)); transition: fill 0.25s var(--ease); }
.dropdown--mega .mega__tile:hover .mega__thumb--county path { fill: var(--yellow); }
.dropdown--mega[aria-label="Locations services"] .mega__tile { align-items: center; }

/* The card beside the tiles becomes a four-county map: dark teal ground, the
   counties in soft teal with white seams, and the hovered one lit in yellow. */
.dropdown--mega .mega__feature--map, .dropdown--mega .mega__feature--map:hover { background: var(--accent); }
.dropdown--mega .mega__feature--map::before { background: none; }
.mega__map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; padding: 3% 5% 40%; box-sizing: border-box; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }
.mega__map-county { fill: rgba(255,255,255,0.28); stroke: rgba(255,255,255,0.9); stroke-width: 1.4; stroke-linejoin: round; transition: fill 0.25s var(--ease), stroke 0.25s var(--ease); }
.mega__map-county.is-active { fill: var(--yellow); stroke: #fff; }
.dropdown--mega .mega__feature--map .btn { background: var(--white); color: var(--accent); border-color: var(--white); }
.dropdown--mega .mega__feature--map .btn:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* Bone section with the homepage directory's soft teal glows behind it */
.section--blobs { position: relative; overflow: hidden; background: var(--bone); }
.section--blobs__inner { position: relative; z-index: 1; }

/* How It Works header: big display heading, centered rule, one-line lead */
.how-head h2 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); letter-spacing: 0.01em; }
.how-head .rule { margin-top: 1rem; }
.how-head { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.how-head + .how-steps { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.how-steps { width: min(100%, 1080px); margin-inline: auto; }

/* Curved arrows leading the eye from step 1 to 2 (off the right end of bar 1)
   and from 2 to 3 (under the left end of bar 2). Arrow 2 is mirrored so its
   head points down-right; arrow 1 keeps the artwork's own orientation. */
.how-arrow { position: absolute; width: clamp(110px, 7rem + 5vw, 210px); height: auto; pointer-events: none; z-index: 1; }
.how-arrow--1 { top: 26%; right: -26%; transform: rotate(-60deg); }
.how-arrow--2 { top: 100%; left: -16%; transform: scaleX(-1); }
@media (max-width: 900px) { .how-arrow { display: none; } }
.how-wrap { max-width: 1140px; }

/* Centered four-county picker on service and category pages */
.area-grid--counties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
/* Always four counties: step 4 -> 2x2 -> 1 so a row never strands one box. */
@media (max-width: 900px) { .area-grid--counties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .area-grid--counties { display: grid; grid-template-columns: 1fr; } }
.area-grid--counties .area-tag { padding: 0.9rem 1rem; font-size: 0.95rem; }

/* ReviewsUp feed on /reviews/. Kept under 992px wide on purpose: the widget's
   own stylesheet has @media (min-height: 1401px) and (min-width: 992px) that
   pins a fixed footer and adds 275px of body padding for its standalone page.
   Embedded, the iframe is always taller than 1401px, so at 992px+ wide that
   padding lands as a blank band under the feed. */
.ru-feed { max-width: 960px; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); }

/* --- /service-areas/: one card per county, outline plus a short lead ---------- */
.county-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: 2.4rem; }
.county-card { display: flex; gap: 1.4rem; align-items: center; padding: clamp(1.2rem, 2vw, 1.8rem); background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.county-card:hover, .county-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); }
.county-card__shape { flex: 0 0 auto; display: grid; place-items: center; width: clamp(110px, 12vw, 150px); aspect-ratio: 1; border-radius: 18px; background: linear-gradient(160deg, var(--accent-tint), #d9ebe6); border: 1px solid rgba(4,124,104,0.18); }
.county-card__shape svg { width: 78%; height: 78%; overflow: visible; }
.county-card__shape path { fill: var(--accent); stroke: var(--white); stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 3px 3px rgba(4,124,104,0.35)); transition: fill 0.25s var(--ease); }
.county-card:hover .county-card__shape path { fill: var(--yellow); }
.county-card__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.county-card__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); line-height: 1.15; color: var(--ink); }
.county-card__count { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.county-card__lead { color: var(--text-on-light-muted); font-size: 0.98rem; line-height: 1.5; margin-top: 0.2rem; }
.county-card__cta { margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.county-card__cta::after { content: " \2192"; }
@media (max-width: 820px) { .county-cards { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .county-card { flex-direction: column; align-items: flex-start; } }

/* Reviews page header, centered */
.rating-hero--center { justify-content: center; text-align: center; }
.rating-hero--center .rating-hero__label { margin-inline: auto; }

/* "Serving Northeastern Pennsylvania" stays on one centered line where it fits,
   instead of balancing into a short top line over a long bottom one. */
@media (min-width: 1100px) {
  .nepa-head h2, #areas-heading { max-width: none; text-wrap: nowrap; white-space: nowrap; }
  /* The header boxes are narrower than the one-line heading, so let them go
     full width; the lead keeps its own measure below. */
  .nepa-head .section-head, .areas-head { max-width: none !important; }
  .nepa-head .lead, .areas-head .lead { max-width: 60ch; margin-inline: auto; }
}

/* Reviews page: the "leave a review" card, a plain centered white card */
.lr-card { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: min(100%, 520px); margin-inline: auto; padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem); background: var(--white); border: 1px solid var(--line-on-light); border-radius: var(--radius); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); text-align: center; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.lr-card:hover, .lr-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.lr-card__stars { font-size: 1.9rem; letter-spacing: 0.12em; line-height: 1; color: var(--yellow); }
.lr-card__name { margin-top: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); line-height: 1.1; }
.lr-card__addr { color: var(--text-on-light-muted); font-size: 0.98rem; }
.lr-card__cue { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.85rem 1.6rem; border-radius: var(--radius-sm, 6px); background: var(--accent); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; transition: background 0.25s var(--ease); }
.lr-card:hover .lr-card__cue { background: var(--ink); }

/* Hero buttons over the video: brand teal primary, white secondary, both
   with a drop shadow so they separate from whatever frame is behind them. */
.hero .btn--accent { box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.hero .btn--outline { --btn-bg: var(--white); --btn-fg: var(--ink); border-color: var(--white); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.hero .btn--outline:hover { --btn-bg: var(--accent); --btn-fg: var(--white); border-color: var(--accent); }