/* ══════════════════════════════════════════════════════════════════════
   SERVICE PARENT PAGES — shared sections
   Used by every service parent page (Shopify, WordPress, Custom
   Development, ...). Backing markup lives in views/sections/shared/
   service-hero.php, service-pain-points.php, service-list.php and
   service-comparison.php. Keep this file generic — anything specific to
   one platform belongs in that page's own stylesheet (e.g. shopify.css).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Service Hero ──────────────────────────────────────────────────────
   Mirrors the homepage hero's design (sections/home/hero.html + home.php's
   inline critical CSS) so every service parent page carries the same
   visual identity as the homepage. ──────────────────────────────────── */
.svc-hero {
  padding: 6rem 0;
  background: var(--bg-primary);
  overflow: hidden
}

.svc-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.svc-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.svc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff8f5;
  border: 1px solid #ffdac7;
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: var(--radius-base);
  width: fit-content
}

.svc-hero-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0
}

.svc-hero-badge-stars {
  display: inline-flex;
  gap: 1px
}

.svc-hero-badge-stars svg {
  width: 13px;
  height: 13px
}

.svc-hero-heading {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--color-text)
}

.svc-hero-heading span {
  color: var(--color-primary)
}

.svc-hero-desc {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 520px
}

.svc-hero-actions {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap
}

.svc-hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  background: var(--bg-secondary);
  color: var(--color-text);
  font-size: .95rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: 1px solid #e8e5e0;
  transition: border-color .15s ease, color .15s ease
}

.svc-hero-btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary)
}

.svc-hero-stats {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem
}

.svc-hero-stats li {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text)
}

.svc-hero-stats svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0
}

.svc-hero-visual {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  height: 440px
}

.svc-hero-img-card {
  grid-row: span 2;
  position: relative;
  border-radius: var(--radius-base);
  overflow: hidden;
  background: var(--bg-secondary)
}

.svc-hero-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.svc-hero-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  border: 1px solid #ece9e4;
  border-radius: var(--radius-base);
  padding: .45rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08)
}

.svc-hero-float svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0
}

.svc-hero-float--1 {
  bottom: 3.5rem;
  left: 1rem
}

.svc-hero-float--2 {
  bottom: 1rem;
  left: 1rem
}

.svc-hero-panel {
  background: #fff;
  border: 1px solid #ece9e4;
  border-radius: var(--radius-base);
  padding: 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  justify-content: space-between
}

.svc-hero-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.25
}

.svc-hero-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.svc-hero-checklist li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: var(--color-text-muted);
  font-weight: 500
}

.svc-hero-checklist svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0
}

/* Partner-logo + rating variant of the panel */
.svc-hero-panel--partner {
  gap: .6rem
}

.svc-hero-panel-logo {
  width: 34px;
  height: 40px;
  display: flex;
  align-items: center
}

.svc-hero-panel-logo svg {
  width: 100%;
  height: 100%
}

.svc-hero-panel-rating {
  display: flex;
  align-items: center;
  gap: .4rem
}

.svc-hero-panel-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--color-primary)
}

.svc-hero-panel-stars svg {
  width: 14px;
  height: 14px
}

.svc-hero-panel-rating-num {
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-text)
}

.svc-hero-stat-card {
  background: var(--color-text);
  border-radius: var(--radius-base);
  padding: 1.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem
}

.svc-hero-stat-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1
}

.svc-hero-stat-label {
  display: block;
  font-size: .75rem;
  color: #9ca3af;
  margin-top: .25rem
}

.svc-hero-stat-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px
}

.svc-hero-stat-bar {
  width: 8px;
  border-radius: 3px;
  background: var(--color-primary);
  opacity: .4
}

.svc-hero-stat-bar:last-child {
  opacity: 1
}

@media(max-width:900px) {
  .svc-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .svc-hero-visual {
    height: 360px
  }
}

@media(max-width:600px) {
  .svc-hero {
    padding: 3rem 0 2.5rem
  }

  .svc-hero-visual {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    gap: .75rem
  }

  .svc-hero-img-card {
    grid-row: span 1;
    aspect-ratio: 1/1
  }

  .svc-hero-panel,
  .svc-hero-stat-card {
    grid-column: 1
  }

  .svc-hero-actions {
    flex-direction: column;
    align-items: stretch
  }

  .svc-hero-actions .btn-primary,
  .svc-hero-btn-secondary {
    justify-content: center
  }
}

/* ── Pain Points ───────────────────────────────────────────────────── */
.svc-pain {
  padding: 6rem 0;
  background: var(--bg-secondary)
}

.svc-pain-top {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem
}

.svc-pain-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff8f5;
  border: 1px solid #ffdac7;
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: var(--radius-base)
}

.svc-pain-heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--color-text)
}

.svc-pain-heading span {
  color: var(--color-primary)
}

.svc-pain-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.65
}

.svc-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.svc-pain-card {
  background: #fff;
  border: 1px solid #ece9e4;
  border-radius: var(--radius-base);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.svc-pain-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-base);
  background: #fff8f5;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.svc-pain-card-icon svg {
  width: 22px;
  height: 22px
}

.svc-pain-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.3
}

.svc-pain-card-desc {
  margin: 0;
  font-size: .875rem;
  color: var(--color-text-muted);
  line-height: 1.65
}

.svc-pain-footer {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center
}

.svc-pain-footer p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text)
}

.svc-pain-footer-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-primary);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none
}

.svc-pain-footer-link svg {
  width: 15px;
  height: 15px
}

@media(max-width:900px) {
  .svc-pain-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .svc-pain {
    padding: 3rem 0
  }

  .svc-pain-grid {
    grid-template-columns: 1fr
  }
}

/* ── Sub-Services List ────────────────────────────────────────────── */
.svc-list {
  padding: 6rem 0;
  background: var(--bg-primary)
}

.svc-list-top {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem
}

.svc-list-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff8f5;
  border: 1px solid #ffdac7;
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: var(--radius-base)
}

.svc-list-heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--color-text)
}

.svc-list-heading span {
  color: var(--color-primary)
}

.svc-list-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.65
}

.svc-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem
}

.svc-list-card {
  background: var(--bg-secondary);
  border: 1px solid #ece9e4;
  border-radius: var(--radius-base);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease
}

.svc-list-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  transform: translateY(-3px);
  border-color: rgba(255, 103, 25, .35)
}

.svc-list-card-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-base);
  background: #fff;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.svc-list-card-icon svg {
  width: 24px;
  height: 24px
}

.svc-list-card-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text)
}

.svc-list-card-desc {
  margin: 0;
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.6
}

.svc-list-card-features {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.svc-list-card-features li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .825rem;
  color: var(--color-text);
  font-weight: 500
}

.svc-list-card-features svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
  flex-shrink: 0
}

.svc-list-card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .25rem;
  color: var(--color-primary);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none
}

.svc-list-card-link svg {
  width: 15px;
  height: 15px;
  transition: transform .15s ease
}

.svc-list-card-link:hover svg {
  transform: translateX(3px)
}

@media(max-width:900px) {
  .svc-list-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:600px) {
  .svc-list {
    padding: 3rem 0
  }
}

/* ── Comparison: Us vs Others ─────────────────────────────────────── */
.svc-cmp {
  padding: 6rem 0;
  background: var(--bg-secondary)
}

.svc-cmp-top {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem
}

.svc-cmp-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff8f5;
  border: 1px solid #ffdac7;
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: var(--radius-base)
}

.svc-cmp-heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--color-text)
}

.svc-cmp-heading span {
  color: var(--color-primary)
}

.svc-cmp-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.65
}

.svc-cmp-cards {
  display: grid;
  grid-template-columns: .95fr 1.15fr .95fr;
  align-items: stretch;
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto
}

.svc-cmp-col {
  background: #fff;
  border: 1px solid #ece9e4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.svc-cmp-col--us {
  border: none;
  box-shadow: 0 24px 48px -16px rgba(69, 14, 5, .35);
  transform: translateY(-14px);
  z-index: 1
}

.svc-cmp-col-head {
  padding: 1.4rem 1.5rem;
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: .65rem
}

.svc-cmp-col--feat .svc-cmp-col-head {
  background: var(--bg-secondary)
}

.svc-cmp-col--feat .svc-cmp-col-title {
  color: var(--color-text)
}

.svc-cmp-col-head--us {
  background: linear-gradient(135deg, var(--color-primary), #d9500f)
}

.svc-cmp-col-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3
}

.svc-cmp-col-title small {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  opacity: .8;
  margin-top: .1rem
}

.svc-cmp-col-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center
}

.svc-cmp-col-body {
  flex: 1;
  display: flex;
  flex-direction: column
}

.svc-cmp-col--us .svc-cmp-col-body {
  background: #fff8f5
}

.svc-cmp-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.15rem 1.4rem;
  border-top: 1px solid #ece9e4;
  min-height: 90px
}

.svc-cmp-col--us .svc-cmp-item {
  border-top-color: #ffdac7
}

.svc-cmp-col-body .svc-cmp-item:first-child {
  border-top: none
}

.svc-cmp-item-text {
  display: flex;
  flex-direction: column;
  gap: .2rem
}

.svc-cmp-item-text strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35
}

.svc-cmp-item-text span {
  font-size: .8rem;
  color: var(--color-text-muted);
  line-height: 1.45
}

.svc-cmp-col--them .svc-cmp-item-text strong {
  color: var(--color-text-muted)
}

.svc-cmp-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.svc-cmp-item-icon--feat {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  background: var(--bg-secondary);
  color: var(--color-primary)
}

.svc-cmp-item-icon--feat svg {
  width: 17px;
  height: 17px
}

.svc-cmp-item-icon--yes,
.svc-cmp-item-icon--no {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-top: .1rem
}

.svc-cmp-item-icon--yes svg,
.svc-cmp-item-icon--no svg {
  width: 14px;
  height: 14px
}

.svc-cmp-item-icon--yes {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255, 103, 25, .35)
}

.svc-cmp-item-icon--no {
  background: #e4e0d9;
  color: var(--color-text-muted)
}

@media(max-width:900px) {
  .svc-cmp-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .svc-cmp-col--us {
    transform: none;
    order: -1
  }

  .svc-cmp-item {
    min-height: 0
  }
}

@media(max-width:600px) {
  .svc-cmp {
    padding: 3rem 0
  }

  .svc-cmp-col-head {
    padding: 1.15rem 1.25rem
  }

  .svc-cmp-item {
    padding: 1rem 1.25rem
  }
}

/* ── "Works with your stack" logo grid ───────────────────────────────
   Shared across every service parent page (Shopify apps, WordPress
   plugins, ...) — an optional row of original SVG logo marks appended
   below the sub-services grid via $_svcListExtra. Plain grid, no card
   background, matching the site's theme-colors-only rule with the
   established exception for genuine third-party brand identification. */
.svc-stack {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #ece9e4
}

.svc-stack-label {
  display: block;
  font-size: .825rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem
}

.svc-stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  row-gap: 2rem;
  column-gap: 1.5rem
}

.svc-stack-item {
  display: inline-flex;
  align-items: center;
  opacity: .85;
  transition: opacity .15s ease
}

.svc-stack-item:hover {
  opacity: 1
}

.svc-stack-item svg {
  height: 22px;
  width: auto;
  max-width: 100%
}

@media(max-width:900px) {
  .svc-stack-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.75rem
  }
}

@media(max-width:600px) {
  .svc-stack {
    margin-top: 2rem;
    padding-top: 1.5rem
  }

  .svc-stack-item svg {
    height: 20px
  }
}

/* ── Services hub page: background override ──────────────────────────
   sections/shared/services.html defaults to var(--bg-secondary) for its
   homepage placement (right after the hero there). On /services it sits
   directly after the pain-points section, which is also secondary — this
   override keeps the section-background rhythm alternating on this page
   only, without touching the shared component or its homepage usage. */
.svc-services-wrap .services {
  background: var(--bg-primary)
}

/* ── Full service directory (main services + sub-services) ───────────
   /services only — a complete, crawlable listing of every service page
   on the site, grouped by main service line. */
.svc-directory {
  padding: 6rem 0;
  background: var(--bg-secondary)
}

.svc-directory-top {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem
}

.svc-directory-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff8f5;
  border: 1px solid #ffdac7;
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: var(--radius-base)
}

.svc-directory-heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--color-text)
}

.svc-directory-heading span {
  color: var(--color-primary)
}

.svc-directory-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.65
}

.svc-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.svc-directory-col {
  background: #fff;
  border: 1px solid #ece9e4;
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column
}

.svc-directory-col-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1.5rem
}

.svc-directory-col-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: var(--bg-secondary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center
}

.svc-directory-col-title {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  font-weight: 800
}

.svc-directory-col-title a {
  color: var(--color-text);
  text-decoration: none
}

.svc-directory-col-title a:hover {
  color: var(--color-primary)
}

.svc-directory-col-desc {
  margin: 0;
  font-size: .85rem;
  color: var(--color-text-muted);
  line-height: 1.5
}

.svc-directory-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1
}

.svc-directory-list li {
  border-top: 1px solid #f2f0ec
}

.svc-directory-list li:first-child {
  border-top: none
}

.svc-directory-list li a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none
}

.svc-directory-list li a:hover {
  color: var(--color-primary)
}

.svc-directory-list li a svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-primary)
}

.svc-directory-col-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none
}

.svc-directory-col-link:hover {
  text-decoration: underline
}

.svc-directory-col-link svg {
  width: 14px;
  height: 14px
}

@media(max-width:900px) {
  .svc-directory-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:600px) {
  .svc-directory {
    padding: 3rem 0
  }

  .svc-directory-col {
    padding: 1.5rem
  }
}