* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;

  /* The header is position:sticky, so an anchor jump would otherwise stop with the target
     zone's heading tucked underneath it. scroll-padding-top holds the scroll short by the
     header's height. It affects where scrolling stops and nothing about layout, and it fixes
     the top menu's links as well as the buttons that jump to a zone. Tune with the header:
     18px padding top and bottom around a ~22px line. */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #1f2937;
  background: #ffffff;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility Classes */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-large {
  margin-bottom: 40px;
}

/* Header */

.seo-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.seo-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.seo-brand {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
}

.seo-menu {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.seo-menu a {
  color: #334155;
  text-decoration: none;
  font-weight: 600;
}

.seo-menu a:hover {
  color: #0f766e;
}

/* Zones */

.seo-zone {
  padding: 36px 24px;
}

.seo-container {
  max-width: 1180px;
  margin: 0 auto;
}

.seo-welcome {
  background: linear-gradient(135deg, #0f766e, #0f172a);
  color: #ffffff;
  padding: 92px 24px;
  text-align: center;
}

.seo-welcome h1,
.seo-welcome h2 {
  font-size: clamp(34px, 6vw, 64px);
  margin: 0 0 18px;
}

.seo-welcome p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 20px;
}

/* Typography */

.seo-zone-collapse-top {
  padding-top: 0;
}

.seo-heading {
  margin: 0 0 18px;
  color: #0f172a;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
}

.seo-paragraph {
  margin: 0 0 22px;
  font-size: 18px;
}

.seo-divider {
  width: 100%;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    #d1d5db 15%,
    #9ca3af 50%,
    #d1d5db 85%,
    transparent 100%
  );
}

/* Page Content Grid */

/* One grid for the whole article: the left cell stacks every non-hero zone in order, the right
   cell holds the keyword column. One row, two cells — so the column stands beside the ARTICLE
   rather than beside a single zone, and the row grows as zones are added. */
.seo-content-band {
  padding: 0 24px;
}

.seo-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: 36px;
  /* stretch, not start: the row's height is the article's, and the aside fills it. */
  align-items: stretch;
}

/* No keyword column on this grid — collapse to one track rather than strand the article in 58%
   of the width beside dead space. */
.seo-content-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.seo-content-main {
  min-width: 0;
}

/* THE LOAD-BEARING PART. An auto-height grid row is as tall as its tallest cell's content, and
   this cell's content is the whole keyword file — ~107,000px. Left in flow it would define the
   row and drag the page back to six figures, which is exactly the bug this column started with.

   Taking the card out of flow (absolute inside a relative cell) means it contributes NOTHING to
   intrinsic sizing: the row is measured from the left cell alone, and inset:0 then stretches the
   card to whatever that height turned out to be. Height flows from the row to the card, never
   back. This is why the naive "just let the cells grow" version cannot work. */
.seo-content-aside {
  min-width: 0;
  position: relative;
}

.seo-content-aside .seo-keyword-card {
  position: absolute;
  inset: 0;
}

/* Inside the grid the band supplies the side padding and .seo-container the max-width, so a zone
   drops its own horizontal padding; the vertical rhythm stays. */
.seo-zone--in-grid {
  padding-left: 0;
  padding-right: 0;
}

/* Cards / Images */

.seo-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  margin-bottom: 26px;
}

.seo-image-card {
  overflow: hidden;
  border-radius: 18px;
  margin-bottom: 26px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.seo-image-card img {
  width: 100%;
}

/* Keyword Column */

.seo-keyword-card {
  /* The card holds the whole keyword file — a few hundred links is ~15,000px of content. Nothing
     here may depend on that number: the grid row is as tall as its tallest item, so an uncapped
     card became the page's height and pushed the following zone far below the article. The cap is
     viewport-relative and lives in CSS rather than in script, so it holds on first paint and on a
     page where the script never runs. The card carries no height of its own any more: it is
     stretched by .seo-content-aside to the height of the article beside it, and this flex column
     is what makes the links area — not the title — absorb that height and scroll.

     Column layout so the cap reaches the links area. Note the chain runs card > .seo-keyword-list
     > (.seo-keyword-title + .seo-keyword-links) — the wrapper is NOT optional scaffolding, and
     every element in that chain needs min-height:0 or the shrink stops there. The title is a
     fixed-size item and the links area is the one that shrinks, which keeps the heading in view
     while the URLs scroll under it. */
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

/* The card's ONLY child. keywordsColumn.php wraps the title and the links in this element, so it
   — not .seo-keyword-links — is what the card's flex layout actually sizes. Left unstyled it was a
   plain block carrying the default min-height:auto, which refuses to shrink below its ~15,000px of
   content: the card's max-height was overrun by its own child and the column rendered at full
   natural height, taking the grid row and the rest of the page with it.

   Continuing the flex chain through this wrapper is what makes the cap above take effect at all,
   and what lets the flex rules on .seo-keyword-title and .seo-keyword-links below do anything —
   until this existed, both were inert declarations on children of a plain block. */
.seo-keyword-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.seo-keyword-title {
  /* Never shrinks, never scrolls — it is the heading the list scrolls beneath. */
  flex: 0 0 auto;
  margin-bottom: 18px;
  text-align: center;
}

.seo-keyword-title a {
  display: block;
  background: #0f766e;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
}

/* The scroll container. min-height:0 is the load-bearing line: a flex item refuses to shrink
   below its content by default, so without it the list keeps its full 15,000px and drags the card
   straight back past its max-height. Every URL stays in the DOM and stays reachable — this
   scrolls the list, it does not clip it.

   overscroll-behavior stops a wheel gesture over the list from being swallowed by it: a flick
   moves through well under 1% of a list this long, so the page would simply appear frozen. */
.seo-keyword-links {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.seo-keyword-links p {
  margin: 0;
}

.seo-keyword-links a {
  display: block;
  padding: 10px 0;
  color: #334155;
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
}

.seo-keyword-links a:hover {
  color: #0f766e;
}

/* Buttons / Phone */

.seo-button,
.seo-phone-link {
  display: inline-block;
  background: #0f766e;
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}

.seo-button:hover,
.seo-phone-link:hover {
  background: #115e59;
}

/* Contact */

.seo-contact {
  background: #f8fafc;
}

/* Footer */

.seo-footer {
  background: #0f172a;
  color: #ffffff;
  text-align: center;
  padding: 30px 24px;
}

/* Mobile */

@media (max-width: 900px) {
  .seo-header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .seo-content-layout {
    grid-template-columns: 1fr;
  }

  .seo-content-band {
    padding: 0;
  }

  /* The zone's own side padding comes back once it is no longer inside the band. */
  .seo-zone--in-grid {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* The keyword column is desktop-only by design. It stays in the HTML — so the links remain
     in the source for crawlers — but is not part of the phone experience. */
  .seo-content-aside {
    display: none;
    position: static;
  }

  /* Back into flow, so a re-enabled column at this width lays out as an ordinary block. */
  .seo-content-aside .seo-keyword-card {
    position: static;
    inset: auto;
  }

  /* Reset the desktop cap too, so the column lays out as an ordinary block if a site ever
     re-enables it at this width. The wrapper resets with the card — leaving it a flex item
     that shrinks, with the cap above it gone, would cap nothing while still constraining the
     list for no reason. */
  .seo-keyword-card {
    display: block;
    height: auto;
    max-height: none;
  }

  .seo-keyword-list {
    display: block;
    flex: 0 1 auto;
    min-height: auto;
  }

  /* A height/width configured for the desktop keyword column is emitted inline, which would
     otherwise beat this stylesheet and leave a fixed-height scroll box on a phone. */
  .seo-keyword-links {
    height: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}
/* ── Embedded lead form ─────────────────────────────────────────────────────────
   The form's own look comes from its SurveyJS theme, so these rules only handle the
   container and the states around it. Deliberately minimal: anything opinionated here
   would fight the theme the form was published with. */
.seo-formio {
  margin: 0 0 24px;
}

.seo-formio__loading {
  padding: 24px 0;
  color: #64748b;
  font-size: 15px;
}

/* Success and failure are the survey's own completed page (completedHtml plus SurveyJS's
   save-state text), so there is nothing to style here for either. */

/* [hidden] loses to a display value from the theme without this. */
.seo-formio [hidden] {
  display: none;
}

/* Deliberate vertical space between blocks. The height is set inline per block; this only makes
   sure nothing the theme does to generic divs gives it a life of its own. */
.seo-spacer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  flex: none;
}

/* ── Locations We Serve ───────────────────────────────────────────────────────
   A band below the footer, on every page, listing one city per province/state.

   Pills rather than a list because the set is small and scannable, and 999px is already this
   site's button shape — the outline treatment keeps them from competing with the teal CTA
   buttons in the content above. flex-wrap does the responsive work: the pills reflow onto as
   many rows as the width needs, with no breakpoint to maintain. */
.seo-locations {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 32px 24px 40px;
}

.seo-locations__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.seo-locations__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.seo-locations__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.seo-location-pill {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #0f766e;
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}

.seo-location-pill:hover,
.seo-location-pill:focus {
  background: #0f766e;
  color: #ffffff;
}

@media (max-width: 600px) {
  .seo-locations { padding: 24px 16px 32px; }
  .seo-locations__title { font-size: 18px; }

  /* Tighter on a phone so more than one pill fits per row. */
  .seo-locations__list { gap: 8px; }
  .seo-location-pill { padding: 9px 16px; font-size: 13px; }
}