/* ==========================================================================
   SEO-DIGITAL-PROJECTS.CSS
   Page-specific layer for seo-digital-projects.html.
   Builds on css/our-work.css (cards, keyword result cards, process steps,
   final CTA) and css/our-work-portfolio.css (hero, mini-cards, featured
   card, before/after cards). Adds the SEO-specific pieces: journey flows,
   featured SEO focus list, local SEO card, content journey, connected
   system diagram, the SEO project listing (14) and the reusable SEO
   project popup #sd-modal (15, filled by js/seo-digital-projects.js).
   Scoped under .sd-page / .sdm.
   Loaded AFTER our-work-portfolio.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SHARED LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.sd-page .sd-panel {
  background: linear-gradient(135deg, var(--cs-pale-2) 0%, var(--cs-pale) 100%);
  border: 1px solid var(--cs-line);
  border-radius: 24px;
  padding: 38px 38px 34px;
}

.sd-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: start;
}

.sd-split--center {
  align-items: center;
}

.sd-split--media {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.sd-cards {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

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

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

.sd-sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 22px 0 12px;
}

.sd-more {
  margin: 22px 0 0;
}

/* --------------------------------------------------------------------------
   2. JOURNEY FLOW — chips joined by arrows (horizontal; vertical on mobile)
   -------------------------------------------------------------------------- */
.sd-flow {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
}

.sd-flow--spaced {
  margin: 34px 0 0;
}

.sd-flow li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  background: #fff;
  border: 1px solid rgba(28, 111, 208, 0.28);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.25;
  color: var(--cs-navy);
  box-shadow: 0 6px 16px rgba(6, 42, 107, 0.06);
}

.sd-flow li i {
  display: inline-flex;
  line-height: 1;
  font-size: 1rem;
  color: var(--accent2);
}

.sd-flow li.is-goal {
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  border-color: transparent;
  color: #fff;
}

.sd-flow li.is-goal i {
  color: #fff;
}

.sd-flow li:not(:last-child)::after {
  content: "\f138"; /* bootstrap-icons arrow-right */
  font-family: "bootstrap-icons";
  position: absolute;
  right: -23px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: var(--accent2);
}

/* vertical variant (used inside split layouts and on mobile) */
.sd-flow--vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  margin: 0;
}

.sd-flow--vertical li:not(:last-child)::after {
  content: "\f128"; /* bootstrap-icons arrow-down */
  right: auto;
  left: 24px;
  top: auto;
  bottom: -21px;
  transform: none;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   3. FEATURED SEO PROJECT (extends .bp-featured__*)
   -------------------------------------------------------------------------- */
.sd-featured__client {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
}

.sd-featured__client-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
}

.sd-services {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.sd-services li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--cs-navy);
}

.sd-services i {
  display: inline-flex;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--accent2);
}

.sd-focus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.sd-focus li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text2);
}

.sd-focus strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cs-navy);
  margin-bottom: 2px;
}

.sd-focus__icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--cs-line);
  color: var(--accent2);
  font-size: 1.05rem;
}

.sd-focus__icon i {
  display: inline-flex;
  line-height: 1;
}

/* featured visual: laptop mockup + results on a navy panel (replaces the
   full-bleed photo of .bp-featured__visual) */
.sd-featured__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px 32px 34px;
  background: radial-gradient(120% 90% at 80% 0%, #0b4fa3 0%, #062a6b 55%, #041b47 100%);
}

.sd-featured__visual::before {
  display: none;
}

.sd-featured__device {
  width: 100%;
  max-width: 470px;
  padding: 0 0 6px;
}

.sd-featured__visual .cs-devices__screen img {
  position: static;
  height: auto;
  transform: none;
}

.bp-featured__card:hover .sd-featured__visual img {
  transform: none;
}

.sd-featured__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 470px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sd-featured__stats li {
  padding: 12px 12px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.74rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

.sd-featured__stats strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 4px;
}

@media (max-width: 991.98px) {
  .sd-featured__visual {
    aspect-ratio: auto;
    padding: 30px 22px 26px;
  }
}

@media (max-width: 420px) {
  .sd-featured__stats {
    gap: 8px;
  }

  .sd-featured__stats li {
    padding: 10px 8px;
    font-size: 0.68rem;
  }

  .sd-featured__stats strong {
    font-size: 1.1rem;
  }
}

/* --------------------------------------------------------------------------
   4. PROJECT CARDS (extends .cs-card)
   -------------------------------------------------------------------------- */
.sd-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sd-card__name {
  margin: 0;
}

.sd-card__focus span {
  color: var(--text3);
  font-weight: 500;
}

.sd-card__focus {
  margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   5. SEARCH VISIBILITY
   -------------------------------------------------------------------------- */
.sd-results__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.sd-results__label i {
  display: inline-flex;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   6. MANUFACTURING & B2B — journey card
   -------------------------------------------------------------------------- */
.sd-journey {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 18px;
  padding: 24px 26px 26px;
  box-shadow: var(--cs-shadow);
}

.sd-journey__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   7. LOCAL SEO
   -------------------------------------------------------------------------- */
.sd-local__card {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 20px;
  padding: 26px 28px 28px;
  box-shadow: var(--cs-shadow);
}

.sd-local__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cs-line);
}

.sd-local__pin {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  color: #fff;
  font-size: 1.3rem;
}

.sd-local__pin i {
  display: inline-flex;
  line-height: 1;
}

.sd-local__card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cs-navy);
  margin: 0;
}

.sd-local__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.sd-local__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text2);
}

.sd-local__list i {
  display: inline-flex;
  line-height: 1;
  font-size: 1rem;
  color: var(--accent2);
  margin-top: 0.12em;
}

/* --------------------------------------------------------------------------
   8. SOCIAL MEDIA
   -------------------------------------------------------------------------- */
.sd-social__media {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--cs-shadow-hover);
  aspect-ratio: 9 / 7;
}

.sd-social__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s var(--svc-ease);
}

.sd-social__media:hover img {
  transform: scale(1.04);
}

.sd-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-chips li {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(28, 111, 208, 0.28);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--cs-navy);
}

/* --------------------------------------------------------------------------
   9. SEARCH-LED CONTENT — question journey
   -------------------------------------------------------------------------- */
.sd-questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px;
  counter-reset: sdq;
}

.sd-questions li {
  position: relative;
  counter-increment: sdq;
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 6px 20px rgba(6, 42, 107, 0.05);
}

.sd-questions li::before {
  content: "0" counter(sdq);
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  color: rgba(28, 111, 208, 0.55);
  margin-bottom: 6px;
}

.sd-questions li.is-goal {
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  border-color: transparent;
}

.sd-questions li.is-goal::before,
.sd-questions li.is-goal .sd-questions__step,
.sd-questions li.is-goal .sd-questions__q {
  color: #fff;
}

.sd-questions li:not(:last-child)::after {
  content: "\f138";
  font-family: "bootstrap-icons";
  position: absolute;
  right: -23px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: var(--accent2);
}

.sd-questions__step {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cs-navy);
  margin-bottom: 6px;
}

.sd-questions__q {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text2);
  font-style: italic;
}

.sd-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 26px 0 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--cs-pale);
  border-left: 3px solid var(--accent2);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--cs-navy);
}

.sd-note i {
  display: inline-flex;
  line-height: 1;
  font-size: 1.2rem;
  color: var(--accent2);
  margin-top: 0.15em;
}

/* --------------------------------------------------------------------------
   10. DIGITAL TRANSFORMATION (extends .bp-compare)
   -------------------------------------------------------------------------- */
.sd-page .sd-transform__grid {
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
}

.sd-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.sd-steps li {
  position: relative;
  padding: 11px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(7, 26, 46, 0.1);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text2);
}

.sd-steps li:not(:last-child)::after {
  content: "\f128";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--text3);
}

.sd-steps--after li {
  border-color: rgba(28, 111, 208, 0.3);
  background: var(--cs-pale-2);
  color: var(--cs-navy);
  font-weight: 600;
}

.sd-steps--after li:not(:last-child)::after {
  color: var(--accent2);
}

.sd-steps--after li:last-child {
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  border-color: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------------
   11. CONNECTED DIGITAL SYSTEM — diagram
   -------------------------------------------------------------------------- */
.sd-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.sd-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 20px;
  padding: 28px 20px;
  box-shadow: var(--cs-shadow);
}

.sd-diagram__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.sd-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--cs-pale);
  border: 1px solid rgba(28, 111, 208, 0.28);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--cs-navy);
  text-align: center;
  white-space: nowrap;
}

.sd-node--hub {
  padding: 14px 22px;
  background: var(--cs-navy);
  border-color: var(--cs-navy);
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(6, 42, 107, 0.25);
}

.sd-node--goal {
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  border-color: transparent;
  color: #fff;
}

.sd-diagram__down {
  width: 2px;
  height: 18px;
  background: rgba(28, 111, 208, 0.4);
}

.sd-diagram__link {
  width: 22px;
  height: 2px;
  flex: none;
  background: rgba(28, 111, 208, 0.4);
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   Satkar breakpoints: laptop 992–1199 · tablet 576–991 · mobile ≤575
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .sd-cards--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sd-questions {
    gap: 26px;
  }

  .sd-questions li {
    padding: 18px 14px;
  }
}

@media (max-width: 991.98px) {
  .sd-page .sd-panel {
    padding: 30px 26px;
  }

  .sd-split,
  .sd-split--media {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

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

  .sd-questions {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    max-width: 560px;
  }

  .sd-questions li:not(:last-child)::after {
    content: "\f128";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -21px;
    transform: translateX(-50%);
  }
}

@media (max-width: 767.98px) {
  /* horizontal flows become vertical */
  .sd-flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }

  .sd-flow li:not(:last-child)::after {
    content: "\f128";
    right: auto;
    left: 24px;
    top: auto;
    bottom: -21px;
    transform: none;
    font-size: 0.85rem;
  }

  .sd-focus,
  .sd-local__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* before / after stacks (the shared rule is out-specified by the desktop override above) */
  .sd-page .sd-transform__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .sd-page .sd-panel {
    padding: 26px 18px;
    border-radius: 18px;
  }

  .sd-cards--3,
  .sd-cards--5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-local__card {
    padding: 22px 18px;
  }

  .sd-diagram {
    padding: 22px 12px;
  }

  .sd-node {
    padding: 8px 11px;
    font-size: 0.74rem;
    white-space: normal;
  }

  .sd-node--hub {
    padding: 11px 14px;
    font-size: 0.82rem;
  }

  .sd-diagram__link {
    width: 10px;
  }
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-social__media img {
    transition: none;
  }

  .sd-social__media:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. SEO PROJECT LISTING — filter pills at the top of the grid + filter fade
       (cards: data-project → js/seo-digital-projects.js; filtering:
       js/our-work.js)
   -------------------------------------------------------------------------- */
.sd-page .cs-grid-section__filters {
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cs-line);
}

.sd-page .cs-card.is-filtered-in {
  animation: sdFilterIn 0.42s var(--svc-ease) both;
}

@keyframes sdFilterIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* two-letter initials in the card brand badge */
.sd-page .sd-card__brand .cs-logo {
  width: 40px;
  font-size: 0.78rem;
}

/* "View Project" is a <button> with the existing .cs-link look */
.sd-page button.cs-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.sd-page button.cs-link:focus-visible {
  outline: 3px solid rgba(28, 111, 208, 0.35);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   15. SEO PROJECT POPUP (#sd-modal, .sdm*) — filled by js/seo-digital-projects.js
   Layout (no empty space by construction):
     top     project visual | header (title, tagline, intro, services,
             industry / type, description) — the visual covers whatever
             height the header needs
     body    two-column grid in DOCX order; half-width sections pair up and
             one left alone is widened by the JS (data-wide); the product
             showcase always spans the row
     footer  live website + CTA
   A section without data is never rendered; height follows the content
   (max-height + internal scroll). The only per-project colour is
   --sdm-accent (set on the dialog; lines, icons, tints derive from it).
   -------------------------------------------------------------------------- */
html.sdm-lock,
html.sdm-lock body {
  overflow: hidden;
}

.sdm {
  --sdm-pad: 28px;
  --sdm-gap: 20px;
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sdm[hidden],
.sdm [hidden] {
  display: none !important;
}

.sdm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 27, 71, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--svc-ease);
}

.sdm__dialog {
  --sdm-accent: #1c6fd0;
  --sdm-ink: color-mix(in srgb, var(--sdm-accent) 62%, #062a6b);
  --sdm-tint: color-mix(in srgb, var(--sdm-accent) 7%, #fff);
  --sdm-tint-2: color-mix(in srgb, var(--sdm-accent) 14%, #fff);
  --sdm-edge: color-mix(in srgb, var(--sdm-accent) 24%, #fff);
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(4, 27, 71, 0.35);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.3s var(--svc-ease), transform 0.4s var(--svc-ease);
}

.sdm__dialog:focus {
  outline: none;
}

.sdm.is-open .sdm__backdrop {
  opacity: 1;
}

.sdm.is-open .sdm__dialog {
  opacity: 1;
  transform: none;
}

.sdm__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cs-line);
  border-radius: 50%;
  background: #fff;
  color: var(--cs-navy);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(6, 42, 107, 0.18);
  transition: transform 0.25s var(--svc-ease), color 0.25s var(--svc-ease);
}

.sdm__close i {
  display: inline-flex;
}

.sdm__close:hover {
  color: var(--accent2);
  transform: rotate(90deg);
}

.sdm__close:focus-visible {
  outline: 3px solid rgba(28, 111, 208, 0.45);
  outline-offset: 2px;
}

.sdm__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
  padding: var(--sdm-pad);
}

.sdm__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sdm-gap);
  min-width: 0;
}

/* ---- top row: visual | header ---- */
.sdm__top {
  display: grid;
  /* grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); */
  gap: 28px;
  align-items: stretch;
}

.sdm__top--solo {
  grid-template-columns: minmax(0, 1fr);
}

.sdm__visual {
  display: flex;
  min-width: 0;
}

.sdm-visual {
  flex: 1 1 auto;
  margin: 0;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sdm-tint);
  box-shadow: 0 14px 34px rgba(6, 42, 107, 0.14);
}

.sdm-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position: center; */
  object-position: left;
}

.sdm__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-right: 48px; /* room for the close button */
}

.sdm__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-navy);
}

.sdm__eyebrow::before {
  content: "";
  width: 28px;
  height: 10px;
  background: var(--sdm-accent);
  flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h29M26 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h29M26 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat left center / contain;
}

.sdm__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cs-navy);
  margin: -4px 0 0;
  overflow-wrap: anywhere;
}

.sdm__tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.35;
  color: var(--sdm-ink);
  margin: -4px 0 0;
}

.sdm__intro {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
}

.sdm__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sdm-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cs-line);
  box-shadow: 0 4px 12px rgba(6, 42, 107, 0.05);
  color: var(--cs-navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.2;
}

.sdm-tag i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sdm-tint-2);
  color: var(--sdm-ink);
  font-size: 0.9rem;
}

.sdm__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.sdm-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line);
}

.sdm-meta__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.sdm-meta__icon,
.sdm-hl__icon,
.sdm-product__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sdm-tint-2);
  color: var(--sdm-ink);
  font-size: 1rem;
}

.sdm-meta__icon i,
.sdm-hl__icon i,
.sdm-product__icon i {
  display: inline-flex;
}

.sdm-meta dl {
  margin: 0;
  min-width: 0;
}

.sdm-meta dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cs-navy);
}

.sdm-meta dd {
  margin: 1px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text2);
}

.sdm-desc__title,
.sdm-sec__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--cs-navy);
  margin: 0 0 10px;
}

.sdm-desc__title i,
.sdm-sec__title i {
  display: inline-flex;
  color: var(--sdm-ink);
  font-size: 1.05rem;
}

.sdm-desc p,
.sdm-sec p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text2);
  margin: 0 0 10px;
}

.sdm-desc p:last-child,
.sdm-sec > :last-child {
  margin-bottom: 0;
}

/* ---- body: two-column grid, wide sections span the row ---- */
.sdm__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sdm-gap);
  min-width: 0;
}

.sdm-sec {
  min-width: 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--cs-line);
  box-shadow: 0 6px 20px rgba(6, 42, 107, 0.05);
}

.sdm-sec[data-wide] {
  grid-column: 1 / -1;
}

/* JS measuring pass (see balance() in js/seo-digital-projects.js) */
.sdm__body.is-measuring {
  align-items: start;
}

/* story | SEO focus inside the success-story panel */
.sdm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px 0;
}

.sdm-split--solo {
  grid-template-columns: minmax(0, 1fr);
}

.sdm-split__col {
  min-width: 0;
}

.sdm-split__col:first-child:not(:only-child) {
  padding-right: 28px;
}

.sdm-split__col + .sdm-split__col {
  padding-left: 28px;
  border-left: 1px solid var(--sdm-edge);
}

.sdm-split__col > :last-child {
  margin-bottom: 0;
}

.sdm-sec .sdm-label--first {
  margin-top: 0;
}

.sdm-panel {
  background: var(--sdm-tint);
  border-color: var(--sdm-edge);
}

.sdm-sec .sdm-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sdm-ink);
  margin: 14px 0 8px;
}

/* SEO success story / website showcase headings */
.sdm-sec .sdm-story__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--cs-navy);
  margin-bottom: 4px;
}

.sdm-sec .sdm-showcase__heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--cs-navy);
  margin-bottom: 4px;
}

.sdm-sec .sdm-story__sub,
.sdm-sec .sdm-showcase__sub {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--sdm-ink);
}

.sdm-sec .sdm-showcase__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--cs-navy);
}

.sdm-showcase__cta span {
  font-weight: 500;
  color: var(--text3);
}

.sdm-showcase__cta i {
  display: inline-flex;
  color: var(--sdm-ink);
}

/* check lists */
.sdm-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px 18px;
}

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

.sdm-sec[data-wide] .sdm-checks--2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sdm-sec[data-wide] .sdm-split .sdm-checks--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sdm-checks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--cs-navy);
}

.sdm-checks i {
  display: inline-flex;
  flex: none;
  margin-top: 0.15em;
  color: var(--sdm-ink);
}

/* search → enquiry flow */
.sdm-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
}

.sdm-checks + .sdm-flow {
  margin-top: 14px;
}

.sdm-flow li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--sdm-edge);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--cs-navy);
}

.sdm-flow li i {
  display: inline-flex;
  color: var(--sdm-ink);
}

.sdm-flow li.is-goal {
  background: var(--sdm-ink);
  border-color: transparent;
  color: #fff;
}

.sdm-flow li.is-goal i {
  color: #fff;
}

.sdm-flow li:not(:last-child)::after {
  content: "\f138"; /* bootstrap-icons arrow-right */
  font-family: "bootstrap-icons";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--sdm-ink);
}

/* website highlights */
.sdm-hls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sdm-sec[data-wide] .sdm-hls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sdm-sec[data-wide] .sdm-hls:has(.sdm-hl--compact) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sdm-hl {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--sdm-tint);
}

.sdm-hl--compact {
  align-items: center;
}

.sdm-hl__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--cs-navy);
  margin: 0;
}

.sdm-sec .sdm-hl__text {
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 3px 0 0;
}

/* keyword table */
.sdm-table {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--sdm-edge);
  background: #fff;
  margin-top: 4px;
}

.sdm-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sdm-table th {
  padding: 10px 14px;
  background: var(--sdm-tint-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--cs-navy);
  text-align: left;
  white-space: nowrap;
}

.sdm-table td {
  padding: 9px 14px;
  border-top: 1px solid var(--cs-line);
  line-height: 1.45;
  color: var(--cs-navy);
}

.sdm-table th:last-child,
.sdm-table td.sdm-table__pos {
  text-align: center;
  width: 1%;
}

.sdm-table td.sdm-table__pos {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.95rem;
  color: #008000;
  white-space: nowrap;
}

.sdm-sec .sdm-note {
  font-size: 0.8rem;
  color: var(--text3);
  margin-top: 8px;
}

/* product / solution showcase */
.sdm-products__list {
  --n: 4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 12px;
}

.sdm-product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border-radius: 14px;
  background: var(--sdm-tint);
  border: 1px solid var(--sdm-edge);
}

.sdm-product__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--cs-navy);
  margin: 0;
}

.sdm-sec .sdm-product__text {
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

/* ---- footer: live website + CTA ---- */
.sdm__foot {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 16px var(--sdm-gap);
  align-items: stretch;
}

.sdm__foot:has(> .sdm-live[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.sdm-live {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--sdm-tint);
  border: 1px solid var(--sdm-edge);
  color: var(--cs-navy);
  text-decoration: none;
  transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease);
}

.sdm-live:hover {
  color: var(--cs-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(6, 42, 107, 0.12);
}

.sdm-live:focus-visible {
  outline: 3px solid rgba(28, 111, 208, 0.45);
  outline-offset: 2px;
}

.sdm-live__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sdm-ink);
  color: #fff;
  font-size: 1.3rem;
}

.sdm-live__icon i {
  display: inline-flex;
}

.sdm-live__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.sdm-live__text strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 1.02rem;
  color: var(--sdm-ink);
}

.sdm-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  gap: 12px 20px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--cs-pale);
  border: 1px solid var(--cs-line);
}

.sdm-cta__text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--cs-navy);
}

.sdm-cta__text i {
  display: inline-flex;
  font-size: 1.4rem;
  color: var(--accent2);
}

.sdm-cta__btn {
  flex: none;
}

/* ---- popup responsive (same Satkar breakpoints as section 12) ---- */
@media (max-width: 1199.98px) {
  .sdm-sec[data-wide] .sdm-hls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .sdm {
    --sdm-pad: 22px;
  }

  .sdm__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .sdm-visual {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .sdm__head {
    padding-right: 0;
  }

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

  .sdm-sec[data-wide] .sdm-checks--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sdm-products__list {
    --n: 2 !important;
  }

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

@media (max-width: 767.98px) {
  .sdm {
    --sdm-pad: 16px;
    --sdm-gap: 16px;
    padding: 10px;
  }

  .sdm__dialog {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .sdm__close {
    top: 10px;
    right: 10px;
  }

  .sdm-sec {
    padding: 16px;
  }

  .sdm-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .sdm-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .sdm-split__col:first-child:not(:only-child) {
    padding-right: 0;
  }

  .sdm-split__col + .sdm-split__col {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--sdm-edge);
  }
}

@media (max-width: 575.98px) {
  .sdm-checks--2,
  .sdm-sec[data-wide] .sdm-checks--2,
  .sdm-sec[data-wide] .sdm-split .sdm-checks--2,
  .sdm-hls,
  .sdm-sec[data-wide] .sdm-hls,
  .sdm-sec[data-wide] .sdm-hls:has(.sdm-hl--compact) {
    grid-template-columns: minmax(0, 1fr);
  }

  .sdm-products__list {
    --n: 1 !important;
  }

  .sdm-table th,
  .sdm-table td {
    padding: 8px 10px;
  }

  .sdm-table th {
    white-space: normal;
  }

  .sdm-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .sdm-cta__btn {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdm__backdrop,
  .sdm__dialog,
  .sdm__close,
  .sdm-live {
    transition: none;
  }

  .sdm__dialog {
    transform: none;
  }

  .sd-page .cs-card.is-filtered-in {
    animation: none;
  }
}