/* SEO article styles moved unchanged from pineverse.css. */
/* ══════════════════════════════════════════════════════
   SEO ARTICLE  —  Figma 357:1139 (1440 × 3279)

     head band     0 – 368    #021717
     banner      368 – 826    1440 × 458
     article     917 – 1469   1095 column at x=169
     phone      1760 – 2583   1440 × 823
══════════════════════════════════════════════════════ */
.seo-page {
  --seo-ink:  #021717;
  --seo-body: #333333;
  --seo-col:  1095px;

  background: #ffffff;
  color: var(--seo-body);
  overflow-x: clip;
}

/* ── head band ── */
.seo-head {
  background: var(--seo-ink);
  /* 187 + 94 (the title block) + 87 = 368 */
  padding: 187px var(--pv-gutter) clamp(40px, 6.04vw, 87px);
}

.seo-title {
  /* the widest H1 in the set: Figma 366:5874 title frame is 1093 wide
     ("Affordable Self Storage Solutions Near You" on one line at 56px).
     Relocations' shorter H1 measures 885 and is unaffected. */
  max-width: 1093px;
}

/* 357:1500 — 12 / 18px, chevron 20, 5px apart */
/* `flex`, not `inline-flex`: an inline box would sit on a line box and the
   parent's leading would push the H1 5px past its Figma y */
.seo-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  transition: color 0.24s ease, gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.seo-back:hover { color: #ffffff; gap: 11px; }
.seo-back:focus-visible {
  outline: 2px solid #a7fc00;
  outline-offset: 4px;
  border-radius: 4px;
}

.seo-back-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.seo-back-icon svg { width: 100%; height: 100%; display: block; }

/* 357:1503 — 56px, white, 74/56 = 1.32 */
.seo-h1 {
  margin: 0;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(30px, 3.89vw, 56px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #ffffff;
}

/* ── banner — 357:1482 ── */
.seo-banner,
.seo-phone {
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--seo-ink);
}
.seo-banner img,
.seo-phone img {
  display: block;
  width: 100%;
  height: auto;
}
.seo-banner img { aspect-ratio: 1440 / 458; object-fit: cover; }
.seo-phone  img { aspect-ratio: 1440 / 823; object-fit: cover; }

/* ── article — 357:1512 ── */
.seo-content {
  /* 91 below the banner (826 → 917), 291 above the phone (1469 → 1760) */
  padding: clamp(48px, 6.32vw, 91px) var(--pv-gutter) clamp(96px, 20.21vw, 291px);
}

.seo-content > * {
  width: 100%;
  max-width: var(--seo-col);
  margin-inline: auto;
}

/* 357:1512 — 60 between the blocks */
.seo-block + .seo-cols,
.seo-cols + .seo-block { margin-top: clamp(36px, 4.17vw, 60px); }

/* 357:1514 — 30 between the headline and the copy */
.seo-block > * + * { margin-top: clamp(18px, 2.09vw, 30px); }

/* 357:1518 — Kaisei Decol 32, 46/32 = 1.44 */
.seo-h2 {
  margin: 0;
  max-width: 1043px;
  font-family: 'Kaisei Decol', 'Behind The Nineties', Georgia, serif;
  font-size: clamp(23px, 2.23vw, 32px);
  font-weight: 400;
  line-height: 1.44;
  color: var(--seo-body);
}

/* 357:1522 / 357:1525 — Kaisei Decol 24 */
.seo-h3 {
  margin: 0;
  font-family: 'Kaisei Decol', 'Behind The Nineties', Georgia, serif;
  font-size: clamp(19px, 1.67vw, 24px);
  font-weight: 400;
  line-height: 1.46;
  color: var(--seo-body);
}

/* 357:1519 — Host Grotesk Light 16 / 24 */
.seo-copy {
  margin: 0;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(14.5px, 1.12vw, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--seo-body);
}

/* 357:1520 — 532 / 30 / 533, headings and copy aligned across the columns */
.seo-cols {
  display: grid;
  grid-template-columns: minmax(0, 532fr) minmax(0, 533fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 2.09vw, 30px);
  row-gap: clamp(18px, 2.09vw, 30px);
  align-items: start;
}

.seo-col {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: clamp(18px, 2.09vw, 30px);
  min-width: 0;
}
@supports not (grid-template-rows: subgrid) {
  .seo-col { grid-row: auto; grid-template-rows: auto auto; }
}

/* the frame sets the headings at 420 inside a 532 column */
.seo-col .seo-h3 { max-width: 420px; }

/* ── where to next (an addition — the frame ends on the image) ── */
.seo-next {
  margin-top: clamp(36px, 4.17vw, 60px);
  padding-top: clamp(28px, 3.3vw, 44px);
  border-top: 1px solid rgba(2, 23, 23, 0.10);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.seo-next-btn {
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border: 1px solid rgba(2, 23, 23, 0.18);
  border-radius: 56px;
  color: var(--seo-ink);
  text-decoration: none;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(13.5px, 1.04vw, 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 0.28s ease, color 0.28s ease,
              border-color 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.seo-next-btn svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.seo-next-btn:hover { border-color: var(--seo-ink); transform: translateY(-2px); }
.seo-next-btn:hover svg { transform: translateX(4px); }

.seo-next-btn--primary {
  border-color: var(--seo-ink);
  background: var(--seo-ink);
  color: #a7fc00;
}
.seo-next-btn--primary:hover { background: #04302f; }

/* ══════════════════════════════════════════════════════
   SEO ARTICLE — RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .seo-head { padding-top: clamp(128px, 13vw, 187px); }
}

@media (max-width: 860px) {
  .seo-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .seo-col  { grid-row: auto; grid-template-rows: none; }
  .seo-col .seo-h3 { max-width: none; }
  /* the banner is a wide crop; give it more height so the crew stays readable */
  .seo-banner img { aspect-ratio: 16 / 9; }
  .seo-phone  img { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  .seo-head { padding-top: 120px; padding-bottom: 40px; }
  .seo-banner img { aspect-ratio: 3 / 2; }
  .seo-phone  img { aspect-ratio: 1 / 1; }
  .seo-next-btn { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-back, .seo-next-btn, .seo-next-btn svg { transition-duration: 0.01ms !important; }
}