.site-container {
  width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-width));
  margin-inline: auto;
}

.site-main {
  min-height: 45vh;
}

.phase-placeholder {
  padding-block: var(--section-space);
  background: var(--color-background);
}

.phase-placeholder__inner {
  width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-width));
  margin-inline: auto;
}

.phase-placeholder h1 {
  margin-bottom: var(--space-4);
}

.phase-placeholder p {
  max-width: 720px;
  color: var(--color-text-muted);
}

/* ===== PAGE LAYOUT FOUNDATION ===== */
.page-hero {
  padding: var(--section-space) 0;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-surface-soft) 0%, var(--color-surface-blue) 100%);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: var(--space-16);
  align-items: center;
}

.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 850px;
  font-size: var(--text-h1);
}

.page-hero__lead {
  max-width: 760px;
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.page-section {
  padding: var(--section-space) 0;
}

.page-section--soft {
  background: var(--color-background);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.section-heading h2 {
  font-size: var(--text-h2);
}

.section-heading p {
  max-width: 700px;
  color: var(--color-text-muted);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.breadcrumb a:hover {
  color: var(--color-secondary);
}

.breadcrumb span:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--color-border-strong);
}

.hero-showcase {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.hero-showcase::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--color-secondary-soft);
}

.hero-showcase__card {
  position: absolute;
  min-width: 190px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
}

.hero-showcase__card small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
}

.hero-showcase__card--one {
  top: 42px;
  left: 34px;
  transform: rotate(-4deg);
}

.hero-showcase__card--two {
  top: 132px;
  right: 34px;
  transform: rotate(3deg);
}

.hero-showcase__card--three {
  bottom: 34px;
  left: 78px;
  transform: rotate(-1deg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.info-card,
.service-card,
.portfolio-card,
.product-card,
.category-card,
.price-card,
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.info-card {
  padding: var(--space-6);
}

.info-card h3,
.service-card h3,
.portfolio-card h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
}

.info-card p,
.service-card p,
.portfolio-card p {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.category-card {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.category-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-interactive);
  box-shadow: var(--shadow-md);
}

.category-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
}

.category-card__title {
  margin-top: var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-extrabold);
}

.category-card__link {
  margin-top: var(--space-2);
  color: var(--color-secondary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.product-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-interactive);
  box-shadow: var(--shadow-md);
}

.product-card__media {
  display: grid;
  min-height: 210px;
  place-items: center;
  padding: var(--space-6);
  background: linear-gradient(145deg, var(--color-surface-soft), var(--color-surface-blue));
  color: var(--color-placeholder);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  text-align: center;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

.product-card__title {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-semibold);
}

.product-card__description {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.product-card__bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
}

.product-card__price-label {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.product-card__price {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-extrabold);
}

.feature-list {
  display: grid;
  gap: var(--space-3);
}

.feature-list li {
  position: relative;
  padding-left: var(--space-8);
  color: var(--color-text-soft);
}

.feature-list li::before {
  content: '\f00c';
  font-family: "Font Awesome 7 Free";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-secondary);
  font-weight: 900;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.process-step {
  position: relative;
  padding: var(--space-6);
  border-top: 3px solid var(--color-gold);
  background: var(--color-surface);
}

.process-step__number {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-white);
}

.cta-band h2 {
  color: var(--color-white);
  font-size: var(--text-h2);
}

.cta-band p {
  max-width: 700px;
  margin-top: var(--space-2);
  color: var(--color-on-dark);
}

.cta-band .btn--primary {
  background: var(--color-white);
  color: var(--color-primary);
}

.cta-band .btn--primary:hover {
  background: var(--color-surface-blue);
  color: var(--color-primary);
}

.service-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  padding: var(--space-6);
}

.service-card .text-link {
  margin-top: auto;
  padding-top: var(--space-6);
}

.portfolio-card {
  overflow: hidden;
}

.portfolio-card__visual {
  display: grid;
  min-height: 220px;
  place-items: center;
  background: linear-gradient(145deg, var(--color-surface-blue), var(--color-surface-soft));
  color: var(--color-placeholder);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
}

.portfolio-card__body {
  padding: var(--space-6);
}

.content-shell {
  max-width: 920px;
}

.content-shell h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: var(--text-h3);
}

.content-shell h3 {
  margin: var(--space-8) 0 var(--space-3);
}

.content-shell p + p {
  margin-top: var(--space-4);
}

.content-shell p,
.content-shell li {
  color: var(--color-text-soft);
}

.content-shell ul {
  display: grid;
  gap: var(--space-2);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: var(--text-small);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.faq-list {
  display: grid;
  gap: var(--space-3);
}

.faq-item summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
}

.faq-item p {
  padding: 0 var(--space-6) var(--space-4);
  color: var(--color-text-muted);
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}

.price-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-extrabold);
}

.price-card__price {
  margin: var(--space-3) 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-extrabold);
}

.price-card__period {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.price-card .feature-list {
  margin-top: var(--space-4);
}

.price-card .btn {
  margin-top: auto;
}

.empty-note {
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

@media (max-width: 1199px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .page-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-showcase {
    min-height: 300px;
  }
}

@media (max-width: 767px) {
  .page-hero,
  .page-section {
    padding: var(--section-space-mobile) 0;
  }

  .grid-4,
  .grid-3,
  .grid-2,
  .product-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .cta-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .cta-band {
    padding: var(--space-8);
  }

  .hero-showcase {
    min-height: 280px;
  }

  .hero-showcase__card {
    min-width: 160px;
    padding: var(--space-4);
  }

  .hero-showcase__card--one {
    top: 28px;
    left: 18px;
  }

  .hero-showcase__card--two {
    top: 105px;
    right: 18px;
  }

  .hero-showcase__card--three {
    bottom: 24px;
    left: 42px;
  }
}

/* =========================================================
   MARKETING HUB
   Service-card layout for the marketing overview page.
   ========================================================= */
.marketing-hub-hero { padding-block: var(--space-10); border: 0; background: linear-gradient(125deg, #fff0e1 0%, #e6f7fa 52%, #eaf0ff 100%); }
.marketing-hub-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; }
.marketing-hub-hero__media { display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.marketing-hub-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.marketing-hub-hero .page-hero__lead { max-width: 540px; }
.marketing-services-section { padding-top: var(--space-10); }
.marketing-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.marketing-service-card {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  min-width: 0;
  min-height: 310px;
  padding: 0;
  background: #f2f7ff;
}
.marketing-service-card:nth-child(2) { background: #e5f8f8; }
.marketing-service-card:nth-child(3) { background: #fff0f0; }
.marketing-service-card:nth-child(4) { background: #fff6e4; }
.marketing-service-card:nth-child(5) { background: #eef1fb; }
.marketing-service-card:nth-child(even) > img { order: 2; }
.marketing-service-card__copy { display: flex; min-width: 0; flex-direction: column; align-items: start; justify-content: center; padding: clamp(24px, 3vw, 48px); }

.marketing-service-card h2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
  line-height: 1.18;
}

.marketing-service-card__copy > p {
  line-height: 1.55;
}

.marketing-service-card__benefits {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.marketing-service-card__benefits li {
  position: relative;
  padding-left: var(--space-4);
}

.marketing-service-card__benefits li::before {
  position: absolute;
  top: 0.05em;
  left: 0;
  color: var(--color-gold);
  content: "•";
  font-weight: var(--font-weight-extrabold);
}

.marketing-service-card .text-link {
  margin-top: auto;
  padding-top: var(--space-4);
}

/* =========================================================
   PHASE 3 — HOMEPAGE
   Homepage-specific composition built on the Phase 1 design system.
   ========================================================= */
.home-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1832 / 859;
  background: #fff0dd;
}

.home-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}

.home-hero__art {
  position: absolute;
  inset: 0;
  display: block;
}

.home-hero__art img {
  display: block;
  width: 100%;
  height: auto;
}

.home-hero__content { max-width: 29%; padding-block: var(--space-5); }

.home-hero__content h1 {
  max-width: 580px;
  margin-top: var(--space-4);
  font-size: clamp(2.65rem, 3.35vw, 3.3rem);
  line-height: 1.08;
}

.home-hero__lead {
  max-width: 460px;
  margin-top: var(--space-5);
  color: var(--color-text-soft);
  font-size: var(--text-body);
}

.home-hero__note { margin-top: var(--space-5); color: var(--color-primary); font-size: var(--text-caption); font-weight: 800; letter-spacing: .15em; }

.home-hero__audiences {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.home-hero__audiences span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  padding: 0 var(--space-3);
  color: var(--color-text-soft);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.home-solution-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.home-solution-showcase__print,
.home-solution-showcase__digital {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-8);
}

.home-solution-showcase__print {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

.home-solution-showcase__digital {
  background: var(--color-primary);
}

.showcase-label {
  width: fit-content;
  border-radius: var(--radius-pill);
  background: var(--color-gold-soft);
  padding: var(--space-1) var(--space-3);
  color: var(--color-gold-text);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.home-solution-showcase__digital .showcase-label {
  border: 1px solid var(--color-on-dark-border);
  background: transparent;
  color: var(--color-white);
}

.showcase-print-stack {
  position: relative;
  flex: 1;
  min-height: 270px;
  margin-top: var(--space-6);
}

.showcase-print-piece {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.04em;
  text-align: center;
}

.showcase-print-piece--card {
  top: 14px;
  left: 0;
  width: 62%;
  aspect-ratio: 1.7 / 1;
  transform: rotate(-5deg);
}

.showcase-print-piece--menu {
  top: 92px;
  right: 2px;
  width: 58%;
  aspect-ratio: 0.78 / 1;
  border-top: 6px solid var(--color-gold);
  transform: rotate(4deg);
}

.showcase-print-piece--window {
  bottom: 12px;
  left: 12px;
  width: 72%;
  aspect-ratio: 1.65 / 1;
  background: linear-gradient(135deg, var(--color-secondary-soft), var(--color-white));
  transform: rotate(-1deg);
}

.home-solution-showcase__print > p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.showcase-digital-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.showcase-digital-tile {
  min-height: 132px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  padding: var(--space-3);
}

.showcase-digital-tile strong,
.showcase-digital-tile span {
  display: block;
}

.showcase-digital-tile strong {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-body);
}

.showcase-digital-tile span {
  margin-top: var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--text-small);
}

.section-heading--intro {
  align-items: start;
}

.section-heading--intro > p {
  max-width: 560px;
}

.home-path-section {
  background: var(--color-white);
}

.home-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.home-path-card {
  display: grid;
  min-height: 470px;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.home-path-card--printing {
  border-top: 5px solid var(--color-gold);
  background: var(--color-white);
}

.home-path-card--marketing {
  border-top: 5px solid var(--color-secondary);
  background: var(--color-surface-blue);
}

.home-path-card__kicker {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.home-path-card h3 {
  max-width: 620px;
  font-size: var(--text-h3);
}

.home-path-card p {
  max-width: 640px;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.home-path-card__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-path-card__links a {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.home-path-card__links a:hover,
.home-path-card__links a:focus-visible {
  color: var(--color-secondary);
}

.home-path-card > .btn {
  width: fit-content;
}

.home-featured-products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-featured-products .product-card__media {
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.home-featured-products .product-card__body {
  min-height: 244px;
}

.home-category-section { background: var(--color-cyan-soft); }
.home-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.home-category-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-primary); font-weight: 700; box-shadow: var(--shadow-sm); }
.home-category-card img { display: block; grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1942 / 809; object-fit: cover; }
.home-category-card > span { padding: 0 0 var(--space-4) var(--space-5); }
.home-category-card__arrow { padding-right: var(--space-5) !important; color: var(--color-secondary); font-size: 1.3rem; }
.home-category-card:hover, .home-category-card:focus-visible { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }

.home-material-section { background: var(--color-yellow-soft); }
.home-material-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(30px, 6vw, 100px); }
.home-material-copy h2 { margin-top: var(--space-4); max-width: 520px; }
.home-material-copy p { margin: var(--space-5) 0 var(--space-6); color: var(--color-text-soft); }
.home-material-grid > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }

.home-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-service-card:first-child { grid-column: span 2; background: var(--color-cyan-soft); }
.home-service-card:nth-child(2) { background: var(--color-coral-soft); }
.home-service-card:nth-child(3) { background: var(--color-yellow-soft); }

.home-service-card {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--space-6);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.home-service-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-interactive);
  box-shadow: var(--shadow-md);
}

.home-service-card__number {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.home-service-card h3 {
  margin-top: var(--space-6);
  font-size: var(--text-h4);
}

.home-service-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.home-service-card .text-link {
  margin-top: auto;
  padding-top: var(--space-6);
}

.home-why-section {
  background: var(--color-primary);
  color: var(--color-white);
}

.home-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  align-items: start;
}

.home-why-section .page-eyebrow {
  color: var(--color-gold);
}

.home-why-section h2,
.home-why-section h3 {
  color: var(--color-white);
}

.home-why-intro p {
  max-width: 620px;
  margin-top: var(--space-4);
  color: var(--color-on-dark);
}

.home-why-intro .text-link {
  margin-top: var(--space-6);
  color: var(--color-white);
}

.home-why-intro .text-link:hover,
.home-why-intro .text-link:focus-visible {
  color: var(--color-gold);
}

.home-why-points {
  display: grid;
}

.home-why-points article {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-6);
  border-top: 1px solid var(--color-on-dark-border);
  padding: var(--space-6) 0;
}

.home-why-points article:first-child {
  border-top: 0;
  padding-top: 0;
}

.home-why-points article > span {
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
}

.home-why-points h3 {
  font-size: var(--text-h4);
}

.home-why-points p {
  margin-top: var(--space-2);
  color: var(--color-on-dark);
}

.home-nail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-12);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--space-12);
  box-shadow: var(--shadow-sm);
}

.home-nail-panel__content p {
  max-width: 720px;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.home-nail-panel__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-nail-service-group {
  display: grid;
  align-content: start;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  padding: var(--space-4);
}

.home-nail-service-group > span {
  margin-bottom: var(--space-2);
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.home-nail-service-group a {
  display: flex;
  min-height: 44px;
  align-items: center;
  border-top: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.home-nail-service-group a:first-of-type {
  border-top: 0;
}

.home-nail-service-group a:hover,
.home-nail-service-group a:focus-visible {
  color: var(--color-secondary);
}

.home-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.home-portfolio-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.home-portfolio-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-interactive);
  box-shadow: var(--shadow-md);
}

.home-portfolio-card__visual {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-6);
  background: linear-gradient(145deg, var(--color-surface-blue), var(--color-surface-soft));
}

.home-portfolio-card--web .home-portfolio-card__visual {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
}

.home-portfolio-card--marketing .home-portfolio-card__visual {
  background: linear-gradient(145deg, var(--color-gold-soft), var(--color-surface-soft));
}

.home-portfolio-card__visual span {
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.home-portfolio-card__visual strong {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
}

.home-portfolio-card--web .home-portfolio-card__visual span,
.home-portfolio-card--web .home-portfolio-card__visual strong {
  color: var(--color-white);
}

.home-portfolio-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
}

.home-portfolio-card__body h3 {
  font-size: var(--text-body-lg);
}

.home-portfolio-card__body span {
  flex: 0 0 auto;
  color: var(--color-secondary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
}

.home-process-grid .process-step {
  border: 1px solid var(--color-border);
  border-radius: 0;
}

.home-process-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-8); align-items: stretch; }
.home-process-image { display: block; width: 100%; height: 100%; min-height: 450px; object-fit: cover; border-radius: var(--radius-md); }
.home-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.home-process-grid .process-step { background: var(--color-white); padding: var(--space-5); border: 0; }
.home-process-grid .process-step__icon { display: none; }
.home-process-grid .process-step__number { color: var(--color-coral); }

.home-final-cta {
  padding-bottom: clamp(48px, 5vw, 80px);
}

.home-cta-band {
  min-height: 300px;
  padding: var(--space-16);
}

.home-cta-band__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-gold);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.home-cta-band__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-cta-band .btn--outline {
  border-color: var(--color-on-dark-strong);
  color: var(--color-white);
}

.home-cta-band .btn--outline:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
}

.home-page .site-footer {
  margin-top: 0;
}


/* ==================== Phase 4: Printing Categories ==================== */

.printing-hub-hero,
.category-hero { position: relative; display: flex; align-items: center; overflow: hidden; }
.printing-hero__picture { display: contents; }
.printing-hub-hero { min-height: 390px; padding-block: var(--space-10); background: #e9f7fb; }
.printing-hub-hero__image { position: absolute; inset: 0 0 0 auto; width: 66%; height: 100%; object-fit: cover; }
.printing-hub-hero::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, #e9f7fb 0%, #e9f7fb 38%, transparent 70%); }
.printing-hub-hero > .site-container { position: relative; z-index: 1; }
.printing-hub-hero h1, .printing-hub-hero .page-hero__lead { max-width: 550px; }

.category-hero { min-height: 430px; padding-block: var(--space-10); border-bottom: 5px solid var(--category-accent); background: var(--category-tint); }
.category-hero--business-cards { --category-accent: #d93481; --category-tint: #eaf2ff; }
.category-hero--menus { --category-accent: #b26b00; --category-tint: #fff5e3; }
.category-hero--gift-cards { --category-accent: #c64459; --category-tint: #fff0ed; }
.category-hero--envelopes { --category-accent: #3277ca; --category-tint: #edf5ff; }
.category-hero--qr-displays { --category-accent: #168e9c; --category-tint: #e7f9f9; }
.category-hero--nail-aprons { --category-accent: #b43d70; --category-tint: #fff0f4; }
.category-hero--signs-large-format { --category-accent: #a17200; --category-tint: #e6f8fb; }
.category-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.category-hero::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, var(--category-tint) 0%, var(--category-tint) 27%, transparent 67%); }
.category-hero > .site-container { position: relative; z-index: 1; }
.category-hero h1, .category-hero .page-hero__lead { max-width: 440px; }
.category-hero .page-hero__lead { color: var(--color-primary); }
.category-hero .page-eyebrow { color: var(--category-accent); }
.category-hero--envelopes .category-hero__image, .category-hero--qr-displays .category-hero__image { inset: 0 0 0 auto; width: 54%; object-fit: contain; padding: var(--space-5); background: #fff; }
.category-hero--envelopes::after, .category-hero--qr-displays::after { background: linear-gradient(90deg, var(--category-tint) 0%, var(--category-tint) 46%, transparent 59%); }

.category-products { padding-top: var(--space-10); }
.category-products .section-heading { margin-bottom: var(--space-6); }
.category-products--compact .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.category-products--single .product-grid { grid-template-columns: minmax(0, 1fr); max-width: 920px; }
.category-products--single .product-card { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 55%); }
.category-products--single .product-card__media { height: 100%; aspect-ratio: auto; }
.category-products--single .product-card__body { justify-content: center; padding: var(--space-8); }
.category-products--compact .product-card__media img { object-fit: contain; background: #fff; }

.printing-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.printing-category-grid .category-card__image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.printing-category-grid .category-card > span { display: block; padding: var(--space-4) var(--space-5) var(--space-5); }
.printing-category-grid .category-card__title { margin-top: 0; }
.printing-large-format__visual img { width: 100%; height: 100%; object-fit: cover; }

.category-guide__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.category-guide__grid--four .category-guide-card { min-height: 0; }
.category-guide__grid--four .category-guide-card i { display: block; margin-bottom: var(--space-4); color: var(--color-secondary); font-size: 1.5rem; }
.category-guide__help { margin-top: var(--space-6); }

.section-eyebrow,
.cta-band__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cta-band__eyebrow {
  color: var(--color-gold);
}

.section-copy {
  max-width: 620px;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.category-card__description {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--line-body);
}

.printing-category-grid .category-card {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: #fff;
}

.printing-category-grid .category-card--wide {
  grid-column: span 1;
}

.printing-popular__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.printing-popular__grid .product-card__media {
  min-height: 190px;
}

.printing-large-format__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-12);
  align-items: center;
}

.printing-large-format__visual {
  position: relative;
  display: grid;
  min-height: 390px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  box-shadow: var(--shadow-md);
  padding: 0;
}

.printing-large-format__visual::before {
  content: none;
}

.printing-large-format__visual span {
  position: absolute;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}

.printing-large-format__visual span:nth-child(1) { top: 23%; left: 13%; }
.printing-large-format__visual span:nth-child(2) { top: 47%; right: 12%; }
.printing-large-format__visual span:nth-child(3) { bottom: 19%; left: 26%; }

.printing-large-format__content h2 {
  max-width: 650px;
  font-size: var(--text-h2);
}

.printing-large-format__content > p {
  max-width: 680px;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
}

.printing-large-format__features {
  margin: var(--space-6) 0;
}

.info-card__kicker {
  display: inline-flex;
  margin-bottom: var(--space-4);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.printing-faq__layout,
.category-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-12);
  align-items: start;
}

.printing-faq__layout h2,
.category-faq__layout h2 {
  font-size: var(--text-h2);
}

.category-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.category-guide-card {
  min-height: 230px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.category-guide-card__label {
  display: inline-flex;
  margin-bottom: var(--space-6);
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}

.category-guide-card h3 {
  font-size: var(--text-h4);
}

.category-guide-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.category-why__grid .info-card {
  min-height: 210px;
}

.category-products .product-card__media {
  min-height: 220px;
}

.category-products .product-card__media img,
.printing-popular__grid .product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-hero .page-actions {
  margin-top: var(--space-6);
}

/* ==================== Phase 6: Website Design Service ==================== */
.website-hero {
  overflow: hidden;
  background: linear-gradient(125deg, #e9f6ff 0%, #fff8e5 55%, #f0eaff 100%);
}

.website-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: var(--space-16);
  align-items: center;
}

.website-hero__content h1 {
  max-width: 760px;
}

.website-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.website-hero__signals span {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-secondary-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.website-section-heading > div {
  max-width: 760px;
}

.website-audience-grid,
.website-package-grid,
.website-benefit-grid,
.website-why-grid {
  display: grid;
  gap: var(--space-6);
}

.website-package-grid,
.website-why-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.website-audience-card--featured {
  grid-column: 1 / -1;
}

.website-showcase-note {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.website-benefit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.website-audience-card {
  min-height: 280px;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.website-audience-card--featured {
  border-color: var(--color-gold-border);
  background: linear-gradient(180deg, var(--color-gold-soft), var(--color-surface));
}

.website-card-kicker,
.website-package-card__topline span,
.website-package-card__topline em,
.website-package-notes span,
.website-why-card > span {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.website-card-kicker {
  color: var(--color-secondary);
}

.website-audience-card h3 {
  margin-top: var(--space-8);
  font-size: var(--text-h4);
}

.website-audience-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.website-audience-card__tag {
  display: inline-flex;
  margin-top: var(--space-8);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
}

.website-package-card {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.website-package-card--featured {
  border-color: var(--color-secondary-border);
  box-shadow: var(--shadow-md);
}

.website-package-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.website-package-card__topline span {
  color: var(--color-secondary);
}

.website-package-card__topline em {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-blue);
  color: var(--color-secondary);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.website-package-card .price-card__name {
  min-height: 58px;
  font-size: var(--text-h4);
  line-height: var(--line-h4);
}

.website-package-card .price-card__price {
  margin-top: var(--space-4);
  font-size: var(--text-h2);
}

.website-package-card__facts {
  margin: var(--space-8) 0;
}

.website-package-card .btn {
  width: 100%;
  margin-top: auto;
}

.website-package-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.website-package-notes div {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.website-package-notes span {
  color: var(--color-text-muted);
}

.website-package-notes strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
}

.website-package-notes p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.website-v3-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.website-v3-plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.5vw, 38px);
  border: 1px solid #c7d8f1;
  border-radius: var(--radius-lg);
  background: #f1f8ff;
}

.website-v3-plan--video { background: #fff4ec; border-color: #f9cbb5; }
.website-v3-plan--business { background: #f3edff; border-color: #d7c7f5; }
.website-v3-plan__audience {
  color: #0a4da1;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.website-v3-plan h3 { margin-top: var(--space-5); font-size: var(--text-h4); }
.website-v3-plan__price { margin-top: var(--space-5); font-size: clamp(2.8rem, 4vw, 4.5rem); font-weight: 800; line-height: 1; color: #0b315e; }
.website-v3-plan__period { color: var(--color-text-muted); }
.website-v3-plan__fact { margin-top: var(--space-6); font-weight: 700; }
.website-v3-plan__renewal { margin: var(--space-2) 0 var(--space-6); color: var(--color-text-muted); font-size: var(--text-small); }
.website-v3-plan .btn { margin-top: auto; align-self: flex-start; }
.website-v3-comparison { margin-bottom: var(--space-6); }
.website-v3-comparison > summary { cursor: pointer; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: #143b74; color: #fff; font-weight: 700; }
.website-v3-comparison[open] > summary { margin-bottom: var(--space-3); }

.website-pricing-table-wrap {
  max-width: 100%;
  margin-top: var(--space-8);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.website-pricing-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
}

.website-pricing-table th,
.website-pricing-table td {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  vertical-align: middle;
}

.website-pricing-table tr > :last-child {
  border-right: 0;
}

.website-pricing-table tbody tr:last-child > * {
  border-bottom: 0;
}

.website-pricing-table thead th {
  padding: 0;
  background: var(--color-white);
  text-align: left;
  vertical-align: stretch;
}

.website-pricing-table thead .website-pricing-table__feature-head {
  width: 31%;
  padding: var(--space-8);
  background: var(--color-surface-soft);
}

.website-pricing-table__feature-head span,
.website-pricing-table__feature-head strong,
.website-pricing-table__feature-head small {
  display: block;
}

.website-pricing-table__feature-head span {
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.website-pricing-table__feature-head strong {
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
}

.website-pricing-table__feature-head small {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
}

.website-pricing-plan {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
}

.website-pricing-plan span,
.website-pricing-plan strong,
.website-pricing-plan b,
.website-pricing-plan small {
  display: block;
}

.website-pricing-plan span {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.06em;
}

.website-pricing-plan strong {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  line-height: 1.25;
}

.website-pricing-plan b {
  margin-top: var(--space-6);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

.website-pricing-plan small {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.website-pricing-plan--standard {
  border-top: 5px solid var(--color-gold);
  background: var(--color-primary);
  color: var(--color-white);
}

.website-pricing-plan--video {
  border-top: 5px solid var(--color-gold);
  background: linear-gradient(145deg, var(--color-secondary), var(--color-primary));
  color: var(--color-white);
}

.website-pricing-plan--business {
  border-top: 5px solid var(--color-secondary);
  background: var(--color-surface-blue);
  color: var(--color-primary);
}

.website-pricing-table tbody th {
  width: 31%;
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.website-pricing-table tbody td {
  color: var(--color-text);
  font-size: var(--text-small);
  line-height: 1.5;
  text-align: center;
}

.website-pricing-table tbody tr:nth-child(even) td {
  background: var(--color-surface-soft);
}

.website-pricing-table tbody td strong,
.website-pricing-table tbody td span {
  display: block;
}

.website-pricing-table tbody td strong + span {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.website-pricing-check {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
}

.website-pricing-muted {
  color: var(--color-text-muted);
}

.website-pricing-table__action-row th,
.website-pricing-table__action-row td {
  background: var(--color-white);
}

.website-pricing-table__action-row .btn {
  width: 100%;
  min-width: 0;
}

.website-benefit-card {
  min-height: 230px;
}

.website-benefit-card > span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.website-benefit-card h3 {
  margin-top: var(--space-6);
}

.website-feature-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-12);
  align-items: start;
}

.website-feature-intro {
  position: sticky;
  top: 130px;
}

.website-feature-intro h2 {
  font-size: var(--text-h2);
}

.website-feature-intro p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.website-feature-intro .text-link {
  display: inline-flex;
  margin-top: var(--space-6);
}

.website-capability-grid {
  display: grid;
  gap: var(--space-3);
}

.website-capability-grid article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.website-capability-grid article > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
}

.website-capability-grid h3 {
  font-size: var(--text-body-lg);
}

.website-capability-grid p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.website-process-grid .process-step {
  min-height: 230px;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
}

.website-process-grid .process-step p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.website-portfolio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: var(--space-12);
  align-items: center;
}

.website-portfolio__visual {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--color-surface-blue), var(--color-surface-soft));
}

.website-portfolio__window {
  min-height: 330px;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.website-portfolio__window > span {
  color: var(--color-gold);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.website-portfolio__window > strong {
  display: block;
  max-width: 500px;
  margin-top: var(--space-6);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--line-h3);
}

.website-portfolio__window > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-12);
}

.website-portfolio__window i {
  display: block;
  min-height: 72px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  background: var(--color-on-dark-border);
}

.website-portfolio__content h2 {
  font-size: var(--text-h2);
}

.website-portfolio__content p {
  margin: var(--space-4) 0 var(--space-8);
  color: var(--color-text-muted);
}

.website-why-card {
  min-height: 250px;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.website-why-card--accent {
  background: var(--color-primary);
  color: var(--color-white);
}

.website-why-card > span {
  color: var(--color-secondary);
}

.website-why-card--accent > span {
  color: var(--color-gold);
}

.website-why-card h3 {
  margin-top: var(--space-8);
  font-size: var(--text-h4);
}

.website-why-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.website-why-card--accent h3 {
  color: var(--color-white);
}

.website-why-card--accent p {
  color: var(--color-on-dark);
}

.website-why-card a {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.website-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-12);
  align-items: start;
}

.website-faq__layout > div:first-child h2 {
  font-size: var(--text-h2);
}

.website-faq__layout > div:first-child p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.website-final-cta {
  padding-bottom: 0;
}

.website-cta-band {
  min-height: 300px;
  padding: var(--space-16);
}

.website-cta-band__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.website-cta-band .btn--outline {
  border-color: var(--color-on-dark-strong);
  color: var(--color-white);
}

.website-cta-band .btn--outline:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
}

/* ==================== Phase 7: Google Search SEO Service ==================== */
.seo-hero {
  overflow: hidden;
  border-bottom: 5px solid #10a8b7;
  background: linear-gradient(120deg, #e5f8fb 0%, #eaf0ff 52%, #fff0da 100%);
}

.seo-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: var(--space-8);
  align-items: center;
}

.seo-hero__content h1 {
  max-width: 780px;
}

.seo-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.seo-hero__signals span {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-secondary-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.seo-search-visual {
  overflow: hidden;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.seo-search-visual__bar {
  display: grid;
  grid-template-columns: 12px 1fr 12px;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.seo-search-visual__bar span,
.seo-search-visual__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.seo-search-visual__bar i {
  justify-self: end;
  background: var(--color-gold);
}

.seo-search-visual__query {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.seo-search-visual__results {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.seo-search-visual__results article {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.seo-search-visual__results span {
  display: block;
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.seo-search-visual__results strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
}

.seo-search-visual__results i {
  display: block;
  width: 86%;
  height: 7px;
  margin-top: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.seo-search-visual__results i:last-child {
  width: 64%;
}

.seo-section-heading > div {
  max-width: 780px;
}
.seo-intro { background: #e8f9f7; }
.seo-services { background: #fff8e8; }
.seo-packages { background: #eef3ff; }
.seo-process { background: #fff; }
.seo-reporting { background: #e8f8fb; }

.seo-intro__grid,
.seo-reporting__grid,
.seo-proof__grid,
.seo-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-12);
  align-items: start;
}

.seo-intro__content h2,
.seo-reporting__content h2,
.seo-proof__content h2,
.seo-faq__layout > div:first-child h2 {
  font-size: var(--text-h2);
}

.seo-intro__content p,
.seo-reporting__content p,
.seo-proof__content p,
.seo-faq__layout > div:first-child p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.seo-value-grid {
  display: grid;
  gap: var(--space-3);
}

.seo-value-grid article {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  column-gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
}
.seo-value-grid article:nth-child(1) { border-left: 4px solid #168fca; }
.seo-value-grid article:nth-child(2) { border-left: 4px solid #e65f7a; }
.seo-value-grid article:nth-child(3) { border-left: 4px solid #21a29e; }

.seo-value-grid article > span {
  grid-row: span 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
}

.seo-value-grid h3 {
  font-size: var(--text-h4);
}

.seo-value-grid p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.seo-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.seo-service-card {
  min-height: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  background: #fff;
}
.seo-service-card:nth-child(2), .seo-service-card:nth-child(5) { border-top-color: #e65f7a; }
.seo-service-card:nth-child(3) { border-top-color: #18a69c; }
.seo-service-card:nth-child(4) { border-top-color: #dfa11f; }

.seo-service-card > span {
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
}
.seo-service-card > span i { margin-right: var(--space-2); font-size: 1.3rem; }

.seo-service-card h3 {
  margin-top: var(--space-4);
  font-size: var(--text-h4);
}

.seo-service-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.seo-package-meta {
  display: grid;
  grid-template-columns: 0.65fr 0.75fr 1.6fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.seo-package-meta article {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.seo-package-meta span,
.seo-business-pricing__head > span,
.seo-maps-pricing span,
.seo-track-grid article > span,
.seo-proof__panel > span {
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.seo-package-meta strong {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
}

.seo-package-meta p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.seo-package-meta__statement {
  border-color: var(--color-gold-border) !important;
  background: linear-gradient(180deg, var(--color-gold-soft), var(--color-surface)) !important;
}

.seo-search-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.seo-business-pricing {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.seo-business-pricing__head {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary);
}

.seo-business-pricing__head > span {
  color: var(--color-gold);
}

.seo-business-pricing__head h3 {
  margin-top: var(--space-2);
  color: var(--color-white);
  font-size: var(--text-h3);
}

.seo-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seo-tier-grid > div {
  padding: var(--space-6);
}

.seo-tier-grid > div + div {
  border-left: 1px solid var(--color-border);
}

.seo-tier-grid span,
.seo-tier-grid strong,
.seo-tier-grid small {
  display: block;
}

.seo-tier-grid span {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
}

.seo-tier-grid strong {
  margin: var(--space-3) 0 var(--space-6);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
}

.seo-tier-grid small {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.seo-maps-bridge {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-secondary-border);
  border-radius: var(--radius-lg);
  background: var(--color-secondary-soft);
}

.seo-maps-bridge__intro h3 {
  margin-top: var(--space-2);
  font-size: var(--text-h3);
}

.seo-maps-bridge__intro p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.seo-maps-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.seo-maps-pricing div {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.seo-maps-pricing span {
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.seo-maps-pricing strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
}

.seo-maps-pricing small {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
}

.seo-process-grid .process-step {
  border-top: 4px solid var(--color-gold);
}

.seo-reporting__content {
  position: sticky;
  top: 132px;
}

.seo-reporting__content .text-link {
  display: inline-flex;
  margin-top: var(--space-6);
}

.seo-track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.seo-track-grid article {
  min-height: 220px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.seo-track-grid article > span {
  color: var(--color-secondary);
}

.seo-track-grid h3 {
  margin-top: var(--space-8);
  font-size: var(--text-h4);
}

.seo-track-grid p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.seo-proof__grid {
  align-items: center;
}

.seo-proof__visual {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
}

.seo-proof__panel {
  min-height: 310px;
  padding: var(--space-8);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-lg);
}

.seo-proof__panel > span {
  color: var(--color-gold);
}

.seo-proof__panel > strong {
  display: block;
  max-width: 520px;
  margin-top: var(--space-6);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--line-h3);
}

.seo-proof__panel > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-12);
}

.seo-proof__panel i {
  display: block;
  min-height: 62px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  background: var(--color-on-dark-border);
}

.seo-proof__content p {
  margin-bottom: var(--space-8);
}

.seo-final-cta {
  padding-bottom: 0;
}

.seo-cta-band {
  min-height: 300px;
  padding: var(--space-16);
}

.seo-cta-band__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.seo-cta-band .btn--outline {
  border-color: var(--color-on-dark-strong);
  color: var(--color-white);
}

.seo-cta-band .btn--outline:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
}

/* ==================== Phase 8: Local SEO / Google Maps ==================== */
.local-seo-hero {
  overflow: hidden;
}

.local-seo-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
  gap: var(--space-16);
  align-items: center;
}

.local-seo-hero__content h1 {
  max-width: 820px;
}

.local-seo-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.local-seo-hero__signals span {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-secondary-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.local-map-visual,
.geo-grid-stage {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.local-map-visual__topline,
.geo-grid-stage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.local-map-visual__topline span,
.geo-grid-stage__head span {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.local-map-visual__map,
.geo-grid-stage__canvas {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background:
    linear-gradient(135deg, transparent 24%, var(--color-border) 25%, transparent 26%) 0 0 / 96px 96px,
    linear-gradient(45deg, transparent 24%, var(--color-border) 25%, transparent 26%) 0 0 / 112px 112px,
    var(--color-surface-soft);
}

.local-map-visual__road,
.geo-grid-stage__line {
  position: absolute;
  height: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  opacity: 0.9;
  transform-origin: center;
}

.local-map-visual__road--one,
.geo-grid-stage__line--a {
  top: 76px;
  left: -8%;
  width: 118%;
  transform: rotate(-12deg);
}

.local-map-visual__road--two,
.geo-grid-stage__line--b {
  top: 205px;
  left: -10%;
  width: 120%;
  transform: rotate(14deg);
}

.local-map-visual__road--three,
.geo-grid-stage__line--c {
  top: 155px;
  left: 8%;
  width: 84%;
  transform: rotate(78deg);
}

.local-map-visual__grid,
.geo-grid-stage__points {
  position: absolute;
  inset: var(--space-8);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: var(--space-4);
  place-items: center;
}

.local-map-visual__grid i,
.local-map-visual__grid b,
.geo-grid-stage__points i,
.geo-grid-stage__points b {
  display: block;
  width: 15px;
  height: 15px;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 1px var(--color-secondary-border);
}

.local-map-visual__grid b,
.geo-grid-stage__points b {
  width: 24px;
  height: 24px;
  background: var(--color-gold);
  box-shadow: 0 0 0 4px var(--color-gold-soft);
}

.local-map-visual__fields,
.geo-grid-stage__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.local-map-visual__fields span,
.geo-grid-stage__meta span {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.local-seo-intro__grid,
.local-seo-detail-grid,
.geo-grid-section__layout,
.local-proof__grid,
.local-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-12);
  align-items: start;
}

.local-seo-intro__content h2,
.local-seo-detail-content h2,
.geo-grid-content h2,
.local-proof__content h2,
.local-faq__layout > div:first-child h2 {
  font-size: var(--text-h2);
}

.local-seo-intro__content p,
.local-seo-detail-content p,
.geo-grid-content p,
.local-proof__content p,
.local-faq__layout > div:first-child p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.local-seo-value-grid {
  display: grid;
  gap: var(--space-3);
}

.local-seo-value-grid article {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.local-seo-value-grid article > span,
.local-seo-workflow-grid article > span,
.local-seo-signal-grid article > span,
.local-reporting-grid article > span,
.local-seo-package-meta__note > span,
.local-proof__panel > span {
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.local-seo-value-grid h3,
.local-seo-workflow-grid h3,
.local-seo-signal-grid h3,
.local-reporting-grid h3 {
  margin-top: var(--space-3);
  font-size: var(--text-h4);
}

.local-seo-value-grid p,
.local-seo-workflow-grid p,
.local-seo-signal-grid p,
.local-reporting-grid p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.local-seo-section-heading > div {
  max-width: 780px;
}

.local-seo-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.local-seo-workflow-grid article {
  min-height: 235px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.local-seo-package-meta {
  grid-template-columns: 0.7fr 0.85fr 1.45fr;
}

.local-seo-package-meta__note {
  border-color: var(--color-secondary-border) !important;
  background: var(--color-secondary-soft) !important;
}

.local-seo-pricing-grid .seo-business-pricing__head {
  background: #0c596d;
}

.local-seo-pricing-grid .seo-business-pricing:last-child .seo-business-pricing__head { background: #6034a8; }
.local-seo-pricing-grid .seo-business-pricing { border: 2px solid #b9dfe6; box-shadow: 0 18px 40px rgba(18, 80, 105, .1); }
.local-seo-pricing-grid .seo-business-pricing:last-child { border-color: #d8c4f4; }
.local-seo-pricing-grid .seo-tier-grid strong { font-size: clamp(2rem, 3.2vw, 3rem); color: #073e61; }
.local-seo-pricing-grid .seo-tier-grid > div:first-child { background: #effbfc; }
.local-seo-pricing-grid .seo-tier-grid > div:last-child { background: #fff4e9; }
.local-seo-hero { background: linear-gradient(120deg, #e6faf5, #e9f7ff 55%, #fff2d9); }
.maps-packages { background: #f7fcff; }

.local-seo-search-link {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.local-seo-detail-content {
  position: sticky;
  top: 132px;
}

.local-seo-detail-content .text-link {
  display: inline-flex;
  margin-top: var(--space-6);
}

.local-seo-signal-grid,
.local-reporting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.local-seo-signal-grid article,
.local-reporting-grid article {
  min-height: 220px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.geo-grid-section__layout,
.local-proof__grid {
  align-items: center;
}

.geo-grid-stage__canvas {
  min-height: 430px;
}

.geo-grid-content .feature-list {
  margin-top: var(--space-8);
}

.local-proof__visual {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
}

.local-proof__panel {
  min-height: 360px;
  padding: var(--space-8);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-lg);
}

.local-proof__panel > span {
  color: var(--color-gold);
}

.local-proof__panel > strong {
  display: block;
  max-width: 520px;
  margin-top: var(--space-6);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--line-h3);
}

.local-proof__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-12);
}

.local-proof__fields span {
  padding: var(--space-3);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  background: var(--color-on-dark-border);
  color: var(--color-on-dark);
  font-size: var(--text-caption);
  text-align: center;
}

.local-proof__content p {
  margin-bottom: var(--space-8);
}

.local-final-cta {
  padding-bottom: 0;
}

.local-seo-cta-band {
  min-height: 300px;
  padding: var(--space-16);
}

.local-seo-cta-band__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.local-seo-cta-band .btn--outline {
  border-color: var(--color-on-dark-strong);
  color: var(--color-white);
}

.local-seo-cta-band .btn--outline:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
}

.seo-maps-bridge__intro .text-link {
  display: inline-flex;
  margin-top: var(--space-4);
}

/* =========================================================
   PHASE 9 — SOCIAL MEDIA MARKETING
   Scoped to /marketing/social-media/ via social-* classes.
   ========================================================= */

.social-hero {
  overflow: hidden;
}

.social-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: var(--space-16);
  align-items: center;
}

.social-hero__content h1 {
  max-width: 760px;
}

.social-hero__actions,
.social-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.social-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.social-hero__signals span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
}

.social-feed-visual {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--color-surface-blue), var(--color-surface));
  box-shadow: var(--shadow-lg);
}

.social-feed-visual__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.social-feed-visual__topbar span {
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.social-feed-visual__topbar i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
}

.social-feed-visual__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-rows: repeat(2, minmax(145px, auto));
  gap: var(--space-4);
}

.social-preview-card {
  position: relative;
  overflow: hidden;
  min-height: 145px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.social-preview-card--feature {
  grid-row: 1 / span 2;
  min-height: 310px;
  background: var(--color-primary);
  color: var(--color-white);
}

.social-preview-card > span {
  display: block;
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.social-preview-card--feature > span {
  color: var(--color-gold);
}

.social-preview-card strong {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  line-height: 1.35;
}

.social-preview-card--feature strong {
  max-width: 320px;
  margin-top: var(--space-8);
  color: var(--color-white);
  font-size: var(--text-h4);
}

.social-preview-card__art {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.social-preview-card__art i {
  display: block;
  min-height: 118px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-on-dark-border), rgba(255, 255, 255, 0.05));
}

.social-preview-card__art i:nth-child(2) {
  transform: translateY(var(--space-4));
}

.social-preview-card__line {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.social-preview-card__line--short {
  width: 58%;
  margin-top: var(--space-2);
}

.social-preview-card__play {
  display: grid;
  width: 52px;
  height: 52px;
  margin-top: var(--space-6);
  place-items: center;
  border-radius: 50%;
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
}

.social-feed-visual > p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.social-section-heading > div {
  max-width: 820px;
}

.social-platform-grid,
.social-package-grid,
.social-showcase-grid {
  display: grid;
  gap: var(--space-6);
}

.social-platform-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.social-platform-card {
  min-height: 230px;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}

.social-platform-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-secondary-border);
  box-shadow: var(--shadow-md);
}

.social-platform-card > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.social-platform-card h3 {
  margin-top: var(--space-8);
  font-size: var(--text-h4);
}

.social-platform-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.social-showcase-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
}

.social-showcase-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.social-showcase-card--large {
  grid-row: span 2;
}

.social-showcase-card__visual {
  position: relative;
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
}

.social-showcase-card--large .social-showcase-card__visual {
  min-height: 330px;
}

.social-showcase-card__visual--nails {
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-2);
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
}

.social-showcase-card__visual--nails span {
  position: absolute;
  align-self: flex-start;
  color: var(--color-gold);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.social-showcase-card__visual--nails i {
  display: block;
  width: 24%;
  min-height: 150px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-pill) var(--radius-pill) var(--radius-sm) var(--radius-sm);
  background: var(--color-on-dark-border);
}

.social-showcase-card__visual--nails i:nth-of-type(2) {
  min-height: 180px;
}

.social-showcase-card__visual--promo {
  flex-direction: column;
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
}

.social-showcase-card__visual--promo strong {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
}

.social-showcase-card__visual--promo span,
.social-showcase-card__visual--seasonal span,
.social-showcase-card__visual--service span {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.social-showcase-card__visual--video {
  background: var(--color-surface-blue);
  color: var(--color-secondary);
}

.social-showcase-card__visual--video span {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.social-showcase-card__visual--update {
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  background: var(--color-surface);
}

.social-showcase-card__visual--update i {
  display: block;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.social-showcase-card__visual--update i:nth-child(2) {
  width: 78%;
}

.social-showcase-card__visual--update i:nth-child(3) {
  width: 55%;
}

.social-showcase-card__visual--seasonal {
  background: linear-gradient(145deg, var(--color-primary), var(--color-gold-text));
}

.social-showcase-card__visual--service {
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-secondary);
}

.social-showcase-card__visual--service i {
  display: block;
  width: 78%;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-on-dark-strong);
}

.social-showcase-card > div:last-child {
  padding: var(--space-6);
}

.social-showcase-card > div:last-child > span,
.social-package-card__topline span,
.social-local-goal > span,
.social-reporting-cards article > span,
.social-proof__panel > span {
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.social-showcase-card h3 {
  margin-top: var(--space-2);
  font-size: var(--text-body-lg);
}

.social-showcase-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.social-package-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.social-package-card {
  display: flex;
  min-height: 470px;
  flex-direction: column;
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.social-package-card__topline {
  margin-bottom: var(--space-6);
}

.social-package-card .price-card__name {
  font-size: var(--text-h4);
}

.social-package-card .price-card__price {
  margin-top: var(--space-4);
  font-size: var(--text-h2);
}

.social-package-card__facts {
  margin: var(--space-8) 0;
}

.social-package-card .btn {
  width: 100%;
  margin-top: auto;
}

.social-manage-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-12);
  align-items: start;
}

.social-manage-intro {
  position: sticky;
  top: 130px;
}

.social-manage-intro h2,
.social-reporting-content h2,
.social-proof__content h2,
.social-faq__layout > div:first-child h2,
.social-local-content h2 {
  font-size: var(--text-h2);
}

.social-manage-intro p,
.social-reporting-content p,
.social-proof__content p,
.social-faq__layout > div:first-child p,
.social-local-content p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.social-manage-intro .text-link {
  display: inline-flex;
  margin-top: var(--space-6);
}

.social-manage-grid {
  display: grid;
  gap: var(--space-4);
}

.social-manage-grid article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.social-manage-grid article > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
}

.social-manage-grid h3 {
  font-size: var(--text-body-lg);
}

.social-manage-grid .feature-list {
  margin-top: var(--space-3);
}

.social-process-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.social-process-grid .process-step {
  min-height: 250px;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
}

.social-process-grid .process-step p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.social-local-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: var(--space-12);
  align-items: center;
}

.social-local-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.social-local-tags span,
.social-keyword-list span {
  display: inline-flex;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.social-local-tags span {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
}

.social-local-goal {
  padding: var(--space-8);
  border: 1px solid var(--color-secondary-border);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.social-local-goal > span {
  color: var(--color-gold);
}

.social-local-goal h3 {
  margin-top: var(--space-4);
  color: var(--color-white);
  font-size: var(--text-h3);
}

.social-local-goal > p {
  margin-top: var(--space-4);
  color: var(--color-on-dark);
}

.social-keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.social-keyword-list strong {
  width: 100%;
  margin-bottom: var(--space-1);
  color: var(--color-white);
  font-size: var(--text-small);
}

.social-keyword-list span {
  background: var(--color-on-dark-border);
  color: var(--color-on-dark-strong);
}

.social-local-goal small {
  display: block;
  margin-top: var(--space-6);
  color: var(--color-on-dark-muted);
  font-size: var(--text-caption);
  line-height: var(--line-small);
}

.social-reporting-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-12);
  align-items: start;
}

.social-reporting-content {
  position: sticky;
  top: 130px;
}

.social-reporting-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.social-reporting-cards article {
  min-height: 190px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.social-reporting-cards article:last-child {
  grid-column: 1 / -1;
}

.social-reporting-cards h3 {
  margin-top: var(--space-4);
  font-size: var(--text-body-lg);
}

.social-reporting-cards p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.social-proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
  gap: var(--space-12);
  align-items: center;
}

.social-proof__visual {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--color-surface-blue), var(--color-surface));
}

.social-proof__panel {
  min-height: 340px;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.social-proof__panel > span {
  color: var(--color-gold);
}

.social-proof__panel > strong {
  display: block;
  max-width: 520px;
  margin-top: var(--space-6);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--line-h3);
}

.social-proof__fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-12);
}

.social-proof__fields span {
  display: grid;
  min-height: 68px;
  place-items: center;
  padding: var(--space-2);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  background: var(--color-on-dark-border);
  color: var(--color-on-dark-strong);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.social-proof__content .btn {
  margin-top: var(--space-8);
}

.social-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-12);
  align-items: start;
}

.social-final-cta {
  padding-bottom: 0;
}

.social-cta-band {
  min-height: 300px;
  padding: var(--space-16);
}

.social-cta-band__actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.social-cta-band .btn--outline {
  border-color: var(--color-on-dark-strong);
  color: var(--color-white);
}

.social-cta-band .btn--outline:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
}

/* =========================================================
   PHASE 10 — PORTFOLIO / CASE STUDIES
   Scoped to .portfolio-hub-page and portfolio-* components.
   ========================================================= */

.portfolio-hub-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: var(--space-16);
  align-items: center;
}

.portfolio-hub-hero { background: linear-gradient(115deg, #e9f6ff, #fff3e7 55%, #f4eaff); }
.portfolio-hub-visual--image { padding: var(--space-2); background: #fff; }
.portfolio-hub-visual--image img { aspect-ratio: 2006 / 784; object-fit: contain; }
.portfolio-v3-showcase { background: #fff; }
.portfolio-v3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.portfolio-v3-feature, .portfolio-v3-tile { overflow: hidden; border-radius: var(--radius-lg); background: #f0f8ff; }
.portfolio-v3-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; background: #fff0e4; }
.portfolio-v3-feature img { width: 100%; height: 100%; max-height: 570px; object-fit: cover; }
.portfolio-v3-feature > div { padding: clamp(28px, 4vw, 68px); }
.portfolio-v3-feature h3 { margin: var(--space-4) 0; font-size: clamp(2rem, 3vw, 3.5rem); line-height: 1.05; }
.portfolio-v3-feature p { margin-bottom: var(--space-6); }
.portfolio-v3-tile:nth-child(3) { background: #f0edff; }
.portfolio-v3-tile:nth-child(4) { background: #e9faf7; }
.portfolio-v3-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.portfolio-v3-tile:nth-child(3) img { object-fit: contain; background: #e7e5f7; }
.portfolio-v3-tile > div { padding: var(--space-6); }
.portfolio-v3-grid span { color: #1156a3; font-size: var(--text-caption); font-weight: 800; letter-spacing: .08em; }
.portfolio-v3-tile h3 { margin: var(--space-3) 0 var(--space-4); font-size: var(--text-h4); }
.portfolio-v3-real-work { background: #eaf6fc; }
.portfolio-v3-real-work .site-container { max-width: 960px; }
.portfolio-v3-real-work h2 { margin: var(--space-3) 0; }
.portfolio-v3-real-work p { max-width: 720px; margin-bottom: var(--space-6); }
.real-work-portfolio-section:not([hidden]) + .portfolio-v3-real-work { display: none; }

.portfolio-hub-hero__content h1 {
  max-width: 760px;
}

.portfolio-hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.portfolio-hub-hero__note {
  max-width: 720px;
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-hub-visual {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--color-surface-blue), var(--color-surface));
  box-shadow: var(--shadow-lg);
}

.portfolio-hub-visual__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.portfolio-hub-visual__topbar span {
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.portfolio-hub-visual__topbar i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
}

.portfolio-hub-visual__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: repeat(2, minmax(150px, auto));
  gap: var(--space-4);
}

.portfolio-hub-preview {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.portfolio-hub-preview--print {
  grid-row: 1 / span 2;
  min-height: 320px;
  background: var(--color-primary);
}

.portfolio-hub-preview > span {
  display: block;
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.portfolio-hub-preview--print > span {
  color: var(--color-gold);
}

.portfolio-hub-preview strong {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  line-height: 1.5;
}

.portfolio-hub-preview--print strong {
  margin-top: var(--space-12);
  color: var(--color-white);
  font-size: var(--text-h3);
  line-height: 1.45;
}

.portfolio-hub-preview--web i {
  display: block;
  height: 9px;
  margin-top: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.portfolio-hub-preview--web i:last-child {
  width: 64%;
}

.portfolio-hub-preview--marketing {
  background: var(--color-gold-soft);
}

.portfolio-hub-page .section-heading {
  display: grid;
  max-width: 820px;
  gap: var(--space-3);
  align-items: start;
  justify-content: stretch;
}

.portfolio-hub-page .section-heading .page-eyebrow {
  justify-self: start;
  margin-bottom: 0;
}

.portfolio-hub-page .section-heading h2,
.portfolio-hub-page .section-heading p {
  min-width: 0;
  max-width: 760px;
}

.portfolio-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.portfolio-category-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-6);
  min-height: 210px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.portfolio-category-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-interactive);
  box-shadow: var(--shadow-md);
}

.portfolio-category-card > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
}

.portfolio-category-card h3 {
  font-size: var(--text-body-lg);
}

.portfolio-category-card p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-category-card strong {
  display: inline-block;
  margin-top: var(--space-6);
  color: var(--color-secondary);
  font-size: var(--text-body);
}

.portfolio-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.portfolio-showcase-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.portfolio-showcase-card--feature {
  grid-row: span 2;
}

.portfolio-showcase-card--wide {
  grid-column: 1 / -1;
}

.portfolio-showcase-card__visual {
  position: relative;
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  overflow: hidden;
  padding: var(--space-6);
  background: var(--color-surface-blue);
}

.portfolio-showcase-card--feature .portfolio-showcase-card__visual {
  min-height: 420px;
}

.portfolio-showcase-card__visual > span {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.portfolio-showcase-card__visual--cards {
  align-items: flex-end;
  background: var(--color-primary);
}

.portfolio-showcase-card__visual--cards > span {
  color: var(--color-gold);
}

.portfolio-showcase-card__visual--cards i {
  display: block;
  width: 28%;
  min-height: 155px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  background: var(--color-on-dark-border);
  transform: translateY(-10px) rotate(-4deg);
}

.portfolio-showcase-card__visual--cards i:nth-of-type(2) {
  min-height: 190px;
  transform: translateY(-24px);
}

.portfolio-showcase-card__visual--cards i:nth-of-type(3) {
  transform: translateY(-8px) rotate(4deg);
}

.portfolio-showcase-card__visual--menu i {
  display: block;
  width: 35%;
  min-height: 130px;
  border: 1px solid var(--color-secondary-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.portfolio-showcase-card__visual--menu i:last-child {
  transform: translateY(var(--space-4));
}

.portfolio-showcase-card__visual--gift {
  background: var(--color-gold-soft);
}

.portfolio-showcase-card__visual--gift strong {
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--radius-md);
  color: var(--color-gold-text);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
}

.portfolio-showcase-card__visual--window {
  align-items: stretch;
  background: linear-gradient(180deg, var(--color-surface-blue), var(--color-surface));
}

.portfolio-showcase-card__visual--window i {
  width: 28%;
  min-height: 130px;
  border: 1px solid var(--color-secondary-border);
  background: var(--color-secondary-soft);
}

.portfolio-showcase-card__visual--banner {
  background: var(--color-secondary);
}

.portfolio-showcase-card__visual--banner > span,
.portfolio-showcase-card__visual--banner strong {
  color: var(--color-white);
}

.portfolio-showcase-card__visual--banner strong {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  text-align: center;
}

.portfolio-showcase-card__visual--large i {
  display: block;
  width: 38%;
  min-height: 125px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
}

.portfolio-showcase-card__visual--large i:last-child {
  min-height: 160px;
  background: var(--color-secondary);
}

.portfolio-showcase-card__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-6);
}

.portfolio-showcase-card__body h3 {
  font-size: var(--text-body-lg);
}

.portfolio-showcase-card__body p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-showcase-card__body .text-link {
  display: inline-flex;
  margin-top: auto;
  padding-top: var(--space-6);
}

.portfolio-digital-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.portfolio-digital-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.portfolio-browser-preview,
.portfolio-screen-preview {
  min-height: 360px;
  padding: var(--space-6);
  background: linear-gradient(145deg, var(--color-surface-blue), var(--color-surface));
}

.portfolio-browser-preview__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.portfolio-browser-preview__bar i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.portfolio-browser-preview__bar span {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.portfolio-browser-preview__hero {
  margin-top: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-primary);
}

.portfolio-browser-preview__hero span,
.portfolio-screen-preview span {
  color: var(--color-gold);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.portfolio-browser-preview__hero strong {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  line-height: var(--line-h4);
}

.portfolio-browser-preview__hero i {
  display: block;
  width: 38%;
  height: 8px;
  margin-top: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}

.portfolio-browser-preview__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.portfolio-browser-preview__cards i {
  display: block;
  min-height: 90px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.portfolio-screen-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-primary);
}

.portfolio-screen-preview strong {
  display: block;
  max-width: 440px;
  margin-top: var(--space-4);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--line-h3);
}

.portfolio-screen-preview__slides {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-12);
}

.portfolio-screen-preview__slides i {
  min-height: 90px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  background: var(--color-on-dark-border);
}

.portfolio-digital-card__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-8);
}

.portfolio-digital-card__body > span,
.portfolio-proof-card__top > span,
.portfolio-cta-band__eyebrow {
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.portfolio-digital-card__body h3 {
  margin-top: var(--space-2);
  font-size: var(--text-h4);
}

.portfolio-digital-card__body p {
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

.portfolio-digital-card__body .btn {
  margin-top: auto;
}

.portfolio-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.portfolio-proof-card {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.portfolio-proof-card--maps {
  border-color: var(--color-secondary-border);
  box-shadow: var(--shadow-sm);
}

.portfolio-proof-card__top strong {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
}

.portfolio-proof-card__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.portfolio-proof-card__fields span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.portfolio-proof-card p {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-proof-card .text-link {
  margin-top: auto;
  padding-top: var(--space-8);
}

.portfolio-case-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.portfolio-case-grid article {
  min-height: 260px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.portfolio-case-grid article > span {
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-extrabold);
}

.portfolio-case-grid h3 {
  margin-top: var(--space-4);
  font-size: var(--text-body-lg);
}

.portfolio-case-grid p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-process-grid .process-step {
  min-height: 230px;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
}

.portfolio-process-grid .process-step p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-final-cta {
  padding-bottom: 0;
}

.portfolio-cta-band {
  min-height: 320px;
  padding: var(--space-16);
}

.portfolio-cta-band__eyebrow {
  color: var(--color-gold);
}

.portfolio-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.portfolio-cta-links a {
  color: var(--color-on-dark-strong);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.portfolio-cta-links a:hover {
  color: var(--color-white);
}

.portfolio-cta-band__actions {
  flex: 0 0 auto;
}


/* =========================================================
   Production credibility update
   ========================================================= */
.home-proof-section {
  border-block: 1px solid var(--color-border);
  background: var(--color-white);
}

.home-proof-heading > p {
  max-width: 680px;
}

.home-proof-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-proof-card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-6);
}

.home-proof-card > span {
  color: var(--color-gold-deep);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.home-proof-card h3 {
  margin-top: var(--space-4);
  font-size: var(--text-h4);
}

.home-proof-card p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.home-proof-audiences {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.home-proof-audiences span {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-soft);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-soft);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

/* Supporting pages share the V2 visual language without changing their flows. */
.support-page .page-hero {
  border-bottom: 1px solid #cfe1ef;
  background: linear-gradient(115deg, #eaf7ff 0%, #fff7e9 52%, #f1edff 100%);
}
.support-page--contact .page-hero,
.support-page--quote .page-hero { background: linear-gradient(120deg, #e9f8f4, #ecf4ff 55%, #fff2e4); }
.support-page--help .page-hero { background: linear-gradient(120deg, #fff4e9, #f3f0ff 55%, #e9f8ff); }
.support-page--utility .page-hero { background: linear-gradient(120deg, #eaf7ff, #fff4e9); }
.support-page .page-hero .site-container { padding-block: clamp(56px, 6vw, 96px); }
.support-page .page-hero h1 { max-width: 900px; text-wrap: balance; }
.support-page--help .service-card { border-top: 5px solid #119da4; }
.support-page--help .service-card:nth-child(2) { border-top-color: #ee754f; }
.support-page--help .service-card:nth-child(3) { border-top-color: #6d4dc3; }
.support-page--help .content-shell { max-width: 960px; }
.support-page--help .content-shell > h2:not(:first-child) { margin-top: var(--space-8); }
.support-page--help .content-shell > h2 { color: #124f91; }
.support-page--help .table-wrap { border: 1px solid #c7dfeb; border-radius: var(--radius-lg); overflow-x: auto; }
.support-page--contact .form-card, .support-page--quote .form-card { border-top: 5px solid #0e94a3; }
.support-page--contact .form-side__card, .support-page--quote .form-side__card { background: #123d75; }

.about-specialty-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.about-specialty-grid .service-card {
  min-height: 300px;
}

.about-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.about-audience-grid article {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-8);
}

.about-audience-grid article > span {
  color: var(--color-gold-deep);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
}

.about-audience-grid h3 {
  margin-top: var(--space-4);
}

.about-audience-grid p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.portfolio-category-grid--eight {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portfolio-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.portfolio-project-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.portfolio-project-card__media {
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  padding: var(--space-6);
  background: linear-gradient(145deg, var(--color-surface-soft), var(--color-surface-blue));
  color: var(--color-placeholder);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-align: center;
}

.portfolio-project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

.portfolio-project-card__body h3 {
  font-size: var(--text-h4);
}

.portfolio-project-card__body p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-project-card__body .text-link {
  margin-top: auto;
  padding-top: var(--space-6);
}

.contact-company-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  color: var(--color-text-soft);
}

.contact-company-list li {
  position: relative;
  padding-left: var(--space-5);
}

.contact-company-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: var(--font-weight-extrabold);
}

.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}


/* =========================================================
   REAL WORK / PORTFOLIO MEDIA
   Shows only verified project data from data/real-work.json.
   ========================================================= */
.portfolio-category-group {
  margin-top: var(--space-12);
}

.portfolio-category-group + .portfolio-category-group {
  margin-top: var(--space-16);
}

.portfolio-category-group__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.portfolio-category-group__heading > span {
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}

.portfolio-category-group__heading p {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.portfolio-category-group .portfolio-category-grid {
  margin-top: var(--space-6);
}

.portfolio-category-grid--printing,
.portfolio-category-grid--digital {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.real-work-project-group {
  margin-top: var(--space-12);
}

.real-work-project-group + .real-work-project-group {
  margin-top: var(--space-16);
}

.real-work-project-group__title {
  margin-bottom: var(--space-6);
  font-size: var(--text-h3);
}

.real-work-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.real-work-project-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.real-work-project-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-soft);
}

.real-work-project-card__media > img,
.real-work-project-card__media--website img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.real-work-project-card__media > img.real-work-image--contain,
.real-work-project-card__media--website img.real-work-image--contain {
  object-fit: contain;
}

.real-work-project-card__media--website {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.real-work-website-preview {
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.real-work-website-preview--desktop {
  width: 88%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
}

.real-work-website-preview--mobile {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 25%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-sm);
}

.real-work-project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

.real-work-project-card__service,
.website-project-card__service {
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.real-work-project-card__body h3,
.website-project-card__body h3 {
  margin-top: var(--space-2);
  font-size: var(--text-h4);
}

.real-work-project-card__location,
.website-project-card__location {
  margin-top: var(--space-2);
  color: var(--color-text-soft);
  font-size: var(--text-small);
}

.real-work-project-card__description,
.website-project-card__description {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.real-work-project-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-6);
}

.website-projects-section .section-heading {
  margin-bottom: var(--space-8);
}

.website-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.website-project-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.website-project-card__media {
  position: relative;
  min-height: 300px;
  padding: var(--space-5);
  background: var(--color-surface-soft);
}

.website-project-frame {
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.website-project-frame--desktop {
  width: 90%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
}

.website-project-frame--mobile {
  position: absolute;
  right: 7%;
  bottom: 7%;
  width: 27%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-sm);
}

.website-project-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.website-project-frame img.real-work-image--contain {
  object-fit: contain;
}

.website-project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

.website-project-card__body .text-link {
  margin-top: auto;
  padding-top: var(--space-6);
}

.website-projects-section__actions {
  margin-top: var(--space-8);
}


/* Production image integration */
.home-hero-media,
.service-hero-media,
.portfolio-hub-visual--image {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-md);
}

.home-hero-media {
  aspect-ratio: 16 / 10;
}

.home-hero-media img,
.service-hero-media img,
.portfolio-hub-visual--image img,
.home-path-card__media,
.home-service-card__media,
.home-portfolio-card__visual img,
.marketing-service-card__media,
.website-audience-card__media,
.service-visual-strip img,
.service-proof-gallery img,
.service-media-grid img,
.social-showcase-card__visual--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-hero-media {
  aspect-ratio: 4 / 3;
}

.service-hero-media--digital-menu {
  aspect-ratio: 16 / 9;
}

.home-path-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
}

.home-service-card {
  overflow: hidden;
}

.home-service-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-5);
  width: 100%;
  border-radius: var(--radius-md);
}

.home-portfolio-card__visual {
  padding: 0;
}

.home-portfolio-card__visual img {
  display: block;
  min-height: 100%;
}

.marketing-service-card {
  overflow: hidden;
}

.marketing-service-card__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.website-audience-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-5);
  width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  object-fit: contain;
  background: linear-gradient(145deg, #e5f5ff, #fff9e8);
}

.website-audience-card--featured .website-audience-card__media {
  aspect-ratio: 16 / 9;
}

.website-audience-card {
  overflow: hidden;
}

.service-visual-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.service-visual-strip img {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.service-proof-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-content: start;
}

.service-proof-gallery img {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.website-features .service-visual-strip img {
  object-fit: contain;
  background: #f1f7ff;
}

.social-showcase-card__visual--image {
  padding: 0;
  overflow: hidden;
}

.social-showcase-card__visual--image img {
  display: block;
  aspect-ratio: 4 / 3;
}

.digital-menu-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-10);
  align-items: center;
}

.digital-menu-hero { background: linear-gradient(130deg, #fff3e9, #e8f7ff 54%, #f3edff); }
.digital-menu-gallery { background: #eef8ff; }
.digital-menu-gallery .service-media-grid img { object-fit: contain; background: #102f58; }

.service-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.service-media-grid img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.service-media-grid--wide img {
  aspect-ratio: 16 / 9;
}

.portfolio-hub-visual--image {
  aspect-ratio: 16 / 10;
  padding: 0;
}

.portfolio-hub-visual--image img {
  display: block;
}


/* Catalog card media uses the same 4:3 ratio as the prepared product assets. */
.product-card__media {
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-featured-products .product-card__media,
.printing-popular__grid .product-card__media,
.category-products .product-card__media {
  min-height: 0;
  aspect-ratio: 4 / 3;
}