/* Service-page type and layout roles. Keep the studio's display and terminal identity. */
.services-page {
  --service-frame: min(1200px, calc(100% - 48px));
  --service-gutter: 32px;
  --service-section-space: clamp(48px, 6vw, 80px);
  --service-title: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
  --service-heading: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --service-subheading: clamp(1.375rem, 1.1rem + .8vw, 1.625rem);
}
.services-page main { overflow-wrap: break-word; }
.services-page main :is(h1, h2, h3) { text-wrap: balance; letter-spacing: -.025em; }
.services-page main p { text-wrap: pretty; }
.services-page main :is(.eyebrow, .visual-label, .service-num, .step-number) { font-size: .75rem; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.services-page main .eyebrow { margin-bottom: 16px; }
.services-page :is(.breadcrumbs, .tags span) { font-size: .75rem; line-height: 1.65; }
.services-page .breadcrumbs { width: var(--service-frame); padding-inline: var(--service-gutter); gap: 8px 12px; }
.services-page .breadcrumbs a { display: inline-flex; align-items: center; min-height: 28px; }
.services-page .breadcrumbs [aria-current] { align-self: center; }
.services-page main :is(.button, .text-link) { max-width: 100%; font-size: .875rem; line-height: 1.6; }
.services-page main .button { font-weight: 500; gap: 20px; min-height: 48px; }
.services-page main .text-link { min-height: 44px; }
.services-page main .text-link > .direction-icon { flex-shrink: 0; }
.services-page main ::selection { background: #d9d2ff; color: #151632; }

/* A common centered frame keeps headings, reading columns, and related links aligned. */
.services-page :is(.service-hero, .simple-hero, .section, .editorial-section, .faq-section, .related-services, .product-case-section, .modernization-capabilities, .modernization-reading) {
  width: var(--service-frame);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--service-gutter);
}
.services-page :is(.editorial-section, .faq-section, .shopify-detail) {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  padding-block: var(--service-section-space);
}
.services-page :is(.service-hero, .editorial-section, .faq-section, .section, .service-row, .section-heading, .product-case-heading) > * { min-width: 0; }
.services-page .service-hero { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr); gap: clamp(32px, 5vw, 64px); padding-block: 48px 64px; }
.services-page :is(.service-hero, .simple-hero, .shopify-hero) h1 { font-size: var(--service-title); line-height: 1.12; max-width: 20ch; margin: 0 0 24px; }
.services-page .simple-hero { padding-block: 64px; }
.services-page .simple-hero h1 { max-width: 22ch; }
.services-page :is(.hero-description, .simple-hero > p:not(.eyebrow), .shopify-lead) { max-width: 62ch; font-size: 1.0625rem; line-height: 1.75; }
.services-page .hero-description { margin: 0 0 28px; }
.services-page .hero-description p:last-child { margin-bottom: 0; }
.services-page :is(.product-service-hero, .modernization-service-hero) .hero-description > p:first-child { font-size: 1.125rem; line-height: 1.6; font-weight: 600; }
.services-page .service-visual { min-height: 0; padding: 28px; }
.services-page .service-glyph svg { width: 60px; height: 60px; margin: 12px 0 24px; }
.services-page .vertical-flow { margin-bottom: 24px; }
.services-page .vertical-flow > div { font-size: .9375rem; line-height: 1.6; padding-block: 14px; gap: 14px; }
.services-page .vertical-flow span { font: 400 .75rem/1.9 var(--mono); color: #625971; flex-shrink: 0; }
.services-page .service-visual > .visual-label { color: #625971; font-size: .75rem; line-height: 1.6; }
.services-page .case-jump { margin-top: 16px; }
.services-page :is(.editorial-section, .faq-section) h2 { font-size: var(--service-heading); line-height: 1.2; max-width: 23ch; margin-top: 0; }
.services-page .prose { max-width: 68ch; font-size: 1rem; line-height: 1.8; }
.services-page .prose h3 { font-size: var(--service-subheading); line-height: 1.3; margin: 32px 0 12px; }
.services-page .prose h3:first-child { margin-top: 0; }
.services-page .prose p:last-child { margin-bottom: 0; }
.services-page .prose li { padding-bottom: 12px; }
.services-page .faqs summary { font-size: 1rem; line-height: 1.6; gap: 20px; }
.services-page .faqs summary > span { flex-shrink: 0; }
.services-page .faqs details > div { font-size: 1rem; line-height: 1.8; }
.services-page .related-services h2 { font-size: var(--service-heading); line-height: 1.2; max-width: 28ch; }
.services-page .related-services .text-link { font-size: 1rem; }
.services-page .closing { width: var(--service-frame); max-width: 1200px; margin: 24px auto 64px; padding: 40px var(--service-gutter); }
.services-page .closing h2 { font-size: var(--service-heading); line-height: 1.2; }
.services-page .closing p:not(.eyebrow) { font-size: 1rem; line-height: 1.75; }

/* Service directory and supporting offers use the same readable body scale. */
.services-page .strategy-section { width: var(--service-frame); max-width: 1200px; margin: 0 auto 48px; padding: 40px var(--service-gutter); gap: 48px; }
.services-page :is(.strategy-intro h2, .shopify-section-heading h2, .shopify-detail-intro h2, .section-heading h2) { font-size: var(--service-heading); line-height: 1.2; }
.services-page :is(.strategy-intro > p:not(.eyebrow), .strategy-deliverables li p, .service-description p, .shopify-feature p:not(.eyebrow), .engagement-grid p, .engagement-deliverables, .shopify-path-grid p, .shopify-detail-intro > p:not(.eyebrow), .shopify-checklist p, .shopify-work-list p, .shopify-growth-loop li span, .shopify-economics-grid p, .shopify-plan-output ul) { font-size: 1rem; line-height: 1.75; }
.services-page .strategy-intro .strategy-scope { font-size: .8125rem; line-height: 1.7; }
.services-page .strategy-deliverables { padding: 24px; }
.services-page .strategy-deliverables h3 { font-size: var(--service-subheading); }
.services-page .service-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.2fr) 24px; gap: 24px; padding-block: 32px; }
.services-page .service-row:hover { padding-inline: 0; }
.services-page .service-name { align-items: flex-start; }
.services-page .service-name :is(h2, h3) { font-size: var(--service-subheading); line-height: 1.3; }
.services-page .service-name svg { margin-top: 2px; }
.services-page .tags span { padding: 4px 8px; }
.services-page .service-description p { max-width: 56ch; }
.services-page .shopify-feature { flex-wrap: wrap; }
.services-page :is(.shopify-feature h2, .engagement-grid h3, .shopify-path-grid h3, .shopify-checklist h3, .shopify-work-list h3, .shopify-economics-grid h3) { font-size: var(--service-subheading); line-height: 1.3; }
.services-page .shopify-hero { width: var(--service-frame); padding: 48px var(--service-gutter); gap: 40px; }
.services-page .shopify-detail { width: var(--service-frame); max-width: 1200px; margin-inline: auto; padding-inline: var(--service-gutter); }
.services-page .shopify-economics { max-width: 1200px; }
.services-page :is(.shopify-note, .shopify-economics-note, .shopify-growth-loop > p:last-child, .small-copy) { font-size: .875rem; line-height: 1.75; }
.services-page .shopify-card-link { font-size: .875rem; }
.services-page .shopify-growth-loop strong { font-size: 1.0625rem; }

/* Long KPI names and case-study text need room after the qualitative-proof refresh. */
.services-page :is(.metrics-heading h2, .product-case-heading h2, .modernization-capabilities > h2, .modernization-proof h2, .modernization-reading h2) { font-size: var(--service-heading); line-height: 1.2; }
.services-page :is(.metrics-heading > p, .metric-context, .metric-measures ul, .product-case-heading > p, .product-case-card > p:not(.eyebrow), .modernization-card p) { font-size: 1rem; line-height: 1.75; }
.services-page :is(.metric-card h3, .modernization-card p:last-child) { font-size: .9375rem; line-height: 1.7; }
.services-page :is(.metric-index, .metric-measures > p, .product-case-metrics span, .product-case-metrics small, .modernization-reading li a > span:first-child) { font-size: .75rem; line-height: 1.65; }
.services-page :is(.metric-direction, .metrics-footer > p, .metrics-footer .text-link, .metrics-method, .product-evidence-note, .modernization-proof > p:not(.eyebrow), .modernization-proof dt) { font-size: .875rem; line-height: 1.75; }
.services-page .product-case-card .product-case-attribution { font-size: .8125rem !important; line-height: 1.75; }
.services-page .product-case-card :is(h2, h3), .services-page .modernization-card h3 { font-size: var(--service-subheading); line-height: 1.3; }
.services-page .product-case-card .product-case-metrics { min-height: 0; }
.services-page .product-case-metrics { grid-template-columns: 1fr; gap: 20px; }
.services-page :is(.product-case-metrics strong, .modernization-proof dd) { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.2; overflow-wrap: normal; }
.services-page .modernization-proof { width: calc(var(--service-frame) - 64px); max-width: 1136px; margin-inline: auto; }
.services-page :is(.product-service-download, .modernization-download) { width: var(--service-frame); max-width: 1200px; margin-inline: auto; padding-inline: var(--service-gutter); }
.services-page .modernization-reading li strong { font-size: var(--service-subheading); line-height: 1.3; }
.services-page .modernization-reading li a > span:first-child { font-size: .75rem; }
.services-page .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services-page .metric-value { font-size: 2rem; line-height: 1.2; }
.services-page :is(.metrics-heading, .metrics-grid, .metrics-footer, .metrics-method) { max-width: 1136px; }
.services-page .experience-metrics { padding-inline: max(24px, calc((100% - 1136px) / 2)); }
.services-page :is(.footer-bottom, .footer-form-privacy, .footer-form-alternative, .footer-security p, .chat-launcher-caption, .chat-disclosure, .chat-human, .chat-brand p, .chat-verification p, .chat-input-help) { font-size: .75rem; line-height: 1.65; }
.services-page .footer-form-alternative a { font-size: inherit; }

@media (max-width: 960px) {
  .services-page :is(.service-hero, .shopify-hero, .strategy-section) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .services-page .service-hero h1 { max-width: 22ch; }
  .services-page .service-visual { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px 24px; }
  .services-page .service-visual > .visual-label { grid-column: 1 / -1; margin: 0; }
  .services-page .service-glyph svg { margin-top: 12px; }
  .services-page .vertical-flow { margin: 0; }
  .services-page .shopify-terminal { width: 100%; max-width: 580px; justify-self: start; }
  .services-page :is(.editorial-section, .faq-section, .shopify-detail) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .services-page :is(.editorial-section, .faq-section) h2 { max-width: 28ch; }
  .services-page :is(.shopify-path-grid, .product-case-grid, .engagement-grid) { grid-template-columns: minmax(0, 1fr); }
  .services-page .product-case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-page .closing { display: block; }
  .services-page .closing .button { margin-top: 24px; }
}
@media (max-width: 760px) {
  .services-page { --service-frame: calc(100% - 40px); --service-gutter: 0px; }
  .services-page .service-hero { padding-block: 32px 48px; }
  .services-page .simple-hero { padding-block: 40px 48px; }
  .services-page .strategy-section, .services-page .shopify-hero, .services-page .closing { padding: 28px 24px; }
  .services-page .strategy-section { margin-bottom: 24px; }
  .services-page .service-row { grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 16px; }
  .services-page .service-description { grid-column: 2 / -1; }
  .services-page .service-name svg { display: none; }
  .services-page .service-name :is(h2, h3) { font-size: 1.375rem; }
  .services-page .modernization-proof { width: var(--service-frame); padding: 24px; }
  .services-page .modernization-proof dl { grid-template-columns: 1fr; }
  .services-page :is(.modernization-grid, .metrics-grid, .product-case-heading, .modernization-reading ol) { grid-template-columns: minmax(0, 1fr); }
  .services-page .modernization-card:last-child { display: flex; }
  .services-page .product-case-heading { gap: 20px; }
  .services-page .shopify-economics { padding-inline: 24px; }
  .services-page .shopify-detail-tint { padding-inline: 24px; }
}
@media (max-width: 400px) {
  .services-page .service-visual { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .services-page .service-glyph { display: none; }
  .services-page .product-case-metrics { grid-template-columns: minmax(0, 1fr); }
  .services-page main .button { padding-inline: 16px; gap: 12px; }
  .services-page :is(.strategy-section, .shopify-hero, .closing) { padding-inline: 20px; }
}
.service-infographic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(32px,6vw,80px);align-items:start;max-width:1180px;margin:0 auto;padding:clamp(56px,8vw,96px) clamp(20px,4vw,48px);border-top:1px solid var(--line)}
.service-infographic h2{margin:10px 0 18px;font-size:clamp(30px,4vw,46px);line-height:1.1}
.service-infographic-copy>p{max-width:560px;color:var(--muted);line-height:1.7}
.service-infographic-source{font-size:14px}
.service-infographic-source a{color:var(--forest)}
.service-infographic details{margin:26px 0;border:1px solid var(--line);border-radius:8px;background:var(--white)}
.service-infographic summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;color:var(--forest)}
.service-infographic summary::-webkit-details-marker{display:none}
.service-infographic summary>span{font-size:22px;font-weight:400}
.service-infographic details[open] summary>span{transform:rotate(45deg)}
.service-infographic details>div{padding:0 20px 18px;font-size:15px;line-height:1.65;color:var(--ink)}
.service-infographic details ul{margin:0 0 14px;padding-left:20px}
.service-infographic details li{margin-bottom:6px}
.service-infographic figure{margin:0}
.service-infographic figure a{display:block;border-radius:10px;overflow:hidden;background:var(--dark)}
.service-infographic img{display:block;width:100%;height:auto}
.service-infographic figcaption{padding-top:12px;font-size:13px;color:var(--muted)}
@media (max-width:760px){.service-infographic{grid-template-columns:1fr}.service-infographic figure{max-width:460px}}