/* ==========================================================================
   antsrodents-pasadena.com — design layer  ("pz-" namespace)
   --------------------------------------------------------------------------
   Loaded AFTER the Tailwind CDN sheet. The Tailwind palette itself is remapped
   in each page's tailwind.config block, so the utility classes already present
   in the export resolve to this palette rather than the CDN defaults.

   Indigo Slate: a cool violet-slate accent on a violet-tinted near-black, set
   in Space Grotesk over Inter. Square-ish corners (8/6), flat surfaces, one
   scrim on the hero.

   The photography on this site is warm golden-hour Southern California and is
   NOT being regenerated, so the ink family and the hero scrim are deliberately
   tinted violet — that is what re-grounds a warm photograph under a cool
   palette. Do not neutralise them back to a plain near-black.
   ========================================================================== */

:root {
  /* Brand */
  --pz-brand:       #6355d6;   /* CTA fill, icon glyphs, every accent        */
  --pz-brand-hi:    #8071ee;   /* CTA on a dark ground; gradient top stop    */
  --pz-brand-deep:  #4a3fae;   /* links and hover on a light ground          */
  --pz-brand-soft:  #eceafb;   /* tint chips, hover rows                     */
  --pz-brand-edge:  #d6d2f4;   /* border on a tinted chip                    */

  /* Stars keep a warm gold. Universal review convention, not a brand signal —
     grey stars read as broken. This is the ONLY warm hue left on the site. */
  --pz-star:        #f2b83c;

  /* Ink — violet-tinted, not neutral */
  --pz-ink:         #15131f;
  --pz-ink-2:       #201d33;
  --pz-ink-3:       #1a1728;

  /* Text */
  --pz-text:        #2b2935;
  --pz-muted:       #6a6678;
  --pz-on-dark:     #f2f1f7;
  --pz-on-dark-mut: #bdb9cc;

  /* Surfaces */
  --pz-cream:       #fbfbfd;
  --pz-surface:     #ffffff;
  --pz-surface-alt: #f4f4f9;
  --pz-line:        #e4e3ee;

  /* Feedback */
  --pz-live:        #22a35a;

  /* Type */
  --pz-display: "Space Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --pz-ui:      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape — squarer than the sheet this replaces (was 16/12/10) */
  --pz-radius:    8px;
  --pz-radius-sm: 6px;

  --pz-shell:   1200px;
}

body { font-family: var(--pz-ui); color: var(--pz-text); background: var(--pz-cream); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .pz-display { font-family: var(--pz-display); letter-spacing: -.015em; }
.pz-shell { max-width: var(--pz-shell); margin-inline: auto; padding-inline: 20px; }

a:focus-visible, button:focus-visible, .pz-pill:focus-visible {
  outline: 3px solid var(--pz-brand);
  outline-offset: 2px;
}

/* ---------- header ------------------------------------------------------ */
.pz-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--pz-line);
  box-shadow: 0 1px 14px rgba(21,19,31,.06);
}
.pz-header__in {
  max-width: var(--pz-shell); margin-inline: auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 18px;
}
.pz-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--pz-display);
  font-size: 1.02rem; font-weight: 700; line-height: 1.15;
  color: var(--pz-ink); text-decoration: none;
  max-width: 44%;
}
.pz-brand img { display: block; height: 46px; width: auto; max-width: 100%; }
.pz-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pz-nav > li { list-style: none; position: relative; }
.pz-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: var(--pz-radius-sm);
  font-family: var(--pz-ui); font-size: .95rem; font-weight: 500;
  color: var(--pz-ink); text-decoration: none; background: none; border: 0;
  cursor: pointer; white-space: nowrap;
}
.pz-nav__link:hover, .pz-nav__link[aria-expanded="true"] { color: var(--pz-brand-deep); background: var(--pz-brand-soft); }
.pz-nav__caret { width: 9px; height: 9px; flex: none; transition: transform .18s; }
.pz-nav__link[aria-expanded="true"] .pz-nav__caret { transform: rotate(180deg); }

/* Dropdown: exactly as tall as its items. The panel is display:block, never
   grid, and never gets a min-height — a grid with auto-fill rows keeps
   generating empty rows to fill the box. */
.pz-drop {
  position: absolute; left: 0; top: 100%;
  display: block; min-width: 252px; max-height: none; min-height: 0;
  margin: 0; padding: 6px 0;
  background: #fff; border: 1px solid var(--pz-line); border-radius: var(--pz-radius);
  box-shadow: 0 18px 44px rgba(21,19,31,.15);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.pz-nav > li:hover > .pz-drop,
.pz-nav > li:focus-within > .pz-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.pz-drop li { list-style: none; }
.pz-drop a {
  display: block; padding: 9px 16px;
  font-family: var(--pz-ui); font-size: .9rem; color: var(--pz-text); text-decoration: none;
}
.pz-drop a:hover { background: var(--pz-brand-soft); color: var(--pz-brand-deep); }

/* The pill is white-on-violet. The sheet this replaces used dark text on a
   warm fill; the inversion is deliberate. */
.pz-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  background: var(--pz-brand); color: #fff;
  font-family: var(--pz-ui); font-weight: 600; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(99,85,214,.7);
  transition: background .18s, transform .18s;
}
.pz-pill:hover { background: var(--pz-brand-deep); color: #fff; transform: translateY(-1px); }
.pz-header .pz-pill { margin-left: 8px; }

.pz-burger { display: none; }

@media (max-width: 980px) {
  .pz-nav { display: none; }
  .pz-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; border-radius: var(--pz-radius-sm);
    border: 1px solid var(--pz-line); background: #fff; cursor: pointer;
  }
  .pz-burger span, .pz-burger span::before, .pz-burger span::after {
    content: ""; display: block; width: 20px; height: 2px; background: var(--pz-ink); position: relative;
  }
  .pz-burger span::before { position: absolute; top: -6px; }
  .pz-burger span::after  { position: absolute; top: 6px; }
  .pz-brand { max-width: 62%; font-size: .95rem; }
  .pz-header .pz-pill { padding: 9px 14px; font-size: .85rem; }

  /* Mobile accordion. Hidden until the burger opens it — never pinned open. */
  .pz-mnav { display: none; border-top: 1px solid var(--pz-line); background: #fff; }
  .pz-mnav.is-open { display: block; }
  .pz-mnav ul { margin: 0; padding: 0; list-style: none; }
  .pz-mnav > ul > li { border-bottom: 1px solid var(--pz-line); }
  .pz-mnav a, .pz-mnav button {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 13px 20px; font-family: var(--pz-ui); font-size: .95rem; font-weight: 500;
    color: var(--pz-ink); text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer;
  }
  .pz-mnav__sub { display: none; background: var(--pz-surface-alt); }
  .pz-mnav__sub.is-open { display: block; }
  .pz-mnav__sub a { font-weight: 400; font-size: .9rem; padding-left: 34px; color: var(--pz-text); }
}
@media (min-width: 981px) { .pz-mnav { display: none; } }

/* ---------- hero -------------------------------------------------------- */
.pz-hero {
  position: relative; overflow: hidden;
  background: var(--pz-ink);
  color: #fff;
  isolation: isolate;
}
/* ONE gradient layer only. Stacking translucent scrims multiplies: a .82 over
   a .55 leaves about 8% of the photograph showing and the hero reads as a flat
   dark band with a broken image in it. If the headline is not legible, deepen
   THIS gradient — never add a second. */
.pz-hero__bg { position: absolute; inset: 0; z-index: -2; }
.pz-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.pz-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 92% at 80% 10%, rgba(128,113,238,.34), transparent 60%),
    linear-gradient(168deg, rgba(21,19,31,.93) 0%, rgba(21,19,31,.82) 50%, rgba(26,23,40,.68) 100%);
}
/* Dot field rather than the diagonal hatch the previous sheet used. */
.pz-hero__weave {
  position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 22px 22px;
}
.pz-hero__in {
  position: relative; max-width: var(--pz-shell); margin-inline: auto;
  padding: 66px 20px 74px;
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); gap: 46px; align-items: start;
}
.pz-hero__eyebrow {
  margin: 0 0 14px; font-family: var(--pz-ui); font-size: 1.6rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--pz-brand-hi); line-height: 1.25;
}
.pz-hero__display {
  margin: 0 0 20px; font-family: var(--pz-display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.1; color: #fff;
}
.pz-hero__lead { margin: 0 0 24px; font-size: 1.06rem; line-height: 1.7; color: var(--pz-on-dark-mut); max-width: 62ch; }
.pz-checks { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 11px; }
.pz-checks li { position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.55; color: var(--pz-on-dark); }
/* rounded square, not a circle */
.pz-checks li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px; border-radius: 5px;
  background: var(--pz-brand) no-repeat center/11px 11px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* white call-card, used in the hero and in the sticky rail.
   No coloured top bar — the previous sheet's 5px rule was a signature. */
.pz-card {
  background: #fff; color: var(--pz-text);
  border-radius: var(--pz-radius); padding: 24px 22px;
  box-shadow: 0 22px 54px rgba(21,19,31,.32);
  border: 1px solid var(--pz-line);
}
.pz-card__kicker { margin: 0 0 4px; font-family: var(--pz-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pz-brand-deep); }
.pz-card__title { margin: 0 0 12px; font-family: var(--pz-display); font-size: 1.32rem; line-height: 1.25; color: var(--pz-ink); }
.pz-card__phone {
  display: block; text-align: center; padding: 14px 16px; border-radius: var(--pz-radius-sm);
  background: var(--pz-brand); color: #fff;
  font-family: var(--pz-ui); font-weight: 700; font-size: 1.22rem; letter-spacing: .01em;
  text-decoration: none; transition: background .18s;
}
.pz-card__phone:hover { background: var(--pz-brand-deep); color: #fff; }
.pz-card__note { margin: 12px 0 0; font-size: .84rem; line-height: 1.5; color: var(--pz-muted); text-align: center; }
.pz-card__list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--pz-line); padding-top: 14px; }
.pz-card__list li { position: relative; padding-left: 22px; font-size: .88rem; color: var(--pz-text); }
.pz-card__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--pz-brand-deep); font-weight: 700; }

.pz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pz-live); margin-right: 7px; animation: pz-pulse 1.5s infinite; }
@keyframes pz-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: .7; } }

@media (max-width: 900px) {
  .pz-hero__in { grid-template-columns: 1fr; gap: 30px; padding: 44px 20px 50px; }
  .pz-hero__eyebrow { font-size: 1.22rem; }
  /* stacked layout puts the card over the photo — deepen the single scrim
     rather than adding a second one */
  .pz-hero__scrim {
    background:
      radial-gradient(80% 60% at 70% 4%, rgba(128,113,238,.30), transparent 62%),
      linear-gradient(180deg, rgba(21,19,31,.92) 0%, rgba(21,19,31,.86) 100%);
  }
}

/* ---------- rating bar (.avg-rating-box-section) ------------------------ */
/* The export has no such section anywhere, so it inherits no CSS for one —
   the BASE layout has to live here as well as the re-skin. Everything above
   the re-skin marker is the base layout; below it is the palette. */

/* -- base layout -- */
.avg-rating-box-section { padding: 0; margin: 0; }
.avg-rating-container {
  max-width: var(--pz-shell);
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 34px);
}
.review-images {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}
.avg-rating-display {
  background: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  min-width: 150px;
  max-width: 210px;
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.avg-rating-label { font-size: 14px; margin-bottom: 6px; font-weight: 600; }
.avg-rating-score { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.star-rating { display: flex; gap: 1px; flex-shrink: 0; }
.star { font-size: 18px; line-height: 1; }
.star.empty { color: #ddd; }
.star.partial { position: relative; color: #ddd; }
/* The partial star is a second glyph clipped to --partial-fill and laid over a
   grey one — that is how a 4.9 shows as four-and-nine-tenths. */
.star.partial::before {
  content: '\2605';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--partial-fill);
  overflow: hidden;
}
.rating-text { font-size: 16px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.review-images img { height: 70px; width: auto; border-radius: 8px; object-fit: cover; }

/* -- palette -- */
.avg-rating-box-section {
  background: var(--pz-surface);
  border-bottom: 1px solid var(--pz-line);
}
.avg-rating-box-section .avg-rating-display {
  box-shadow: none;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-sm);
}
.avg-rating-box-section .avg-rating-label {
  color: var(--pz-muted);
  font-family: var(--pz-ui);
}
.avg-rating-box-section .rating-text {
  color: var(--pz-ink);
  font-family: var(--pz-ui);
}
.avg-rating-box-section .star.filled,
.avg-rating-box-section .star.partial::before { color: var(--pz-star); }
/* Already greyscale, so these are palette-neutral and need nothing beyond the
   hover restore. */
.avg-rating-box-section .review-images img {
  border: 0;
  box-shadow: none;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.avg-rating-box-section .review-images img:hover { filter: grayscale(0); opacity: 1; }

/* Wrapping centred keeps the five-badge row balanced at every width. A 2-up
   grid strands the fifth badge alone on its own row. */
@media (max-width: 900px) {
  .review-images { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .avg-rating-display { max-width: none; }
}
@media (max-width: 520px) {
  .review-images img { height: 46px; }
  .avg-rating-display { height: 62px; padding: 8px 12px; }
  .avg-rating-label { font-size: 12px; margin-bottom: 4px; }
}

/* ---------- three-up feature triad -------------------------------------- */
.pz-triad { background: var(--pz-cream); }
.pz-triad__in { max-width: var(--pz-shell); margin-inline: auto; padding: 52px 20px; display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0,1fr)); }
/* Left-aligned, not centred, and the chip is a bordered rounded square rather
   than a soft circle. */
.pz-feature { text-align: left; padding: 6px 2px; }
.pz-feature__icon {
  width: 52px; height: 52px; margin: 0 0 14px; border-radius: var(--pz-radius);
  display: grid; place-items: center;
  background: var(--pz-brand-soft); border: 1px solid var(--pz-brand-edge);
  color: var(--pz-brand-deep);
}
.pz-feature__icon svg { width: 24px; height: 24px; display: block; }
.pz-feature h2 { margin: 0 0 8px; font-family: var(--pz-display); font-size: 1.18rem; line-height: 1.3; color: var(--pz-ink); }
.pz-feature p { margin: 0; font-size: .96rem; line-height: 1.65; color: var(--pz-muted); }
@media (max-width: 820px) { .pz-triad__in { grid-template-columns: 1fr; padding: 36px 20px; } }

/* ---------- reading column + sticky call rail --------------------------- */
.pz-read { background: var(--pz-surface); }
.pz-read__in {
  max-width: var(--pz-shell); margin-inline: auto; padding: 54px 20px 60px;
  display: grid; grid-template-columns: minmax(0,1fr) 316px; gap: 46px; align-items: start;
}
.pz-read__main { min-width: 0; }
.pz-rail { position: sticky; top: 96px; }
@media (max-width: 1000px) {
  .pz-read__in { grid-template-columns: 1fr; gap: 34px; padding: 38px 20px 44px; }
  .pz-rail { position: static; }
}

/* ---------- long-form prose --------------------------------------------- */
.pz-prose { color: var(--pz-text); font-size: 1.045rem; line-height: 1.78; }
.pz-prose > *:first-child { margin-top: 0; }
.pz-prose h2 { margin: 2.1em 0 .55em; font-size: clamp(1.55rem, 2.5vw, 2rem); line-height: 1.22; color: var(--pz-ink); }
.pz-prose h3 { margin: 1.65em 0 .45em; font-size: 1.28rem; line-height: 1.3; color: var(--pz-ink); }
.pz-prose h4 { margin: 1.35em 0 .35em; font-family: var(--pz-ui); font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; color: var(--pz-ink-2); }
.pz-prose p  { margin: 0 0 1.15em; }
.pz-prose ul, .pz-prose ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.pz-prose li { margin-bottom: .5em; }
.pz-prose ul > li { list-style: disc; }
.pz-prose ol > li { list-style: decimal; }
.pz-prose li::marker { color: var(--pz-brand); }
.pz-prose strong { font-weight: 600; color: var(--pz-ink); }
.pz-prose a { color: var(--pz-brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.pz-prose a:hover { color: var(--pz-ink); }
.pz-prose h2 + h3 { margin-top: .9em; }

/* in-content figure. The image flexes; it must not be height:100% or the
   caption is pushed outside the box and overflows into the next section. */
.pz-figure {
  display: flex; flex-direction: column; margin: 1.9em 0;
  border: 1px solid var(--pz-line); border-radius: var(--pz-radius); overflow: hidden; background: var(--pz-cream);
}
.pz-figure img { flex: 1 1 auto; display: block; width: 100%; height: auto; object-fit: cover; }
.pz-prose .pz-figure { margin: 1.9em 0; }
.pz-figure figcaption { flex: 0 0 auto; padding: 11px 16px; font-family: var(--pz-ui); font-size: .85rem; color: var(--pz-muted); }

/* ---------- in-content CTA band ----------------------------------------- */
/* The corner ribbon device is gone. A flat left edge bar replaces it — the
   diagonal gold triangle with a star in it was the strongest single shape
   signature on the previous sheet. */
.pz-ctaband {
  position: relative; overflow: hidden; margin: 2.4em 0;
  background: linear-gradient(140deg, var(--pz-ink) 0%, var(--pz-ink-2) 100%);
  border-radius: var(--pz-radius);
  border-left: 5px solid var(--pz-brand);
  padding: 30px 30px 30px 32px; color: #fff;
}
.pz-prose .pz-ctaband h3,
.pz-ctaband h3 { margin: 0 0 9px; font-family: var(--pz-display); font-size: 1.5rem; color: #fff; max-width: 30ch; }
.pz-ctaband p { margin: 0 0 18px; color: var(--pz-on-dark-mut); font-size: 1rem; line-height: 1.65; max-width: 58ch; }
/* on a dark ground the CTA steps up to the lighter brand tone so it still pops */
.pz-ctaband .pz-pill { background: var(--pz-brand-hi); box-shadow: none; color: #fff; }
.pz-ctaband .pz-pill:hover { background: var(--pz-brand); color: #fff; }
.pz-prose a.pz-pill { color: #fff; text-decoration: none; }
.pz-prose a.pz-pill:hover { color: #fff; }

/* ---------- FAQ --------------------------------------------------------- */
.pz-faq { margin: 2.2em 0 0; }
.pz-faq__item { border-bottom: 1px solid var(--pz-line); padding: 4px 0; }
.pz-faq__q { margin: 0; font-family: var(--pz-display); font-size: 1.14rem; line-height: 1.35; }
.pz-faq__q button {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%;
  padding: 16px 2px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--pz-ink);
}
.pz-faq__q button::after { content: "+"; flex: none; font-family: var(--pz-ui); font-size: 1.4rem; line-height: 1; color: var(--pz-brand); }
.pz-faq__q button[aria-expanded="true"]::after { content: "\2013"; }
.pz-faq__a { display: none; padding: 0 2px 18px; color: var(--pz-text); line-height: 1.72; }
.pz-faq__a.is-open { display: block; }
.pz-faq__a p:last-child { margin-bottom: 0; }

/* ---------- "our other offerings" --------------------------------------- */
.pz-offerings { margin: 2.6em 0 0; padding: 24px 26px; background: var(--pz-cream); border: 1px solid var(--pz-line); border-radius: var(--pz-radius); }
.pz-prose .pz-offerings h2,
.pz-offerings h2 { margin: 0 0 14px; font-family: var(--pz-display); font-size: 1.3rem; color: var(--pz-ink); }
.pz-offerings ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pz-offerings li { position: relative; padding-left: 22px; }
.pz-offerings li::before { content: "\203A"; position: absolute; left: 4px; top: -1px; color: var(--pz-brand); font-size: 1.2rem; line-height: 1.35; }
.pz-offerings a { color: var(--pz-brand-deep); font-weight: 500; text-decoration: none; }
.pz-offerings a:hover { text-decoration: underline; color: var(--pz-ink); }

/* ---------- homepage photo band ----------------------------------------- */
.pz-band { background: var(--pz-surface-alt); border-block: 1px solid var(--pz-line); }
.pz-band__in { max-width: var(--pz-shell); margin-inline: auto; padding: 46px 20px; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.pz-band figure { display: flex; flex-direction: column; margin: 0; border-radius: var(--pz-radius); overflow: hidden; background: #fff; border: 1px solid var(--pz-line); }
.pz-band img { flex: 1 1 auto; display: block; width: 100%; height: auto; object-fit: cover; }
.pz-band figcaption { flex: 0 0 auto; padding: 11px 15px; font-family: var(--pz-ui); font-size: .84rem; color: var(--pz-muted); }
@media (max-width: 860px) { .pz-band__in { grid-template-columns: 1fr; } }

/* ---------- final CTA --------------------------------------------------- */
.pz-finalcta {
  position: relative;
  background: linear-gradient(140deg, var(--pz-ink) 0%, var(--pz-ink-2) 100%);
  color: #fff;
}
.pz-finalcta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 50% 0%, rgba(128,113,238,.24), transparent 62%);
}
.pz-finalcta__in { position: relative; max-width: 900px; margin-inline: auto; padding: 62px 20px; text-align: center; }
.pz-finalcta h2 { margin: 0 0 12px; font-family: var(--pz-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: #fff; }
.pz-finalcta p { margin: 0 0 24px; color: var(--pz-on-dark-mut); font-size: 1.06rem; line-height: 1.7; }
.pz-finalcta .pz-pill { background: var(--pz-brand-hi); color: #fff; }
.pz-finalcta .pz-pill:hover { background: var(--pz-brand); color: #fff; }

/* ---------- sticky mobile call bar -------------------------------------- */
/* The bar itself is the brand surface edge to edge — no padding shell, no
   border, no radius; the padding lives on the inner anchor so the whole strip
   is the tap target. An earlier version put a pill inside a dark padded shell
   and it read as a frame around the button. */
.pz-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  background: var(--pz-brand);
  padding: 0;
  border: 0;
  box-shadow: 0 -6px 18px -8px rgba(21, 19, 31, .45);

  /* Hidden until 1400px of scroll, then revealed for good — the handler
     removes itself on first trigger. translateY rather than display so it
     animates in. */
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.pz-mobilebar.is-visible { transform: translateY(0); }

/* Padding is FIXED — never env(safe-area-inset-bottom). On iOS that inset
   flips between 0 (browser toolbar covering it) and ~34px (toolbar hidden,
   home indicator exposed), so an env()-based pad grows a band of empty colour
   whenever the toolbar auto-hides instead of the bar sitting at the new bottom
   edge. */
.pz-mobilebar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  color: #fff;
  text-decoration: none;
  padding: 20px 14px 25px;
}
.pz-mobilebar__btn:hover,
.pz-mobilebar__btn:active { color: #fff; }

/* vw-based so the lead line steps down on narrow handsets rather than wrapping */
.pz-mobilebar__lead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pz-display);
  font-size: clamp(1.35rem, 6.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.pz-mobilebar__lead svg { flex: none; width: 21px; height: 21px; }

.pz-mobilebar__sub {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pz-ui);
  font-size: clamp(.78rem, 3.55vw, .9rem);
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255, 255, 255, .95);
}
.pz-mobilebar__sub strong { font-weight: 600; color: #fff; }

/* Status dot: a brighter green than the one used on the white call-card, which
   goes muddy against the brand fill. */
.pz-mobilebar__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35e07a;
  box-shadow: 0 0 0 0 rgba(53, 224, 122, .6);
  animation: pz-pulse-bar 2.4s ease-out infinite;
}
@keyframes pz-pulse-bar {
  0%   { box-shadow: 0 0 0 0 rgba(53, 224, 122, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(53, 224, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 224, 122, 0); }
}

@media (max-width: 780px) {
  .pz-mobilebar { display: block; }
  /* Clearance for the two-line bar (~100px at 390 wide) sits on the FOOTER,
     not on the body. Padding the body leaves a strip of page background between
     the end of the dark footer and the top of the bar, which reads as a gap
     once the visitor scrolls all the way down. On the footer, the dark ground
     runs behind the bar and the two meet with no seam. */
  .pz-footer { padding-bottom: 112px; }
}

/* The lead line is nowrap, so on a 320px handset it is a couple of pixels wider
   than the space available and forces the page to scroll sideways. Claw the
   difference back from the horizontal padding and the icon rather than
   shrinking the type. */
@media (max-width: 360px) {
  .pz-mobilebar__btn { padding-left: 8px; padding-right: 8px; }
  .pz-mobilebar__lead { gap: 6px; }
  .pz-mobilebar__lead svg { width: 19px; height: 19px; }
}

/* ---------- footer ------------------------------------------------------ */
.pz-footer { background: var(--pz-ink); color: var(--pz-on-dark-mut); border-top: 3px solid var(--pz-brand); }
.pz-footer__in { max-width: var(--pz-shell); margin-inline: auto; padding: 54px 20px 26px; display: grid; gap: 34px; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.pz-footer h2 { margin: 0 0 8px; font-family: var(--pz-display); font-size: 1.16rem; color: #fff; }
.pz-footer h3 { margin: 0 0 14px; font-family: var(--pz-ui); font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #fff; padding-bottom: 9px; border-bottom: 1px solid rgba(128,113,238,.34); }
.pz-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pz-footer a { color: var(--pz-on-dark-mut); text-decoration: none; font-size: .92rem; }
.pz-footer a:hover { color: var(--pz-brand-hi); text-decoration: underline; }
.pz-footer__plain { font-size: .92rem; color: var(--pz-on-dark-mut); }
.pz-footer__meta { max-width: var(--pz-shell); margin-inline: auto; padding: 18px 20px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: #8f8ba0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.pz-footer__meta a { font-size: .85rem; color: #8f8ba0; }
.pz-footer__disclaimer {
  max-width: var(--pz-shell);
  margin-inline: auto;
  padding: 0 20px 40px;
}
.pz-footer__disclaimer p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.65;
  color: #78748a;
}
@media (max-width: 900px) { .pz-footer__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pz-footer__in { grid-template-columns: 1fr; } }

/* ---------- inherited export sections ----------------------------------- */
/* The Tailwind preflight flattens h2/ul inside injected body copy, so the
   legacy .content-section blocks get the same treatment as .pz-prose. */
.content-section:not(.pz-prose) h2 { font-family: var(--pz-display); font-size: 1.7rem; line-height: 1.25; margin: 1.6em 0 .5em; color: var(--pz-ink); }
.content-section:not(.pz-prose) h3 { font-family: var(--pz-display); font-size: 1.25rem; margin: 1.35em 0 .4em; color: var(--pz-ink); }
.content-section:not(.pz-prose) p  { margin: 0 0 1.1em; }
.content-section:not(.pz-prose) ul { margin: 0 0 1.2em; padding-left: 1.35em; }
.content-section:not(.pz-prose) ul > li { list-style: disc; margin-bottom: .45em; }
.content-section:not(.pz-prose) ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.content-section:not(.pz-prose) ol > li { list-style: decimal; margin-bottom: .45em; }
.content-section li::marker { color: var(--pz-brand); }
.content-section table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.content-section th, .content-section td { border: 1px solid var(--pz-line); padding: 9px 12px; text-align: left; font-size: .95rem; }
.content-section th { background: var(--pz-surface-alt); }

.map-container { max-width: var(--pz-shell); margin: 0 auto 46px; }

/* The old floating round phone button is replaced by the sticky bar. */
.floating-phone { display: none !important; }


/* ---------- export's "Professional Services" card grid ------------------ */
/* The export ships some cards with a thumbnail and some without, and its grid
   does not stretch, so the rows came out ragged with tall empty gaps below the
   image-less cards. Stretch every card to the row height, push the action row
   to the bottom, and normalise every thumbnail to one height so the rows line
   up whatever the source crop. */
.grid.grid-cols-1.md\:grid-cols-2 { align-items: stretch; }
.grid.grid-cols-1.md\:grid-cols-2 > div.group {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* the "View Details / Get Quote" row */
.grid.grid-cols-1.md\:grid-cols-2 > div.group > .flex.justify-between {
  margin-top: auto;
}
.grid.grid-cols-1.md\:grid-cols-2 > div.group img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  border-radius: var(--pz-radius-sm);
}
@media (max-width: 600px) {
  .grid.grid-cols-1.md\:grid-cols-2 > div.group img { height: 150px; }
}

/* Four of the fifteen services shipped without a thumbnail, and no new
   photography is being generated for this site. Rather than leave those cards
   with a block of dead space beside an image card, they get a flat brand-tinted
   panel in the same slot — decorative, obviously not a photograph, and it keeps
   every row balanced. */
.grid.grid-cols-1.md\:grid-cols-2 > div.group:not(:has(img))::before {
  content: "";
  display: block;
  height: 170px;
  margin-bottom: 1rem;
  border-radius: var(--pz-radius-sm);
  border: 1px solid var(--pz-brand-edge);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236355d6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3.2v5c0 4.3-2.9 8.3-7 9.4-4.1-1.1-7-5.1-7-9.4v-5L12 3z'/%3E%3Cpath d='M9.3 12.1l1.9 1.9 3.6-3.8'/%3E%3C/svg%3E")
      center / 44px 44px no-repeat,
    radial-gradient(120% 120% at 22% 12%, rgba(255,255,255,.9), transparent 58%),
    linear-gradient(135deg, var(--pz-brand-soft) 0%, #f7f6fd 100%);
  opacity: 1;
}
@media (max-width: 600px) {
  .grid.grid-cols-1.md\:grid-cols-2 > div.group:not(:has(img))::before { height: 150px; }
}

/* ---------- pages that use the export's own .prose block ----------------- */
/* The blog and the cost calculator render through a .prose wrapper rather than
   the reading column, and the export's inline sheet coloured its links
   "#indigo" — not a colour, so they fell back to browser blue. */
.prose { font-family: var(--pz-ui); color: var(--pz-text); }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--pz-display); color: var(--pz-ink); }
.prose a { color: var(--pz-brand-deep); }
.prose a:hover { color: var(--pz-ink); }

/* The calculator's primary action shipped in Tailwind green, which is the one
   control on the site still painted outside the palette. */
.bg-green-600 { background-color: var(--pz-brand) !important; color: #fff !important; }
.hover\:bg-green-700:hover { background-color: var(--pz-brand-deep) !important; }

@media (prefers-reduced-motion: reduce) {
  .pz-dot, .pz-mobilebar__dot { animation: none; }
  * { transition-duration: .01ms !important; }
}