/*
Theme Name: Blocksy Child
Template: blocksy
Text Domain: blocksy-child
Description: Brandgineer custom child theme for Blocksy.
Version: 1.0.0
*/

/* ==========================================================================
   00 THEME METADATA
   Main stylesheet for the Brandgineer Blocksy child theme.
   ========================================================================== */

/* ==========================================================================
   01 TOKENS
   CSS Variables, Colors, Typography Tokens
   ========================================================================== */

:root {
  --bg-color-primary: var(--theme-palette-color-1, #0101A0);
  --bg-color-accent: var(--theme-palette-color-2, #53FBDD);
  --bg-color-text: var(--theme-text-color, #ffffff);
  --bg-color-heading: var(--theme-heading-color, #ffffff);
  --bg-color-border: rgba(255, 255, 255, 0.18);
  --bg-color-white: #ffffff;
  --bg-color-panel: #D4D4D433;

  --bg-edge: 5vw;
  --bg-section-padding-y: clamp(64px, 8vw, 120px);

  --bg-radius-sm: 14px;
  --bg-radius-md: 24px;
  --bg-radius-lg: 36px;

  --bg-transition: 180ms ease;
  --bg-glow-accent: 0 0 24px rgba(83, 251, 221, 0.35);
}

/* ==========================================================================
   02 BASE
   Resets, HTML/Body defaults
   ========================================================================== */

body {
  overflow-x: hidden;
}

.bg-page {
  color: var(--bg-color-text, #ffffff);
  background: var(--bg-color-primary, #0101A0);
}

.bg-page *,
.bg-page *::before,
.bg-page *::after,
.bg-section *,
.bg-section *::before,
.bg-section *::after {
  box-sizing: border-box;
}

.bg-section :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
  margin: 0;
}

.bg-page :where(p),
.bg-section :where(p) {
  color: inherit;
}

.bg-page :where(img, svg),
.bg-section :where(img, svg) {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {

  .bg-page *,
  .bg-page *::before,
  .bg-page *::after,
  .bg-section *,
  .bg-section *::before,
  .bg-section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   03 LAYOUT
   Grid system, Containers (.bg-container), Sections (.bg-section)
   ========================================================================== */

.bg-section {
  position: relative;
  width: 100%;
  max-width: none;
  padding: var(--bg-section-padding-y) 0;
}

.bg-section--bleed,
.entry-content>.bg-section--bleed,
.entry-content.is-layout-constrained>.bg-section--bleed,
.is-layout-constrained>.bg-section--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  justify-self: center;
  box-sizing: border-box;
}

/* Ensure WordPress/Blocksy wrappers do not clip bleed sections */
.content-area,
.entry-content,
.ct-container,
.gspb_row,
.gspb_container {
  overflow: visible;
  overflow-x: visible;
}

.bg-section--white {
  background: var(--bg-color-white);
  color: #000;
}

.bg-container {
  width: var(--theme-container-width, min(calc(100% - 10vw), 1500px));
  max-width: var(--theme-normal-container-max-width, 1500px);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Neutralise any inherited padding-inline inside alignfull / bleed sections
   so content is not double-inset. */
.alignfull .bg-container,
.bg-section--bleed .bg-container {
  padding-inline: 0;
}

/* Reset margin-block that WordPress/Blocksy layout rules apply to direct children
   of .entry-content. Scoped to .bg-section only — does not affect other blocks. */
.entry-content>.bg-section {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ==========================================================================
   04 COMPONENTS
   Shared UI elements (Buttons, Panels, Eyebrows)
   ========================================================================== */


.bg-heading {
  /* No typography overrides to allow Blocksy inheritance */
}

.bg-heading__white {
  color: #ffffff;
  font-family: var(--theme-font-family);
}

.bg-heading__accent {
  color: var(--bg-color-accent, #53FBDD);
}

.bg-eyebrow {
  display: inline-block;
  padding: 0 30px;
  border: 1.5px solid #ffffff;
  border-radius: 100px;
  font-size: 48px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .bg-eyebrow {
    font-size: clamp(24px, 8vw, 36px);
    padding: 8px 20px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .bg-eyebrow {
    font-size: 28px;
    padding: 8px 18px;
  }
}

.bg-section-heading {
  text-align: center;
}

.bg-section-heading>*:first-child {
  margin-top: 0;
}

.bg-section-heading>*:last-child {
  margin-bottom: 0;
}

.bg-panel {
  background: var(--bg-color-panel, rgba(212, 212, 212, 0.2));
  border: 1px solid var(--bg-color-border, rgba(255, 255, 255, 0.18));
  border-radius: var(--bg-radius-md, 24px);
}

.bg-button,
.wp-element-button.bg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-decoration: none;
  transition:
    transform var(--bg-transition, 180ms ease),
    box-shadow var(--bg-transition, 180ms ease),
    opacity var(--bg-transition, 180ms ease);
}


.bg-muted {
  opacity: 0.78;
}

/* --- Shared Table System --- */

/* Responsive overflow wrapper */
.bg-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Shared: Service Icons (inline SVG)
   Color-controllable system for all service card/process icons.
   ========================================================================== */

/* Base: fills the icon wrapper */
.bg-service-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ring — stroke-only circle outline (Pattern A icons) */
.bg-service-icon__ring {
  fill: none;
  stroke: currentColor;
}

/* Fill — filled glyph paths (Pattern A icons: creative, AI strategy, web-dev swiper) */
.bg-service-icon__fill {
  fill: currentColor;
  stroke: none;
}

/* Background — solid filled circle (Pattern B icons: SEO supercharge, web perform better) */
.bg-service-icon__bg {
  fill: currentColor;
  stroke: none;
}

/* Glyph — filled glyph paths (Pattern A icons: same as fill, inherits currentColor) */
.bg-service-icon__glyph {
  fill: currentColor;
  stroke: none;
}

/* Detail — white accent on dark glyphs */
.bg-service-icon__detail {
  fill: #ffffff;
  stroke: none;
}

.bg-service-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--bg-color-text, #ffffff);
}

.bg-service-table th,
.bg-service-table td {
  padding: clamp(12px, 1.5vw, 18px) 20px;
  border: 1px solid var(--theme-border-color);
  text-align: left;
}

/* Remove outer borders */
.bg-service-table tr th:first-child,
.bg-service-table tr td:first-child {
  border-left: none;
}

.bg-service-table tr th:last-child,
.bg-service-table tr td:last-child {
  border-right: none;
}

.bg-service-table thead tr th {
  border-top: none;
}

.bg-service-table tbody tr:last-child th,
.bg-service-table tbody tr:last-child td {
  border-bottom: none;
}

/* Header row weight and color — standardized to accent green and bold */
.bg-service-table thead th,
.bg-seo-aeo-pricing__table thead th,
.bg-creative-pricing__table thead th,
.bg-seo-pricing-hero__table thead th,
.bg-seo-aeo-compare__table thead th,
.bg-table__head-cell {
  color: var(--bg-color-accent, #53FBDD);
  font-weight: 700;
}

/* Table header cell — canonical visual style */
.bg-table__head-cell {
  font-family: 'Quantico', var(--theme-font-family, sans-serif);
  font-size: 24px;
}

/* Shared row label — bold first column by default */
.bg-table__row-label {
  font-weight: 300;
}

/* Scoped table first column bold */
.bg-seo-aeo-pricing__table tbody th:first-child,
.bg-seo-aeo-pricing__table tbody td:first-child,
.bg-creative-pricing__table tbody th:first-child,
.bg-creative-pricing__table tbody td:first-child,
.bg-seo-pricing-hero__table tbody th:first-child,
.bg-seo-pricing-hero__table tbody td:first-child,
.bg-seo-aeo-compare__table tbody th:first-child,
.bg-seo-aeo-compare__table tbody td:first-child {
  font-weight: 700;
}

/* Shared table contact link */
.bg-table-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

/* Centering for table cells containing CTA buttons */
.bg-seo-aeo-pricing__cell--centered,
.bg-creative-pricing__cell--centered,
.bg-seo-pricing-hero__cell--centered {
  text-align: center;
}


/* ==========================================================================
   05 SHARED SECTIONS
   Reusable sections (Marquee, Referral Form, FAQ, Final CTA)
   ========================================================================== */

/* --- Referral Section (base) ---
   Portable 2-column layout: content/media left, form panel right.
   Variant: .bg-referral--cta overrides grid for content + image CTA. */
.bg-referral {
  padding-block: clamp(40px, 5vw, 60px);
}

/* Section-specific layout only — sizing/centering delegated to .bg-container.
   Grid is always declared; columns change via media queries.
   overflow:hidden prevents the container from causing page scroll. */
.bg-referral__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 56px);
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Desktop \2265 1100px: 2-column grid */
@media (min-width: 1100px) {
  .bg-referral__container {
    grid-template-columns: 4.5fr 5.5fr;
    align-items: start;
    gap: clamp(24px, 2.5vw, 48px);
  }
}

/* Overflow safeguards for grid children */
.bg-referral__container>* {
  min-width: 0;
  box-sizing: border-box;
}

/* --- CTA variant: equal columns, content + image (no form panel) --- */
.bg-referral--cta .bg-referral__container {
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}

@media (max-width: 1099px) {
  .bg-referral--cta .bg-referral__container {
    grid-template-columns: 1fr;
  }
}

.bg-referral__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: visible;
}

.bg-referral__heading {
  margin: 0 0 16px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bg-referral__text {
  margin: 0 0 16px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
}

.bg-referral__link {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  margin-bottom: clamp(16px, 3vw, 32px);
  transition: var(--bg-transition);
}

.bg-referral__link:hover {
  color: var(--bg-color-accent, #53FBDD);
}

.bg-referral__image {
  margin-top: 32px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.bg-referral__image img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--bg-radius-md);
  object-fit: contain;
}

.bg-referral__form-panel,
.bg-form-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.bg-referral__form-panel {
  padding: clamp(32px, 4vw, 48px);
  backdrop-filter: blur(12px);
  align-self: start;
  margin-top: 0;
}

@media (max-width: 767px) {
  .bg-referral__form-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* --- FAQ Section --- */
.bg-faq {
  padding-block: clamp(40px, 5vw, 60px);
}

.bg-faq__heading {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2em;
  margin: 0 0 clamp(40px, 5vw, 64px);
  text-align: center;
}

.bg-faq__heading>span {
  /* Typography controlled by Blocksy — no font-size/line-height override */
}

.bg-faq__list {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bg-faq__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--bg-radius-md);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.bg-faq__item summary {
  list-style: none;
}

.bg-faq__item summary::-webkit-details-marker {
  display: none;
}

.bg-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(24px, 4vw, 32px) clamp(32px, 5vw, 40px);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  color: var(--bg-color-text, #ffffff);
  cursor: pointer;
  user-select: none;
  gap: 24px;
}

.bg-faq__icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.bg-faq__icon::after {
  content: '';
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.bg-faq__item[open] .bg-faq__icon {
  border-color: var(--bg-color-accent, #53FBDD);
  background: rgba(83, 251, 221, 0.05);
}

.bg-faq__item[open] .bg-faq__icon::after {
  border-color: var(--bg-color-accent, #53FBDD);
  transform: translateY(1px) rotate(225deg);
}

.bg-faq__answer {
  padding: 0 clamp(32px, 5vw, 40px) clamp(32px, 5vw, 40px);
  font-weight: 400;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.75;
  line-height: 1.6;
}

.bg-faq__answer p {
  margin: 0;
}


.bg-final-cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bg-final-cta__heading {
  margin: 0 0 clamp(32px, 5vw, 48px);
  max-width: 1200px;
}

.bg-final-cta__button {
  margin: 0;
}

/* --- Shared Media/Text Section --- */

.bg-media-text {
  padding-block: clamp(40px, 5vw, 60px);
}

.bg-media-text__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  min-width: 0;
}

.bg-media-text__content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

.bg-media-text__title {
  margin: 0;
  color: var(--bg-color-accent, #53FBDD);
}


.bg-media-text__text {
  margin: 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
}

.bg-media-text__list {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
}

.bg-media-text__actions {
  margin-top: 8px;
}

.bg-media-text__media {
  min-width: 0;
}

.bg-media-text__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bg-radius-md, 24px);
}

@media (max-width: 767px) {
  .bg-media-text__container {
    grid-template-columns: 1fr;
  }
}

/* Shared checklist variant */
.bg-media-text__checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.bg-media-text__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--bg-color-text, #ffffff);
}

.bg-media-text__checklist li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 4px;
  width: 18px;
  height: 18px;
  background-color: var(--bg-color-accent, #53FBDD);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 599px) {
  .bg-media-text__checklist {
    grid-template-columns: 1fr;
  }
}

/* AI Strategy — Why Brandgineer: bordered card layout */
.bg-media-text--ai-strategy-why .bg-media-text__container {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bg-radius-lg, 36px);
  overflow: hidden;
  gap: 0;
  align-items: stretch;
}

.bg-media-text--ai-strategy-why .bg-media-text__media {
  overflow: hidden;
}

.bg-media-text--ai-strategy-why .bg-media-text__image {
  border-radius: 0;
  height: 100%;
  object-fit: cover;
}

.bg-media-text--ai-strategy-why .bg-media-text__content {
  padding: clamp(32px, 5vw, 64px);
  justify-content: center;
}

@media (max-width: 767px) {
  .bg-media-text--ai-strategy-why .bg-media-text__image {
    height: auto;
  }
}

/* AI Strategy & Web Dev — Discoverability & Conversion Checklists */
.bg-media-text--ai-strategy-discoverability .bg-media-text__list--checklist,
.bg-media-text--ai-strategy-why-it-matters .bg-media-text__list--checklist,
.bg-media-text--web-conversion .bg-media-text__list--checklist {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 0;
}

.bg-media-text--ai-strategy-discoverability .bg-media-text__list--checklist li,
.bg-media-text--ai-strategy-why-it-matters .bg-media-text__list--checklist li,
.bg-media-text--web-conversion .bg-media-text__list--checklist li {
  position: relative;
  display: block;
  padding-left: 36px;
}

.bg-media-text--ai-strategy-discoverability .bg-media-text__list--checklist li::before,
.bg-media-text--ai-strategy-why-it-matters .bg-media-text__list--checklist li::before,
.bg-media-text--web-conversion .bg-media-text__list--checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-color-accent, #53FBDD);
}

.bg-media-text--ai-strategy-discoverability .bg-media-text__list--checklist li::after,
.bg-media-text--ai-strategy-why-it-matters .bg-media-text__list--checklist li::after,
.bg-media-text--web-conversion .bg-media-text__list--checklist li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.68em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--bg-color-primary, #0101A0);
  border-bottom: 2px solid var(--bg-color-primary, #0101A0);
  transform: rotate(-45deg);
}

/* --- Shared Card Grid Section --- */

.bg-card-grid {
  padding-block: clamp(40px, 5vw, 60px);
  text-align: center;
}

.bg-card-grid__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
}

.bg-card-grid__title {
  margin: 0;
  color: var(--bg-color-accent, #53FBDD);
}

.bg-card-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  text-align: left;
}

.bg-card-grid__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #fff;
  border-radius: var(--bg-radius-md, 24px);
  min-width: 0;
}

.bg-card-grid__card--featured {
  background: var(--bg-color-accent, #53FBDD);
  border-color: var(--bg-color-accent, #53FBDD);
  color: #000;
}

.bg-card-grid__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.bg-card-grid__icon svg {
  height: 50px;
  width: auto;
  display: block;
}

/* AI Marketing Strategy: What We Do */
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card {
  padding: clamp(20px, 2.5vw, 28px);
}

.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: flex-start;
  margin-inline: 0;
  width: auto;
  height: auto;
  /* Default: mint icon on dark card */
  color: var(--bg-color-accent, #53FBDD);
}

.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__icon-image,
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__icon svg {
  display: block;
  width: clamp(44px, 4vw, 52px);
  height: clamp(44px, 4vw, 52px);
}

/* Hover — card and text invert to primary blue on mint background */
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover,
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover .bg-card-grid__card-title,
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover .bg-card-grid__text,
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover .bg-card-grid__list,
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover .bg-card-grid__list li {
  color: var(--bg-color-primary, #0101A0);
}

.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover {
  background: var(--bg-color-accent, #53FBDD);
  border-color: var(--bg-color-accent, #53FBDD);
}

/* Hover: icon reverts to primary blue (overrides the mint set on icon wrapper) and text opacity is maximized */
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover .bg-card-grid__icon {
  color: var(--bg-color-primary, #0101A0);
}

.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover .bg-card-grid__text,
.bg-card-grid--ai-strategy-what-we-do .bg-card-grid__card:hover .bg-card-grid__list {
  opacity: 1;
}

.bg-card-grid__card-title {
  margin: 0;
  color: inherit;
}

.bg-card-grid__card--featured .bg-card-grid__card-title {
  color: #000;
}

.bg-card-grid__text {
  margin: 0;
  opacity: 0.88;
}

.bg-card-grid__card--featured .bg-card-grid__text {
  opacity: 1;
}

.bg-card-grid__list {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.88;
}

.bg-card-grid__card--featured .bg-card-grid__list {
  opacity: 1;
}

.bg-card-grid__actions {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .bg-card-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .bg-card-grid__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   06 SERVICE / PAGE SECTIONS
   Sections specific to Hero, SEO/AEO, Pricing, etc.
   ========================================================================== */


/* --- Homepage Sections --- */

.bg-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: auto;
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
  padding: 0 0 clamp(52px, 7vh, 88px);
  background-color: var(--bg-color-primary, #0101A0);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Homepage hero */
.bg-hero--home {
  background-image:
    linear-gradient(to bottom,
      rgba(1, 1, 160, 0) 0%,
      rgba(1, 1, 160, 0) 44%,
      rgba(1, 1, 160, 0.55) 72%,
      var(--bg-color-primary, #0101A0) 100%),
    url("assets/images/home/banner-index.webp");
}

/* Trừ chiều cao WordPress admin bar khi đang login */
body.admin-bar .bg-hero {
  height: calc(100vh - 32px);
  height: calc(100svh - 32px);
}

.bg-hero__content {
  position: relative;
  z-index: 1;
  width: min(100% - var(--bg-edge, 5vw), 1180px);
  margin-inline: auto;
  text-align: center;
}

.bg-hero__title {
  margin: 0;
}

.bg-hero__subtitle {
  margin: 14px auto 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
}

.bg-hero__button-wrap {
  margin-top: 20px;
}

.bg-hero__scroll {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
}

.bg-hero__scroll svg {
  width: 24px;
  height: auto;
  display: block;
}

/* Fade-in cho chữ/button */
.bg-hero__fade {
  opacity: 0;
  transform: translateY(16px);
  animation: bgFadeUp 700ms ease forwards;
}

.bg-hero__fade:nth-child(2) {
  animation-delay: 120ms;
}

.bg-hero__fade:nth-child(3) {
  animation-delay: 220ms;
}

@keyframes bgFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bg-hero__actions {
  margin-top: 20px;
}

/* AI Marketing Strategy hero */
.bg-hero--ai-marketing-strategy {
  background-image:
    linear-gradient(to bottom,
      rgba(1, 1, 160, 0) 0%,
      rgba(1, 1, 160, 0) 44%,
      rgba(1, 1, 160, 0.55) 72%,
      var(--bg-color-primary, #0101A0) 100%),
    url("assets/images/services/ai-marketing-strategy/strategy-kv.png");
}

/* Web Development hero */
.bg-hero--web-development {
  background-image:
    linear-gradient(to bottom,
      rgba(1, 1, 160, 0) 0%,
      rgba(1, 1, 160, 0) 44%,
      rgba(1, 1, 160, 0.55) 72%,
      var(--bg-color-primary, #0101A0) 100%),
    url("assets/images/services/web-development/web-development-kv.png");
}

/* SEO/AEO hero */
.bg-hero--seo-aeo {
  background-image:
    linear-gradient(to bottom,
      rgba(1, 1, 160, 0) 0%,
      rgba(1, 1, 160, 0) 44%,
      rgba(1, 1, 160, 0.65) 72%,
      var(--bg-color-primary, #0101A0) 100%),
    url("assets/images/services/seo-aeo/seo-aeo-kv.png");
}

@media (max-width: 768px) {
  .bg-hero--seo-aeo {
    background-position: center 15%;
  }
}

/* Creative hero */
.bg-hero--creative {
  background-image:
    linear-gradient(to bottom,
      rgba(1, 1, 160, 0) 0%,
      rgba(1, 1, 160, 0) 44%,
      rgba(1, 1, 160, 0.55) 72%,
      var(--bg-color-primary, #0101A0) 100%),
    url("assets/images/services/creative/ai-creative.png");
  background-position: center center;
}

@media (max-width: 767px) {
  .bg-hero--creative {
    background-position: center top;
  }
}

.bg-services {
  position: relative;
  padding-block: clamp(40px, 5vw, 60px);
  background: var(--bg-color-primary, #0101A0);
}

.bg-services__list {
  display: grid;
  row-gap: 0;
  column-gap: clamp(40px, 6vw, 80px);
  margin-top: clamp(64px, 7vw, 100px);
}

.bg-service {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(40px, 6vw, 80px);
}

.bg-service__content {
  min-width: 0;
}

.bg-service__content>*:first-child {
  margin-top: 0;
}

.bg-service__content>*:last-child {
  margin-bottom: 0;
}

.bg-service__title {
  margin-top: 16px;
  margin-bottom: 18px;
}

.bg-service__title-text {
  font-size: clamp(28px, 3vw, 42px);
  color: var(--bg-color-accent, #53FBDD);
  line-height: 1.2;
}

.bg-service__text {
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.84;
  font-size: clamp(18px, 1.6vw, 26px);
}

.bg-services .bg-service__points {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.78;
}

.bg-services .bg-service__points li {
  position: relative;
  display: block;
  padding-left: 36px;
  font-size: clamp(18px, 1.6vw, 26px);
}

.bg-services .bg-service__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-color-accent, #53FBDD);
}

.bg-services .bg-service__points li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.68em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--bg-color-primary, #0101A0);
  border-bottom: 2px solid var(--bg-color-primary, #0101A0);
  transform: rotate(-45deg);
}

.bg-service+.bg-service {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: clamp(48px, 7vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.bg-service__media {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
}

.bg-service__media img {
  width: 100%;
  display: block;
  border-radius: inherit;
}


.bg-why {
  padding-block: clamp(40px, 5vw, 60px);
  text-align: center;
}

.bg-why__heading {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.24em;
  margin: 0;
}

.bg-why__subtitle {
  margin: 16px auto 0;
  max-width: 600px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
}

.bg-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(48px, 6vw, 64px);
  max-width: 1280px;
  margin-inline: auto;
  text-align: left;
}

.bg-why-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  transition: var(--bg-transition);
}

.bg-why-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.bg-why-card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.bg-why-card__icon img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.bg-why-card__title {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
}

.bg-ai-proof {
  padding-block: clamp(40px, 5vw, 60px);
}

.bg-ai-proof__header {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.bg-ai-proof__heading {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.24em;
  margin: 0;
}

.bg-ai-proof__subtitle {
  max-width: 800px;
  margin: 16px auto 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
}

.bg-ai-proof__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.bg-ai-proof__stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
}

.bg-ai-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  background: #D4D4D433;
  border: 0.5px solid #FFFFFF;
  border-radius: var(--bg-radius-md);
  backdrop-filter: blur(10px);
}

.bg-ai-proof-stat__number {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.bg-ai-proof-stat__value,
.bg-ai-proof-stat__percent {
  font-family: "Quantico", sans-serif;
  font-size: clamp(40px, 4vw, 48px);
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
}

.bg-ai-proof-stat__text {
  margin: 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
}

.bg-ai-proof__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-ai-proof__media img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: var(--bg-radius-md);
  object-fit: contain;
}

.bg-ai-proof__footer {
  text-align: center;
  margin-top: clamp(64px, 8vw, 100px);
}

.bg-ai-proof__bottom-text {
  margin: 0 auto 32px;
  max-width: 800px;
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--bg-color-text, #ffffff);
}

.bg-ai-proof__cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.5vw, 20px);
  text-align: center;
}

.bg-ai-proof__cta-text {
  margin: 0;
  font-size: clamp(14px, 2vw, 22px);
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
}

.bg-ai-proof__cta .wp-block-button {
  flex-shrink: 0;
}

.bg-clients {
  padding-block: clamp(40px, 5vw, 60px);
  text-align: center;
}

/* Section-specific layout only — sizing/centering delegated to .bg-container */
.bg-clients__container {
  /* No additional container overrides needed */
}

.bg-clients__heading {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.24em;
  margin: 0 0 clamp(48px, 6vw, 80px);
}

.bg-clients__subtitle {
  max-width: 600px;
  margin: 16px auto 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
}

.bg-clients__slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.bg-clients__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

.bg-clients__slide img {
  display: block;
  max-height: 44px;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}

.bg-clients__slide--tall img {
  max-height: 64px;
}

/* Homepage Responsive */
@media (max-width: 1024px) {
  .bg-service {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .bg-service__content,
  .bg-service__media {
    max-width: 760px;
  }

  .bg-service__media {
    width: 100%;
  }

  .bg-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 782px) {
  body.admin-bar .bg-hero {
    height: calc(100vh - 46px);
    height: calc(100svh - 46px);
  }
}

@media (max-width: 767px) {
  :root {
    --bg-edge: 32px;
  }

  .bg-hero {
    background-position: center top;
    padding-bottom: 56px;
  }

  .bg-hero__subtitle {
    max-width: 92%;
  }

  .bg-services {
    /* padding handled by clamp */
  }

  .bg-services__list {
    row-gap: 0;
    margin-top: 64px;
  }

  .bg-service__title {
    margin-top: 18px;
  }

  .bg-service__points {
    gap: 8px;
  }

  .bg-service__media {
    border-radius: 18px;
  }

  .bg-why__grid {
    grid-template-columns: 1fr;
  }

  .bg-ai-proof__body {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   08 UTILITIES
   Helper classes
   ========================================================================== */

.bg-reveal {
  opacity: 1;
  transform: none;
}

html.bg-reveal-enabled .bg-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.bg-reveal-enabled .bg-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.bg-reveal--delay-1 {
  transition-delay: 0.1s;
}

.bg-reveal--delay-2 {
  transition-delay: 0.2s;
}

.bg-reveal--delay-3 {
  transition-delay: 0.3s;
}

.bg-reveal--delay-4 {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {

  html.bg-reveal-enabled .bg-reveal,
  html.bg-reveal-enabled .bg-reveal.is-visible,
  html.bg-reveal-enabled .bg-reveal[class*="bg-reveal--delay"] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* --- SEO-AEO Sections --- */

.bg-seo-aeo-stats {
  padding-block: clamp(40px, 5vw, 60px);
  text-align: center;
}

.bg-seo-aeo-stats__heading {
  margin: 0 0 clamp(48px, 6vw, 80px);
}

.bg-seo-aeo-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 40px;
  align-items: start;
  max-width: 950px;
  margin-inline: auto;
}

.bg-seo-aeo-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.bg-seo-aeo-stats__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -20px;
  width: 1px;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.75);
}

.bg-seo-aeo-stats__value {
  color: var(--bg-color-accent, #53FBDD);
  font-family: 'Quantico', sans-serif;
  font-size: clamp(40px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
}

.bg-seo-aeo-stats__text {
  color: var(--bg-color-text, #ffffff);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.5;
  margin: 0 auto;
  opacity: 0.9;
  max-width: 280px;
}

@media (max-width: 992px) {
  .bg-seo-aeo-stats__grid {
    gap: 24px;
  }

  .bg-seo-aeo-stats__item:not(:last-child)::after {
    right: -12px;
  }
}

@media (max-width: 768px) {
  .bg-seo-aeo-stats__grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .bg-seo-aeo-stats__item:not(:last-child)::after {
    top: auto;
    bottom: -32px;
    right: 20%;
    left: 20%;
    width: 60%;
    height: 1px;
  }
}

.bg-seo-aeo-system {
  padding-block: clamp(40px, 5vw, 60px);
}

.bg-seo-aeo-system__intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(60px, 8vw, 100px);
}

.bg-seo-aeo-system__heading {
  margin: 0;
  white-space: nowrap;
}

.bg-seo-aeo-system__copy {
  margin: 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
}

.bg-seo-aeo-system__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 80px);
}

.bg-seo-aeo-system__steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
}

.bg-seo-aeo-system__line {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.bg-seo-aeo-system__step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.bg-seo-aeo-system__step:hover,
.bg-seo-aeo-system__step:focus-visible {
  outline: none;
}

.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):hover .bg-seo-aeo-system__step-icon,
.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):focus-visible .bg-seo-aeo-system__step-icon {
  border-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.75);
}

.bg-seo-aeo-system__step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background-color: var(--bg-color-primary, #0101A0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(180, 184, 255, 0.55);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.bg-seo-aeo-system__step--active .bg-seo-aeo-system__step-icon {
  background-color: var(--bg-color-accent, #53FBDD);
  border-color: var(--bg-color-accent, #53FBDD);
  color: var(--bg-color-primary, #0101A0);
  box-shadow: 0 0 20px rgba(83, 251, 221, 0.3);
}

.bg-seo-aeo-system__step-content {
  display: flex;
  flex-direction: column;
}

.bg-seo-aeo-system__step-title {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  color: #fff;
  margin: 0 0 8px;
  transition: color 0.3s ease;
}

.bg-seo-aeo-system__step-desc {
  color: #fff;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active) .bg-seo-aeo-system__step-title {
  color: rgba(255, 255, 255, 0.45);
}

.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active) .bg-seo-aeo-system__step-desc {
  color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

.bg-seo-aeo-system__visual {
  position: relative;
  border-radius: var(--bg-radius-lg, 24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.03);
}

.bg-seo-aeo-system__media-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  display: flex;
}

.bg-seo-aeo-system__media-panel--active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.bg-seo-aeo-system__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 992px) {
  .bg-seo-aeo-system__intro {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 60px;
  }

  .bg-seo-aeo-system__heading {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .bg-seo-aeo-system__body {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .bg-seo-aeo-system__heading {
    white-space: normal;
  }

  .bg-seo-aeo-system__line {
    display: none;
  }

  .bg-seo-aeo-system__step {
    flex-direction: row;
    align-items: flex-start;
  }

  .bg-seo-aeo-system__visual {
    /* Dynamic height on mobile */
  }
}

.bg-seo-aeo-compare {
  padding-bottom: clamp(40px, 5vw, 60px);
}

.bg-seo-aeo-compare__heading {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.bg-seo-aeo-compare__label-cell {
  border: none !important;
}

.bg-seo-aeo-compare__header {
  text-transform: uppercase;
  text-align: center !important;
}

.bg-seo-aeo-compare__label {
  color: #fff;
}

.bg-seo-aeo-compare__cell {
  opacity: 0.9;
  line-height: 1.5;
}

.bg-seo-aeo-compare__table {
  min-width: 600px;
  table-layout: fixed;
  width: 100%;
}

.bg-seo-aeo-compare__table th,
.bg-seo-aeo-compare__table td {
  width: 33.333%;
}

@media (max-width: 768px) {
  .bg-seo-aeo-compare__table {
    min-width: 600px;
  }
}

.bg-seo-aeo-supercharge {
  padding-bottom: clamp(40px, 5vw, 60px);
}

.bg-seo-aeo-supercharge__heading {
  color: var(--bg-color-accent, #53FBDD);
  margin-bottom: 16px;
}

.bg-seo-aeo-supercharge__subtitle {
  max-width: 800px;
  margin-bottom: clamp(40px, 6vw, 60px);
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
}

.bg-seo-aeo-supercharge__flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
}

.bg-seo-aeo-supercharge__item {
  display: flex;
  flex-direction: column;
}

.bg-seo-aeo-supercharge__icon-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.bg-seo-aeo-supercharge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bg-seo-aeo-supercharge__icon img,
.bg-seo-aeo-supercharge__icon svg {
  display: block;
  width: clamp(72px, 6vw, 95px);
  height: clamp(72px, 6vw, 95px);
}

.bg-seo-aeo-supercharge__connector {
  flex-grow: 1;
  height: 2px;
  background-color: var(--bg-color-accent, #53FBDD);
  position: relative;
  min-width: 20px;
}

.bg-seo-aeo-supercharge__connector::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--bg-color-accent, #53FBDD);
  border-right: 2px solid var(--bg-color-accent, #53FBDD);
  transform: translateY(-50%) rotate(45deg);
}

.bg-seo-aeo-supercharge__title {
  color: var(--bg-color-accent, #53FBDD);
  font-family: 'Quantico', sans-serif;
  font-size: clamp(18px, 1.4vw, 24px);
  margin: 0;
  line-height: 1.3;
  margin-top: 25px;
  margin-block-end: 0 !important;
}

.bg-seo-aeo-supercharge__text {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .bg-seo-aeo-supercharge__flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
  }

  .bg-seo-aeo-supercharge__connector {
    display: none;
  }
}

@media (max-width: 640px) {
  .bg-seo-aeo-supercharge__flow {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.bg-seo-aeo-one-system {
  padding-bottom: clamp(40px, 5vw, 60px);
}

.bg-seo-aeo-one-system__header {
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}

.bg-seo-aeo-one-system__heading {
  color: var(--bg-color-accent, #53FBDD);
  margin-bottom: 24px;
}

.bg-seo-aeo-one-system__copy {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
  margin-bottom: 32px;
}

.bg-seo-aeo-one-system__button-wrap {
  display: flex;
  justify-content: center;
}

.bg-seo-aeo-one-system__button-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}

.bg-seo-aeo-one-system__figure {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.bg-seo-aeo-one-system__image {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .bg-seo-aeo-one-system__figure {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .bg-seo-aeo-one-system__image {
    max-width: none;
    width: 800px;
  }
}

.bg-seo-aeo-pricing__header {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 40px);
}

.bg-seo-aeo-pricing__heading {
  color: var(--bg-color-accent, #53FBDD);
  margin-bottom: 16px;
}

.bg-seo-aeo-pricing__copy {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
  margin-bottom: 0;
}

.bg-seo-aeo-pricing__promo {
  width: 100%;
  margin: 0 auto clamp(32px, 4vw, 56px);
}

.bg-seo-aeo-pricing__promo img {
  display: block;
  width: 100%;
  height: auto;
}

.bg-seo-aeo-pricing__table-wrap {
  margin-bottom: 48px;
}

.bg-seo-aeo-pricing__table {
  min-width: 900px;
  table-layout: fixed;
  width: 100%;
}

.bg-seo-aeo-pricing__table th,
.bg-seo-aeo-pricing__table td {
  width: 25%;
}

.bg-seo-aeo-pricing__header-cell {
  text-align: center !important;
}

.bg-seo-aeo-pricing__feature-label {
  color: #fff;
}

.bg-seo-aeo-pricing__cell {
  color: #fff;
  opacity: 0.9;
  line-height: 1.5;
  text-align: left !important;
}

.bg-seo-aeo-pricing__cell--centered {
  text-align: center !important;
}

.bg-seo-aeo-pricing__table tr td:first-child,
.bg-seo-aeo-pricing__table tr th:first-child {
  text-align: left !important;
}

/* Shared: Button with Icon */
.bg-button-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bg-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  line-height: 0;
  color: currentColor;
}

.bg-btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.bg-button-with-icon__label {
  display: inline-block;
}

/* Shared: Check Icon */
.bg-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--bg-color-accent, #53FBDD);
  color: var(--bg-color-primary, #0101A0);
}

.bg-check-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bg-seo-aeo-pricing__check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* 12px override keeps the check mark proportionally sized inside the 20px circle */
.bg-seo-aeo-pricing__check svg,
.bg-seo-pricing-hero__check svg {
  width: 12px;
  height: auto;
}

.bg-seo-aeo-pricing__footer {
  display: flex;
  justify-content: center;
}

.bg-seo-aeo-pricing__button-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}

@media (max-width: 768px) {
  .bg-seo-aeo-pricing__table {
    min-width: 700px;
  }
}

/* ==========================================================================
   08b SEO-AEO-PRICING PAGE — Section 1: Pricing Hero
   ========================================================================== */

/* --- Section wrapper --- */
.bg-seo-pricing-hero,
.bg-section.bg-seo-pricing-hero {
  text-align: center;
  padding-top: var(--bg-section-padding-y);
  padding-bottom: clamp(32px, 4vw, 60px);
}

/* --- Header --- */
.bg-seo-pricing-hero__header {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.bg-seo-pricing-hero__heading {
  margin: 0 0 clamp(16px, 2vw, 28px);
}

.bg-seo-pricing-hero__copy {
  max-width: 900px;
  margin: 0 auto;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
  text-align: center;
}

/* --- Table wrapper (horizontal scroll on small screens) --- */
.bg-seo-pricing-hero__table-wrap {
  margin-bottom: clamp(32px, 4vw, 48px);
  text-align: left;
}

/* --- Table: min-width to prevent collapse, reuses bg-service-table borders --- */
.bg-seo-pricing-hero__table {
  min-width: 700px;
  table-layout: fixed;
}

.bg-seo-pricing-hero__table th,
.bg-seo-pricing-hero__table td {
  width: 25%;
}

/* --- Header cells: package names centered --- */
.bg-seo-pricing-hero__header-cell {
  text-align: center;
}

/* --- Feature label (first column) --- */
.bg-seo-pricing-hero__feature-label {
  color: var(--bg-color-text, #ffffff);
  text-align: left;
}

/* --- Data cells --- */
.bg-seo-pricing-hero__cell {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
  line-height: 1.5;
  text-align: left;
}

/* Pricing row: center the price values */
.bg-seo-pricing-hero__cell--centered {
  text-align: center !important;
  font-weight: 700;
}

/* --- Icon + text inline layout --- */
.bg-seo-pricing-hero__cell-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- CTA button row --- */
.bg-seo-pricing-hero__cta {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

/* --- Button icon --- */
.bg-seo-pricing-hero__cta-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
  margin-top: -2px;
}

/* --- Responsive: tablet --- */
@media (max-width: 1024px) and (min-width: 768px) {
  .bg-seo-pricing-hero__table {
    min-width: 700px;
  }
}

/* --- Responsive: mobile --- */
@media (max-width: 767px) {
  .bg-seo-pricing-hero__table {
    min-width: 600px;
  }

  .bg-seo-pricing-hero__copy {
    max-width: 100%;
  }
}

/* ==========================================================================
   08d CREATIVE PRODUCTION PRICING — Section 1: Pricing Hero
   Reuses .bg-service-table shared table system. Section-specific layout only.
   ========================================================================== */

/* Creative Production Pricing: Hero */
.bg-creative-pricing {
  text-align: center;
}

/* Table wrapper: horizontal scroll on small screens */
.bg-creative-pricing__table-wrap {
  margin-bottom: clamp(32px, 4vw, 48px);
  text-align: left;
}

/* Table min-width to prevent column collapse */
.bg-creative-pricing__table {
  min-width: 700px;
  table-layout: fixed;
  width: 100%;
}

/* Plan header cells: centered layout */
.bg-creative-pricing__plan-cell {
  text-align: center;
}

/* Feature label (first column) */
.bg-creative-pricing__feature-label {
  color: var(--bg-color-text, #ffffff);
  text-align: left;
}

/* Data cells */
.bg-creative-pricing__cell {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.9;
  line-height: 1.5;
  text-align: left;
}

/* Centered values (pricing, credits) */
.bg-creative-pricing__cell--centered {
  text-align: center !important;
  font-weight: 700;
}


/* Responsive: mobile */
@media (max-width: 767px) {
  .bg-creative-pricing__table {
    min-width: 600px;
  }
}

/* ==========================================================================
   08e AI MARKETING STRATEGY PRICING — Section 1: Hero
   Full-bleed background image with right-side content + form.
   ========================================================================== */

/* AI Marketing Strategy Pricing: Hero */
.bg-ai-marketing-pricing-hero,
.bg-section.bg-ai-marketing-pricing-hero {
  position: relative;
  background-image: url("assets/images/global/webform.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: clamp(520px, 62vh, 760px);
  display: flex;
  align-items: center;
  padding-top: var(--bg-section-padding-y);
  padding-bottom: clamp(32px, 4vw, 60px);
}

/* Container: right-aligned content via grid */
.bg-ai-marketing-pricing-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Content column: right side */
.bg-ai-marketing-pricing-hero__content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.bg-ai-marketing-pricing-hero__heading {
  margin: 0 0 clamp(16px, 2vw, 28px);
  color: #ffffff;
}

.bg-ai-marketing-pricing-hero__copy {
  color: rgba(255, 255, 255, 0.9);
  margin-top: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(20px, 2.5vw, 30px);
}

/* Form panel: follows column width */
.bg-ai-marketing-pricing-hero__form {
  width: 100%;
  max-width: none;
}

/* Responsive: stack at 1100px */
@media (max-width: 1100px) {
  .bg-ai-marketing-pricing-hero__container {
    grid-template-columns: 1fr;
  }

  .bg-ai-marketing-pricing-hero__content {
    grid-column: 1;
  }

  .bg-ai-marketing-pricing-hero::before {
    background: linear-gradient(to bottom,
        rgba(1, 1, 160, 0.4) 0%,
        rgba(1, 1, 160, 0.8) 100%);
  }
}

/* Responsive: mobile */
@media (max-width: 767px) {

  .bg-ai-marketing-pricing-hero,
  .bg-section.bg-ai-marketing-pricing-hero {
    min-height: auto;
    padding-top: clamp(48px, 8vw, 80px);
    padding-bottom: clamp(24px, 4vw, 40px);
  }

  .bg-ai-marketing-pricing-hero__copy {
    max-width: 100%;
  }
}

/* ==========================================================================
   08c SHARED FORM PANEL SYSTEM — .bg-form-panel
   Reusable glass panel wrapper for Fluent Forms across all pages.
   Only panel glass/blur base and checkbox option boxes are customised here.
   Normal inputs, labels, textareas, selects, and field layout inherit
   Fluent Forms / Blocksy defaults.
   ========================================================================== */

/* --- Panel glass base --- */
.bg-form-panel {
  background: #D4D4D433;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--bg-radius-md, 24px);
  padding: clamp(32px, 4vw, 48px);
}

/* -----------------------------------------------------------------------
   CHECKBOX OPTION BOXES ONLY
   Selectors are scoped strictly to .ff-el-form-check elements inside
   .bg-form-panel. Normal inputs/textareas/selects/labels are NOT touched.
   ----------------------------------------------------------------------- */

/* Option box: white pill, flex row, vertically centred */
.bg-form-panel .ff-el-form-check {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 5px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 0;
}

/* Label wrapper inside the option box */
.bg-form-panel .ff-el-form-check label {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  cursor: pointer;
  margin: 0;
  color: #111111;
}

/* Native checkbox/radio — explicit sizing so it is never distorted */
.bg-form-panel .ff-el-form-check input[type="checkbox"],
.bg-form-panel .ff-el-form-check input[type="radio"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  accent-color: var(--bg-color-primary, #0101A0);
  cursor: pointer;
  appearance: auto;
  border: revert;
  background: revert;
}

/* Option label text */
.bg-form-panel .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  color: #111111;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  margin: 0;
}

/* Override Fluent Forms default: .ff-default .ff-el-form-check label.ff-el-form-check-label { margin-bottom: 7px; }
   Inside .bg-form-panel the checkbox box handles its own layout; label margin and padding must be 0. */
.bg-form-panel .ff-el-form-check label.ff-el-form-check-label {
  margin-bottom: 0;
  padding: 0;
}

/* Ensure the native input inside ff-el-form-check-label does not stretch */
/* Also overrides plugin top:-2px on .ff-el-form-check-input */
.bg-form-panel .ff-el-form-check-label input[type="checkbox"],
.bg-form-panel .ff-el-form-check-label input[type="radio"],
.bg-form-panel .ff-el-form-check .ff-el-form-check-input {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  position: static !important;
  top: 0 !important;
  vertical-align: middle;
}

/* Checkbox group grid — target the actual Fluent Forms wrapper .ff-el-input--content
   inside the column-count modifier classes .ff_list_2col / .ff_list_3col.
   The previous .ff-el-form-check-group selector did not match the real DOM. */
.bg-form-panel .ff-el-group.ff_list_2col .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bg-form-panel .ff-el-group.ff_list_3col .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Reset Fluent Forms default float/width/margin on each checkbox item
   so the grid gap can take effect */
.bg-form-panel .ff-el-group.ff_list_2col .ff-el-form-check,
.bg-form-panel .ff-el-group.ff_list_3col .ff-el-form-check {
  width: auto;
  float: none;
  margin: 0;
}

/* Responsive: collapse to single column on mobile */
@media (max-width: 767px) {

  .bg-form-panel .ff-el-group.ff_list_2col .ff-el-input--content,
  .bg-form-panel .ff-el-group.ff_list_3col .ff-el-input--content {
    grid-template-columns: 1fr;
  }

  .bg-form-panel .ff-el-form-check {
    min-height: 44px;
  }
}

/* Shared: Fluent Forms Submit Icon */
.fluentform .ff_submit_btn_wrapper {
  text-align: center;
}

/* Prevent any pseudo-element from generating content on the wrapper */
.fluentform .ff_submit_btn_wrapper::before,
.fluentform .ff_submit_btn_wrapper::after {
  content: none;
}

.fluentform .ff-btn-submit {
  width: auto;
  max-width: max-content;
}

/* --- File Upload Button Customization (.bg-upload-button) --- */
.bg-upload-button .ff_upload_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: var(--bg-color-accent, #53FBDD) !important;
  color: var(--bg-color-primary, #0101A0) !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.bg-upload-button .ff_upload_btn:hover {
  background: #ffffff !important;
  box-shadow: var(--bg-glow-accent) !important;
  transform: translateY(-2px) !important;
}

.bg-upload-button .ff_upload_btn::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230101A0'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM12 2.35C17.3296 2.35 21.65 6.67045 21.65 12C21.65 17.3296 17.3296 21.65 12 21.65C6.67045 21.65 2.35 17.3296 2.35 12C2.35 6.67045 6.67045 2.35 12 2.35Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.315 15.43L14.045 10.7V14.9H15.55V8.15H8.8V9.655H13L8.25 14.405L9.315 15.43Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Web Development: Our Works — .bg-work-grid
   ========================================================================== */

.bg-work-grid {
  padding-block: clamp(40px, 5vw, 60px);
}

.bg-work-grid__title {
  text-align: center;
  color: var(--bg-color-accent, #53FBDD);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.bg-work-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

/* Card — aspect-ratio drives height, image fills it */
.bg-work-grid__card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.bg-work-grid__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Bottom gradient scrim — behind glass overlay */
.bg-work-grid__card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Glass overlay — inset from all edges, above gradient */
.bg-work-grid__overlay {
  position: absolute;
  left: clamp(14px, 2.4vw, 32px);
  right: clamp(14px, 2.4vw, 32px);
  bottom: clamp(14px, 2.4vw, 32px);
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(12px, 1.6vw, 20px) clamp(16px, 2vw, 28px);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: clamp(8px, 1vw, 14px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Zone 1 — project name + category */
.bg-work-grid__info {
  min-width: 0;
}

.bg-work-grid__name {
  color: var(--bg-color-accent, #53FBDD);
  margin: 0 0 2px;
}

.bg-work-grid__category {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-size: 0.78em;
}

/* Zone 2 — features list */
.bg-work-grid__features {
  list-style: disc;
  padding-left: 1.1em;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78em;
  line-height: 1.45;
  min-width: 0;
}

.bg-work-grid__features li+li {
  margin-top: 2px;
}

/* Zone 3 — See more link, white */
.bg-work-grid__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 0.8em;
  white-space: nowrap;
  justify-self: end;
  transition: opacity 0.2s ease;
}

.bg-work-grid__link:hover {
  opacity: 0.75;
}

.bg-work-grid__link .bg-btn-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.bg-work-grid__link-label {
  display: inline;
}

/* Tablet: tighten overlay on narrow viewports before mobile breakpoint */
@media (max-width: 900px) {
  .bg-work-grid__overlay {
    gap: clamp(10px, 1.5vw, 20px);
  }
}

/* Mobile: single column, overlay stacks vertically */
@media (max-width: 640px) {
  .bg-work-grid__grid {
    grid-template-columns: 1fr;
  }

  .bg-work-grid__card {
    aspect-ratio: 4 / 3;
  }

  .bg-work-grid__overlay {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .bg-work-grid__link {
    justify-self: start;
  }
}

/* ==========================================================================
   08d SEO-AEO-PRICING PAGE — Section 2: Webform
   ========================================================================== */

/* --- Section: full-bleed background image + gradient overlay --- */
.bg-seo-pricing-webform {
  position: relative;
  background-image: url("assets/images/pricing/seo-aeo/webform.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: clamp(60px, 8vw, 120px) 0;
}

/* Top blue-to-transparent gradient: blends the page blue into the image */
.bg-seo-pricing-webform::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  background: linear-gradient(to bottom,
      #0101A0 0%,
      rgba(1, 1, 160, 0.75) 40%,
      rgba(1, 1, 160, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

/* --- Inner container ---
   Flex row so the panel floats right.
   Scoped padding-inline: 0 cancels the extra padding that the global
   .alignfull/.bg-section--bleed rule injects into .bg-container.
   The Blocksy container centering (margin-inline: auto) is preserved. */
.bg-seo-pricing-webform__container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-inline: 0;
}

/* --- Panel: ~50% of container width on desktop --- */
.bg-seo-pricing-webform__panel {
  width: 50%;
  max-width: none;
  min-width: 340px;
}

/* --- Responsive: tablet --- */
@media (max-width: 1024px) and (min-width: 768px) {
  .bg-seo-pricing-webform__container {
    justify-content: center;
  }

  .bg-seo-pricing-webform__panel {
    width: 70%;
  }

  .bg-form-panel .ff-el-form-check-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Responsive: mobile --- */
@media (max-width: 767px) {
  .bg-seo-pricing-webform {
    background-position: 30% center;
    padding: clamp(40px, 6vw, 80px) 0;
  }

  .bg-seo-pricing-webform__container {
    justify-content: center;
  }

  .bg-seo-pricing-webform__panel {
    width: 100%;
    min-width: 0;
  }

  .bg-form-panel .ff-el-form-check-group {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   08e SEO-AEO-PRICING PAGE — Section 3: Referral CTA
   CTA-specific styles for .bg-referral--cta variant.
   Base .bg-referral container + modifier grid rules are in section 05 above.
   ========================================================================== */

/* --- CTA variant: extra padding-block --- */
.bg-referral--cta .bg-referral__container {
  padding-block: clamp(40px, 5vw, 60px);
}

/* --- CTA content column gap --- */
.bg-referral--cta .bg-referral__content {
  gap: 16px;
}

/* --- Heading: cyan accent colour, typography from Blocksy --- */
.bg-referral__title {
  color: var(--bg-color-accent, #53FBDD);
}

/* --- Subtitle: inherit base size, white, no extra margin --- */
.bg-referral__subtitle {
  color: #ffffff;
  margin: 0;
}

/* --- Commission Policy link --- */
.bg-referral__policy {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 18px;
}

.bg-referral__policy:hover {
  color: var(--bg-color-accent, #53FBDD);
}

/* --- CTA button wrapper --- */
.bg-referral__cta {
  margin-top: 25px;
}

/* --- Button icon --- */
.bg-referral__button-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
  margin-top: -2px;
}

/* --- Visual column: figure reset, fills grid column --- */
.bg-referral__visual {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* --- CTA image variant: fills visual column --- */
.bg-referral--cta .bg-referral__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: visible;
}

/* --- Responsive: mobile for CTA variant --- */
@media (max-width: 767px) {
  .bg-referral--cta .bg-referral__container {
    /* padding handled by clamp */
  }
}

/* ==========================================================================
   09 LET'S TALK MARQUEE — .bg-talk-marquee
   Shared portable marquee. Seamless infinite right-to-left.
   Colors: "Let's" = brand blue #0500A8, "talk" = accent #53FBDD.
   ========================================================================== */

/* --- Section wrapper: white strip, no inherited section padding --- */
.bg-marquee,
.bg-talk-marquee {
  background: #ffffff;
  overflow: hidden;
  padding-block: 0;
}

/* --- Inner viewport: compact padding = shorter strip height --- */
.bg-talk-marquee__viewport {
  overflow: hidden;
  width: 100%;
  padding-block: clamp(12px, 1vw, 20px);
}

/* --- Track: two duplicate groups for seamless loop --- */
.bg-talk-marquee__track {
  display: flex;
  width: max-content;
  animation: bg-marquee-scroll 22s linear infinite;
}

/* --- Group: one full set of items --- */
.bg-talk-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
  padding-inline: clamp(5px, 0.6vw, 10px);
  flex-shrink: 0;
}

/* --- Text: marquee display — font-size exception per AGENTS.md --- */
.bg-talk-marquee__text {
  white-space: nowrap;
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 700;
  color: #000;
  line-height: 1;
}

/* "talk" in italic, same color */
.bg-talk-marquee__text em {
  font-style: italic;
  font-weight: 700;
  color: inherit;
}

/* --- Icon/image: proportional to text --- */
.bg-talk-marquee__image {
  height: clamp(15px, 1.2vw, 30px);
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* --- Keyframe: shift left by one group width (JS sets --bg-marquee-shift on the track) --- */
@keyframes bg-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--bg-marquee-shift, -50%));
  }
}

/* --- Reduced motion: freeze animation --- */
@media (prefers-reduced-motion: reduce) {
  .bg-talk-marquee__track {
    animation: none;
  }
}

/* ==========================================================================
   10 CLIENTS SECTION — .bg-clients
   ========================================================================== */

/* Breathing space between "Our Clients" heading and logo Swiper */
.bg-clients .bg-section-heading {
  margin-bottom: 0;
}

.bg-clients__subtitle {
  margin-bottom: clamp(28px, 4vw, 56px);
}

/* ==========================================================================
   11 FOOTER — .bg-footer
   Shared portable footer. Two internal sections:
   .bg-footer__main  — content + gradient
   .bg-footer__pixel — decorative pixel strip
   ========================================================================== */

/* --- Outer wrapper --- */
.bg-footer {
  color: #ffffff;
}

/* --- Section 1: main content area with gradient --- */
.bg-footer__main {
  background: linear-gradient(180deg, #0101A0 0%, #000000 100%);
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* --- Inner container: layout only --- */
.bg-footer__container {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  min-width: 0;
}

/* --- Section 2: decorative pixel strip (source: 1920×88px) --- */
.bg-footer__pixel {
  background-color: #000000;
  background-image: url("assets/images/global/bg-element.png");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 88px;
  height: 88px;
  pointer-events: none;
  user-select: none;
}

/* --- Top row: brand + right content --- */
.bg-footer__top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  min-width: 0;
}

/* --- Brand block --- */
.bg-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.bg-footer__logo {
  display: block;
  width: clamp(160px, 18vw, 220px);
  height: auto;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.bg-footer__address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* --- Social links --- */
.bg-footer__socials {
  display: flex;
  gap: 20px;
  align-items: center;
}

.bg-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  transition: color var(--bg-transition), transform var(--bg-transition);
}

.bg-footer__social-link:hover {
  color: var(--bg-color-accent, #53FBDD);
  transform: translateY(-2px);
}

.bg-footer__social-link svg {
  width: 24px;
  height: 24px;
}

/* --- Right content area --- */
.bg-footer__right {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  min-width: 0;
}

/* --- Subscribe block --- */
.bg-footer__subscribe {
  max-width: 480px;
  min-width: 0;
}

.bg-footer__subscribe-heading {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px;
}

/* Fluent Forms: footer subscribe — scoped overrides */
.bg-footer__subscribe .fluentform {
  width: 100% !important;
}

/* Override Fluent Forms 2-column container (inline flex-basis: 50%) */
.bg-footer__subscribe .ff-t-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.bg-footer__subscribe .ff-t-cell:first-child {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.bg-footer__subscribe .ff-t-cell:last-child {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Also handle if Fluent Forms renders a <form> directly */
.bg-footer__subscribe .fluentform form {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.bg-footer__subscribe .ff-el-group {
  margin-bottom: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.bg-footer__subscribe .ff_submit_btn_wrapper {
  margin-bottom: 0 !important;
  flex: 0 0 auto !important;
}

/* Hide Fluent Forms labels in footer subscribe */
.bg-footer__subscribe .ff-el-input--label {
  display: none !important;
}

/* Input field */
.bg-footer__subscribe .ff-el-form-control {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px 0 0 8px !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  min-height: 48px !important;
  height: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none;
}

.bg-footer__subscribe .ff-el-form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.bg-footer__subscribe .ff-el-form-control:focus {
  border-color: var(--bg-color-accent, #53FBDD) !important;
}

/* Submit button */
.bg-footer__subscribe .ff-btn-submit {
  background: var(--bg-color-accent, #53FBDD) !important;
  color: #010140 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  height: 48px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bg-transition), transform var(--bg-transition);
}

.bg-footer__subscribe .ff-btn-submit:hover {
  background: #3ee0c5 !important;
  transform: translateY(-1px);
}

/* --- Navigation columns --- */
.bg-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  min-width: 0;
}

.bg-footer__nav-col {
  min-width: 0;
}

.bg-footer__nav-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px;
}

.bg-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bg-footer__nav-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--bg-transition);
}

.bg-footer__nav-link:hover {
  color: var(--bg-color-accent, #53FBDD);
}

/* --- Bottom bar: legal + copyright --- */
.bg-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 0;
}

.bg-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bg-footer__legal-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--bg-transition);
}

.bg-footer__legal-link:hover {
  color: var(--bg-color-accent, #53FBDD);
}

.bg-footer__legal-sep {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
}

.bg-footer__copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* --- Responsive: tablet --- */
@media (max-width: 1024px) {
  .bg-footer__top {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 64px);
  }

  .bg-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Responsive: mobile --- */
@media (max-width: 767px) {
  .bg-footer__nav {
    grid-template-columns: 1fr;
  }

  .bg-footer__subscribe {
    max-width: 100%;
  }

  .bg-footer__subscribe .ff-t-container {
    flex-wrap: wrap !important;
  }

  .bg-footer__subscribe .ff-t-cell:first-child {
    flex: 1 1 100% !important;
  }

  .bg-footer__subscribe .ff-t-cell:last-child {
    flex: 1 1 100% !important;
    margin-top: 8px;
  }

  .bg-footer__subscribe .ff-el-form-control {
    border-radius: 8px !important;
  }

  .bg-footer__subscribe .ff-btn-submit {
    border-radius: 8px !important;
    width: 100% !important;
  }

  .bg-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .bg-footer__legal {
    gap: 6px;
  }

  .bg-footer__socials {
    gap: 16px;
  }

  .bg-footer__pixel {
    height: 88px;
    background-size: auto 88px;
  }
}

/* Creative Pricing: Credit Policy */
.bg-credit-policy__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
}

.bg-credit-policy__toggle {
  list-style: none;
  width: fit-content;
  margin-inline: auto;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.bg-credit-policy__toggle::-webkit-details-marker {
  display: none;
}

.bg-credit-policy__toggle::marker {
  content: "";
}

.bg-credit-policy__panel {
  width: 100%;
  border: 1px solid #A5A5A580;
  border-radius: var(--bg-radius-md, 24px);
  margin-top: -18px;
  padding: clamp(48px, 5vw, 64px) clamp(32px, 5vw, 64px) clamp(40px, 4vw, 56px);
  box-sizing: border-box;
}

.bg-credit-policy__details[open] .bg-credit-policy__panel {
  animation: bgCreditPolicyOpen 0.35s ease both;
}

@keyframes bgCreditPolicyOpen {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-credit-policy__details[open] .bg-credit-policy__panel {
    animation: none;
  }
}

.bg-credit-policy__panel,
.bg-credit-policy__content {
  text-align: left;
}

.bg-credit-policy__content {
  max-width: 960px;
}

.bg-credit-policy__content p {
  margin: 0 0 8px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
  line-height: 1.7;
}

.bg-credit-policy__content p strong {
  opacity: 1;
  display: block;
  margin-top: clamp(24px, 3vw, 36px);
  margin-bottom: 4px;
}

.bg-credit-policy__content p:first-child strong {
  margin-top: 0;
}

.bg-credit-policy__content ul {
  margin: 0 0 8px;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
  line-height: 1.7;
  list-style-position: outside;
  text-align: left;
}

.bg-credit-policy__content li::marker {
  color: var(--bg-color-accent, #53FBDD);
}

@media (max-width: 767px) {
  .bg-credit-policy__panel {
    padding: 40px 20px 32px;
    margin-top: -16px;
  }
}

/* 404 Page */
.bg-404 {
  padding-block: 0;
  min-height: 100svh;
  background-image: url("assets/images/404/404-bg.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.bg-404__container {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.bg-404__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--bg-edge, 5vw);
  padding-bottom: clamp(50px, 3vh, 60px);
  box-sizing: border-box;
}

.bg-404__title {
  color: var(--bg-color-primary, #0101A0);
  margin: 0 0 clamp(8px, 1vw, 14px);
  margin-block-end: 0 !important;
}

.bg-404__text {
  color: var(--bg-color-primary, #0101A0);
  margin: 0 0 clamp(14px, 1.5vw, 20px);
}

.bg-404__cta {
  display: flex;
  justify-content: center;
}

@media (max-width: 1024px) {
  .bg-404 {
    background-position: center center;
  }
}

@media (max-width: 767px) {
  .bg-404 {
    min-height: 100svh;
    background-position: center top;
  }

  .bg-404__container {
    min-height: 100svh;
  }
}

/* Creative: Formats Swiper */
.bg-creative-formats {
  padding-block: clamp(40px, 5vw, 60px);
}

/* Web Dev: title bottom spacing when no lead paragraph */
.bg-creative-formats--web-development .bg-creative-formats__title {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.bg-creative-formats__title {
  margin: 0 0 12px;
  color: var(--bg-color-accent, #53FBDD);
}

.bg-creative-formats__lead {
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 560px;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
}

.bg-creative-formats__swiper {
  overflow: visible;
  margin-top: clamp(28px, 4vw, 56px);
}

.bg-creative-formats__wrapper {
  align-items: stretch;
}

.bg-creative-formats__slide {
  display: flex;
  height: auto;
  box-sizing: border-box;
}

.bg-creative-formats__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 20px 15px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--bg-radius-md, 24px);
  background: transparent;
  color: var(--bg-color-text, #ffffff);
  box-sizing: border-box;
  transition: background var(--bg-transition, 180ms ease), border-color var(--bg-transition, 180ms ease), color var(--bg-transition, 180ms ease);
}

.bg-creative-formats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  margin-inline: 0;
  margin-bottom: clamp(12px, 1.5vw, 20px);
  flex-shrink: 0;
  /* Default: mint icon on dark card */
  color: var(--bg-color-accent, #53FBDD);
}

.bg-creative-formats__card--active .bg-creative-formats__icon,
.bg-creative-formats__card:hover .bg-creative-formats__icon {
  /* Active: inherits primary color from card's color property */
  color: inherit;
}

.bg-creative-formats__card:hover .bg-service-icon {
  color: var(--bg-color-primary, #0101A0);
}

.bg-creative-formats__icon-image,
.bg-creative-formats__icon img,
.bg-creative-formats__icon svg {
  display: block;
  width: clamp(44px, 4vw, 52px);
  height: clamp(44px, 4vw, 52px);
}

.bg-creative-formats__card--active,
.bg-creative-formats__card:hover {
  background: var(--bg-color-accent, #53FBDD);
  border-color: var(--bg-color-accent, #53FBDD);
  /* color: primary drives currentColor on all .bg-service-icon__ring and .bg-service-icon__fill */
  color: var(--bg-color-primary, #0101A0);
}

.bg-creative-formats__card-title {
  margin: 0 0 10px;
  color: inherit;
}

.bg-creative-formats__card-text {
  margin: 0;
  color: inherit;
  opacity: 0.78;
  font-size: 18px;
}

.bg-creative-formats__card--active .bg-creative-formats__card-text,
.bg-creative-formats__card:hover .bg-creative-formats__card-text {
  opacity: 0.85;
}

/* Pagination dots */
.bg-creative-formats__pagination.swiper-pagination {
  position: static;
  inset: auto;
  transform: none;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: clamp(20px, 3vw, 32px);
}

.bg-creative-formats__pagination .swiper-pagination-bullet {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: #ffffff;
  opacity: 1;
  margin: 0;
  transition: background var(--bg-transition, 180ms ease), width var(--bg-transition, 180ms ease);
}

.bg-creative-formats__pagination .swiper-pagination-bullet-active {
  background: var(--bg-color-accent, #53FBDD);
  width: 36px;
}

/* Responsive */
@media (max-width: 1023px) {
  .bg-creative-formats__card {
    border-radius: var(--bg-radius-sm, 14px);
  }
}

@media (max-width: 767px) {
  .bg-creative-formats__lead {
    margin-bottom: clamp(24px, 5vw, 36px);
  }

  .bg-creative-formats__pagination {
    margin-top: 28px;
  }
}


/* Creative: Why Us */
.bg-creative-why {
  padding-block: clamp(40px, 5vw, 60px);
}

.bg-creative-why__container {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  grid-template-areas: "cards content";
  column-gap: clamp(48px, 7vw, 120px);
  row-gap: clamp(36px, 5vw, 56px);
  min-width: 0;
}

/* Content: right column via grid-area */
.bg-creative-why__content {
  grid-area: content;
  min-width: 0;
}

.bg-creative-why__title {
  color: var(--bg-color-accent, #53FBDD);
  margin: 0 0 clamp(16px, 2vw, 24px);
}

.bg-creative-why__text {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
  margin: 0;
}

/* Cards: left column via grid-area — 12-col mosaic */
.bg-creative-why__cards {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  min-width: 0;
}

.bg-creative-why__card:nth-child(1),
.bg-creative-why__card:nth-child(2) {
  grid-column: span 6;
}

.bg-creative-why__card:nth-child(3) {
  grid-column: span 7;
}

.bg-creative-why__card:nth-child(4) {
  grid-column: span 5;
}

/* Base card — white glyph icons on dark background */
.bg-creative-why__card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.5vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--bg-radius-md, 24px);
  background: rgba(255, 255, 255, 0.06);
  color: var(--bg-color-text, #ffffff);
  box-sizing: border-box;
  min-width: 0;
  /* icon inherits color: #ffffff from parent text color */
  transition: background var(--bg-transition, 180ms ease), border-color var(--bg-transition, 180ms ease), color var(--bg-transition, 180ms ease);
}

/* Active / mint card on hover — blue glyph icon on mint */
.bg-creative-why__card:hover {
  background: var(--bg-color-accent, #53FBDD);
  border-color: var(--bg-color-accent, #53FBDD);
  /* color: primary drives currentColor on icon fill paths */
  color: var(--bg-color-primary, #0101A0);
}

/* Icon wrapper */
.bg-creative-why__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: clamp(20px, 3vw, 32px);
  flex-shrink: 0;
}

.bg-creative-why__icon img,
.bg-creative-why__icon svg {
  display: block;
  width: clamp(36px, 3vw, 44px);
  height: clamp(36px, 3vw, 44px);
  flex-shrink: 0;
}

/* Card title (h4) — color only */
.bg-creative-why__card-title {
  color: inherit;
  margin: 0 0 8px;
}

/* Card body text */
.bg-creative-why__card-text {
  font-size: 18px;
  color: inherit;
  opacity: 0.82;
  margin: 0;
  line-height: 1.6;
}

.bg-creative-why__card:hover .bg-creative-why__card-text {
  opacity: 0.88;
}

/* Tablet: stack cleanly — content above cards */
@media (max-width: 1100px) {
  .bg-creative-why__container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "cards";
    gap: clamp(36px, 5vw, 56px);
  }

  .bg-creative-why__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bg-creative-why__card:nth-child(1),
  .bg-creative-why__card:nth-child(2),
  .bg-creative-why__card:nth-child(3),
  .bg-creative-why__card:nth-child(4) {
    grid-column: auto;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .bg-creative-why__cards {
    grid-template-columns: 1fr;
  }

  .bg-creative-why__card:nth-child(3),
  .bg-creative-why__card:nth-child(4) {
    grid-column: 1;
  }
}

/* Creative: Pricing Hero Section */
.bg-creative-pricing,
.bg-section.bg-creative-pricing {
  padding-top: var(--bg-section-padding-y);
  padding-bottom: clamp(16px, 2vw, 30px);
}

/* Creative: Pricing Model Section */
.bg-creative-pricing-model,
.bg-section.bg-creative-pricing-model {
  /* background: linear-gradient(120deg, #808FFE 0%, #4A63FA 38%, #809DEB 72%, #8EA0EC 100%); */
  padding-top: clamp(32px, 4vw, 60px);
  padding-bottom: clamp(32px, 4vw, 60px);
}

/* Creative: Pricing Table Section */
.bg-creative-pricing-table,
.bg-section.bg-creative-pricing-table {
  padding-top: clamp(32px, 4vw, 60px);
  padding-bottom: clamp(32px, 4vw, 60px);
}

.bg-creative-pricing-model__heading {
  text-align: center;
  color: var(--bg-color-accent, #53FBDD);
  text-transform: uppercase;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.bg-creative-pricing-model__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  max-width: 1200px;
  margin-inline: auto;
}

.bg-creative-pricing-model__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--bg-radius-md, 24px);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  transition:
    transform var(--bg-transition, 180ms ease),
    background var(--bg-transition, 180ms ease),
    border-color var(--bg-transition, 180ms ease);
}

.bg-creative-pricing-model__item:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.48);
}

.bg-creative-pricing-model__item-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.bg-creative-pricing-model__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.bg-creative-pricing-model__title {
  margin: 0 !important;
  color: #ffffff;
  text-transform: uppercase;
}

.bg-creative-pricing-model__tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 16px;
  width: fit-content;
}

.bg-creative-pricing-model__text {
  color: #ffffff;
  opacity: 0.9;
}

@media (max-width: 767px) {
  .bg-creative-pricing-model__grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 3.5vw, 36px);
  }
}

.bg-creative-pricing__header {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.bg-creative-pricing__heading {
  margin: 0 0 clamp(16px, 2vw, 28px);
}

.bg-creative-pricing__copy {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 720px;
  margin-inline: auto;
  opacity: 0.85;
}

.bg-creative-pricing__title {
  color: var(--bg-color-accent, #53FBDD);
  text-transform: uppercase;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

/* First column row labels */
.bg-creative-pricing__row-label {
  color: var(--bg-color-text, #ffffff);
}

/* Scoped column widths for the Creative Pricing table */
.bg-creative-pricing__table th,
.bg-creative-pricing__table td {
  width: 25%;
}

/* Centered CTA below table */
.bg-creative-pricing__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

/* Credit Definition intro row */
.bg-creative-pricing__credit-intro td {
  padding: clamp(12px, 1.5vw, 18px) 20px;
  text-align: left;
  border-top: 2px solid var(--theme-border-color);
}

.bg-creative-pricing__credit-title {
  color: var(--bg-color-accent, #53FBDD);
  margin: 0 0 8px;
}

.bg-creative-pricing__credit-copy {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
  margin: 0;
}

/* Credit Definition mid-table header row */
.bg-creative-pricing__credit-header-row th {
  border-top: 1px solid var(--theme-border-color);
}

/* ==========================================================================
   Creative: Creative Credits
   ========================================================================== */

.bg-creative-credits {
  padding-block: clamp(40px, 5vw, 60px);
}

/* Card — overflow visible so cloud can bleed above/left border */
.bg-creative-credits__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-radius: 25px;
  overflow: visible;
  isolation: isolate;
}

/* Gradient border via pseudo-element */
.bg-creative-credits__card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.7) 100%);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 3;
}

/* Image column — inset from left border, cloud overlaps top border lightly */
.bg-creative-credits__media {
  position: relative;
  align-self: stretch;
  margin-left: 0;
  margin-top: clamp(-36px, -2.4vw, -20px);
  z-index: 2;
}

.bg-creative-credits__image {
  display: block;
  width: calc(100% - 10px);
  max-width: calc(100% - 10px);
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* Content column — sits above border and image */
.bg-creative-credits__content {
  padding: clamp(26px, 3vw, 40px) clamp(32px, 4vw, 56px);
  position: relative;
  z-index: 4;
}

.bg-creative-credits__title {
  color: var(--bg-color-accent, #53FBDD);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.bg-creative-credits__text,
.bg-creative-credits__list,
.bg-creative-credits__list li {
  font-size: clamp(18px, 1.35vw, 24px);
}

.bg-creative-credits__text {
  margin-bottom: clamp(12px, 1.5vw, 20px);
  opacity: 0.9;
}

.bg-creative-credits__list {
  padding-left: 1.4em;
  margin-bottom: clamp(12px, 1.5vw, 20px);
  opacity: 0.9;
}

.bg-creative-credits__list li {
  margin-bottom: 0.5em;
}

.bg-creative-credits__actions {
  margin-top: clamp(24px, 3vw, 36px);
}

/* Tablet — reduce cloud overlap */
@media (max-width: 1024px) {
  .bg-creative-credits__media {
    margin-top: clamp(-32px, -2.5vw, -16px);
  }
}

/* Mobile — stack, remove overlap, restore clip */
@media (max-width: 767px) {
  .bg-creative-credits__card {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .bg-creative-credits__media {
    margin-top: 0;
    margin-left: 0;
    min-height: 280px;
  }

  .bg-creative-credits__image {
    width: 100%;
    max-width: 100%;
    object-position: center center;
  }
}

/* SEO-AEO: Search Visibility System */

.bg-seo-aeo-system {
  --system-step-icon-size: clamp(68px, 4.8vw, 84px);
  --system-step-pad: clamp(10px, 1.5vw, 18px);
}

.bg-seo-aeo-system__container {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

/* Two-column header: h2 left, paragraph right — columns match body grid for alignment */
.bg-seo-aeo-system__header {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
}

.bg-seo-aeo-system__heading {
  margin: 0;
  color: var(--bg-color-accent, #53FBDD);
}

.bg-seo-aeo-system__copy {
  margin: 0;
  opacity: 0.85;
}

/* Two-column body: timeline left, media right */
.bg-seo-aeo-system__body {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
}

/* Steps column — wrapper establishes stacking context and hosts the single connector line */
.bg-seo-aeo-system__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Single connector line: center-of-first-icon to center-of-last-icon */
.bg-seo-aeo-system__steps::before {
  content: "";
  position: absolute;
  left: calc(var(--system-step-icon-size) / 2);
  transform: translateX(-0.5px);
  top: calc(var(--system-step-pad) + var(--system-step-icon-size) / 2);
  bottom: calc(var(--system-step-pad) + var(--system-step-icon-size) / 2);
  width: 1px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 0;
  pointer-events: none;
}

/* Suppress the full-height line div — wrapper ::before handles the connector */
.bg-seo-aeo-system__line {
  display: none;
}

/* Individual step button */
.bg-seo-aeo-system__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--system-step-icon-size) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: var(--system-step-pad) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--bg-color-text, #ffffff);
  transition: opacity var(--bg-transition, 180ms ease);
}


/* Icon wrapper — opaque base covers any residual line behind it */
.bg-seo-aeo-system__step-icon {
  width: var(--system-step-icon-size);
  height: var(--system-step-icon-size);
  flex: 0 0 var(--system-step-icon-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;

  /* Opaque page-blue base: fully occludes connector line */
  background: var(--bg-color-primary, #0101A0);

  /* Outer ring */
  border: 1.5px solid rgba(255, 255, 255, 0.6);

  transition:
    border-color var(--bg-transition, 180ms ease),
    box-shadow var(--bg-transition, 180ms ease);
}

/* Inner filled circle via ::before — inactive: solid muted lavender covers the connector line */
.bg-seo-aeo-system__step-icon::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 0;
  transition:
    background var(--bg-transition, 180ms ease),
    border-color var(--bg-transition, 180ms ease);
}

/* SVG glyph — sits above inner fill */
.bg-seo-aeo-system__step-icon svg {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(28px, 2.4vw, 38px);
  height: clamp(28px, 2.4vw, 38px);
  color: rgba(1, 1, 160, 0.55);
  transition: color var(--bg-transition, 180ms ease);
}

/* Inactive step — mute title/desc text */
.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active) .bg-seo-aeo-system__step-title {
  opacity: 0.55;
}

.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active) .bg-seo-aeo-system__step-desc {
  opacity: 0.45;
}

/* Hover on inactive — accent outer ring only, inner fill stays light */
.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):hover .bg-seo-aeo-system__step-icon,
.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):focus-within .bg-seo-aeo-system__step-icon {
  border-color: var(--bg-color-accent, #53FBDD);
}

.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):hover .bg-seo-aeo-system__step-icon::before,
.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):focus-within .bg-seo-aeo-system__step-icon::before {
  background: rgba(200, 204, 240, 0.95);
  border-color: rgba(83, 251, 221, 0.55);
}

.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):hover .bg-seo-aeo-system__step-icon svg,
.bg-seo-aeo-system__step:not(.bg-seo-aeo-system__step--active):focus-within .bg-seo-aeo-system__step-icon svg {
  color: rgba(1, 1, 160, 0.8);
}

/* Active step: accent outer ring + accent inner fill + dark glyph */
/* Outer background stays var(--bg-color-primary) — NOT changed to accent */
.bg-seo-aeo-system__step--active .bg-seo-aeo-system__step-icon {
  background: var(--bg-color-primary, #0101A0);
  border-color: var(--bg-color-accent, #53FBDD);
  box-shadow:
    0 0 0 3px rgba(83, 251, 221, 0.25),
    0 0 16px rgba(83, 251, 221, 0.22);
}

.bg-seo-aeo-system__step--active .bg-seo-aeo-system__step-icon::before {
  background: var(--bg-color-accent, #53FBDD);
  border-color: var(--bg-color-accent, #53FBDD);
}

.bg-seo-aeo-system__step--active .bg-seo-aeo-system__step-icon svg {
  color: var(--bg-color-primary, #0101A0);
}

/* Step text */
.bg-seo-aeo-system__step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bg-seo-aeo-system__step-title {
  margin: 0;
  color: var(--bg-color-text, #ffffff);
  transition: opacity var(--bg-transition, 180ms ease);
}

.bg-seo-aeo-system__step-desc {
  margin: 0;
  opacity: 0.78;
  transition: opacity var(--bg-transition, 180ms ease);
}

/* Visual/panel column */
.bg-seo-aeo-system__visual {
  position: relative;
  min-width: 0;
}

.bg-seo-aeo-system__media-panel {
  display: none;
  overflow: hidden;
}

.bg-seo-aeo-system__media-panel--active {
  display: block;
  position: relative;
  /* Let active image determine the wrapper height */
  z-index: 2;
}

.bg-seo-aeo-system__media-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablet ≤1024px — collapse header and body to single column */
@media (max-width: 1024px) {
  .bg-seo-aeo-system__header {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 28px);
  }

  .bg-seo-aeo-system__body {
    grid-template-columns: 1fr;
  }
}

/* Mobile ≤599px — reduce icon size */
@media (max-width: 599px) {
  .bg-seo-aeo-system {
    --system-step-icon-size: clamp(52px, 14vw, 68px);
    --system-step-pad: clamp(8px, 2vw, 14px);
  }

  .bg-seo-aeo-system__step {
    column-gap: clamp(16px, 4vw, 24px);
  }
}

/* ==========================================================================
   Case Study Single
   Template: single-case-studies.php
   Scope: .bg-case-study-single and all child selectors
   ========================================================================== */

/* Wrapper — applies primary bg and white text to the whole template */
.bg-case-study-single {
  background: var(--bg-color-primary, #0101A0);
  color: var(--bg-color-text, #ffffff);
}

.bg-case-study-single *,
.bg-case-study-single *::before,
.bg-case-study-single *::after {
  box-sizing: border-box;
}

.bg-case-study-single :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
  margin: 0;
}

.bg-case-study-single :where(img, svg) {
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* SECTION 1: HERO                                                     */
/* Section = blue page bg. Featured Image on inner .bg-case-hero__card */
/* ------------------------------------------------------------------ */

.bg-case-hero {
  padding-block: clamp(40px, 5vw, 60px);
  padding-top: 0;
  background: var(--bg-color-primary, #0101A0);
}

.bg-case-hero__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Inner card: contains the featured image background */
.bg-case-hero__card {
  position: relative;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: clamp(320px, 45vw, 560px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

/* Dark overlay inside the card */
.bg-case-hero__overlay {
  position: absolute;
  inset: 0;
  background: #00000099;
  z-index: 0;
}

.bg-case-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2vw, 20px);
  width: 100%;
  max-width: none;
  padding: clamp(32px, 5vw, 60px) clamp(24px, 5vw, 64px);
  border-radius: 0;
}

/* Logo tab — absolutely positioned top center, out of content flow */
.bg-case-hero__logo-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.bg-case-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0 0 12px 12px;
  max-width: 160px;
  overflow: hidden;
}

.bg-case-hero__logo img {
  display: block;
  max-height: 72px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.bg-case-hero__title {
  margin: 0;
  color: var(--bg-color-text, #ffffff);
  font-size: 48px;
  line-height: 1.15;
  max-width: none;
}

@media (max-width: 767px) {
  .bg-case-hero__title {
    font-size: clamp(28px, 7vw, 40px);
  }
}

@media (max-width: 480px) {
  .bg-case-hero__title {
    font-size: clamp(24px, 8vw, 32px);
  }
}

.bg-case-hero__summary {
  margin: 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
  max-width: none;
}

/* ------------------------------------------------------------------ */
/* SECTION 2: QUICK STATS BAR                                          */
/* Matches bg-seo-aeo-stats visual direction                           */
/* ------------------------------------------------------------------ */

.bg-case-stats {
  padding-block: clamp(40px, 5vw, 60px);
  text-align: center;
}

.bg-case-stats__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 52px);
}

.bg-case-stats__heading {
  color: var(--bg-color-accent, #53FBDD);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.bg-case-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
  align-items: stretch;
  width: 100%;
  max-width: 1000px;
}

.bg-case-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

/* Fixed-height vertical divider, vertically centered — consistent across all items */
.bg-case-stats__item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -12.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 76px;
  background: rgba(255, 255, 255, 0.55);
}

.bg-case-stats__value {
  display: flex;
  align-items: center;
  color: var(--bg-color-accent, #53FBDD);
  font-family: 'Quantico', sans-serif;
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  min-height: 1.1em;
  margin-bottom: 10px;
}

.bg-case-stats__label {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 767px) {
  .bg-case-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }

  .bg-case-stats__item:not(:first-child)::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .bg-case-stats__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .bg-case-stats__item:not(:first-child)::before {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* SHARED: Pill/label — fit-content, no full width                     */
/* ------------------------------------------------------------------ */

.bg-case-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: max-content;
  padding: 4px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  color: var(--bg-color-text, #ffffff);
  font-weight: 500;
  white-space: nowrap;
}

.bg-case-pill--dark {
  border-color: rgba(1, 1, 160, 0.45);
  color: var(--bg-color-primary, #0101A0);
}

/* ------------------------------------------------------------------ */
/* SHARED: Section titles (.bg-case-section-title = h3)                */
/* ------------------------------------------------------------------ */

.bg-case-section-title {
  margin: 0;
  color: var(--bg-color-accent, #53FBDD);
}

.bg-case-section-title--dark {
  color: var(--bg-color-primary, #0101A0);
}

/* ------------------------------------------------------------------ */
/* SECTION 3: THE STORY                                                */
/* ------------------------------------------------------------------ */

.bg-case-story {
  padding-block: clamp(48px, 6vw, 80px);
}

.bg-case-story__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  min-width: 0;
}

.bg-case-story__text {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  min-width: 0;
}

.bg-case-story__title {
  margin: 0;
  color: var(--bg-color-accent, #53FBDD);
}

.bg-case-story__content {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
}

.bg-case-story__content > * {
  margin-top: 0;
  margin-bottom: 1em;
}

.bg-case-story__content > *:last-child {
  margin-bottom: 0;
}

.bg-case-story__media {
  min-width: 0;
}

.bg-case-story__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bg-radius-md, 24px);
  object-fit: cover;
}

@media (max-width: 767px) {
  .bg-case-story__container {
    grid-template-columns: 1fr;
  }

  .bg-case-story__media {
    order: -1;
  }
}

/* ------------------------------------------------------------------ */
/* SECTION 4: GOAL + SOLUTION                                          */
/* ------------------------------------------------------------------ */

.bg-case-goal-solution {
  padding-block: clamp(40px, 5vw, 64px);
}

.bg-case-goal-solution__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
  min-width: 0;
  align-items: start;
}

/* Base card */
.bg-case-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: var(--bg-radius-md, 24px);
  min-width: 0;
}

/* Goal card — dashed outline */
.bg-case-card--goal {
  border: 2px dashed rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--bg-color-text, #ffffff);
}

.bg-case-card--goal .bg-case-card__body {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
}

/* Solution card — accent mint background */
.bg-case-card--solution {
  background: var(--bg-color-accent, #53FBDD);
  color: var(--bg-color-primary, #0101A0);
}

.bg-case-card__body {
  opacity: 0.9;
}

.bg-case-card__body > * {
  margin-top: 0;
  margin-bottom: 0.9em;
}

.bg-case-card__body > *:last-child {
  margin-bottom: 0;
}

.bg-case-card__body--dark {
  color: var(--bg-color-primary, #0101A0);
}

/* Deliverables list inside Solution card */
.bg-case-deliverables {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.bg-case-deliverables__heading {
  font-weight: 700;
  color: var(--bg-color-primary, #0101A0);
  margin: 0;
}

.bg-case-deliverables__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bg-case-deliverables__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  position: relative;
}

.bg-case-deliverables__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  background: var(--bg-color-primary, #0101A0);
  border-radius: 50%;
}

.bg-case-deliverables__title {
  display: block;
  font-weight: 700;
  color: var(--bg-color-primary, #0101A0);
}

.bg-case-deliverables__text {
  display: block;
  color: var(--bg-color-primary, #0101A0);
  opacity: 0.82;
}

@media (max-width: 767px) {
  .bg-case-goal-solution__container {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* SECTION 5: RESULTS                                                  */
/* ------------------------------------------------------------------ */

.bg-case-result {
  padding-block: clamp(48px, 6vw, 80px);
}

.bg-case-result__container {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
}

.bg-case-result__title {
  margin: 0;
  color: var(--bg-color-accent, #53FBDD);
}

.bg-case-result__intro {
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
}

.bg-case-result__intro > * {
  margin-top: 0;
  margin-bottom: 0.8em;
}

.bg-case-result__intro > *:last-child {
  margin-bottom: 0;
}

/* 2-column text grid — no heavy card backgrounds */
.bg-case-result__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px) clamp(32px, 4vw, 60px);
  margin-top: 8px;
}

.bg-case-result__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 16px;
  position: relative;
}

/* Subtle left accent line instead of card */
.bg-case-result__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--bg-color-accent, #53FBDD);
  border-radius: 2px;
  opacity: 0.6;
}

.bg-case-result__item-title {
  display: block;
  color: var(--bg-color-accent, #53FBDD);
  font-weight: 700;
}

.bg-case-result__item-text {
  margin: 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.8;
}

@media (max-width: 599px) {
  .bg-case-result__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* SECTION 6: FINAL INSIGHT                                            */
/* ------------------------------------------------------------------ */

.bg-case-final {
  padding-block: clamp(48px, 6vw, 80px);
}

.bg-case-final__container {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 44px);
  min-width: 0;
}

.bg-case-final__title {
  margin: 0;
}

.bg-case-final__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 3vw, 36px);
  min-width: 0;
}

.bg-case-final__media {
  min-width: 0;
}

.bg-case-final__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bg-radius-md, 24px);
  object-fit: cover;
}

.bg-case-final__content {
  min-width: 0;
  color: var(--bg-color-text, #ffffff);
  opacity: 0.88;
}

.bg-case-final__content > * {
  margin-top: 0;
  margin-bottom: 0.9em;
}

.bg-case-final__content > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .bg-case-final__body {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* SECTION 7: CTA                                                      */
/* ------------------------------------------------------------------ */

.bg-case-cta {
  padding-block: clamp(48px, 6vw, 80px);
}

.bg-case-cta__container {
  display: flex;
  justify-content: center;
}

.bg-case-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (max-width: 480px) {
  .bg-case-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .bg-case-cta__actions .wp-block-button {
    width: 100%;
    display: flex;
  }

  .bg-case-cta__actions .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Shared: Commission Policy Section
   ========================================================================== */

.bg-commission-policy {
  background-color: var(--bg-color-primary, #0101A0);
  color: #ffffff;
}

.bg-commission-policy__eyebrow {
  color: var(--bg-color-accent, #53FBDD);
  display: block;
  margin-bottom: 8px;
}

.bg-commission-policy__title {
  color: #ffffff;
  margin: 0 0 12px;
}

.bg-commission-policy__meta {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.bg-commission-policy__divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.18);
  margin-top: 24px;
  margin-bottom: 40px;
}

.bg-commission-policy__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.bg-commission-policy__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bg-commission-policy__section-title {
  color: #ffffff;
}

.bg-commission-policy__subheading {
  margin: 12px 0 0;
}

.bg-commission-policy__section p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.bg-commission-policy__list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.bg-commission-policy__example {
  font-style: italic;
  opacity: 0.85;
}

.bg-commission-policy__note {
  font-size: 14px;
  opacity: 0.85;
}

/* Commission Table Overrides */
.bg-commission-policy__table-wrap {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}

.bg-commission-policy__table {
  width: 100%;
}

.bg-commission-policy .bg-service-table {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
}

.bg-commission-policy .bg-service-table th,
.bg-commission-policy .bg-service-table td {
  border-color: rgba(255, 255, 255, 0.18);
}

.bg-commission-policy__table .bg-table__row-label {
  font-size: 18px;
  font-weight: 500;
}