/* ===========================================================================
   Derrek's Pest Control — 2026 redesign layer
   ---------------------------------------------------------------------------
   Loaded LAST, after every theme and section stylesheet. This file overrides;
   it never requires the inline per-section <style> blocks to be deleted, so
   the change stays reversible by removing one <link>.

   Many sections carry inline style="" attributes on the <section> element
   itself (ava-whychooseus, kendall-process, content-bay-*, content-lake).
   An attribute beats any selector, so those specific properties — and only
   those — are fought with !important. Everything else is plain specificity.

   Fonts are the two variable woff2 files already sitting in this repo under
   uploads/elementor/google-fonts/fonts/. The google-fonts *CSS* in that same
   folder points at rnrtemplate1.valueoffershq.com and is not linked by any
   page; we self-host from relative paths instead so nothing leaves the origin.
   =========================================================================== */

/* ---------- 1. Self-hosted faces ---------- */

@font-face {
  font-family: 'Lora VF';
  src: url('/wp-content/uploads/elementor/google-fonts/fonts/lora-0qivmx1d_joumwr7iw.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora VF';
  src: url('/wp-content/uploads/elementor/google-fonts/fonts/lora-0qihmx1d_joumw_liftl.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope VF';
  src: url('/wp-content/uploads/elementor/google-fonts/fonts/manrope-xn7gyhe41ni1adirggexsg.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* Warm ground, not #fff. The temperature is the point — a pure white page
     under a serif reads as a document; this reads as printed matter. */
  --dk-ground:   #faf7f1;
  --dk-surface:  #f2ece1;
  --dk-surface2: #ebe4d6;

  /* Warm near-black with a green cast, so type sits in the same family as the
     accent instead of floating as neutral grey. */
  --dk-ink:      #1e231f;
  --dk-ink-soft: #565c54;
  /* #7d8279 measured 3.68:1 on the bone ground — under AA for the trust row
     and the photo captions, which are both small text. Darkened again when the
     hero insect pattern arrived: small grey text can land on top of an icon,
     and #656b62 on --dk-bug-color is only 4.14:1. #5d635a gives 4.67:1 on the
     icon colour and 5.77:1 on the ground, so it passes wherever a bug falls. */
  --dk-ink-mute: #5d635a;

  /* ONE accent. Deep forest green: local, outdoors, and specifically not the
     navy-plus-amber pairing that reads as generated. */
  --dk-accent:      #2f4a35;
  --dk-accent-deep: #1f3324;
  --dk-accent-tint: #e6ece3;

  /* Hero insect pattern. The ONLY place its colour is set — change this one
     value to recolour all seven icons on every page. Beige, a step darker
     than --dk-ground so the pattern is felt rather than read. */
  --dk-bug-color: #e8dfcc;

  --dk-rule:      #ddd5c6;
  --dk-rule-firm: #c3b9a6;

  --dk-sans:  'Manrope VF', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dk-serif: 'Lora VF', Georgia, 'Times New Roman', serif;

  /* ~2px, never 10. Soft radii everywhere is one of the loudest tells. */
  --dk-r: 2px;

  --dk-measure: 68ch;
  --dk-gut: clamp(16px, 4vw, 40px);

  /* Fixed-header geometry. The theme hard-codes a 165px hero offset for its
     own header height; ours is a known quantity instead, so the offset is
     derived rather than guessed. */
  --dk-util-h: 34px;
  --dk-header-body-h: 80px;
  --dk-header-h: calc(var(--dk-util-h) + var(--dk-header-body-h));
}

@media (max-width: 860px) {
  :root { --dk-util-h: 30px; --dk-header-body-h: 68px; }
}

/* ---------- 3. Base ---------- */

body.wp-theme-staircase {
  background: var(--dk-ground);
  color: var(--dk-ink);
  font-family: var(--dk-serif);
  font-size: 17.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

body.wp-theme-staircase h1,
body.wp-theme-staircase h2,
body.wp-theme-staircase h3,
body.wp-theme-staircase h4,
body.wp-theme-staircase h5,
body.wp-theme-staircase h6 {
  font-family: var(--dk-sans);
  font-weight: 800;
  letter-spacing: -0.021em;
  line-height: 1.12;
  color: var(--dk-ink);
  text-wrap: balance;
}

body.wp-theme-staircase p { max-width: var(--dk-measure); }
/* A centred block keeps its own centring; only left-aligned prose gets capped. */
body.wp-theme-staircase [style*="text-align: center"] p,
body.wp-theme-staircase [style*="text-align:center"] p { max-width: none; }

body.wp-theme-staircase a { color: var(--dk-accent); }

/* ---------- 4. Section rhythm ---------- */

/* Kill the inherited card-on-a-page look: sections are bands separated by a
   hairline, not floating boxes with radii and shadows. */
.chen-cards-section,
.kristina-cta-box,
.content-bay-1-box,
.content-bay-2-box,
.content-lake-box,
.paragon-services-section,
.serena-faq-box,
.nile-map-box,
.harlow-leadform-box,
.ava-whychooseus-box,
.kendall-process-box {
  padding-block: clamp(44px, 6vw, 84px) !important;
  padding-inline: var(--dk-gut) !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid var(--dk-rule) !important;
  border-bottom: 0 !important;
}

/* One measure for every band. The theme sets 1200px on several of these at a
   higher specificity, so bands were landing on two different left edges. */
body.wp-theme-staircase .chen-container,
body.wp-theme-staircase .kristina-cta-container,
body.wp-theme-staircase .content-bay-1-container,
body.wp-theme-staircase .content-bay-2-container,
body.wp-theme-staircase .paragon-services-section > .container,
body.wp-theme-staircase .serena-faq-container,
body.wp-theme-staircase .kendall-process-container,
body.wp-theme-staircase .ava-container,
body.wp-theme-staircase .nile-map-box > .container,
body.wp-theme-staircase .harlow-leadform-box > .container {
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Alternating ground so bands read apart without borders doing all the work. */
.content-bay-1-box,
.serena-faq-box,
.kendall-process-box { background: var(--dk-surface) !important; }

.content-lake-box,
.chen-cards-section,
.content-bay-2-box,
.paragon-services-section { background: var(--dk-ground) !important; }

/* ---------- 5. Section headings ---------- */

/* An accent rule above a heading instead of a centred heading with a
   decorative star/underline widget. */
.paragon-section-title,
.serena-faq-title,
.kristina-cta-heading,
.ava-whychooseus-box h2,
.kendall-process-box h2 {
  font-family: var(--dk-sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.022em;
  text-align: left;
  margin: 0 0 0.75em;
  padding-top: 18px;
  border-top: 2px solid var(--dk-accent);
  display: block;
}

/* The FAQ star is pure decoration and reads as template furniture. */
.serena-faq-star { display: none; }

.serena-faq-subtitle {
  font-family: var(--dk-serif);
  color: var(--dk-ink-soft);
  text-align: left;
  max-width: var(--dk-measure);
}

/* ---------- 6. Header ---------- */

/* The header is position:fixed, z-index 9999, and the theme clears it with
   `body.sticky-menu-fade .cherry-hero { padding-top: calc(165px) }` — a
   (0,2,1) selector, which outranks a plain .cherry-hero.dk-hero. So every
   rule that fights the fixed-header geometry is written at body scope and,
   where the theme used !important first, with !important. */

body.wp-theme-staircase .site-header.header1 {
  background: var(--dk-ground);
  border-bottom: 1px solid var(--dk-rule);
  box-shadow: none;
  /* The utility strip lives INSIDE the fixed header rather than above it.
     Placed before it in the flow it simply rendered underneath, since the
     header is fixed at top:0. */
  padding-top: 0;
  /* Pinned to the token so --dk-header-h is TRUE rather than an estimate.
     Measured unpinned it came out 137px against a 114px token, which left the
     hero offset wrong and put the article pages 4px under the header. */
  height: var(--dk-header-h);
  box-sizing: border-box;
}

/* The row below the utility strip is EXACTLY the header body height, with no
   vertical padding, and everything in it is centred on that line. It used to
   be min-height:80px plus 13px padding top and bottom: the 68px logo block
   pushed it to 94px inside an 80px header, so every item centred 7px below
   the header's true midline and the logo nearly touched the bottom border. */
body.wp-theme-staircase .site-header.header1 .header-inner {
  padding-block: 0 !important;
  gap: 24px;
  height: var(--dk-header-body-h);
  min-height: 0;
  box-sizing: border-box;
  align-items: center !important;
}
body.wp-theme-staircase .site-header.header1 .header-logo-area,
body.wp-theme-staircase .site-header.header1 .site-branding,
body.wp-theme-staircase .site-header.header1 .staircase-logo-link {
  padding-block: 0 !important;
  margin-block: 0 !important;
  align-items: center;
}
body.wp-theme-staircase .site-header.header1 .header-nav-area,
body.wp-theme-staircase .site-header.header1 .main-navigation,
body.wp-theme-staircase .site-header.header1 .silkweaver-nav,
body.wp-theme-staircase .site-header.header1 .header-phone {
  align-items: center;
  margin-block: 0 !important;
}

/* The shipped logo carries a flat grey canvas at alpha 227, which renders as a
   grey box on the warm ground — and mix-blend-mode:multiply lifts white, not
   grey, so it cannot help here. The header and footer use keyed-out ink and
   light variants instead, and need no blending. */
/* .header-logo-area ships max-width:50% + overflow:hidden, so at 390px the
   wordmark was clipped mid-word to "Derrel / Pest Contr". It sizes to its
   content instead, and the logo is capped by width rather than height. */
body.wp-theme-staircase .site-header.header1 .header-logo-area {
  max-width: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
body.wp-theme-staircase .staircase-logo {
  max-height: 54px;
  max-width: 100%;
  width: auto;
  height: auto;
}
@media (max-width: 700px) {
  body.wp-theme-staircase .staircase-logo { max-height: 40px; }
  /* Logo, toggle and call button are all competing for 390px, and the button
     was landing flush against the right edge with no gutter. */
  body.wp-theme-staircase .site-header.header1 .header-inner {
    gap: 10px;
    padding-inline: 14px;
  }
  body.wp-theme-staircase .site-header.header1 .header-phone-button {
    padding: 9px 12px;
    font-size: 0.85rem;
    gap: 6px;
  }
  body.wp-theme-staircase .site-header.header1 .header-phone-button .phone-icon {
    width: 15px;
    height: 15px;
  }
}
body.wp-theme-staircase .zh_ft2_logo_img {
  max-height: 58px;
  width: auto;
  height: auto;
}

/* The menu ships flex-wrap:wrap. Once the notice and the two social icons
   joined the header it got squeezed to 366px and broke "Areas We Serve" onto a
   second line, which the pinned header height then clipped. It must not shrink
   below its content; the notice hides first instead (see 6a). */
body.wp-theme-staircase .silkweaver-menu {
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 18px;
}
/* The nav area holds nav + notice + icons + call button. Its 20px gaps plus
   everything else came to ~16px more than the 1140px inner, which pushed the
   nav left until it sat against the logo. */
body.wp-theme-staircase .header-nav-area { gap: 14px; }
body.wp-theme-staircase .site-header.header1 .header-inner { column-gap: 30px; }
body.wp-theme-staircase .main-navigation,
body.wp-theme-staircase .silkweaver-nav { flex: 0 0 auto; }
body.wp-theme-staircase .silkweaver-menu > li { white-space: nowrap; }

.silkweaver-menu > li > a,
.silkweaver-dropdown-toggle {
  font-family: var(--dk-sans);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: 0.005em;
  color: var(--dk-ink);
  background: none;
  border: 0;
}

.silkweaver-menu > li > a:hover,
.silkweaver-dropdown-toggle:hover { color: var(--dk-accent); }

/* ---------- 6c. Header dropdowns (Services, Areas We Serve) ---------- */

/* The theme sized every dropdown at 80% of the viewport height (Services has
   8 items) inside a hard white box, and opened it on :hover only. Desktop
   (769px+, where the inline nav shows) now gets a panel that fits its content:
   Services as a single list, the 18 towns as a 3-column grid, each with a
   small heading, a caret pointing at its trigger, soft tinted rows on hover,
   a short fade-and-rise, and it also opens on keyboard focus. Phones keep the
   theme's own .open/.is-open accordion untouched. */
@media (min-width: 769px) {
  body.wp-theme-staircase .site-header .silkweaver-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
  /* a thin chevron instead of the theme's "▼" glyph */
  body.wp-theme-staircase .site-header .silkweaver-dropdown-toggle::after {
    content: "" !important;
    width: 6px; height: 6px;
    margin: -3px 0 0 2px !important;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) !important;
    opacity: 0.6 !important;
    font-size: 0 !important;
    transition: transform 0.18s ease, margin 0.18s ease;
  }
  body.wp-theme-staircase .site-header .silkweaver-dropdown:hover > .silkweaver-dropdown-toggle::after,
  body.wp-theme-staircase .site-header .silkweaver-dropdown:focus-within > .silkweaver-dropdown-toggle::after,
  body.wp-theme-staircase .site-header .silkweaver-dropdown.is-open > .silkweaver-dropdown-toggle::after,
  body.wp-theme-staircase .site-header .silkweaver-dropdown.open > .silkweaver-dropdown-toggle::after {
    transform: rotate(-135deg) !important;
    margin-top: 4px !important;
  }

  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu {
    /* fit the content, not 80vh */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-rows: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    top: calc(100% + 12px) !important;
    left: 50% !important;
    min-width: 0 !important;
    width: 320px !important;
    max-width: none !important;
    padding: 12px !important;
    background: var(--dk-ground) !important;
    border: 1px solid var(--dk-rule) !important;
    border-radius: 6px !important;
    box-shadow: 0 22px 48px rgba(30, 35, 31, 0.16), 0 2px 6px rgba(30, 35, 31, 0.06) !important;
    overflow: visible !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px) !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important;
  }
  /* the 18 towns: three columns */
  body.wp-theme-staircase .site-header #sw-dropdown-locationpage {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 560px !important;
  }
  body.wp-theme-staircase .site-header .silkweaver-dropdown:hover > .silkweaver-dropdown-menu,
  body.wp-theme-staircase .site-header .silkweaver-dropdown:focus-within > .silkweaver-dropdown-menu,
  body.wp-theme-staircase .site-header .silkweaver-dropdown.is-open > .silkweaver-dropdown-menu,
  body.wp-theme-staircase .site-header .silkweaver-dropdown.open > .silkweaver-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s !important;
  }
  /* invisible bridge across the 12px gap so the pointer can travel into the panel */
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -14px;
    height: 14px;
  }
  /* heading row + caret, both via ::before; the heading text is hidden from
     screen readers (alt text "") since the trigger already names the menu */
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu::before {
    grid-column: 1 / -1;
    display: block;
    padding: 4px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--dk-rule);
    font: 700 0.68rem/1 var(--dk-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dk-ink-mute);
  }
  body.wp-theme-staircase .site-header #sw-dropdown-servicepage::before { content: "Pest control services" / ""; }
  body.wp-theme-staircase .site-header #sw-dropdown-locationpage::before { content: "Towns we serve in Southern Indiana" / ""; }
  body.wp-theme-staircase .site-header .silkweaver-dropdown { position: relative; }
  body.wp-theme-staircase .site-header .silkweaver-dropdown:hover::after,
  body.wp-theme-staircase .site-header .silkweaver-dropdown:focus-within::after,
  body.wp-theme-staircase .site-header .silkweaver-dropdown.is-open::after,
  body.wp-theme-staircase .site-header .silkweaver-dropdown.open::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    width: 12px; height: 12px;
    background: var(--dk-ground);
    border-left: 1px solid var(--dk-rule);
    border-top: 1px solid var(--dk-rule);
    transform: translateX(-50%) rotate(45deg);
    z-index: 1001;
  }

  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu li {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--dk-ink) !important;
    font-family: var(--dk-sans) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: normal !important;   /* long names wrap inside the panel */
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
  }
  /* a small arrow slides in on the hovered row */
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu a::after {
    content: "\2192" !important;
    display: inline-block !important;
    font-size: 0.85rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    color: var(--dk-accent);
  }
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu a:hover,
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu a:focus-visible {
    background: var(--dk-accent-tint) !important;
    color: var(--dk-accent-deep) !important;
  }
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu a:hover::after,
  body.wp-theme-staircase .site-header .silkweaver-dropdown .silkweaver-dropdown-menu a:focus-visible::after { opacity: 1; transform: none; }
  body.wp-theme-staircase .site-header #sw-dropdown-locationpage a { font-size: 0.86rem !important; padding: 8px 10px !important; }
}

/* Utility strip above the logo — hours one side, standing the other. No
   generated template ships this, and it is where a real trades site puts the
   things a caller actually wants before they dial. */
body.wp-theme-staircase .dk-utility {
  background: var(--dk-accent-deep);
  color: #e8e4d8;
  font-family: var(--dk-sans);
  font-size: 0.795rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  height: var(--dk-util-h);
  display: flex;
  align-items: center;
}
body.wp-theme-staircase .dk-utility-inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--dk-gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.wp-theme-staircase .dk-utility strong { font-weight: 700; color: #fff; }
body.wp-theme-staircase .dk-utility a { color: #fff; text-decoration: none; }
body.wp-theme-staircase .dk-utility a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  body.wp-theme-staircase .dk-utility-inner { justify-content: center; }
  body.wp-theme-staircase .dk-utility-left { display: none; }
}

/* ---------- 6a. Header announcement ---------- */

/* Plain text, not a link. An accent dot carries the "new" signal so the words
   do not have to shout, and it stays clear of the call button. */
body.wp-theme-staircase .dk-header-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 0;
  font-family: var(--dk-sans);
  font-size: 0.735rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dk-accent);
  white-space: nowrap;
  cursor: default;
}
body.wp-theme-staircase .dk-header-notice::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dk-accent);
  flex: 0 0 auto;
}

/* Below this the header has no room for it. It is an announcement, not
   navigation, so it drops first — before the nav is allowed to wrap or the
   call button is allowed to shrink. */
@media (max-width: 1320px) {
  body.wp-theme-staircase .dk-header-notice { display: none; }
}

/* ---------- 6b. Header social icons ---------- */

/* Facebook + Google Business Profile, mirroring the footer pair. They sit
   between "Areas We Serve" and the call button. */
body.wp-theme-staircase .dk-header-social {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: 4px 2px;
  padding-left: 14px;
  border-left: 1px solid var(--dk-rule);
}
body.wp-theme-staircase .dk-header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--dk-r);
  /* Default is what hover used to be: green mark on a pale green tile. */
  color: var(--dk-accent);
  background: var(--dk-accent-tint);
  transition: color 0.15s ease, background 0.15s ease;
}
/* Hover inverts it — white mark on solid green — so the change is obvious.
   Icon contrast: 8.1:1 resting, 9.8:1 on hover (3:1 needed for UI marks). */
body.wp-theme-staircase .dk-header-social-link:hover,
body.wp-theme-staircase .dk-header-social-link:focus-visible {
  color: #fff;
  background: var(--dk-accent);
}
body.wp-theme-staircase .dk-header-social-icon { display: block; }

/* At phone widths the header already has the logo, the menu toggle and the
   call button fighting for 390px. Both marks remain in the footer. */
@media (max-width: 900px) {
  body.wp-theme-staircase .dk-header-social { display: none; }
}

/* ---------- 7. Buttons ---------- */

/* A physical bottom edge. The inset shadow is what makes it read as a
   pressable object rather than a coloured rectangle. */
/* The theme sets `.staircase_main_cta_button { background: #23bb73 !important }`
   from a <style> block in the body, so background here must be !important too;
   everything else on these rules is uncontested and stays plain. */
body.wp-theme-staircase .staircase_main_cta_button,
body.wp-theme-staircase .header-phone-button,
body.wp-theme-staircase .kristina-cta-button,
body.wp-theme-staircase .dk-btn {
  font-family: var(--dk-sans);
  font-weight: 700;
  letter-spacing: 0.012em;
  border-radius: var(--dk-r) !important;
  background: var(--dk-accent) !important;
  background-color: var(--dk-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3) !important;
  text-transform: none;
  transition: background-color 0.15s ease, transform 0.08s ease;
}
body.wp-theme-staircase .staircase_main_cta_button:hover,
body.wp-theme-staircase .header-phone-button:hover,
body.wp-theme-staircase .kristina-cta-button:hover,
body.wp-theme-staircase .dk-btn:hover {
  background: var(--dk-accent-deep) !important;
  background-color: var(--dk-accent-deep) !important;
  color: #fff !important;
}
body.wp-theme-staircase .staircase_main_cta_button:active,
body.wp-theme-staircase .dk-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Header call button only: blue, at the user's request (Sep 21). Every other
   call button stays the forest-green accent. Specificity (0,3,1) + !important
   out-ranks the shared button rule above and the theme's own !important. */
:root { --dk-call-blue: #1d5fa6; --dk-call-blue-deep: #164a82; }
body.wp-theme-staircase .site-header .header-phone-button {
  background: var(--dk-call-blue) !important;
  background-color: var(--dk-call-blue) !important;
  color: #fff !important;
}
body.wp-theme-staircase .site-header .header-phone-button:hover,
body.wp-theme-staircase .site-header .header-phone-button:focus-visible {
  background: var(--dk-call-blue-deep) !important;
  background-color: var(--dk-call-blue-deep) !important;
  color: #fff !important;
}

body.wp-theme-staircase .header-phone-button {
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Secondary action is a ruled link, not a second filled button competing with
   the first. */
.dk-btn-ghost {
  background: transparent;
  color: var(--dk-accent-deep);
  box-shadow: none;
  border-bottom: 2px solid var(--dk-accent);
  border-radius: 0;
  padding: 6px 2px;
  font-family: var(--dk-sans);
  font-weight: 700;
}
.dk-btn-ghost:hover { background: transparent; color: var(--dk-accent); border-bottom-color: var(--dk-accent-deep); }

/* ---------- 8. Split hero ---------- */

/* Replaces the full-bleed photo under a dark scrim with centred text. The
   photograph gets its own column at full brightness — no scrim, no overlay,
   no opacity. See hero-scrim-single-layer-rule: the old treatment left the
   photo at roughly a third of its brightness behind a paragraph. */

body.wp-theme-staircase .cherry-hero.dk-hero {
  background: var(--dk-ground) !important;
  color: var(--dk-ink);
  text-align: left;
  /* Only the fixed-header clearance lives on the section; the visual padding
     is the grid's, so the two are not tangled together. */
  padding: var(--dk-header-h) 0 0 !important;
  overflow: visible;
  border-bottom: 1px solid var(--dk-rule);
}
/* The diagonal pattern overlay was the other half of the scrim treatment. */
body.wp-theme-staircase .cherry-hero.dk-hero::before {
  content: none !important;
  display: none !important;
}

.dk-hero-grid {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(36px, 5.5vw, 72px) var(--dk-gut);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* Service and city pages own a photograph; blog posts, about, contact, legal
   and the archives do not, and none is being generated for them. Those get a
   single-column text hero rather than an empty photo column. */
.dk-hero-grid--text { grid-template-columns: minmax(0, 1fr); }
.dk-hero-grid--text .cherry-hero-content { max-width: 760px; }

.dk-hero-eyebrow {
  font-family: var(--dk-sans);
  font-weight: 700;
  font-size: 0.775rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dk-accent);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dk-rule-firm);
  max-width: none;
}

.cherry-hero.dk-hero .cherry-heading {
  font-family: var(--dk-sans);
  font-weight: 800;
  font-size: clamp(2.05rem, 5.1vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.031em;
  color: var(--dk-ink);
  margin: 0 0 18px;
  text-shadow: none;
}

.cherry-hero.dk-hero .cherry-subheading {
  font-family: var(--dk-serif);
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  line-height: 1.6;
  color: var(--dk-ink-soft);
  margin: 0 0 26px;
  max-width: 46ch;
  text-shadow: none;
}

.cherry-hero.dk-hero .cherry-buttons-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
  margin: 0 0 20px;
}

.cherry-hero.dk-hero .batman-hero-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  font-size: 0.97rem;
}

/* The "Get Your Estimate" control ships disabled, so it must not look like a
   live button sitting next to the one that works. It becomes the ruled
   secondary, and a disabled one reads as plain text. */
body.wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-left {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dk-accent-deep) !important;
  box-shadow: none !important;
  /* The theme draws a full border on these; only the bottom rule survives. */
  border: 0 !important;
  border-bottom: 2px solid var(--dk-accent) !important;
  border-radius: 0 !important;
  padding: 7px 2px !important;
}
body.wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-disabled {
  color: var(--dk-ink-mute) !important;
  border-bottom-color: var(--dk-rule-firm);
  cursor: default;
  opacity: 1;
}

/* The theme centres this and sets it large; in a left-aligned split hero it is
   a quiet supporting line under the call button, not a second headline. */
body.wp-theme-staircase .cherry-hero.dk-hero .phone_display_only_holder_div {
  font-family: var(--dk-sans) !important;
  font-size: 0.87rem !important;
  font-weight: 600;
  color: var(--dk-ink-soft) !important;
  letter-spacing: 0.01em;
  text-align: left !important;
  margin: 0 !important;
}
body.wp-theme-staircase .cherry-hero.dk-hero .phone-display-only {
  color: var(--dk-ink-soft) !important;
  font-size: 0.87rem !important;
  font-weight: 600 !important;
}

/* Trust row — three plain facts on a hairline. It fills out the text column so
   it balances the photo instead of floating in the middle of it. */
body.wp-theme-staircase .dk-hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 22px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--dk-rule-firm);
  font-family: var(--dk-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--dk-ink-mute);
}
body.wp-theme-staircase .dk-hero-trust li { margin: 0; }
/* A short accent dash, the same device the cards use. */
body.wp-theme-staircase .dk-hero-trust li::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 2px;
  background: var(--dk-accent);
  vertical-align: 0.24em;
  margin-right: 8px;
}

/* Photo column. aspect-ratio pins the frame so the layout does not reflow when
   the image decodes, and object-fit does the cropping. */
.dk-hero-media { margin: 0; position: relative; }
/* :not() is load-bearing — the medallion is also an img inside this figure,
   and `.dk-hero-media img` (0,2,0) outranks `.dk-hero-medallion` (0,1,0), so
   the badge was being stretched to fill the whole photo column. */
.dk-hero-media > img:not(.dk-hero-medallion) {
  display: block;
  width: 100%;
  /* height:auto is load-bearing, not tidiness. The <img height="1152">
     attribute is a presentational hint that sets the height property, and a
     specified height beats aspect-ratio — the photo rendered 468x1152,
     squashed to its full natural height, until this line existed. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: var(--dk-r);
  background: var(--dk-surface2);
}
/* The homepage and the city heroes are generated portrait, but the six service
   photographs the site already owns are landscape (1227x684). Forcing those
   into a 4:5 frame throws away a third of the picture, so a landscape source
   declares itself and keeps a 3:2 frame. align-items:center handles the
   resulting height difference between the two columns. */
.dk-hero-media--wide > img:not(.dk-hero-medallion) { aspect-ratio: 3 / 2; }

.dk-hero-media figcaption {
  font-family: var(--dk-sans);
  font-size: 0.73rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--dk-ink-mute);
  margin-top: 10px;
}

@media (max-width: 860px) {
  .dk-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Photo first on mobile: it establishes what this is before the headline
     has room to. Cropped shallower so it does not eat the fold. */
  .dk-hero-media { order: -1; }
  /* The portrait sources put their subject below centre, so a centred 3:2 crop
     cuts the technician's legs off. Bias the crop down the frame. */
  .dk-hero-media > img:not(.dk-hero-medallion) { aspect-ratio: 3 / 2; object-position: center 68%; }
  .dk-hero-media--wide > img:not(.dk-hero-medallion) { object-position: center center; }
  .cherry-hero.dk-hero .cherry-subheading { max-width: none; }
}

/* ---------- 8b. Hero insect pattern ---------- */

/* Seven flat top-down pest icons scattered behind every hero. Each is a
   hand-built single-colour SVG used as a CSS MASK, so the icon itself carries
   no colour: background-color does, from --dk-bug-color. They sit under the
   content (z-index), never take clicks, and are aria-hidden in the markup.

   Placement is deliberately irregular — percentages of the hero box, each at
   its own rotation, as if the insects were standing on the ground in
   different directions. Nothing is placed in the top ~14%: that band sits
   under the fixed header. Icons that land partly behind the photo read as
   walking under it, which is fine for a background pattern. */
body.wp-theme-staircase .cherry-hero.dk-hero { position: relative; }
.dk-bugs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.cherry-hero.dk-hero .dk-hero-grid { position: relative; z-index: 1; }

.dk-bug {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* ~14-15% of the hero height at desktop widths (hero is ~850px tall). */
  width: calc(clamp(64px, 7.2vw, 124px) * var(--k, 1));
  aspect-ratio: 1;
  background-color: var(--dk-bug-color);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transform: rotate(var(--r));
}
.dk-bug--roach      { --m: url('/wp-content/themes/staircase/img/dk-bugs/roach.svg');      --x: 2.5%; --y: 33%; --r:  28deg; --k: 1.05; }
.dk-bug--silverfish { --m: url('/wp-content/themes/staircase/img/dk-bugs/silverfish.svg'); --x: 27%;  --y: 16%; --r:  64deg; }
.dk-bug--ant        { --m: url('/wp-content/themes/staircase/img/dk-bugs/ant.svg');        --x: 6%;   --y: 71%; --r: -38deg; --k: 0.95; }
.dk-bug--termite    { --m: url('/wp-content/themes/staircase/img/dk-bugs/termite.svg');    --x: 33%;  --y: 82%; --r: 104deg; }
.dk-bug--tick       { --m: url('/wp-content/themes/staircase/img/dk-bugs/tick.svg');       --x: 45%;  --y: 50%; --r: -16deg; --k: 0.9; }
.dk-bug--spider     { --m: url('/wp-content/themes/staircase/img/dk-bugs/spider.svg');     --x: 90%;  --y: 62%; --r: -24deg; }
.dk-bug--rodent     { --m: url('/wp-content/themes/staircase/img/dk-bugs/rodent.svg');     --x: 91%;  --y: 20%; --r: 206deg; --k: 1.1; }

/* Phones: the photo fills the top of the hero and the text runs full width,
   so the icons shrink and move to where they can be seen around the copy. */
@media (max-width: 860px) {
  .dk-bug { width: calc(52px * var(--k, 1)); }
  .dk-bug--roach      { --x: 78%; --y: 44%; }
  .dk-bug--silverfish { --x: 64%; --y: 90%; }
  .dk-bug--ant        { --x: 84%; --y: 66%; }
  .dk-bug--termite    { --x: 4%;  --y: 92%; }
  .dk-bug--tick       { --x: 86%; --y: 82%; }
  .dk-bug--spider     { --x: 70%; --y: 55%; }
  .dk-bug--rodent     { --x: 36%; --y: 93%; }
}

/* ---------- 8b-2. Insect pattern behind the homepage quote form ---------- */

/* Same masks as the hero. The form column is 720px wide and centred, so at
   desktop widths the icons live in the side margins and never sit behind a
   heading or field. The ground here is --dk-surface, a step darker than the
   hero's cream, so the icon colour is a step darker too. */
body.wp-theme-staircase .harlow-leadform-box {
  position: relative;
  overflow: hidden;
  --dk-bug-color: #e4d8c2;
}
body.wp-theme-staircase .harlow-leadform-box > :not(.dk-bugs):not(style) { position: relative; z-index: 1; }
body.wp-theme-staircase .dk-bugs--quote .dk-bug { width: calc(clamp(56px, 6.4vw, 110px) * var(--k, 1)); }
body.wp-theme-staircase .dk-bugs--quote .dk-bug--roach      { --x: 3%;  --y: 10%; --r:  28deg; }
body.wp-theme-staircase .dk-bugs--quote .dk-bug--ant        { --x: 13%; --y: 44%; --r: -38deg; }
body.wp-theme-staircase .dk-bugs--quote .dk-bug--termite    { --x: 4%;  --y: 78%; --r: 104deg; }
body.wp-theme-staircase .dk-bugs--quote .dk-bug--tick       { --x: 86%; --y: 16%; --r: -16deg; }
body.wp-theme-staircase .dk-bugs--quote .dk-bug--spider     { --x: 91%; --y: 52%; --r: -24deg; }
body.wp-theme-staircase .dk-bugs--quote .dk-bug--silverfish { --x: 82%; --y: 84%; --r:  64deg; }
/* Below ~1100px the margins close up; phones keep three small icons in the
   top and bottom padding, the rest would only show behind the form card. */
@media (max-width: 1100px) {
  body.wp-theme-staircase .dk-bugs--quote .dk-bug { width: calc(44px * var(--k, 1)); }
  body.wp-theme-staircase .dk-bugs--quote .dk-bug--roach      { --x: 78%; --y: 4px; }
  body.wp-theme-staircase .dk-bugs--quote .dk-bug--silverfish { --x: 6%;  --y: calc(100% - 44px); }
  body.wp-theme-staircase .dk-bugs--quote .dk-bug--tick       { --x: 60%; --y: calc(100% - 42px); }
  body.wp-theme-staircase .dk-bugs--quote .dk-bug--ant,
  body.wp-theme-staircase .dk-bugs--quote .dk-bug--termite,
  body.wp-theme-staircase .dk-bugs--quote .dk-bug--spider     { display: none; }
}

/* ---------- 8c. Insect band on pages without a hero ---------- */

/* Blog posts, about, contact, legal and the listings have no hero, so the
   same seven icons sit across a full-width band at the top of <main>, behind
   the title area. Same colour variable, same masks; own positions. Every text
   colour on the site already passes AA on --dk-bug-color, so copy that lands
   over an icon stays readable. */
body.wp-theme-staircase main:has(> .dk-bugs--page) { position: relative; }
body.wp-theme-staircase .dk-bugs--page {
  inset: 0 0 auto 0;
  height: 540px;
}
/* keep the article and listing content above the icons */
body.wp-theme-staircase main:has(> .dk-bugs--page) > :not(.dk-bugs) { position: relative; z-index: 1; }
/* The blog-index fix gives .site-content a solid --dk-ground background. On
   the article pages .site-content is a CHILD of <main>, sitting above the band,
   so that solid fill hid every icon. The body is already --dk-ground, so the
   wrapper can be transparent here with no visible change. */
body.wp-theme-staircase main:has(> .dk-bugs--page) > .site-content { background: transparent !important; }
body.wp-theme-staircase .dk-bugs--page .dk-bug--roach      { --x: 2.5%; --y: 30%; --r:  28deg; }
body.wp-theme-staircase .dk-bugs--page .dk-bug--rodent     { --x: 64%;  --y: 24%; --r: 204deg; }
body.wp-theme-staircase .dk-bugs--page .dk-bug--silverfish { --x: 89%;  --y: 27%; --r: -42deg; }
body.wp-theme-staircase .dk-bugs--page .dk-bug--ant        { --x: 7%;   --y: 72%; --r: -34deg; }
body.wp-theme-staircase .dk-bugs--page .dk-bug--tick       { --x: 93%;  --y: 58%; --r:  18deg; }
body.wp-theme-staircase .dk-bugs--page .dk-bug--termite    { --x: 44%;  --y: 2%;  --r:  96deg; }  /* in the gap above the title rule, not behind a heading */
body.wp-theme-staircase .dk-bugs--page .dk-bug--spider     { --x: 83%;  --y: 84%; --r: -20deg; }

@media (max-width: 860px) {
  body.wp-theme-staircase .dk-bugs--page { height: 440px; }
  body.wp-theme-staircase .dk-bugs--page .dk-bug { width: calc(46px * var(--k, 1)); }
  body.wp-theme-staircase .dk-bugs--page .dk-bug--roach      { --x: 84%; --y: 30%; }
  body.wp-theme-staircase .dk-bugs--page .dk-bug--silverfish { --x: 3%;  --y: 90%; }
  body.wp-theme-staircase .dk-bugs--page .dk-bug--ant        { --x: 88%; --y: 60%; }
  body.wp-theme-staircase .dk-bugs--page .dk-bug--termite    { --x: 42%; --y: 93%; }
  body.wp-theme-staircase .dk-bugs--page .dk-bug--tick       { --x: 72%; --y: 90%; }
  body.wp-theme-staircase .dk-bugs--page .dk-bug--spider,
  body.wp-theme-staircase .dk-bugs--page .dk-bug--rodent     { display: none; }
}

/* ======================================================================
   EXPERIMENT — NAVY HERO — HOMEPAGE ONLY (user trial, Sep 21, 2026)
   Scoped to body.home, which only the homepage has; no markup changes.
   TO REVERT: delete everything from this banner to the END-EXPERIMENT line.
   ====================================================================== */
:root {
  --dk-navy: #15243d;
  --dk-navy-bug: #1e3352;     /* insect pattern: a step lighter than the navy */
  --dk-navy-text: #d2dbe8;
  --dk-navy-muted: #aebed6;
  --dk-navy-accent: #86a9da;
}
body.home.wp-theme-staircase .cherry-hero.dk-hero {
  background: var(--dk-navy) !important;
  border-bottom: 0;
  --dk-bug-color: var(--dk-navy-bug);
}
body.home.wp-theme-staircase .cherry-hero.dk-hero .dk-hero-eyebrow {
  color: var(--dk-navy-accent);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
body.home.wp-theme-staircase .cherry-hero.dk-hero .cherry-heading { color: #fff !important; }
body.home.wp-theme-staircase .cherry-hero.dk-hero .cherry-subheading { color: var(--dk-navy-text) !important; }
/* the disabled "Get Your Estimate" keeps its disabled look, recoloured */
body.home.wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-left,
body.home.wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-disabled {
  color: var(--dk-navy-muted) !important;
  border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}
/* green would sink into navy (both dark), so the call button goes cream */
body.home.wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-right {
  background: var(--dk-ground) !important;
  background-color: var(--dk-ground) !important;
  color: var(--dk-ink) !important;
  border: 0 !important;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}
body.home.wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-right:hover {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--dk-ink) !important;
}
body.home.wp-theme-staircase .cherry-hero.dk-hero .phone_display_only_holder_div,
body.home.wp-theme-staircase .cherry-hero.dk-hero .phone-display-only { color: var(--dk-navy-text) !important; }
body.home.wp-theme-staircase .cherry-hero.dk-hero .dk-hero-trust {
  color: var(--dk-navy-muted);
  border-top-color: rgba(255, 255, 255, 0.2);
}
body.home.wp-theme-staircase .cherry-hero.dk-hero .dk-hero-trust li::before { background: var(--dk-navy-accent); }
body.home.wp-theme-staircase .cherry-hero.dk-hero .dk-hero-media figcaption { color: var(--dk-navy-muted); }
body.home.wp-theme-staircase .cherry-hero.dk-hero :focus-visible { outline-color: #fff; }
/* ======================== END-EXPERIMENT (navy hero) ==================== */

/* Homepage hero: bottom edge slants up to the right at 3deg (left corner lowest).
   The rise across the section is width * tan(3deg) = 5.24vw. The hero keeps its
   height plus that much extra padding so nothing inside is clipped, then pulls
   the next band (dk-meet) up underneath it by the same amount; the hero is
   position:relative so it paints on top, and the clipped-away wedge shows
   dk-meet's own background. dk-meet gets the same amount back as top padding. */
body.home.wp-theme-staircase {
  --dk-hero-slant: 5.24vw;   /* dk-hero-slant: tan(3deg) = 0.0524 */
}
body.home.wp-theme-staircase .cherry-hero.dk-hero {
  padding-bottom: var(--dk-hero-slant) !important;
  margin-bottom: calc(-1 * var(--dk-hero-slant)) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--dk-hero-slant)), 0 100%);
  z-index: 1;
}
/* base top padding is clamp(40px, 5.5vw, 72px) from section 9; its top rule
   would sit hidden under the hero, so it goes */
body.home.wp-theme-staircase .dk-meet {
  padding-top: calc(clamp(40px, 5.5vw, 72px) + var(--dk-hero-slant));
  border-top: 0;
}

/* ---------- 8c. Per-service hero colours (8 service + 18 location pages, Sep 27, 2026) ----------

   Each service page gets its own hero ground. Scoped by the WordPress
   page-id body class, so no markup changes. A page opts in by setting the
   tokens below; the shared rules that follow read them. --hz-bug is always a
   step off --hz-bg so the insect pattern reads as texture, not as icons.

     4382 ant-control                        oxblood maroon
     4383 rodent-control                     forest green, lichen accent
     4384 bed-bug-treatment                  near-black, brass call button
     4385 flea-control                       aubergine purple, lilac call button
     4386 tick-control                       saddle brown, amber call button
     4387 roach-extermination                cobalt blue, gold accent
     4388 wasp-hornet-and-yellow-jacket      hornet yellow, black type
     4389 mosquito-control                   night navy, teal call button     */

body.page-id-4382 {          /* ant control — oxblood */
  --hz-bg: #5a1a22;  --hz-bug: #6c2631;
  --hz-head: #fff;   --hz-text: #f1dcd8;  --hz-muted: #dcb9b4;
  --hz-accent: #f2a88f;  --hz-rule: rgba(255, 255, 255, 0.22);
  --hz-cta: #faf7f1;  --hz-cta-ink: #3d1016;  --hz-cta-hover: #fff;
}
body.page-id-4384 {          /* bed bug — near-black with brass */
  --hz-bg: #141517;  --hz-bug: #222427;
  --hz-head: #fff;   --hz-text: #d7d8da;  --hz-muted: #aeb1b5;
  --hz-accent: #d9b35c;  --hz-rule: rgba(255, 255, 255, 0.18);
  --hz-cta: #d9b35c;  --hz-cta-ink: #141517;  --hz-cta-hover: #e8c778;
}
body.page-id-4388 {          /* wasp / hornet / yellow jacket — hornet yellow */
  --hz-bg: #f3c334;  --hz-bug: #e3b01f;
  --hz-head: #17140d; --hz-text: #2c2511; --hz-muted: #4a3e1c;
  --hz-accent: #17140d;  --hz-rule: rgba(0, 0, 0, 0.24);
  --hz-cta: #17140d;  --hz-cta-ink: #f3c334;  --hz-cta-hover: #000;
}

body.page-id-4383 {          /* rodent control — forest green */
  --hz-bg: #1f3b2b;  --hz-bug: #2b4b38;
  --hz-head: #fff;   --hz-text: #dbe7de;  --hz-muted: #afc6b6;
  --hz-accent: #c8dc8c;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #faf7f1;  --hz-cta-ink: #15291d;  --hz-cta-hover: #fff;
}
body.page-id-4385 {          /* flea control — aubergine */
  --hz-bg: #3a2346;  --hz-bug: #4a2f58;
  --hz-head: #fff;   --hz-text: #e8dcee;  --hz-muted: #c7b4d2;
  --hz-accent: #dcb3ee;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #dcbde9;  --hz-cta-ink: #26142f;  --hz-cta-hover: #ead3f3;
}
body.page-id-4386 {          /* tick control — saddle brown */
  --hz-bg: #4a3020;  --hz-bug: #5b3d2a;
  --hz-head: #fff;   --hz-text: #efdfcd;  --hz-muted: #d2baa1;
  --hz-accent: #eaaa5c;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #eaaa5c;  --hz-cta-ink: #26180c;  --hz-cta-hover: #f3bd77;
}
body.page-id-4387 {          /* roach extermination — cobalt blue */
  --hz-bg: #1b4a86;  --hz-bug: #245797;
  --hz-head: #fff;   --hz-text: #dfe9f6;  --hz-muted: #b8cbe4;
  --hz-accent: #ffd27a;  --hz-rule: rgba(255, 255, 255, 0.24);
  --hz-cta: #faf7f1;  --hz-cta-ink: #10294d;  --hz-cta-hover: #fff;
}
body.page-id-4389 {          /* mosquito control — night navy + teal */
  --hz-bg: #13223a;  --hz-bug: #1c304e;
  --hz-head: #fff;   --hz-text: #d2dbe8;  --hz-muted: #aebed6;
  --hz-accent: #7fd1c7;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #7fd1c7;  --hz-cta-ink: #0c1a2b;  --hz-cta-hover: #9be0d7;
}

/* Location pages — each town its own ground. */
body.page-id-4406 {          /* cannelton — denim, gold button */
  --hz-bg: #2c4a73;  --hz-bug: #365783;
  --hz-head: #fff;  --hz-text: #e3eaf5;  --hz-muted: #d0ddee;
  --hz-accent: #f9d584;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #f7c86a;  --hz-cta-ink: #1a2437;  --hz-cta-hover: #fad68a;
}
body.page-id-4395 {          /* charlestown — olive, straw button */
  --hz-bg: #3d4719;  --hz-bug: #4b5624;
  --hz-head: #fff;  --hz-text: #e8ecd6;  --hz-muted: #c7cfa6;
  --hz-accent: #e5d57c;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #e5d57c;  --hz-cta-ink: #262c0c;  --hz-cta-hover: #efe19a;
}
body.page-id-4393 {          /* clarksville — spruce, mint button */
  --hz-bg: #143a30;  --hz-bug: #1e4a3e;
  --hz-head: #fff;  --hz-text: #d7ebe2;  --hz-muted: #a9cbbd;
  --hz-accent: #9fdcab;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #a9e0b2;  --hz-cta-ink: #0b241c;  --hz-cta-hover: #c1ebc8;
}
body.page-id-4398 {          /* corydon — limestone sage (light) */
  --hz-bg: #cbd8b9;  --hz-bug: #bccba6;
  --hz-head: #16241a;  --hz-text: #223326;  --hz-muted: #34483a;
  --hz-accent: #1f3a2a;  --hz-rule: rgba(0, 0, 0, 0.22);
  --hz-cta: #1f3a2a;  --hz-cta-ink: #fff;  --hz-cta-hover: #15291d;
}
body.page-id-4405 {          /* derby — river-willow grey-green */
  --hz-bg: #3d5149;  --hz-bug: #495e55;
  --hz-head: #fff;  --hz-text: #e6eeea;  --hz-muted: #d3e0da;
  --hz-accent: #e2f0b4;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #d6e8a0;  --hz-cta-ink: #1d2a1f;  --hz-cta-hover: #e3f0b8;
}
body.page-id-4401 {          /* english — berry */
  --hz-bg: #6e1c48;  --hz-bug: #7f2a57;
  --hz-head: #fff;  --hz-text: #f6dde9;  --hz-muted: #e2b8cc;
  --hz-accent: #ffc2dd;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #faf7f1;  --hz-cta-ink: #44102c;  --hz-cta-hover: #fff;
}
body.page-id-4397 {          /* georgetown — slate, amber button */
  --hz-bg: #36404a;  --hz-bug: #43505b;
  --hz-head: #fff;  --hz-text: #e0e5ea;  --hz-muted: #bcc6d0;
  --hz-accent: #f0c27a;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #f0c27a;  --hz-cta-ink: #231a0b;  --hz-cta-hover: #f6d197;
}
body.page-id-4400 {          /* jasper — espresso, copper button */
  --hz-bg: #2b1d16;  --hz-bug: #3a2920;
  --hz-head: #fff;  --hz-text: #eadcd2;  --hz-muted: #c9b3a4;
  --hz-accent: #dfa46c;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #dfa46c;  --hz-cta-ink: #22130a;  --hz-cta-hover: #eab888;
}
body.page-id-4391 {          /* jeffersonville — barn red */
  --hz-bg: #7c2a20;  --hz-bug: #8d372b;
  --hz-head: #fff;  --hz-text: #f6e0d8;  --hz-muted: #e7bfb4;
  --hz-accent: #f7c08f;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #faf7f1;  --hz-cta-ink: #4a150e;  --hz-cta-hover: #fff;
}
body.page-id-4390 {          /* leavenworth — river teal */
  --hz-bg: #164c55;  --hz-bug: #1f5c66;
  --hz-head: #fff;  --hz-text: #d8ecee;  --hz-muted: #abd0d4;
  --hz-accent: #9fe0d8;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #faf7f1;  --hz-cta-ink: #0d3239;  --hz-cta-hover: #fff;
}
body.page-id-4402 {          /* marengo — cave teal-black */
  --hz-bg: #0e2426;  --hz-bug: #173335;
  --hz-head: #fff;  --hz-text: #d3e3e3;  --hz-muted: #a3bfbf;
  --hz-accent: #6fd6c1;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #6fd6c1;  --hz-cta-ink: #082021;  --hz-cta-hover: #8fe2d1;
}
body.page-id-4403 {          /* milltown — peach (light) */
  --hz-bg: #f2c9a8;  --hz-bug: #e8b891;
  --hz-head: #2b160a;  --hz-text: #3a2213;  --hz-muted: #5a3a26;
  --hz-accent: #3b1f10;  --hz-rule: rgba(0, 0, 0, 0.22);
  --hz-cta: #3b1f10;  --hz-cta-ink: #fff;  --hz-cta-hover: #24120a;
}
body.page-id-4392 {          /* new-albany — plum, rose button */
  --hz-bg: #4a1d3c;  --hz-bug: #5a2a4b;
  --hz-head: #fff;  --hz-text: #f0dde8;  --hz-muted: #d6b6c9;
  --hz-accent: #f2abcb;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #f2bcd4;  --hz-cta-ink: #2e0f24;  --hz-cta-hover: #f8d2e3;
}
body.page-id-4407 {          /* rome — imperial purple + gold */
  --hz-bg: #4b2a7a;  --hz-bug: #583689;
  --hz-head: #fff;  --hz-text: #e9e0f5;  --hz-muted: #cbbde2;
  --hz-accent: #f2cf6b;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #f2cf6b;  --hz-cta-ink: #27163f;  --hz-cta-hover: #f6db8c;
}
body.page-id-4396 {          /* salem — indigo */
  --hz-bg: #23285a;  --hz-bug: #2f356b;
  --hz-head: #fff;  --hz-text: #dde0f5;  --hz-muted: #b3b9e2;
  --hz-accent: #b0bcff;  --hz-rule: rgba(255, 255, 255, 0.2);
  --hz-cta: #faf7f1;  --hz-cta-ink: #161a44;  --hz-cta-hover: #fff;
}
body.page-id-4394 {          /* sellersburg — burnt orange */
  --hz-bg: #943c14;  --hz-bug: #a3471d;
  --hz-head: #fff;  --hz-text: #fff0e6;  --hz-muted: #ffe3d1;
  --hz-accent: #ffe4bf;  --hz-rule: rgba(255, 255, 255, 0.28);
  --hz-cta: #faf7f1;  --hz-cta-ink: #4a1c06;  --hz-cta-hover: #fff;
}
body.page-id-4404 {          /* sulphur — mustard (light) */
  --hz-bg: #c9bd4a;  --hz-bug: #b9ad3c;
  --hz-head: #1a1806;  --hz-text: #27240d;  --hz-muted: #3c3814;
  --hz-accent: #1a1806;  --hz-rule: rgba(0, 0, 0, 0.22);
  --hz-cta: #1a1806;  --hz-cta-ink: #e3d55c;  --hz-cta-hover: #000;
}
body.page-id-4399 {          /* tell-city — Ohio-river sky (light) */
  --hz-bg: #a6c9e0;  --hz-bug: #94bbd6;
  --hz-head: #0f1d2e;  --hz-text: #18293d;  --hz-muted: #263c55;
  --hz-accent: #13233a;  --hz-rule: rgba(0, 0, 0, 0.22);
  --hz-cta: #13233a;  --hz-cta-ink: #fff;  --hz-cta-hover: #0a1626;
}

body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero {
  background: var(--hz-bg) !important;
  border-bottom: 0;
  --dk-bug-color: var(--hz-bug);
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407) .cherry-hero.dk-hero .dk-hero-eyebrow {
  color: var(--hz-accent);
  border-bottom-color: var(--hz-rule);
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407) .cherry-hero.dk-hero .cherry-heading { color: var(--hz-head) !important; }
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407) .cherry-hero.dk-hero .cherry-subheading { color: var(--hz-text) !important; }
/* the disabled "Get Your Estimate" keeps its disabled look, recoloured */
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-left,
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-disabled {
  color: var(--hz-muted) !important;
  border-bottom-color: var(--hz-rule) !important;
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-right {
  background: var(--hz-cta) !important;
  background-color: var(--hz-cta) !important;
  color: var(--hz-cta-ink) !important;
  border: 0 !important;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.22) !important;
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .batman-hero-button-right:hover {
  background: var(--hz-cta-hover) !important;
  background-color: var(--hz-cta-hover) !important;
  color: var(--hz-cta-ink) !important;
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .phone_display_only_holder_div,
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .phone-display-only { color: var(--hz-text) !important; }
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .dk-hero-trust {
  color: var(--hz-muted);
  border-top-color: var(--hz-rule);
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero .dk-hero-trust li::before { background: var(--hz-accent); }
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407) .cherry-hero.dk-hero .dk-hero-media figcaption { color: var(--hz-muted); }
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407) .cherry-hero.dk-hero :focus-visible { outline-color: var(--hz-head); }

/* Service + location pages: the same 3deg slant (Sep 27, 2026). The band
   under the hero varies (chen-cards on the services and 11 towns, content-bay-1
   or -2 on the other 7), so it is picked by position: the first <section>
   after the hero, with or without the page's <style> tag between them. It gets
   the slant back as top padding. Section 4 sets that padding with !important
   on all three bands, so this has to as well. */
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase {
  --dk-hero-slant: 5.24vw;   /* tan(3deg) = 0.0524 */
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero {
  padding-bottom: var(--dk-hero-slant) !important;
  margin-bottom: calc(-1 * var(--dk-hero-slant)) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--dk-hero-slant)), 0 100%);
  z-index: 1;
}
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero + style + section,
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389, .page-id-4390, .page-id-4391, .page-id-4392, .page-id-4393, .page-id-4394, .page-id-4395, .page-id-4396, .page-id-4397, .page-id-4398, .page-id-4399, .page-id-4400, .page-id-4401, .page-id-4402, .page-id-4403, .page-id-4404, .page-id-4405, .page-id-4406, .page-id-4407).wp-theme-staircase .cherry-hero.dk-hero + section {
  padding-top: calc(clamp(44px, 6vw, 84px) + var(--dk-hero-slant)) !important;
  border-top: 0 !important;
}

/* ---------- 9. Meet-Derrek band (first picture below the hero) ---------- */

.dk-meet {
  background: var(--dk-surface);
  border-top: 1px solid var(--dk-rule);
  padding: clamp(40px, 5.5vw, 72px) var(--dk-gut);
}
.dk-meet-grid {
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(26px, 4.5vw, 56px);
  align-items: center;
}
/* Held to its native 446px rather than stretched. It is the only real
   photograph on the site and it does not survive being blown up. */
.dk-meet-photo { margin: 0; }
.dk-meet-photo img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--dk-r);
  background: var(--dk-surface2);
}
.dk-meet-photo figcaption {
  font-family: var(--dk-sans);
  font-size: 0.73rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--dk-ink-mute);
  margin-top: 10px;
}
.dk-meet-body h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin: 0 0 16px;
  padding-top: 18px;
  border-top: 2px solid var(--dk-accent);
}
.dk-meet-body p { color: var(--dk-ink-soft); margin: 0 0 1em; }
.dk-meet-body p:last-child { margin-bottom: 0; }

@media (max-width: 780px) {
  .dk-meet-grid { grid-template-columns: 1fr; }
  .dk-meet-photo img { max-width: 260px; }
}

/* ---------- 9b. Reviews (homepage) ---------- */

/* Deep maroon band (user's choice, Sep 21) — the site's one deliberate second
   colour field, used only here. Each review is a cream card on the maroon:
   dark text, maroon stars, a large soft quotation mark in the corner. No links
   in the section, ever (house rule for reviews sections). All colours are
   tokens so the band can be re-tuned in one place. */
:root {
  --dk-maroon: #561d27;
  --dk-maroon-star: #7a2531;
  --dk-maroon-rose: #e6c9cd;
}
body.wp-theme-staircase .dk-reviews {
  background: var(--dk-maroon);
  border-top: 0;
  padding: clamp(52px, 7vw, 92px) var(--dk-gut);
}
body.wp-theme-staircase .dk-reviews-inner { max-width: 1120px; margin-inline: auto; }

/* Pest row along the band's bottom edge (Sep 29, 2026): the hero's seven pests
   redrawn (Supernova PATTERN_SAMPLE_F, assembled v3), standing on one baseline.
   A mask like the hero insects, so the colour is ours: one step lighter than
   the maroon. `contain` scales the whole row to the band's width, so all seven
   stay in view on a phone. It is background only — it adds no height, and the
   band's content (the "Read More Reviews" button) is free to sit over it. */
body.wp-theme-staircase .dk-reviews { position: relative; }
body.wp-theme-staircase .dk-reviews::before {
  content: "";
  position: absolute;
  left: var(--dk-gut);
  right: var(--dk-gut);
  bottom: 0;
  height: clamp(70px, 11.5vw, 180px);
  background-color: #69262f;
  -webkit-mask: url('/wp-content/themes/staircase/img/dk-bugs/pest-row.webp') center bottom / contain no-repeat;
          mask: url('/wp-content/themes/staircase/img/dk-bugs/pest-row.webp') center bottom / contain no-repeat;
  pointer-events: none;
}
body.wp-theme-staircase .dk-reviews-inner { position: relative; z-index: 1; }
body.wp-theme-staircase .dk-reviews .dk-reviews-title {
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  margin: 0 0 0.25em;
  padding-top: 18px;
  border-top: 2px solid rgba(255, 255, 255, 0.35);
}
body.wp-theme-staircase .dk-reviews-sub {
  font-family: var(--dk-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dk-maroon-rose);
  margin: 0 0 30px;
  max-width: none;
}
body.wp-theme-staircase .dk-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(18px, 2.6vw, 28px);
}
body.wp-theme-staircase .dk-reviews .dk-review {
  position: relative;
  margin: 0;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(22px, 2.6vw, 28px);
  background: var(--dk-ground);
  border: 0;
  border-radius: var(--dk-r);
  box-shadow: 0 14px 30px rgba(20, 4, 8, 0.28);
  overflow: hidden;
}
/* oversized decorative quotation mark, top right, never read aloud */
body.wp-theme-staircase .dk-reviews .dk-review::after {
  content: "\201D";
  position: absolute;
  top: 0.06em;
  right: 0.16em;
  font-family: var(--dk-serif);
  font-size: 7.5rem;
  height: 0.62em;          /* the glyph sits high in its line box; this keeps it whole, not clipped */
  line-height: 1;
  color: var(--dk-maroon);
  opacity: 0.1;
  pointer-events: none;
}
body.wp-theme-staircase .dk-reviews .dk-review-stars {
  color: var(--dk-maroon-star);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  line-height: 1;
  margin-bottom: 16px;
}
body.wp-theme-staircase .dk-reviews .dk-review-text {
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  quotes: none;
}
body.wp-theme-staircase .dk-reviews .dk-review-text p {
  font-family: var(--dk-serif);
  font-style: normal !important;
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  line-height: 1.62;
  color: var(--dk-ink);
  max-width: none;
  margin: 0;
}
body.wp-theme-staircase .dk-reviews .dk-review-by {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--dk-rule);
  font-family: var(--dk-sans);
}
body.wp-theme-staircase .dk-reviews .dk-review-name { font-weight: 800; font-size: 0.92rem; color: var(--dk-ink); }
body.wp-theme-staircase .dk-reviews .dk-review-src {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dk-ink-mute);
}

/* "Read More Reviews on Google" — outlined on the maroon band, fills cream on
   hover; gold star before the label, "opens in new tab" arrow after it */
body.wp-theme-staircase .dk-reviews .dk-reviews-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.6vw, 40px);
}
body.wp-theme-staircase .dk-reviews a.dk-reviews-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--dk-sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  color: #fff !important;
  background: transparent;
  border: 2px solid var(--dk-ground);
  border-radius: var(--dk-r);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.wp-theme-staircase .dk-reviews a.dk-reviews-more-btn:hover,
body.wp-theme-staircase .dk-reviews a.dk-reviews-more-btn:focus-visible {
  background: var(--dk-ground);
  color: var(--dk-maroon) !important;
  box-shadow: 0 10px 22px rgba(20, 4, 8, 0.25);
}
body.wp-theme-staircase .dk-reviews a.dk-reviews-more-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
body.wp-theme-staircase .dk-reviews .dk-reviews-more-star {
  color: #f4c542;
  font-size: 1.1em;
  line-height: 1;
  transition: color 0.15s ease;
}
/* the bright gold washes out on cream; deepen it for the filled state */
body.wp-theme-staircase .dk-reviews a.dk-reviews-more-btn:hover .dk-reviews-more-star,
body.wp-theme-staircase .dk-reviews a.dk-reviews-more-btn:focus-visible .dk-reviews-more-star {
  color: #c48a12;
}
body.wp-theme-staircase .dk-reviews .dk-reviews-more-arrow {
  flex: none;
  width: 1em;
  height: 1em;
}

/* ---------- 10. Cards → top-rule blocks ---------- */

/* Bordered cards in an even auto-fit grid is the single most template-like
   layout on the page. These become hairline-ruled blocks with a top accent
   rule and no box. */
.cards-grid,
.paragon-cards-grid,
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
  gap: 0;
  column-gap: clamp(24px, 3.4vw, 44px);
}

.service-card,
.paragon-card,
.reason-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--dk-rule-firm) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 30px !important;
  transform: none !important;
  text-align: left !important;
}
.service-card:hover,
.paragon-card:hover,
.reason-card:hover { transform: none !important; box-shadow: none !important; }

.card-title,
.paragon-card-title,
.reason-card h3 {
  font-family: var(--dk-sans);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.014em;
  margin: 0 0 9px;
  text-align: left;
}
.card-description,
.paragon-card-description,
.reason-card p {
  font-family: var(--dk-serif);
  font-size: 0.945rem;
  line-height: 1.62;
  color: var(--dk-ink-soft);
  margin: 0;
  text-align: left;
  max-width: none;
}

/* The blue rounded icon chip and the grey "decorative corner accent" blob are
   both scoped as `.chen-cards-section .card-icon` in the theme, so a bare
   class selector loses. Both go: the top rule already separates the cards,
   and a chip plus a blob plus a rule is three devices doing one job. */
body.wp-theme-staircase .chen-cards-section .card-icon,
body.wp-theme-staircase .chen-cards-section .card-accent,
body.wp-theme-staircase .service-card .card-icon,
body.wp-theme-staircase .service-card .card-accent {
  display: none !important;
}

/* A short accent dash above each card title, the same device as the trust row.
   Only on the text-only cards — the paragon cards lead with a photograph, and
   a dash above the image would sit between the rule and the picture. */
body.wp-theme-staircase .service-card::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--dk-accent);
  margin: 0 0 14px;
}

.paragon-card-image {
  border-radius: var(--dk-r);
  overflow: hidden;
  margin-bottom: 15px;
  aspect-ratio: 3 / 2;
  background: var(--dk-surface2);
}
.paragon-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 11. Process: large condensed numerals ---------- */

.kendall-process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: clamp(22px, 3vw, 40px);
  counter-reset: none;
}
/* The connector line and the arrows between steps are decoration that only
   works at one breakpoint. */
.process-line-connector,
.step-arrow { display: none !important; }

.process-step {
  background: transparent !important;
  border: 0 !important;
  border-top: 2px solid var(--dk-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 0 !important;
  text-align: left !important;
  width: auto !important;
}

/* Numbered circles → large numerals set in the display face. */
.step-number {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--dk-accent) !important;
  font-family: var(--dk-sans);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.045em;
  display: block !important;
  margin: 0 0 12px !important;
  box-shadow: none !important;
}
.step-text,
.step-content p {
  font-family: var(--dk-serif);
  color: var(--dk-ink-soft);
  font-size: 0.95rem;
  max-width: none;
}
.step-content h3 { font-size: 1.02rem; margin: 0 0 7px; }

/* ---------- 11b. Process as a vertical list (homepage pilot) ---------- */

/* PILOT: applies only where the transform has added .dk-process — the
   homepage for now. It replaces the four squeezed white cards (an auto-fit
   grid put them side by side at ~220px each) with a full-width list that
   reads top to bottom: STEP 01 | label | description, one row per step,
   hairline between rows. Once signed off, it rolls out to every page with
   this section by widening PROCESS_PAGES in _tools/apply_redesign.py.

   Much of this section is inline style="" attributes (the numbered circles,
   the white card, its arrow, the blue connector line), so the properties
   that fight them are !important, at a specificity above the section-wide
   process rules in section 11. */

body.wp-theme-staircase .dk-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.wp-theme-staircase .kendall-process-box.dk-process .kendall-process-container { text-align: left !important; }
/* The h2 carries inline font-size:28px / weight 700 / #333, which kept it
   smaller and greyer than every other section heading. */
body.wp-theme-staircase .kendall-process-box.dk-process .kendall-process-container > h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem) !important;
  font-weight: 800 !important;
  color: var(--dk-ink) !important;
  margin: 0 0 0.35em !important;
}
body.wp-theme-staircase .kendall-process-box.dk-process .kendall-process-container > h3 {
  text-align: left !important;
  font-family: var(--dk-sans) !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  color: var(--dk-ink-soft) !important;
  margin: 0 0 12px !important;
}
body.wp-theme-staircase .kendall-process-box.dk-process .kendall-process-container > div:not(.kendall-process-steps) {
  max-width: 68ch !important;
  margin: 0 0 36px !important;
  text-align: left !important;
  font-family: var(--dk-serif) !important;
  color: var(--dk-ink-soft) !important;
}

body.wp-theme-staircase .kendall-process-box.dk-process .kendall-process-steps {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  counter-reset: dkstep;
  border-bottom: 1px solid var(--dk-rule-firm);
}
body.wp-theme-staircase .kendall-process-box.dk-process .process-line-connector,
body.wp-theme-staircase .kendall-process-box.dk-process .step-arrow { display: none !important; }

body.wp-theme-staircase .kendall-process-box.dk-process .process-step {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin: 0 !important;
  padding: 28px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--dk-rule-firm) !important;
  background: none !important;
  counter-increment: dkstep;
}

/* The markup's "1", "2"… are replaced by a small STEP label over a large
   zero-padded numeral from a CSS counter. font-size:0 hides the original
   digit without removing it from the document. */
body.wp-theme-staircase .kendall-process-box.dk-process .step-number {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
}
body.wp-theme-staircase .kendall-process-box.dk-process .step-number::before {
  content: "Step";
  display: block;
  font: 700 0.7rem/1 var(--dk-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dk-ink-mute);
  margin-bottom: 8px;
}
body.wp-theme-staircase .kendall-process-box.dk-process .step-number::after {
  content: counter(dkstep, decimal-leading-zero);
  display: block;
  font-family: var(--dk-sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.6vw, 3.5rem);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--dk-accent);
}

body.wp-theme-staircase .kendall-process-box.dk-process .step-content {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Label and description side by side on desktop, so the row uses the full
   width instead of a narrow card. */
body.wp-theme-staircase .kendall-process-box.dk-process .step-text {
  display: grid !important;
  grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 6px;
  font-family: var(--dk-serif) !important;
  font-size: 1.06rem !important;
  line-height: 1.65 !important;
  color: var(--dk-ink-soft) !important;
  padding-top: 20px;
}
body.wp-theme-staircase .kendall-process-box.dk-process .dk-step-label {
  font-family: var(--dk-sans);
  font-weight: 800;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--dk-ink);
}

@media (max-width: 760px) {
  body.wp-theme-staircase .kendall-process-box.dk-process .process-step {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 22px 0 !important;
  }
  body.wp-theme-staircase .kendall-process-box.dk-process .step-number::before { font-size: 0.6rem; }
  body.wp-theme-staircase .kendall-process-box.dk-process .step-number::after { font-size: 2.1rem; }
  body.wp-theme-staircase .kendall-process-box.dk-process .step-text {
    grid-template-columns: 1fr;
    padding-top: 14px;
  }
}

/* ---------- 11c. Closing CTA band (homepage pilot) ---------- */

/* Directly below "My Pest Control Process", the page's closing pitch. Solid
   --dk-accent — one step lighter than the footer's --dk-accent-deep so the two
   dark bands do not merge. Reuses the hero's insect icons, recoloured for the
   green ground through the same --dk-bug-color variable. Everything is
   body-scoped: the site-wide a / h2 / p rules would otherwise paint green
   links and dark headings onto the green band. */
body.wp-theme-staircase .dk-cta {
  position: relative;
  overflow: hidden;
  background: var(--dk-accent);
  color: #fff;
  padding: clamp(56px, 7vw, 100px) var(--dk-gut);
  --dk-bug-color: #385a40;
}
body.wp-theme-staircase .dk-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
body.wp-theme-staircase .dk-cta-eyebrow {
  font-family: var(--dk-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #cad8c7;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  max-width: none;
}
body.wp-theme-staircase .dk-cta .dk-cta-title {
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 16px;
}
body.wp-theme-staircase .dk-cta-text {
  color: #e1e8dc;
  font-family: var(--dk-serif);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0;
  max-width: 54ch;
}
body.wp-theme-staircase .dk-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  justify-self: end;
}
/* The primary action inverts the site button: light face on the green band,
   with the same pressable bottom edge. */
body.wp-theme-staircase .dk-cta .dk-cta-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--dk-ground);
  color: var(--dk-ink);
  font-family: var(--dk-sans);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: var(--dk-r);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 10px 26px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease, transform 0.08s ease;
}
body.wp-theme-staircase .dk-cta .dk-cta-call svg { color: var(--dk-accent); flex: 0 0 auto; }
body.wp-theme-staircase .dk-cta .dk-cta-call:hover { background: #fff; color: var(--dk-ink); }
body.wp-theme-staircase .dk-cta .dk-cta-call:active { transform: translateY(1px); }
body.wp-theme-staircase .dk-cta .dk-cta-alt {
  color: #fff;
  font-family: var(--dk-sans);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.wp-theme-staircase .dk-cta .dk-cta-alt:hover { color: #fff; text-decoration-thickness: 2px; }
body.wp-theme-staircase .dk-cta :focus-visible { outline-color: #fff; }

/* Insect icons on the band: smaller than in the hero, own positions. These
   out-rank the hero's placements, including its phone-width block. */
body.wp-theme-staircase .dk-cta .dk-bug { width: calc(clamp(50px, 5vw, 84px) * var(--k, 1)); }
body.wp-theme-staircase .dk-cta .dk-bug--ant        { --x: 3%;  --y: 16%; --r:  34deg; }
body.wp-theme-staircase .dk-cta .dk-bug--silverfish { --x: 23%; --y: 74%; --r: -58deg; }
body.wp-theme-staircase .dk-cta .dk-bug--tick       { --x: 47%; --y: 8%;  --r: -14deg; }
body.wp-theme-staircase .dk-cta .dk-bug--roach      { --x: 62%; --y: 70%; --r: 122deg; }
body.wp-theme-staircase .dk-cta .dk-bug--spider     { --x: 91%; --y: 22%; --r: -22deg; }

@media (max-width: 760px) {
  body.wp-theme-staircase .dk-cta-inner { grid-template-columns: 1fr; }
  body.wp-theme-staircase .dk-cta-actions { justify-self: stretch; align-items: stretch; }
  body.wp-theme-staircase .dk-cta .dk-cta-call { justify-content: center; }
  body.wp-theme-staircase .dk-cta .dk-cta-alt { align-self: center; }
  body.wp-theme-staircase .dk-cta .dk-bug { width: calc(44px * var(--k, 1)); }
  body.wp-theme-staircase .dk-cta .dk-bug--ant        { --x: 80%; --y: 4%;  }
  body.wp-theme-staircase .dk-cta .dk-bug--silverfish { --x: 6%;  --y: 92%; }
  body.wp-theme-staircase .dk-cta .dk-bug--tick       { --x: 86%; --y: 46%; }
  body.wp-theme-staircase .dk-cta .dk-bug--roach      { --x: 84%; --y: 88%; }
  body.wp-theme-staircase .dk-cta .dk-bug--spider     { --x: 2%;  --y: 50%; }
}

/* ---------- 12. Why-choose-us: drop the blue gradient ---------- */

/* This band is built almost entirely from inline style attributes on unclassed
   divs — the card background, the blue gradient number badge and the body text
   colour are all style="" on the element. An attribute beats any selector, so
   every rule here needs !important; without it the text stayed #333 on the new
   dark green and was unreadable. */
body.wp-theme-staircase .ava-whychooseus-box {
  background: var(--dk-accent-deep) !important;
  background-image: none !important;
  color: #e4e0d4 !important;
  overflow: visible !important;
}
body.wp-theme-staircase .ava-whychooseus-box h2,
body.wp-theme-staircase .ava-whychooseus-box h3 {
  color: #fff !important;
  text-align: left !important;
  text-shadow: none !important;
  font-family: var(--dk-sans) !important;
}
body.wp-theme-staircase .ava-whychooseus-box h2 { border-top-color: #6f8f77 !important; }
body.wp-theme-staircase .ava-whychooseus-box h3 {
  font-size: 1.12rem !important;
  font-weight: 500 !important;
  color: #b9c9bd !important;
  margin-top: 0 !important;
}
body.wp-theme-staircase .ava-whychooseus-box p {
  color: #d2cec2 !important;
  text-align: left !important;
  margin-inline: 0 !important;
}
/* The lede sits in an unclassed div carrying inline max-width + auto margins,
   which indented it past the heading's left edge. */
body.wp-theme-staircase .ava-container > div {
  max-width: none !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

/* Reason cards: box and shadow off, hairline on, text legible. */
body.wp-theme-staircase .ava-whychooseus-box .reason-card {
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  padding: 20px 0 8px !important;
}
body.wp-theme-staircase .ava-whychooseus-box .reason-card div {
  color: #d6d2c6 !important;
  font-family: var(--dk-serif) !important;
}

/* The blue gradient circle becomes a large numeral, matching the process band. */
body.wp-theme-staircase .ava-whychooseus-box .reason-card > div > div:first-child {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-right: 14px !important;
}
body.wp-theme-staircase .ava-whychooseus-box .reason-card > div > div:first-child span {
  font-family: var(--dk-sans) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em;
  color: #8fae96 !important;
}

/* ---------- 13. CTA band ---------- */

/* The section is display:flex + justify-content:center, which shrink-wraps the
   container to its content and centres it — so max-width and auto margins on
   the container alone did nothing. Back to block flow, then the usual
   1120px-and-centred rule applies like every other band. */
body.wp-theme-staircase .kristina-cta-box {
  background: var(--dk-surface2) !important;
  display: block !important;
}
body.wp-theme-staircase .kristina-cta-container {
  text-align: left !important;
  max-width: 1120px !important;
  width: auto !important;
  margin-inline: auto !important;
}
body.wp-theme-staircase .kristina-cta-heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-align: left !important;
  margin-inline: 0 !important;
}
body.wp-theme-staircase .kristina-cta-subtext {
  font-family: var(--dk-serif) !important;
  color: var(--dk-ink-soft) !important;
  margin: 0 0 22px !important;
  text-align: left !important;
}
body.wp-theme-staircase .kristina-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
}

/* ---------- 14. FAQ ---------- */

.serena-faq-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dk-rule-firm) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.serena-faq-question {
  font-family: var(--dk-sans);
  font-weight: 700;
  font-size: 1.01rem;
  color: var(--dk-ink);
  background: transparent !important;
  padding: 19px 44px 19px 0 !important;
  text-align: left;
}
/* the theme's `.serena-faq-question.active { color: white }` outranks the rule
   above and turned the open question white on the beige ground; keep it ink */
.serena-faq-question.active,
.serena-faq-question:hover { color: var(--dk-ink) !important; }
.serena-faq-answer {
  font-family: var(--dk-serif);
  color: var(--dk-ink-soft);
  font-size: 1.06rem;
  line-height: 1.65;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 28px) clamp(18px, 2.4vw, 24px) !important;
  margin-bottom: 19px;
}
/* the theme drops answer text to 14px on small screens; follow the box size */
.serena-faq-answer p { max-width: none; font-size: inherit !important; line-height: inherit; }
.serena-faq-answer p:last-child { margin-bottom: 0; }
.serena-faq-icon { color: var(--dk-accent); }

/* ---------- 15. Content bays + article prose ---------- */

/* The 2px grey rounded box around the article was the "card on a page" tell
   at its largest scale. Prose sits directly on the ground. */
.content-lake-box .article-content {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 1120px;
  margin-inline: auto;
  font-family: var(--dk-serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--dk-ink);
}
.content-lake-box .article-content h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 1.7em 0 0.55em;
  padding-top: 16px;
  border-top: 1px solid var(--dk-rule-firm);
}
.content-lake-box .article-content h2:first-of-type { margin-top: 0; }
.content-lake-box .article-content p { color: var(--dk-ink-soft); }

.content-bay-1-content,
.content-bay-2-content {
  font-family: var(--dk-serif) !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
  color: var(--dk-ink-soft) !important;
}
.content-bay-1-divider { background: var(--dk-rule) !important; }
.content-bay-1-image-container-inner,
.content-bay-2-image-container { border-radius: var(--dk-r); overflow: hidden; }
/* Homepage pilot (Sep 29, 2026): the theme sets an inline #f5f5f5 on these
   containers and stretches them to the text column's height, so the photo sat
   in a white/grey panel. Transparent lets the band's own beige run through. */
body.home .content-bay-1-image-container,
body.home .content-bay-2-image-container { background: transparent !important; }

/* ---------- 16. Map + lead form ---------- */

.nile-map-box { background: var(--dk-ground) !important; }
.nile-map-box iframe { border-radius: var(--dk-r); filter: saturate(0.82); display: block; }

.harlow-leadform-box { background: var(--dk-surface) !important; }
.harlow-leadform-box input,
.harlow-leadform-box textarea,
.harlow-leadform-box select {
  font-family: var(--dk-serif);
  font-size: 1rem;
  border: 1px solid var(--dk-rule-firm);
  border-radius: var(--dk-r);
  background: var(--dk-ground);
  color: var(--dk-ink);
  padding: 11px 13px;
}
.harlow-leadform-box input:focus,
.harlow-leadform-box textarea:focus,
.harlow-leadform-box select:focus {
  outline: 2px solid var(--dk-accent);
  outline-offset: 1px;
  border-color: var(--dk-accent);
}
.harlow-leadform-box label {
  font-family: var(--dk-sans);
  font-weight: 600;
  font-size: 0.87rem;
  color: var(--dk-ink);
}
.harlow-leadform-box button[type="submit"],
.harlow-leadform-box input[type="submit"] {
  font-family: var(--dk-sans);
  font-weight: 700;
  background: var(--dk-accent);
  color: #fff;
  border: 0;
  border-radius: var(--dk-r);
  padding: 13px 26px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* ---------- 16c. Contact estimate form ---------- */

/* /contact/ ships its own palette entirely: an orange #e17d1e card with blue
   #184f84 titles and grey helper text that measured 2.66:1 on the orange. It
   is pulled into the one-accent scheme like every other band. */
body.wp-theme-staircase .est-card {
  background: var(--dk-surface) !important;
  border: 0 !important;
  border-top: 2px solid var(--dk-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
body.wp-theme-staircase .est-wrap {
  background: transparent !important;
  padding: 0 !important;
}
body.wp-theme-staircase .est-title {
  color: var(--dk-ink) !important;
  font-family: var(--dk-sans) !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em;
}
body.wp-theme-staircase .est-subhead {
  color: var(--dk-ink) !important;
  font-family: var(--dk-sans) !important;
}
body.wp-theme-staircase .est-help {
  color: var(--dk-ink-soft) !important;
  font-family: var(--dk-serif) !important;
}
body.wp-theme-staircase .est-rule {
  background: var(--dk-rule-firm) !important;
  height: 1px !important;
}
body.wp-theme-staircase .est-card input,
body.wp-theme-staircase .est-card select,
body.wp-theme-staircase .est-card textarea {
  font-family: var(--dk-serif);
  border: 1px solid var(--dk-rule-firm);
  border-radius: var(--dk-r);
  background: var(--dk-ground);
  color: var(--dk-ink);
}
body.wp-theme-staircase .est-card button[type="submit"],
body.wp-theme-staircase .est-card input[type="submit"] {
  font-family: var(--dk-sans);
  font-weight: 700;
  background: var(--dk-accent) !important;
  color: #fff !important;
  border: 0;
  border-radius: var(--dk-r) !important;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}

/* The contact form's right column ships min-width:300px plus padding, which
   made it 420px wide inside a 390px viewport — an 80px horizontal scroll on
   every phone. Flex and grid children also need min-width:0 to be allowed to
   shrink below their content size at all. */
body.wp-theme-staircase .monica-right-section,
body.wp-theme-staircase .monica-left-section,
body.wp-theme-staircase .monica-form-container {
  min-width: 0 !important;
  max-width: 100% !important;
}
@media (max-width: 760px) {
  body.wp-theme-staircase .monica-right-section,
  body.wp-theme-staircase .monica-form-container {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  body.wp-theme-staircase .est-card { padding-inline: 14px !important; }
  /* A radio label reading "No, but I am authorized to make decisions…" carries
     white-space:nowrap, and <legend> does not shrink to its container. Between
     them they kept 42px of horizontal scroll on a 390px screen. */
  body.wp-theme-staircase .est-card span,
  body.wp-theme-staircase .est-card label { white-space: normal !important; }
  body.wp-theme-staircase .est-card legend {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    white-space: normal !important;
  }
  body.wp-theme-staircase .est-card fieldset {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-inline: 0 !important;
  }
}

/* ---------- 16d. Blog index ---------- */

/* Inherited bug, not a style choice: main.site-content on the blog index has
   background:#000, so the whole listing sat on pure black with white cards and
   a white H1. It clashes with everything else on the site, and it is why the
   pagination measured 2.15:1 — accent green on black. */
body.wp-theme-staircase .site-content { background: var(--dk-ground) !important; }
body.wp-theme-staircase .blog-page-title {
  color: var(--dk-ink) !important;
  font-family: var(--dk-sans) !important;
  font-weight: 800 !important;
  padding-top: 20px;
  border-top: 2px solid var(--dk-accent);
  margin-bottom: 1.2em !important;
}

/* Post cards become top-rule blocks, like every other card on the site. */
body.wp-theme-staircase .blog-post-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--dk-rule-firm) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 28px !important;
}
body.wp-theme-staircase .post-meta {
  font-family: var(--dk-sans) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--dk-ink-mute) !important;
}
body.wp-theme-staircase .post-meta em,
body.wp-theme-staircase .post-author { font-style: normal !important; }
body.wp-theme-staircase .post-title,
body.wp-theme-staircase .post-title a {
  font-family: var(--dk-sans) !important;
  font-weight: 800 !important;
  color: var(--dk-ink) !important;
  text-decoration: none;
  letter-spacing: -0.016em;
}
body.wp-theme-staircase .post-title a:hover { color: var(--dk-accent) !important; }
body.wp-theme-staircase .post-excerpt {
  font-family: var(--dk-serif) !important;
  color: var(--dk-ink-soft) !important;
}

/* The "read more" links measured 3.98:1 — under AA. */
body.wp-theme-staircase .read-more-link {
  color: var(--dk-accent) !important;
  font-family: var(--dk-sans) !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.wp-theme-staircase .read-more-link:hover { color: var(--dk-accent-deep) !important; }

/* Pagination — the "next" link measured 2.15:1. */
body.wp-theme-staircase .page-numbers {
  font-family: var(--dk-sans) !important;
  font-weight: 700 !important;
  color: var(--dk-accent) !important;
  border-radius: var(--dk-r) !important;
}
body.wp-theme-staircase a.page-numbers:hover { color: var(--dk-accent-deep) !important; }
body.wp-theme-staircase .page-numbers.current {
  background: var(--dk-accent) !important;
  color: #fff !important;
}

/* ---------- 17. Footer ---------- */

.zh_ft2_footer {
  background: var(--dk-accent-deep);
  color: #cfcbbf;
  font-family: var(--dk-serif);
  border-top: 0;
}
.zh_ft2_footer h2,
.zh_ft2_footer h3,
.zh_ft2_footer h4 {
  font-family: var(--dk-sans);
  font-weight: 800;
  color: #fff;
  font-size: 0.93rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.zh_ft2_footer a { color: #d9d5c9; text-decoration: none; }
.zh_ft2_footer a:hover { color: #fff; text-decoration: underline; }

/* Three inherited colours clash with the new palette: the footer call button
   and the Quick Links rule are brick red #b1250d, and the legal bar is navy
   #141f2d. None of them belong in a one-accent warm-green scheme. */
body.wp-theme-staircase .zh_ft2_phone_button {
  background: var(--dk-accent) !important;
  background-color: var(--dk-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--dk-r) !important;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3) !important;
  font-family: var(--dk-sans) !important;
  font-weight: 700 !important;
}
body.wp-theme-staircase .zh_ft2_phone_button:hover {
  background: #3d5e44 !important;
  background-color: #3d5e44 !important;
}
body.wp-theme-staircase .zh_ft2_box_2 {
  border-left-color: var(--dk-accent) !important;
}
body.wp-theme-staircase .zh_ft2_bottom {
  background: #16261a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Darkening the legal bar dropped the disclaimer to 4.46:1, just under AA. */
body.wp-theme-staircase .zh_ft2_bottom p,
body.wp-theme-staircase .zh_ft2_bottom { color: #b6b2a6 !important; }
body.wp-theme-staircase .zh_ft2_bottom a { color: #d5d1c5 !important; }

/* Footer social icons — the pair now holds Facebook and Google. */
body.wp-theme-staircase .zh_ft2_social_link {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ddd9cd !important;
  border-radius: var(--dk-r) !important;
}
body.wp-theme-staircase .zh_ft2_social_link:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* Derrek's circle sits to the right of the Facebook and Google icons. The row
   ships flex with no align-items, which would stretch the image to the row's
   height; centred instead. 102px (1.7x the first 60px, at the user's request)
   against 40px icons. The source is 200x200, so this is still sharp on 2x
   screens. The transparent PNG sits straight on the dark green. */
body.wp-theme-staircase .zh_ft2_social { align-items: center; }
body.wp-theme-staircase .dk-footer-medallion {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  margin-left: 6px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

/* The footer trust bar ships cool slate #8a96a3 labels, which on the new warm
   green read as off-palette and measured 4.48:1 — just under AA at 9-10px. */
body.wp-theme-staircase .zh_ft2_footer .zh_box3_trust_brand_eyebrow,
body.wp-theme-staircase .zh_ft2_footer .zh_box3_trust_phone_label,
body.wp-theme-staircase .zh_ft2_footer .zh_box3_trust_offices_label {
  color: #b3b8ac !important;
  font-family: var(--dk-sans) !important;
}

/* ---------- 16b. Article pages (bilberry) ---------- */

/* Blog posts, /about-us/ and the legal pages — 23 of them — render through
   .bilberry-*, which wraps the whole article in a 1px grey box with a 20px
   radius. That is the boxed-card tell at full page scale, and these pages have
   no .cherry-hero to carry the theme's fixed-header clearance, so they also
   need the offset applied here. */
body.wp-theme-staircase .bilberry-article {
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding: clamp(28px, 4vw, 52px) var(--dk-gut) clamp(40px, 6vw, 80px) !important;
  font-family: var(--dk-serif) !important;
}
body.wp-theme-staircase .bilberry-inner {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
body.wp-theme-staircase .bilberry-inner-body { padding: 0 !important; }

body.wp-theme-staircase .bilberry-header {
  margin-bottom: 1.6rem !important;
  padding-top: 20px;
  border-top: 2px solid var(--dk-accent);
}
body.wp-theme-staircase .bilberry-title {
  font-family: var(--dk-sans) !important;
  font-weight: 800 !important;
  font-size: clamp(1.9rem, 4.2vw, 2.85rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.028em;
  color: var(--dk-ink) !important;
  text-wrap: balance;
}
body.wp-theme-staircase .bilberry-content,
body.wp-theme-staircase .bilberry-content p,
body.wp-theme-staircase .bilberry-content li {
  font-family: var(--dk-serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
  color: var(--dk-ink-soft) !important;
}
body.wp-theme-staircase .bilberry-content p,
body.wp-theme-staircase .bilberry-content li { max-width: 72ch; }
body.wp-theme-staircase .bilberry-content h2,
body.wp-theme-staircase .bilberry-content h3 {
  font-family: var(--dk-sans) !important;
  font-weight: 800 !important;
  color: var(--dk-ink) !important;
  letter-spacing: -0.02em;
}
body.wp-theme-staircase .bilberry-content h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.68rem) !important;
  margin: 2em 0 0.6em !important;
  padding-top: 16px;
  border-top: 1px solid var(--dk-rule-firm);
}
body.wp-theme-staircase .bilberry-content h2:first-child { margin-top: 0 !important; }
body.wp-theme-staircase .bilberry-featured-image {
  border-radius: var(--dk-r) !important;
  margin-bottom: 1.8rem;
}

/* No extra top offset here: the theme already pushes these pages down 133px,
   measured on the rendered page. Adding var(--dk-header-h) on top of that
   double-offset them by 114px. */

/* ---------- 18. Focus visibility ---------- */

body.wp-theme-staircase :focus-visible {
  outline: 2px solid var(--dk-accent);
  outline-offset: 2px;
}
.ava-whychooseus-box :focus-visible,
.zh_ft2_footer :focus-visible { outline-color: #9fbfa6; }

/* ---------- 19. Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  body.wp-theme-staircase *,
  body.wp-theme-staircase *::before,
  body.wp-theme-staircase *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ======================================================================
   Phone menu — rebuilt from scratch (Sep 29, 2026)
   Markup comes from js/dk-mobile-menu.js (every class dk-mm-*), which reads
   the links out of the Silkweaver menu. At the theme's phone breakpoint
   (768px) the theme's own toggle, nav and header extras are hidden, so the
   four legacy nav scripts have nothing visible to act on.
   ====================================================================== */
.dk-mm-toggle, .dk-mm { display: none; }

@media (max-width: 768px) {
  body.wp-theme-staircase .site-header .menu-toggle,
  body.wp-theme-staircase .site-header .main-navigation,
  body.wp-theme-staircase .site-header .dk-header-notice,
  body.wp-theme-staircase .site-header .dk-header-social { display: none !important; }

  body.wp-theme-staircase .site-header.header1 .header-nav-area {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  /* call button: icon only on a phone; the number stays as its accessible name */
  body.wp-theme-staircase .site-header.header1 .header-phone-button {
    width: 42px; height: 42px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
  }
  body.wp-theme-staircase .site-header.header1 .header-phone-button .phone-icon { width: 18px; height: 18px; }
  body.wp-theme-staircase .site-header.header1 .header-phone-button .phone-number {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  .dk-mm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--dk-rule-firm);
    border-radius: 999px;
    background: transparent;
    color: var(--dk-ink);
    font: 700 0.9rem/1 var(--dk-sans);
    letter-spacing: 0.01em;
    cursor: pointer;
  }
  .dk-mm-toggle:active { background: var(--dk-surface); }
  .dk-mm-toggle-icon { display: grid; gap: 5px; width: 18px; }
  .dk-mm-toggle-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .dk-mm-toggle-icon i:last-child { width: 12px; }

  .dk-mm:not([hidden]) { display: block; }
  .dk-mm { position: fixed; inset: 0; z-index: 100000; }
  .dk-mm-scrim {
    position: absolute; inset: 0;
    background: rgba(20, 26, 22, 0.5);
    opacity: 0;
    transition: opacity 0.24s ease;
  }
  .dk-mm-sheet {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, calc(100% - 32px));
    display: flex; flex-direction: column;
    background: var(--dk-ground);
    box-shadow: -16px 0 40px rgba(20, 26, 22, 0.22);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .dk-mm.is-open .dk-mm-scrim { opacity: 1; }
  .dk-mm.is-open .dk-mm-sheet { transform: none; }
  html.dk-mm-locked, html.dk-mm-locked body { overflow: hidden !important; }

  .dk-mm-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 20px;
    padding-top: max(12px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--dk-rule);
  }
  .dk-mm-logo img { display: block; max-height: 36px; width: auto; }
  .dk-mm-close {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: var(--dk-surface);
    color: var(--dk-ink);
    cursor: pointer;
  }

  .dk-mm-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 18px; }

  body.wp-theme-staircase .dk-mm a { text-decoration: none; }
  body.wp-theme-staircase .dk-mm .dk-mm-link,
  .dk-mm-group-head {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 17px 20px;
    border: 0;
    border-bottom: 1px solid var(--dk-rule);
    background: none;
    color: var(--dk-ink);
    font: 800 1.2rem/1.2 var(--dk-sans);
    letter-spacing: -0.012em;
    text-align: left;
    cursor: pointer;
  }
  body.wp-theme-staircase .dk-mm .dk-mm-link[aria-current="page"] { color: var(--dk-accent); }
  .dk-mm-count {
    font: 700 0.72rem/1 var(--dk-sans);
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--dk-accent-tint);
    color: var(--dk-accent-deep);
  }
  .dk-mm-chev {
    margin-left: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--dk-ink-soft);
    border-bottom: 2px solid var(--dk-ink-soft);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .dk-mm-group-head[aria-expanded="true"] .dk-mm-chev { transform: translateY(2px) rotate(225deg); }
  .dk-mm-group-head[aria-expanded="true"] { border-bottom-color: transparent; }

  .dk-mm-list {
    list-style: none;
    margin: 0 !important;
    padding: 2px 14px 14px !important;
    border-bottom: 1px solid var(--dk-rule);
  }
  .dk-mm-list--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; }
  .dk-mm-list[hidden] { display: none; }
  .dk-mm-list li { margin: 0; }
  body.wp-theme-staircase .dk-mm .dk-mm-sublink {
    display: block;
    padding: 11px 10px 11px 12px;
    border-radius: var(--dk-r);
    border-left: 2px solid transparent;
    color: var(--dk-ink-soft);
    font: 600 1rem/1.3 var(--dk-sans);
  }
  body.wp-theme-staircase .dk-mm .dk-mm-sublink:active { background: var(--dk-surface); }
  body.wp-theme-staircase .dk-mm .dk-mm-sublink[aria-current="page"] {
    background: var(--dk-accent-tint);
    border-left-color: var(--dk-accent);
    color: var(--dk-accent-deep);
  }

  .dk-mm-foot {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: var(--dk-surface);
    border-top: 1px solid var(--dk-rule);
    text-align: center;
  }
  .dk-mm-notice {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 12px !important;
    font: 700 0.72rem/1 var(--dk-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dk-ink-mute);
    max-width: none;
  }
  .dk-mm-notice span { width: 7px; height: 7px; border-radius: 50%; background: var(--dk-accent); }
  body.wp-theme-staircase .dk-mm .dk-mm-call {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 18px;
    border-radius: var(--dk-r);
    background: var(--dk-call-blue);
    color: #fff;
    font: 800 1.05rem/1 var(--dk-sans);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
  }
  body.wp-theme-staircase .dk-mm .dk-mm-call:active { background: var(--dk-call-blue-deep); }
  body.wp-theme-staircase .dk-mm .dk-mm-text {
    display: inline-block;
    margin-top: 10px;
    color: var(--dk-ink-soft);
    font: 600 0.88rem/1 var(--dk-sans);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .dk-mm-social { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
  body.wp-theme-staircase .dk-mm .dk-mm-social-link {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--dk-ground);
    border: 1px solid var(--dk-rule);
    color: var(--dk-ink-soft);
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .dk-mm-scrim, .dk-mm-sheet, .dk-mm-chev { transition: none; }
}

/* ---------- Accessibility (Sep 29, 2026) ---------- */
/* Footer legal links sat in running text at 1.38:1 against it with no
   underline, so they were only distinguishable by colour (WCAG 1.4.1). */
body.wp-theme-staircase .zh_ft2_legal_links a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Footer disclaimer removed (Oct 10, 2026): the legal line is now the only
   item in the bottom bar, so hold it on the right where it sat before. */
@media (min-width: 769px) {
  body.wp-theme-staircase .zh_ft2_bottom_grid .zh_ft2_legal_links {
    margin-left: auto;
  }
}

/* ---------- Photo hero: tighter top on desktop (Sep 29, 2026) ----------
   Header-to-photo gap halved at desktop widths: the grid's top padding
   72px -> 36px. On the service pages the landscape photo is shorter than the
   text and was centred, which left it 125-205px under the header; it now sits
   at the top of its column, so every photo hero has the same 36px gap.
   Phones (photo stacked first) are untouched. */
@media (min-width: 861px) {
  body.wp-theme-staircase .dk-hero-grid:not(.dk-hero-grid--text) { padding-top: clamp(18px, 2.75vw, 36px); }
  body.wp-theme-staircase .dk-hero-grid:not(.dk-hero-grid--text) > .dk-hero-media { align-self: start; }
}

/* Service pages (Sep 29, 2026): the two content-bay image panels now hold the
   Southern Indiana landscapes instead of the theme's star fallback; the
   inline #f5f5f5 panel goes, as on the homepage, so the band's beige runs
   through. */
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389) .content-bay-1-image-container,
body:is(.page-id-4382, .page-id-4383, .page-id-4384, .page-id-4385, .page-id-4386, .page-id-4387, .page-id-4388, .page-id-4389) .content-bay-2-image-container { background: transparent !important; }

/* ---------- Homepage band patterns (Sep 29, 2026) ----------
   Between the reviews band and the closing CTA, sections alternate between the
   two patterns — the scattered insects (.dk-bugs--band) and the pest row
   (.dk-pestrow) — with a few left plain. The quote form keeps its own insects.
   Background only: the section becomes its own stacking context and the
   pattern sits at z-index -1 inside it, so it paints over the section's
   background and under all of its content without adding any height or
   repositioning anything. Each section tints the pattern one step off its
   own ground through --dk-bug-color. */
body.home section:has(> .dk-bugs--band),
body.home section:has(> .dk-pestrow) { position: relative; isolation: isolate; }
body.home .dk-bugs--band { z-index: -1; }
body.home .dk-pestrow {
  position: absolute;
  left: var(--dk-gut);
  right: var(--dk-gut);
  bottom: 0;
  height: clamp(70px, 11.5vw, 180px);
  z-index: -1;
  background-color: var(--dk-bug-color);
  -webkit-mask: url('/wp-content/themes/staircase/img/dk-bugs/pest-row.webp') center bottom / contain no-repeat;
          mask: url('/wp-content/themes/staircase/img/dk-bugs/pest-row.webp') center bottom / contain no-repeat;
  pointer-events: none;
}
body.home .kristina-cta-box         { --dk-bug-color: #e0d7c5; }   /* on #ebe4d6 */
body.home .content-bay-1-box        { --dk-bug-color: #e7dfcf; }   /* on #f2ece1 */
body.home .content-lake-box         { --dk-bug-color: #eee7da; }   /* on #faf7f1 */
body.home .paragon-services-section { --dk-bug-color: #eee7da; }   /* on #faf7f1 */
body.home .serena-faq-box           { --dk-bug-color: #e7dfcf; }   /* on #f2ece1 */
body.home .ava-whychooseus-box      { --dk-bug-color: #29412f; }   /* on #1f3324 */

/* ======================================================================
   Sticky bottom call banner — mobile only (Sep 29, 2026)
   Copied from the vurdpress MobileCtaBanner on augustapestcontrol.net
   (styling and rules unchanged). Markup + scroll rules: js/dk-sticky-cta.js.
   Slid off-screen until the script adds .mcb_visible (scrolled past 150px);
   the class is never removed for the rest of the page view.
   ====================================================================== */
.mcb_banner { display: none; }   /* desktop: never shown */

@media (max-width: 768px) {
  .mcb_banner {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background-color: #6780a6;
    padding: 16px 14px;
    text-align: center;
    text-decoration: none;
    font-family: ui-sans-serif, system-ui, sans-serif;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .mcb_banner.mcb_visible { transform: translateY(0); }
  body.wp-theme-staircase a.mcb_banner,
  body.wp-theme-staircase a.mcb_banner:hover { color: #fff; text-decoration: none; }

  .mcb_line1 {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    text-align: center;
  }
  .mcb_line2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.15;
    text-align: center;
  }
  .mcb_dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #b5f9b2;
  }
}

/* ---------- Long-form content section (ant-control pilot, Sep 29, 2026) ----------
   The two side-by-side content-bay sections and the boxed content-lake below
   them, merged into one column 1.5x the old 540px text column (810px), with
   the two photos floated inside the text. Typography comes from
   .content-bay-1-content, which the inner wrapper also carries. */
body.wp-theme-staircase .dk-longform {
  background: var(--dk-ground);   /* the FAQ below is --dk-surface */
  border-top: 1px solid var(--dk-rule);
  padding: clamp(44px, 6vw, 84px) var(--dk-gut);
}
body.wp-theme-staircase .dk-longform-inner {
  max-width: 810px;
  margin-inline: auto;
  display: flow-root;            /* contains the floated photos */
}
/* the site-wide 68ch measure would stop lines short of the wider column */
body.wp-theme-staircase .dk-longform-inner p { max-width: none; margin: 0 0 1em; }
body.wp-theme-staircase .dk-longform-inner h2 { margin-top: 1.5em; }
body.wp-theme-staircase .dk-longform-inner > h2:first-child { margin-top: 0; }

body.wp-theme-staircase .dk-longform-fig {
  width: 42%;
  margin: 6px 0 18px;
}
body.wp-theme-staircase .dk-longform-fig--right { float: right; margin-left: 30px; }
body.wp-theme-staircase .dk-longform-fig--left  { float: left;  margin-right: 30px; }
body.wp-theme-staircase .dk-longform-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--dk-r);
}
@media (max-width: 760px) {
  body.wp-theme-staircase .dk-longform-fig,
  body.wp-theme-staircase .dk-longform-fig--right,
  body.wp-theme-staircase .dk-longform-fig--left { float: none; width: 100%; margin: 8px 0 22px; }
  body.wp-theme-staircase .dk-longform-fig img { aspect-ratio: 3 / 2; }
}

/* ---------- In-text link colour (Sep 30, 2026) ----------
   Links inside running copy only: town/service content-bay-1/-2 and
   content-lake text, the long-form column, and article bodies (posts, About,
   legal). Nav, footer, cards, post titles, buttons and the HTML sitemap list
   keep their own colours. Class-less anchors only, so a styled button that
   lands in a paragraph is left alone. */
body.wp-theme-staircase .content-bay-1-content :is(p, li) a:not([class]),
body.wp-theme-staircase .content-bay-2-content :is(p, li) a:not([class]),
body.wp-theme-staircase .article-content :is(p, li) a:not([class]),
body.wp-theme-staircase .bilberry-content :is(p, li) a:not([class]):not(.ruplin-sitemap *) {
  color: #009bff !important;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
body.wp-theme-staircase .content-bay-1-content :is(p, li) a:not([class]):hover,
body.wp-theme-staircase .content-bay-2-content :is(p, li) a:not([class]):hover,
body.wp-theme-staircase .article-content :is(p, li) a:not([class]):hover,
body.wp-theme-staircase .bilberry-content :is(p, li) a:not([class]):not(.ruplin-sitemap *):hover {
  color: #007ccc !important;
}