/**
 * SEO Page parent — layout deltas on cloned sibling sections.
 * Matches Prism - Seo Page Parent (Figma 3318:101).
 */

.acf-seo-page-parent.alignfull,
.acf-seo-page-parent.alignwide {
  max-width: none;
  width: 100%;
}

.acf-seo-page-parent .acf-hero__container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--block-gap);
}

.acf-seo-page-parent .acf-hero__content {
  flex: 1 1 28rem;
  /* 900px — wider than the shared hero column (46.0625rem). Desktop only. */
  max-width: 56.25rem;
}

/* Beat the shared hero h1 cap (600px) so the title fills the 900px column. */
.acf-seo-page-parent .acf-hero h1.acf-hero__title,
.entry-content .acf-seo-page-parent .acf-hero h1.acf-hero__title,
.wp-block-post-content .acf-seo-page-parent .acf-hero h1.acf-hero__title,
.editor-styles-wrapper .acf-seo-page-parent .acf-hero h1.acf-hero__title {
  max-width: 100%;
}

.acf-seo-page-parent .acf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--block-content-gap);
}

.acf-seo-page-parent .acf-hero__call {
  color: var(--color-light);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.acf-seo-page-parent .acf-hero__call:hover {
  color: var(--color-light);
  text-decoration: underline;
}

.acf-seo-page-parent .acf-hero__list {
  margin: var(--block-content-gap) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acf-seo-page-parent .acf-hero__list-item {
  position: relative;
  margin: 0;
  padding-left: var(--space-sm);
  color: inherit;
}

.acf-seo-page-parent .acf-hero__list-item::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.acf-seo-page-parent .acf-hero__stat {
  flex: 0 0 auto;
  max-width: 14rem;
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-brand-cyan);
  /* Figma: #1B2A34 at 100% — brand slate, not a navy wash. */
  background-color: var(--color-brand-slate);
}

.acf-seo-page-parent .acf-hero__stat-value {
  margin: 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-brand-cyan);
}

.acf-seo-page-parent .acf-hero__stat-label {
  margin: 0.25rem 0 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
}

/* Intro is copy-only. Center the 48rem column in the wide container. */
.acf-seo-page-parent .acf-intro-split__container.container-wide {
  display: flex;
  justify-content: center;
}

.acf-seo-page-parent .acf-intro-split__content {
  max-width: 48rem;
  /* Figma Container item spacing — 32px between title, list, rule, closer, CTA. */
  gap: 2rem;
}

/* WYSIWYG Bold in intro copy — see typography.css (bolder vs light weight). */
.acf-seo-page-parent .acf-intro-split__text strong,
.acf-seo-page-parent .acf-intro-split__text b {
  font-weight: var(--font-weight-bold);
}

/* Figma Blue CTA is content-width and left-aligned, not stretched. */
.acf-seo-page-parent .acf-intro-split__button {
  align-self: flex-start;
}

.acf-seo-page-parent .acf-intro-split__list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.acf-seo-page-parent .acf-intro-split__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-left: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.acf-seo-page-parent .acf-intro-split__list-item::before {
  display: none;
}

.acf-seo-page-parent .acf-seo-check {
  flex: 0 0 auto;
  line-height: 0;
  margin-top: 0.3rem;
  color: var(--color-brand-cyan);
}

.acf-seo-page-parent .acf-seo-check .prism-inline-svg,
.acf-seo-page-parent .acf-seo-check svg {
  display: block;
  width: 1rem;
  height: auto;
}

/* In-flow under the list — shared __divider is absolute at the section bottom. */
.acf-seo-page-parent .acf-intro-split .acf-intro-split__divider {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: none;
}

/* Figma closer: cyan → slate horizontal fill, bold 16. Token + clip match .heading-accent-gradient. */
.acf-seo-page-parent .acf-intro-split__closing,
.acf-seo-page-parent .acf-intro-split__closing p {
  font-weight: var(--font-weight-bold);
  background-image: var(--gradient-text-cyan-slate);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
  .acf-seo-page-parent .acf-intro-split__closing,
  .acf-seo-page-parent .acf-intro-split__closing p {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

.acf-seo-highlights {
  padding: var(--block-pad-block) var(--block-pad-inline);
  background-color: var(--color-brand-mist);
  color: var(--color-brand-slate);
}

.acf-seo-highlights__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Figma 4-up strip — tighter than --block-gap (80). */
  gap: var(--space-3xl);
  width: 100%;
}

@media (min-width: 768px) {
  .acf-seo-highlights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .acf-seo-highlights__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.acf-seo-highlights__card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: var(--space-md);
  background-color: var(--color-light);
  border-radius: var(--radius-card);
}

.acf-seo-highlights__heading {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-brand-cyan);
}

.acf-seo-highlights__label {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
}

.acf-seo-page-parent .acf-seo-questions .acf-how-we-work__steps,
.acf-seo-page-parent .acf-seo-questions .acf-how-we-work__divider,
.acf-seo-page-parent .acf-seo-process .acf-how-we-work__intro,
.acf-seo-page-parent .acf-seo-process .acf-how-we-work__divider,
.acf-seo-page-parent .acf-seo-process .acf-how-we-work__steps {
  max-width: none;
}

.acf-seo-page-parent .acf-seo-questions .acf-how-we-work__steps,
.acf-seo-page-parent .acf-seo-process .acf-how-we-work__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
}

@media (min-width: 768px) {
  .acf-seo-page-parent .acf-seo-questions .acf-how-we-work__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .acf-seo-page-parent .acf-seo-process .acf-how-we-work__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .acf-seo-page-parent .acf-seo-process .acf-how-we-work__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.acf-seo-page-parent .acf-seo-process .acf-how-we-work__intro {
  text-align: center;
}

.acf-seo-page-parent .acf-seo-process .acf-how-we-work__divider {
  display: none;
}

.acf-seo-page-parent .acf-seo-process .acf-how-we-work__step-title {
  color: var(--color-brand-cyan);
}

.acf-seo-actions__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--block-content-gap);
}

.acf-seo-cards {
  padding: var(--block-pad-block) var(--block-pad-inline);
}

.acf-seo-page-parent .acf-seo-specialties .acf-seo-cards__grid {
  width: 100%;
  column-gap: var(--space-lg);
  row-gap: var(--space-xl);
}

.acf-seo-page-parent .acf-seo-specialties .acf-services-grid__item {
  gap: var(--space-sm);
}

/* Beat .entry-content p margins — other cards zero these; this wrapper did not. */
.acf-seo-page-parent .acf-services-grid__item-text p {
  margin: 0;
  color: inherit;
}

.acf-seo-page-parent .acf-services-grid__item-link {
  margin: 0;
  padding: 0;
}

.acf-seo-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--block-content-gap);
}

.acf-seo-page-parent .acf-seo-specialties .acf-seo-cards__header {
  /* Full row so the centered heading matches Figma’s 1280px title. */
  width: 100%;
  margin-bottom: 0;
}

.acf-seo-cards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-3xl);
  row-gap: var(--space-xl);
  width: 100%;
}

@media (min-width: 768px) {
  .acf-seo-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .acf-seo-cards__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .acf-seo-cards__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.acf-seo-page-parent .acf-seo-specialties .acf-services-grid__item-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-brand-cyan);
}

/* Figma: emoji is its own line above the 24px title. */
.acf-seo-page-parent .acf-seo-specialties .acf-seo-specialties__emoji,
.acf-seo-page-parent .acf-seo-specialties .acf-seo-specialties__emoji img.emoji {
  display: block;
  line-height: 35px;
}

.acf-seo-page-parent .acf-seo-specialties h3.acf-services-grid__item-title,
.entry-content .acf-seo-page-parent .acf-seo-specialties h3.acf-services-grid__item-title {
  line-height: 35px;
}

.acf-seo-page-parent .acf-seo-cards.acf-seo-why .container-wide,
.acf-seo-page-parent .acf-seo-cards.acf-seo-areas .container-wide {
  display: flex;
  flex-direction: column;
  max-width: var(--container-wide);
  gap: 2.5rem; /* 40px */
}

.acf-seo-page-parent .acf-seo-why .acf-seo-cards__header,
.acf-seo-page-parent .acf-seo-areas .acf-seo-cards__header {
  margin: 0;
}

.acf-seo-page-parent .acf-seo-cards.acf-seo-why h2.heading-lg,
.entry-content .acf-seo-page-parent .acf-seo-cards.acf-seo-why h2.heading-lg,
.acf-seo-page-parent .acf-seo-cards.acf-seo-areas h2.heading-lg,
.entry-content .acf-seo-page-parent .acf-seo-cards.acf-seo-areas h2.heading-lg {
  margin: 0;
}

.acf-seo-page-parent .acf-seo-why .acf-seo-cards__grid {
  gap: var(--space-md); /* 24px */
}

.acf-seo-page-parent .acf-seo-why .acf-services-grid__item {
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: 0;
}

.acf-seo-page-parent h3.acf-services-grid__item-title,
.entry-content .acf-seo-page-parent h3.acf-services-grid__item-title {
  margin: 0;
}

.acf-seo-page-parent .acf-seo-cards.acf-seo-why .acf-services-grid__item-title,
.acf-seo-page-parent .acf-seo-cards.acf-seo-why h3.acf-services-grid__item-title,
.entry-content .acf-seo-page-parent .acf-seo-cards.acf-seo-why h3.acf-services-grid__item-title {
  margin: 0;
  color: var(--color-brand-cyan);
  font-size: 2rem; /* 32px */
  line-height: var(--line-height-tight);
}

.acf-seo-page-parent .acf-seo-areas {
  background-color: var(--color-brand-mist);
}

.acf-seo-page-parent .acf-seo-areas .acf-services-grid__item {
  background-color: var(--color-light);
  padding: var(--space-md);
  border-radius: var(--radius-card);
}

.acf-seo-page-parent .acf-seo-area-title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.acf-seo-page-parent .acf-seo-area-title .acf-services-grid__item-title {
  color: var(--color-brand-cyan);
}

.acf-seo-page-parent .acf-seo-pin {
  flex: 0 0 auto;
  line-height: 0;
  margin-top: 0.2rem;
  overflow: visible;
}

.acf-seo-page-parent .acf-seo-pin .prism-inline-svg,
.acf-seo-page-parent .acf-seo-pin svg {
  display: block;
  overflow: visible;
  width: 1.125rem; /* 18px — viewBox padded for the 2px stroke */
  height: auto;
}

.acf-seo-page-parent .acf-restoration-ba__intro {
  text-align: center;
}

.acf-seo-page-parent .acf-restoration-ba__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: 54rem; /* 864px */
  margin: auto;
}

@media (min-width: 768px) {
  .acf-seo-page-parent .acf-restoration-ba__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.acf-seo-page-parent .acf-restoration-ba__card-title {
  color: var(--color-brand-cyan);
}

.acf-seo-page-parent .acf-video-section__kicker {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-navy-label);
}

.acf-seo-page-parent .acf-our-work-grid__title,
.acf-seo-page-parent .acf-our-work-grid__intro,
.acf-seo-page-parent .acf-faq__title {
  text-align: center;
}

/* Title + lead share one stack — 24px, same as acf-our-work-grid. */
.acf-seo-page-parent .acf-seo-portfolio .acf-our-work-grid__intro {
  gap: var(--space-md);
}

.acf-seo-page-parent .acf-seo-portfolio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md); /* 24px — Figma card gutters */
}

@media (min-width: 768px) {
  .acf-seo-page-parent .acf-seo-portfolio__grid {
    /* Figma Frame 67 is 1932px (left 628 + right 628 placed as siblings, frame not clipped).
       Intended 1280 band is 628 | 24 | 302 | 24 | 302 — featured = two small + gap. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: minmax(13.5625rem, auto); /* 217px small-card height */
  }

  .acf-seo-page-parent .acf-seo-portfolio__item:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

.acf-seo-page-parent .acf-seo-portfolio__item {
  position: relative;
  min-height: 12rem;
  height: 100%;
  overflow: hidden;
}

.acf-seo-page-parent .acf-seo-portfolio__trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.acf-seo-page-parent .acf-seo-portfolio__item-img,
.acf-seo-page-parent .acf-seo-portfolio__trigger picture,
.acf-seo-page-parent .acf-seo-portfolio__trigger img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* White chip: dark title + cyan View Details. */
.acf-seo-page-parent .acf-seo-portfolio__meta {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  max-width: 80%;
  padding: 1.25rem;
  background-color: color-mix(in srgb, var(--color-light) 80%, transparent);
}

.acf-seo-page-parent .acf-seo-portfolio__caption,
.acf-seo-page-parent .acf-seo-portfolio__caption-title {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--color-brand-slate);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.acf-seo-page-parent .acf-seo-portfolio__action {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--color-brand-cyan);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  pointer-events: none;
}

/* Desktop: hide title + fake-button until hover or keyboard focus. Mobile keeps them on. */
@media (min-width: 768px) {
  .acf-seo-page-parent .acf-seo-portfolio__meta {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .acf-seo-page-parent .acf-seo-portfolio__item:hover .acf-seo-portfolio__meta,
  .acf-seo-page-parent .acf-seo-portfolio__item:focus-within .acf-seo-portfolio__meta {
    opacity: 1;
  }
}

body.acf-seo-portfolio-modal-open {
  overflow: hidden;
}

/* Full-viewport dialog. Overlay is ::backdrop. Card sits on top and fades with it. */
.acf-seo-page-parent .acf-seo-portfolio-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.acf-seo-page-parent .acf-seo-portfolio-modal[open] {
  display: grid;
  place-items: center;
}

.acf-seo-page-parent .acf-seo-portfolio-modal.is-open {
  opacity: 1;
}

.acf-seo-page-parent .acf-seo-portfolio-modal.is-closing {
  opacity: 0;
}

/* Figma overlay: slate #1b2a34 at 90%. */
.acf-seo-page-parent .acf-seo-portfolio-modal::backdrop {
  background-color: color-mix(in srgb, var(--color-brand-slate) 90%, transparent);
  opacity: 0;
  transition: opacity 0.32s ease;
}

.acf-seo-page-parent .acf-seo-portfolio-modal.is-open::backdrop {
  opacity: 1;
}

.acf-seo-page-parent .acf-seo-portfolio-modal.is-closing::backdrop {
  opacity: 0;
}

/* Figma Group 82: 1160 × 693, navy, 16px radius. */
.acf-seo-page-parent .acf-seo-portfolio-modal__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(72.5rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background-color: var(--color-brand-navy);
  border-radius: 1rem;
  color: var(--color-light);
}

@media (min-width: 768px) {
  .acf-seo-page-parent .acf-seo-portfolio-modal__card {
    grid-template-columns: minmax(0, 35rem) minmax(0, 37.5rem); /* 560 + 600 */
    height: min(43.3125rem, calc(100vh - 2rem));
    overflow: hidden;
  }
}

.acf-seo-page-parent .acf-seo-portfolio-modal__media {
  min-height: 16rem;
  overflow: hidden;
  background-color: var(--color-placeholder-bg);
}

.acf-seo-page-parent .acf-seo-portfolio-modal__media picture,
.acf-seo-page-parent .acf-seo-portfolio-modal__media img,
.acf-seo-page-parent .acf-seo-portfolio-modal__media .acf-seo-portfolio__item-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .acf-seo-page-parent .acf-seo-portfolio-modal__media {
    min-height: 0;
    height: 100%;
  }
}

.acf-seo-page-parent .acf-seo-portfolio-modal__panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px between kicker, title, copy, details */
  min-height: 0;
  padding: 4rem 3.5rem; /* Figma ~64 / 56 */
  overflow: auto;
}

.acf-seo-page-parent .acf-seo-portfolio-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-light) 12%, transparent);
  color: var(--color-light);
  cursor: pointer;
}

.acf-seo-page-parent .acf-seo-portfolio-modal__close:hover {
  background-color: color-mix(in srgb, var(--color-light) 22%, transparent);
}

/* Figma kicker is #2f8fc9, not brand cyan. */
.acf-seo-page-parent .acf-seo-portfolio-modal__kicker {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #2f8fc9;
}

.acf-seo-page-parent .acf-seo-portfolio-modal__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-light);
}

@media (min-width: 768px) {
  .acf-seo-page-parent .acf-seo-portfolio-modal__title {
    font-size: 1.875rem; /* 30px */
    line-height: 2.34375rem;
  }
}

.acf-seo-page-parent .acf-seo-portfolio-modal__text,
.acf-seo-page-parent .acf-seo-portfolio-modal__text p {
  margin: 0;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  color: #b9c7d1;
}

.acf-seo-page-parent .acf-seo-portfolio-modal__details {
  margin: 0;
}

.acf-seo-page-parent .acf-seo-portfolio-modal__row {
  margin: 0;
  padding: 1.25rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-light) 18%, transparent);
}

.acf-seo-page-parent .acf-seo-portfolio-modal__row dt {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--font-weight-normal);
  color: #b9c7d1;
}

.acf-seo-page-parent .acf-seo-portfolio-modal__row dd {
  margin: 0.25rem 0 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-light);
}

@media (prefers-reduced-motion: reduce) {
  .acf-seo-page-parent .acf-seo-portfolio__caption,
  .acf-seo-page-parent .acf-seo-portfolio__meta,
  .acf-seo-page-parent .acf-seo-portfolio-modal,
  .acf-seo-page-parent .acf-seo-portfolio-modal::backdrop {
    transition: none;
  }
}

.acf-seo-faq-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--block-content-gap);
  margin-top: 0;
}

.acf-seo-faq-footer__text {
  margin: 0;
  max-width: 16srem; /* 240px */
  text-align: center;
}

/*
 * Per-section White / Gray dropdown. Hero, CTAs, and mist bands stay put.
 */
.acf-seo-page-parent > section.bg-light {
  background-color: var(--color-light); /* #FFFFFF */
}

.acf-seo-page-parent > section.bg-brand-shape {
  background-color: var(--color-brand-shape); /* #F8F9F9 */
}
