/* SMSLab services — unified cards + responsive layout */

/* ─── Tighten section top spacing (content closer to block edge) ─── */
.svc-section,
.service-section {
  padding: 36px 0 48px !important;
}

.svc-header,
.section-header {
  margin-bottom: 28px !important;
}

/* Hero used 120px top padding for an old fixed 64px nav.
   sms-header is already in normal flow (~76px), so 120px left a huge empty band. */
.hero {
  padding-top: 8px !important;
}

/* First service block: flush to top edge of page-body
   (:first-of-type ignores whitespace text nodes; #s1 is the reliable anchor) */
.page-body > #s1,
.page-body > .svc-section:first-of-type,
.page-body > .service-section:first-of-type,
.page-body > .reveal:first-of-type,
.page-body > div[style*="padding"]:first-of-type {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* First block must be visible immediately — reveal animation left a blank gap */
.page-body > #s1.reveal,
.page-body > .svc-section:first-of-type.reveal,
.page-body > .service-section:first-of-type.reveal,
.page-body > .reveal:first-of-type {
  opacity: 1 !important;
  transform: none !important;
}

.page-body > .svc-section:not(:first-of-type):not(#s1),
.page-body > .service-section:not(:first-of-type):not(#s1) {
  padding-top: 36px !important;
}

/* Sticky subnav sits under sms-header (76px), not the old 64px bar */
.sticky-nav {
  top: 76px !important;
}
.sticky-nav .snav-item,
.snav-item {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ─── Outline buttons — centered label ─── */
.btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

/* ─── Auto-scrolling dark bands (mobile + tablet) ─── */
@media (max-width: 1100px) {
  .svc-marquee-viewport {
    overflow: hidden !important;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }

  .pipeline-flow.svc-marquee-viewport,
  .process-steps.svc-marquee-viewport,
  .roles-grid.svc-marquee-viewport,
  .value-grid.svc-marquee-viewport,
  .imap-grid.svc-marquee-viewport {
    display: block !important;
    overflow: hidden !important;
    grid-template-columns: unset !important;
    padding-bottom: 0 !important;
  }

  .svc-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    animation: svc-marquee-scroll var(--svc-marquee-duration, 28s) linear infinite;
    will-change: transform;
  }

  .svc-marquee-item {
    flex-shrink: 0;
  }

  .svc-marquee-item .pf-node {
    min-width: 156px;
  }

  .svc-marquee-item .pf-arrow {
    display: flex;
    align-items: center;
    padding: 0 4px;
    font-size: 16px;
  }

  .svc-marquee-item .ps-item {
    min-width: 196px;
  }

  .svc-marquee-item .role-card {
    min-width: 176px;
    width: 176px;
  }

  .svc-marquee-item .value-card {
    min-width: 210px;
  }

  .svc-marquee-item .imap-node,
  .svc-marquee-item .imap-core {
    min-width: 168px;
  }

  @keyframes svc-marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .svc-marquee-track {
    animation: none;
  }

  .svc-marquee-viewport {
    overflow-x: auto !important;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ─── Unified section headers (same layout for 01/08 and 08/08) ─── */
.section-header,
.svc-header {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  margin-bottom: 48px !important;
}

.section-header > *,
.svc-header > *,
.section-title-wrap,
.section-meta {
  min-width: 0;
  width: 100%;
}

.section-num,
.svc-num {
  display: block;
}

/* ─── Unified card format ─── */
.cards-grid,
.subs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.card,
.sub-card {
  background: var(--white);
  padding: 28px 24px;
  min-width: 0;
  height: 100%;
  transition: background 0.2s;
}

.card-title,
.sub-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
  color: var(--ink);
  line-height: 1.35;
}

.card-list,
.sub-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.card-list li,
.sub-items li {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.card-list li::before,
.sub-items li::before {
  content: "—";
  color: var(--muted2);
  flex-shrink: 0;
  font-size: 11px;
}

/* ─── Before / after — full width ─── */
.before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.ba-col {
  padding: 24px 22px;
  min-width: 0;
}

.ba-item {
  word-break: break-word;
}

.tools-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

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

.svc {
  min-width: 0;
  height: 100%;
}

/* ─── Hero stats — all page variants ─── */
.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  width: 100%;
}

.hero-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.hstat-row {
  width: 100%;
  min-width: 0;
}

.hstat {
  min-width: 0;
}

.hstat-num,
.hsb-num {
  word-break: break-word;
}

/* ─── Tablet ─── */
@media (max-width: 1100px) {
  .hero-inner,
  .hero-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    align-items: start !important;
  }

  .hero-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cards-grid,
  .subs-grid,
  .services-grid,
  .cases-grid,
  .quotes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-row {
    grid-template-columns: 1fr !important;
  }

  .tools-row,
  .metrics-row,
  .aida-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .how-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .imap-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .imap-col.right {
    align-items: stretch !important;
  }

  .cta-block {
    padding: 40px 32px;
  }
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .hero {
    min-height: auto !important;
    padding: 12px 16px 40px !important;
  }

  .hero-inner,
  .hero-top {
    gap: 28px !important;
  }

  .hero h1 {
    letter-spacing: -1.2px;
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  .hero-desc {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-bottom: 28px !important;
  }

  .hero-actions a,
  .hero-actions .btn-violet,
  .hero-actions .btn-outline,
  .hero-actions .btn-acc,
  .hero-actions .btn-blue {
    width: 100%;
    justify-content: center;
  }

  .breadcrumb {
    flex-wrap: wrap;
    margin-bottom: 20px !important;
  }

  .hero-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-stats-bar {
    grid-template-columns: 1fr !important;
  }

  .hsb-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 20px 16px !important;
  }

  .hsb-item:last-child {
    border-bottom: none;
  }

  .hstat-row {
    padding: 12px 14px !important;
  }

  .hstat-num,
  .hsb-num {
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  .hstat-label,
  .hsb-label {
    font-size: 12px;
    line-height: 1.45;
  }

  .code-preview,
  .snippet {
    max-width: 100%;
    overflow-x: auto;
  }

  .pipeline-section,
  .imap-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .page-body,
  .cases-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 80px !important;
  }

  .page-body > #s1,
  .page-body > .svc-section:first-of-type,
  .page-body > .service-section:first-of-type,
  .page-body > .reveal:first-of-type,
  .page-body > div[style*="padding"]:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .service-section,
  .svc-section {
    padding: 28px 0 36px !important;
  }

  /* Must come AFTER the general section padding above */
  .page-body > #s1,
  .page-body > .svc-section:first-of-type,
  .page-body > .service-section:first-of-type {
    padding-top: 0 !important;
  }

  .page-body > #s1.reveal,
  .page-body > .svc-section:first-of-type.reveal,
  .page-body > .service-section:first-of-type.reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .service-section:last-child,
  .svc-section:last-child {
    padding-bottom: 40px !important;
  }

  .services,
  .how {
    padding: 48px 0 !important;
  }

  .services-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }

  .section-header,
  .svc-header {
    gap: 20px !important;
    margin-bottom: 28px !important;
  }

  .before-after {
    grid-template-columns: 1fr !important;
  }

  .cards-grid,
  .subs-grid,
  .services-grid,
  .cases-grid,
  .quotes-grid,
  .tools-row,
  .metrics-row,
  .aida-metrics {
    grid-template-columns: 1fr !important;
  }

  .stats-bar {
    grid-template-columns: 1fr !important;
  }

  .sbar-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 24px 16px;
  }

  .sbar-item:last-child {
    border-bottom: none;
  }

  .card,
  .sub-card,
  .svc {
    padding: 22px 18px !important;
  }

  .ba-col {
    padding: 20px 18px;
  }

  .cta-block {
    margin-top: 40px;
    padding: 28px 20px !important;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .cta-left h2 {
    font-size: clamp(22px, 6vw, 28px);
  }

  .cta-form {
    flex-direction: column;
    width: 100%;
  }

  .cta-input,
  .btn-blue,
  .btn-violet,
  .btn-acc,
  .btn-accent {
    width: 100%;
    min-width: 0 !important;
  }

  .sticky-nav {
    top: 76px;
  }

  .sticky-nav-inner {
    padding: 0 12px !important;
  }

  .snav-item {
    padding: 14px 12px;
    font-size: 12px;
  }

  .case-card.large {
    grid-column: auto !important;
  }

  .case-metrics {
    gap: 16px;
  }

  .metric-card {
    padding: 20px 16px;
  }

  .metric-val {
    font-size: 28px;
  }

  .metric-label {
    font-size: 12px;
    line-height: 1.45;
  }

  .hero-terminal {
    margin-left: -4px;
    margin-right: -4px;
  }

  .terminal-body {
    padding: 16px;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .result-chips {
    gap: 6px;
  }

  .result-chip {
    font-size: 11px;
  }

  .section-title,
  .svc-title {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  .section-num,
  .svc-num {
    font-size: 10px;
  }
}

/* Desktop: hero two-column only when layout has text column + stats column */
@media (min-width: 1101px) {
  .hero-inner:has(> div:first-child + .hero-stats) {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 64px !important;
    align-items: center !important;
  }

  .hero-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 72px !important;
  }
}