/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · design-system: design.md · designed-as-app.
   Shared homepage palette, Geist type and commercial shell; service-specific scope and results stay visible.
   Pre-emit critique: P5 H5 E4 S5 R5 V4 · typography-only, native exclusive FAQ, no reveal animation. */

.service-page main > section { padding-block: var(--space-2xl); }
.service-page main > section + section { border-top: var(--rule-hair) solid var(--color-rule); }
.service-topline { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); padding-top: var(--space-md); }
.service-page .breadcrumbs { font-size: var(--text-small); color: var(--color-muted); }
.breadcrumbs ol { list-style: none; }
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before { content: "/"; margin-inline: var(--space-2xs); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; white-space: nowrap; }
.breadcrumbs li[aria-current] { min-width: 0; overflow-wrap: anywhere; }
.service-region { color: var(--color-muted); font-size: var(--text-small); }
.service-page main > .hero { padding-top: var(--space-lg); }
.service-page .hero-grid { gap: var(--space-xl); align-items: center; }
.service-page .hero-copy { display: grid; gap: var(--space-md); }
.service-page .hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-small); }
.service-page .hero-meta span + span::before { content: "·"; margin-inline-end: var(--space-xs); }
.service-page .hero h1 { max-width: 22ch; font-size: var(--text-display); line-height: 1.12; }
.service-page :is(h1, h2, h3) em { font-style: normal; }
.service-page .hero-sub { max-width: 62ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.65; }
.service-page .hero-actions { margin-top: var(--space-xs); }
.service-page .hero-actions .text-link { gap: var(--space-xs); }
.service-page .strip { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); }
.service-page .strip-item { display: grid; gap: var(--space-2xs); }
.service-page .strip-item + .strip-item { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.service-page .strip-item strong { font-size: var(--text-card); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.service-page .strip-item span { color: var(--color-muted); }
.service-page .section-head { margin-bottom: var(--space-lg); }
.service-page .section-title, .service-page .related-solutions > h2 { max-width: 34ch; font-size: var(--text-heading); }
.service-page .section-head p { max-width: 64ch; margin-top: var(--space-md); color: var(--color-ink-2); }
.service-page .section-head + .hero-sub { margin-top: calc(-1 * var(--space-sm)); margin-bottom: var(--space-lg); }
.service-page .section-note { max-width: 68ch; margin-top: var(--space-md); color: var(--color-ink-2); }
.service-page .package-grid, .service-page .card-grid, .service-page .decision-grid { display: grid; gap: var(--space-md); }
.service-page .package { display: flex; flex-direction: column; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.service-page .package h3, .service-page .card h3, .service-page .decision-card h3 { font-size: var(--text-card); line-height: 1.3; letter-spacing: -0.02em; }
.service-page .package p, .service-page .card p, .service-page .decision-card p { max-width: 64ch; margin-top: var(--space-sm); color: var(--color-ink-2); }
.service-page .package ul, .service-page .card ul, .service-page .decision-card ul { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); padding-inline-start: var(--space-md); color: var(--color-ink-2); }
.service-page .package li::marker, .service-page .card li::marker { color: var(--color-accent); }
.service-page .card { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.service-page .decision-card { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.service-page .package-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: auto; padding-top: var(--space-lg); text-decoration: underline; text-underline-offset: 0.2em; }
.service-page .process-grid { display: grid; gap: var(--space-sm) var(--space-xl); }
.service-page .process-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--space-sm) var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.service-page .process-step > span { grid-row: 1 / 3; font-size: var(--text-small); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.service-page .process-step h3 { font-size: var(--text-card); line-height: 1.3; letter-spacing: -0.02em; }
.service-page .process-step p { grid-column: 2; color: var(--color-ink-2); }
.service-page .rd-wrap { background: var(--color-paper-3); }
.service-page .rd { display: grid; gap: var(--space-lg); align-items: start; }
.service-page .rd-title, .service-page .rd-copy { display: grid; gap: var(--space-md); }
.service-page .rd-meta { color: var(--color-muted); font-size: var(--text-small); }
.service-page .rd h2 { max-width: 24ch; }
.service-page .rd p { max-width: 64ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.service-page main p a { text-decoration: underline; text-underline-offset: 0.2em; }
.service-page .rd-copy > .text-link { justify-self: start; }
.service-page .rd .text-link { white-space: normal; }
.service-page .service-faq-layout { display: grid; gap: var(--space-lg); align-items: start; }
.service-page .service-faq-layout .section-head { margin-bottom: 0; }
.service-page .faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.service-page .faq details:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
.service-page .faq summary { position: relative; min-height: 80px; padding: var(--space-md) var(--space-xl) var(--space-md) 0; list-style: none; cursor: pointer; font-weight: 500; font-size: var(--text-lead); line-height: 1.4; }
.service-page .faq summary::-webkit-details-marker { display: none; }
.service-page .faq summary::after { content: "+"; position: absolute; inset-inline-end: var(--space-xs); top: var(--space-md); }
.service-page .faq details[open] summary::after { content: "−"; }
.service-page .faq details p { max-width: 64ch; padding-bottom: var(--space-md); color: var(--color-ink-2); }
.service-page .related-solutions-grid { display: grid; margin-top: var(--space-lg); }
.service-page .rd-wrap .related-solutions { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.service-page .rd-wrap .related-solutions > h2 { font-size: var(--text-card); }
.service-page .related-solution { display: grid; gap: var(--space-sm); padding-block: var(--space-md); padding-inline-end: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); position: relative; }
.service-page .related-solution::after { content: "↗"; position: absolute; right: 0; top: var(--space-md); }
.service-page .related-solution h3 { font-size: var(--text-card); line-height: 1.3; }
.service-page .related-solution p { max-width: 64ch; color: var(--color-ink-2); }
.service-page main > .contact-section { padding-block: var(--section-space); }
.service-contact-brief { margin-bottom: var(--space-md); }
.service-page.page-404 .hero { min-height: 50svh; }

@media (max-width: 39.999rem) {
  .service-page .hero-meta { display: none; }
}

@media (min-width: 40rem) {
  .service-page .package-grid, .service-page .card-grid, .service-page .decision-grid, .service-page .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-page :is(.package-grid, .card-grid, .decision-grid) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .service-page .related-solution { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-lg); }
}

@media (min-width: 60.0625rem) {
  .service-page main > section { padding-block: var(--space-3xl); }
  .service-page main > .hero { padding-top: var(--space-xl); }
  .service-page .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); gap: var(--space-2xl); }
  .service-page .strip { padding: var(--space-xl); }
  .service-page .card-grid { column-gap: var(--space-xl); }
  .service-page .rd, .service-page .service-faq-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); }
  .service-page .package-grid:has(> :nth-child(3):last-child), .service-page .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-page :is(.package-grid:has(> :nth-child(3):last-child), .card-grid.cols-3) > :last-child:nth-child(odd) { grid-column: auto; }
  .service-page:is(.service-website-development, .service-mobile-development, .service-crm-erp-platforms) .package { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-sm); }
  .service-page.service-crm-erp-platforms .package { grid-row: span 5; }
  .service-page:is(.service-website-development, .service-mobile-development, .service-crm-erp-platforms) .package > :is(p, ul) { margin-top: 0; }
  .service-digital-systems .package:last-child { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0 var(--space-xl); }
  .service-digital-systems .package:last-child > h3 { grid-column: 1; grid-row: 1 / 3; }
  .service-digital-systems .package:last-child > :not(h3) { grid-column: 2; }
}

@media (hover: hover) and (pointer: fine) {
  .service-page .related-solution:hover h3, .service-page .package-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}