* {
  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;
}

/* ── Country selector ────────────────────────────────────────────────────────────────────────
   Compact pills in the header. Wraps rather than stretching the header when a third country is
   configured, and no pill carries the active style until js/site.js decides which one — the
   served HTML is deliberately identical for every visitor. */
.seo-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seo-country-pill {
  padding: 7px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
}

.seo-country-pill:hover { border-color: #0f766e; color: #0f766e; }

/* Focus must stay visible: these are the only header controls reachable only by keyboard. */
.seo-country-pill:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

/* Selected. Also reflected as aria-pressed="true", which is what a screen reader announces —
   the colour alone would say nothing to anyone not looking at it. */
.seo-country-pill--active {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

/* Text that is off-screen but still TEXT: read by screen readers, selected by "select all", and
   counted as part of the link's text content. The clip technique is used deliberately in place of
   display:none, visibility:hidden, the hidden attribute or aria-hidden — every one of those drops
   the text out of the accessibility tree, which is the opposite of the intent. The 1px box plus
   clip is what keeps it out of the visual layout without taking it out of the document. */
.seo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Trending ────────────────────────────────────────────────────────────────────────────────
   The card's only child, so it takes over the flex chain .seo-keyword-list used to carry: the
   same flex:1 1 auto and min-height:0 are required here, or the card overruns its height cap
   exactly as it did before that wrapper was styled.

   Hierarchy is <details>/<summary>, collapsed at rest. No script runs here and none is needed:
   every city link is in the served HTML whether or not a topic is ever opened. */
.seo-trending {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.seo-trending__title {
  flex: 0 0 auto;
  margin: 0 0 18px;
  background: #0f766e;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
}

/* The scroll container — see .seo-keyword-links for why min-height:0 is load-bearing. */
.seo-trending__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.seo-trending__topic > summary,
.seo-trending__country > summary,
.seo-trending__region > summary {
  cursor: pointer;
  padding: 10px 0;
  color: #334155;
  font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
  list-style-position: inside;
}

.seo-trending__topic > summary:hover,
.seo-trending__country > summary:hover,
.seo-trending__region > summary:hover {
  color: #0f766e;
}

/* Each level steps in, so depth is readable without a connector or a bullet. */
.seo-trending__country,
.seo-trending__region {
  padding-left: 14px;
}

.seo-trending__country > summary,
.seo-trending__region > summary {
  font-weight: 600;
  font-size: 14px;
}

.seo-trending__cities {
  padding-left: 14px;
}

/* Country-aware presentation (applied by js/site.js; the server renders every branch).
   [hidden] is honoured by the UA stylesheet, but these elements carry layout rules of their
   own, so it is stated explicitly — a branch that stayed visible here would be the active
   country's tree showing another country's cities. */
.seo-trending [hidden] { display: none !important; }

/* The chosen country's own disclosure: opened and with its label suppressed, so its regions
   read as though they hang straight off the topic. The node itself is untouched in the DOM. */
.seo-trending__country--promoted > summary { display: none; }
.seo-trending__country--promoted { padding-left: 0; }

/* Shown only when the chosen country has no geography in this tree at all. */
.seo-trending__nocountry {
  margin: 0.5rem 0 0;
  padding: 10px 0;
  font-size: 13px;
  color: #64748b;
  font-style: italic;
}

/* Styled by position rather than by a class on every anchor: on a 1,300-page home page that one
   attribute would add ~37 KB to the served HTML for no behavioural gain. */
.seo-trending__cities a {
  display: block;
  padding: 8px 0;
  color: #334155;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid #eef2f7;
}

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

/* The page the visitor is currently on. Also carries aria-current="page", which is what a
   screen reader announces — the colour and the bar are for everyone else. */
.seo-trending__cities a[aria-current="page"] {
  color: #0f766e;
  font-weight: 700;
  background: #f0fdfa;
  border-left: 3px solid #0f766e;
  padding-left: 8px;
  margin-left: -11px;
}

.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-country-pill { padding: 6px 12px; font-size: 12.5px; }

  .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;
}

/* One block per country. The gap separates countries from each other; the pills inside keep
   their own tighter spacing, so Canada's provinces read as one set and the next country's as
   another without a rule or a border between them. */
.seo-locations__country + .seo-locations__country {
  margin-top: 24px;
}

/* A label, not a link — the country has no page of its own to point at. */
.seo-locations__country-name {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #475569;
}

.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; }
  .seo-locations__country + .seo-locations__country { margin-top: 20px; }
  .seo-locations__country-name { font-size: 14px; margin-bottom: 10px; }

  /* 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; }
}