* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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