/* Grizzly Beam — /services/local-seo/
   v2 content rebuild, 2026-09-21.
   Shared: .svc-hero*, .svc-plus, .svc-closer*, .svc-sec*, .svc-cards/.svc-card,
   .svc-check, .svc-steps/.svc-step, .svc-faq/.svc-fq → components.css
   Page-only below: the hero, the tab set, and the two sections with their own size. */

/* ---------- 1 · Hero ---------- */
.seo-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 5 · Four places we go to work (tabs) ----------
   Four long explanations, one at a time. A card grid would put four paragraphs of
   this length side by side and none of them would get read; the tab set shows one
   and keeps the other three one click away.

   The selected tab is marked twice: the label goes to full ink, and an amber rule
   sits under it. Color alone is never the signal (WCAG 1.4.1), and aria-selected
   carries the same state for anyone not looking at it. */
.seo-tabs { margin-top: 4rem; }
.seo-tabs__nav {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid rgba(22, 24, 28, 0.18);
}
.seo-tabs__btn {
  position: relative;
  font-family: var(--f-mono);
  font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tx-g);
  padding: 1.4rem 2rem 1.4rem 0; margin-right: 2rem;
  transition: color 0.25s ease;
}
.seo-tabs__btn::after {
  content: ""; position: absolute; left: 0; right: 2rem; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.seo-tabs__btn:hover { color: var(--ink); }
.seo-tabs__btn[aria-selected="true"] { color: var(--ink); }
.seo-tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }

.seo-tabs__panels { margin-top: 3.4rem; }
/* The panel is focusable (tabindex 0) so the keyboard can reach a long block of
   text; without :focus-visible it would show the ring on every mouse click too. */
.seo-tabs__panel { outline: none; }
.seo-tabs__panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; box-shadow: 0 0 0 6px var(--paper); }
.seo-tabs__title { font-size: 2.53rem; line-height: 1.1; letter-spacing: -0.005em; font-weight: var(--w-h2); }   /* brand: H2 scale */
.seo-tabs__body { color: var(--tx-g); margin-top: 1.4rem; max-width: 46rem; font-size: 1.45rem; line-height: 1.6; }
/* A tall panel followed by a short one made the section jump on every click.
   min-height holds the tallest of the four, measured at 1440. */
.seo-tabs__panels { min-height: 14rem; }

/* ---------- 4 · Why bother with local SEO? (ink + beam field) ----------
   Second field on the page, seven sections above .seo-ai, with four light bands
   between them — so neither field's bottom edge lands mid-dark. */
.seo-worth { padding-block: 10rem; }

/* ---------- 7 · AI answers (ink + beam field) ----------
   Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css;
   .svc-sec--beam only makes the section the positioning context and clips the beams.

   A single ink block between two light sections, so the field's hard bottom edge
   lands where the dark ends. */
.seo-ai { padding-block: 10rem; }
.seo-ai .svc-sec__title { margin-bottom: 3.2rem; }

/* No JS: the tab list does nothing, and three of the four panels would stay [hidden]
   with no way to reach them. So without .has-js (set by core.js) the nav goes and all
   four panels stack — the same content, just all at once. Same escape hatch
   html:not(.has-js) already provides for the pinned sections elsewhere on the site. */
html:not(.has-js) .seo-tabs__nav { display: none; }
html:not(.has-js) .seo-tabs__panel[hidden] { display: block; }
html:not(.has-js) .seo-tabs__panel + .seo-tabs__panel { margin-top: 3.4rem; }
html:not(.has-js) .seo-tabs__panels { margin-top: 0; }

/* ---------- 9 · How it runs ---------- */
.seo-runs__note { margin-top: 4rem; max-width: 46rem; }

/* ---------- 13 · Closer ---------- */
.seo-closer { padding-block: 10rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .seo-tabs { margin-top: 3.4rem; }
  .seo-tabs__panels { margin-top: 2.8rem; min-height: 0; }
  .seo-ai, .seo-worth { padding-block: 7rem; }
}
@media (max-width: 767px) {
  /* Four mono labels do not fit on one row on a phone. The nav becomes a stack and
     the amber rule moves to the left edge, where it reads as a marker rather than
     as an underline that has lost its word. */
  .seo-tabs__nav { flex-direction: column; border-bottom: none; }
  .seo-tabs__btn {
    text-align: left; padding: 1.2rem 0 1.2rem 1.4rem; margin-right: 0;
    border-bottom: 1px solid rgba(22, 24, 28, 0.14);
  }
  .seo-tabs__btn::after { left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .seo-tabs__btn[aria-selected="true"]::after { transform: scaleY(1); }
  .seo-tabs__title { font-size: 2rem; }
  .seo-tabs__body { font-size: 1.35rem; }
  .seo-ai, .seo-worth { padding-block: 6rem; }
  .seo-closer { padding-block: 6rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .seo-tabs__btn::after { transition: none; }
}