/* ===== Service detail page components ===== */

.services-showcase { background: transparent; }
.services-showcase .service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 912px;
  margin: 0 auto;
}
.services-showcase .service-card { flex: 0 1 280px; }
.page-hero {
  padding: 150px 0 70px;
  background: var(--bg-dark);
  color: var(--text-light);
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 820px; }
.page-hero .lede { max-width: 720px; font-size: 1.1rem; }

.content-block { max-width: 860px; }
.content-block + .content-block { margin-top: 36px; }
.content-block h3 { font-size: 1.3rem; margin-top: 0; }
.content-list {
  list-style: none;
  padding-left: 0;
  color: var(--text-dim);
  margin-bottom: 1.2em;
}
.content-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
}
.content-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.content-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.content-note { margin-top: 36px; max-width: 780px; }
.section-head-secondary { margin-top: 56px; }
.inline-link { color: var(--accent2); text-decoration: underline; }
.section-dark .inline-link { color: var(--accent2); }

/* Flow diagrams */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0;
}
.flow-step {
  background: var(--bg-dark2);
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}
.flow-arrow { color: var(--accent2); font-weight: 700; font-size: 1rem; }
.section:not(.section-dark) .flow-step { background: var(--bg-alt); border-color: var(--border); color: var(--text); }
.section:not(.section-dark) .flow-arrow { color: var(--accent); }

.flow-vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 22px 0;
}
.flow-vertical .flow-arrow { padding-left: 20px; line-height: 1.4; }

/* Tag pills */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.tag {
  background: rgba(59,107,255,.12);
  border: 1px solid rgba(59,107,255,.28);
  color: var(--accent2);
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
}
.section:not(.section-dark) .tag { background: rgba(59,107,255,.08); border-color: rgba(59,107,255,.22); color: var(--accent); }

/* Timeline (process steps) */
.timeline { display: flex; flex-direction: column; }
.timeline-step {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border-dark);
}
.section:not(.section-dark) .timeline-step { border-color: var(--border); }
.timeline-step:last-child { border-bottom: none; }
.timeline-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: .95rem;
}
.timeline-content h3 { font-size: 1.08rem; margin-bottom: 6px; }
.timeline-content p:last-child { margin-bottom: 0; }

/* Collapsible service detail blocks */
.service-detail {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--bg-dark2);
  margin-bottom: 16px;
  overflow: hidden;
}
.section:not(.section-dark) .service-detail { border-color: var(--border); background: var(--bg); }
.service-detail summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-light);
}
.section:not(.section-dark) .service-detail summary { color: var(--text); }
.service-detail summary::-webkit-details-marker { display: none; }
.service-detail summary .num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: .85rem;
}
.service-detail summary .chevron {
  margin-left: auto;
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke: var(--accent2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .2s ease;
}
.service-detail[open] summary .chevron { transform: rotate(180deg); }
.service-detail-body { padding: 0 26px 26px; }
.service-detail-body p { max-width: 780px; }

/* Comparison grid */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-card {
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border-dark);
  background: var(--bg-dark2);
}
.section:not(.section-dark) .compare-card { border-color: var(--border); background: var(--bg-alt); }
.compare-card.highlight { border-color: var(--accent); }
.compare-card h3 { font-size: 1.1rem; }

/* FAQ */
.faq-list { max-width: 860px; }
.faq-item {
  border-bottom: 1px solid var(--border-dark);
  padding: 18px 0;
}
.section:not(.section-dark) .faq-item { border-color: var(--border); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-light);
}
.section:not(.section-dark) .faq-item summary { color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--accent2);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.section:not(.section-dark) .faq-item summary::after { color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 12px 0 0; }

/* Use-case tag cloud */
.usecase-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.usecase-cloud .tag { font-size: .88rem; padding: 9px 18px; }

/* Data tables inside content sections */
.content-table-wrap { overflow-x: auto; margin: 24px 0; border-radius: var(--radius); border: 1px solid var(--border); }
.content-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.content-table th,
.content-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
.content-table th { background: var(--bg-alt); color: var(--text); font-weight: 600; }
.content-table td:first-child { font-weight: 600; color: var(--text); }
.content-table tbody tr:last-child td { border-bottom: none; }
.section-dark .content-table-wrap { border-color: rgba(255,255,255,.14); }
.section-dark .content-table th { background: rgba(255,255,255,.08); color: var(--text-light); }
.section-dark .content-table td { color: var(--text-light); }
.section-dark .content-table th,
.section-dark .content-table td { border-color: rgba(255,255,255,.14); }
.section-dark .content-table td:first-child { color: var(--text-light); }

/* Interactive cost estimator */
.estimator-card { max-width: 860px; margin: 24px 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.estimator-field { margin-bottom: 22px; }
.estimator-field > label { display: block; font-weight: 600; margin-bottom: 10px; color: var(--text); }
.estimator-field select { width: 100%; max-width: 440px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: var(--bg); color: var(--text); }
.estimator-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.estimator-options label { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; color: var(--text-dim); }
.estimate-result { margin-top: 8px; padding: 20px 22px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--border); }
.estimate-result .amount { font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.estimate-result .meta { color: var(--text-dim); font-size: .92rem; margin-top: 6px; }
.estimator-note { font-size: .85rem; color: var(--text-dim); margin-top: 14px; }
@media (max-width: 640px) { .estimator-options { grid-template-columns: 1fr; } }

/* Responsive */
@media (max-width: 720px) {
  .compare-grid { grid-template-columns: 1fr; }
  .timeline-step { gap: 16px; }
  .service-detail summary { padding: 18px 20px; font-size: .98rem; }
  .service-detail-body { padding: 0 20px 22px; }
}

/* ===== Simplified service page: sidebar + plain flowing content ===== */
main.service-simple {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 24px 0;
}
.service-content {
  flex: 1;
  min-width: 0;
}
main.service-simple .container { max-width: none; padding: 0; margin: 0; }
main.service-simple .page-hero,
main.service-simple .section-dark,
main.service-simple .section-alt,
main.service-simple .cta-band {
  background: transparent;
  color: var(--text);
}
main.service-simple .section-dark h1,
main.service-simple .section-dark h2,
main.service-simple .section-dark h3,
main.service-simple .page-hero h1 {
  color: var(--text);
}
main.service-simple .section-dark p,
main.service-simple .page-hero .lede {
  color: #363636;
}
main.service-simple .section,
main.service-simple .page-hero,
main.service-simple .cta-band {
  padding: 40px 0;
}
main.service-simple .eyebrow { color: var(--accent); }

/* One consistent main-heading format across the whole page */
main.service-simple .section-head {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  text-align: center;
}
main.service-simple .section-head h1,
main.service-simple .section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
}
main.service-simple .section-head .heading-line {
  margin-left: auto;
  margin-right: auto;
}
main.service-simple .page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
main.service-simple .page-hero h1,
main.service-simple .page-hero .lede {
  max-width: 780px;
}

/* Flatten grids/cards into plain stacked content */
main.service-simple .advantage-grid,
main.service-simple .compare-grid {
  display: block;
}
main.service-simple .advantage-card,
main.service-simple .compare-card {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 28px;
}
main.service-simple .compare-card.highlight { border: none; }

/* Neutral chip/tag/flow colors regardless of ancestor section variant */
main.service-simple .flow-step { background: var(--bg-alt); border-color: var(--border); color: var(--text); }
main.service-simple .flow-arrow { color: var(--accent); }
main.service-simple .tag { background: rgba(59,107,255,.08); border-color: rgba(59,107,255,.22); color: var(--accent); }
main.service-simple .timeline-step { border-color: var(--border); }

/* Accordions forced open, no toggle affordance */
main.service-simple .service-detail,
main.service-simple .faq-item {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 28px;
}
main.service-simple .service-detail summary,
main.service-simple .faq-item summary {
  color: var(--text);
  padding: 0;
  margin-bottom: 10px;
  cursor: default;
  pointer-events: none;
}
main.service-simple .service-detail summary .chevron,
main.service-simple .faq-item summary::after {
  display: none;
}
main.service-simple .service-detail-body { padding: 0; }
main.service-simple .faq-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}

/* Sidebar */
.service-sidebar {
  flex: 0 0 300px;
  width: 300px;
  position: sticky;
  top: 132px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Home page callback form, adapted for the narrow sidebar column */
.hero-form-card.sidebar-form {
  width: 100%;
  flex-shrink: 1;
  margin-top: 6px;
  max-height: none;
  overflow: visible;
}

@media (max-width: 1100px) {
  main.service-simple { flex-direction: column; }
  .service-sidebar { position: static; width: 100%; flex-basis: auto; margin-bottom: 40px; }
  .hero-form-card.sidebar-form { max-width: 460px; margin-left: auto; margin-right: auto; }
}