/* Service landing pages — Bizzapt palette. */
.svc-page {
  --ink: #211d1b; --paper: #f4eee6; --plum: #60435b; --mauve: #c6b4c1; --lilac: #f3eaf0; --soft: #5b5156;
  --sp-ease: cubic-bezier(.16, 1, .3, 1);
}
.svc-page main { overflow: clip; background: var(--paper); color: var(--ink); }
.svc-page main > section { padding: clamp(56px, 7vw, 110px) var(--gutter); }
.svc-page main h1, .svc-page main h2, .svc-page main h3 { font-family: var(--display); }
.svc-page main h2 { margin: 0 0 clamp(24px, 3vw, 40px); font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; max-width: 20ch; }
.sp-tag { margin: 0 0 16px; font: 500 .72rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }

.sp-crumbs { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px var(--gutter) 0; font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.sp-crumbs a { color: var(--plum); text-decoration: none; min-height: 0; }
.sp-crumbs a:hover { text-decoration: underline; }

.svc-page .sp-hero { padding-top: clamp(40px, 5vw, 70px); background: radial-gradient(600px 380px at 90% 10%, rgba(198, 180, 193, .45), transparent 70%); }
.sp-hero h1 { margin: 0; max-width: 18ch; font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: .98; letter-spacing: -.05em; font-weight: 700; }
.sp-hero h1 em { display: block; font-style: normal; color: var(--plum); }
.sp-intro { margin: 26px 0 0; max-width: 60ch; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.75; color: var(--soft); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sp-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: 999px; background: var(--plum); color: var(--paper); text-decoration: none; font: 700 .76rem var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: transform .3s var(--sp-ease), background .25s; }
.sp-btn:hover { transform: translateY(-2px); background: #4c3448; }
.sp-btn-ghost { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum); }
.sp-btn-ghost:hover { background: rgba(96, 67, 91, .08); }

.svc-page .sp-problems { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); background: var(--ink); color: var(--paper); }
.sp-problems .sp-tag { color: var(--mauve); }
.sp-problems ul { list-style: none; margin: 0; padding: 0; }
.sp-problems li { position: relative; padding: 18px 0 18px 36px; border-bottom: 1px solid rgba(244, 238, 230, .14); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; color: rgba(244, 238, 230, .85); }
.sp-problems li::before { content: "→"; position: absolute; left: 0; color: var(--mauve); }

.sp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.sp-grid article { padding: 24px; border-radius: 18px; background: #fffdfa; border: 1px solid rgba(96, 67, 91, .14); transition: transform .45s var(--sp-ease), box-shadow .45s var(--sp-ease); }
.sp-grid article:hover { transform: translateY(-5px); box-shadow: 0 26px 44px -30px rgba(96, 67, 91, .6); }
.sp-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lilac); color: var(--plum); font: 600 .7rem var(--mono); }
.sp-grid h3 { margin: 16px 0 8px; font-size: 1.2rem; letter-spacing: -.02em; font-weight: 600; }
.sp-grid p { margin: 0; color: var(--soft); line-height: 1.65; font-size: .95rem; }

.svc-page .sp-process { background: var(--lilac); }
.sp-process ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: sp; }
.sp-process li { counter-increment: sp; padding: 20px; border-radius: 16px; background: #fffdfa; }
.sp-process li::before { content: "0" counter(sp); display: block; margin-bottom: 14px; font: 500 .72rem var(--mono); color: var(--plum); }
.sp-process strong { display: block; font: 600 1.1rem var(--display); margin-bottom: 6px; }
.sp-process span { color: var(--soft); font-size: .92rem; line-height: 1.55; }

.sp-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sp-work-card { position: relative; display: block; padding: 24px 56px 24px 24px; border-radius: 18px; background: var(--ink); color: var(--paper); text-decoration: none; transition: transform .4s var(--sp-ease), background .3s; }
.sp-work-card:hover { transform: translateY(-4px); background: var(--plum); }
.sp-work-card strong { display: block; font: 600 1.2rem var(--display); margin-bottom: 8px; }
.sp-work-card span { color: rgba(244, 238, 230, .72); line-height: 1.55; font-size: .93rem; }
.sp-work-card b { position: absolute; top: 22px; right: 22px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mauve); color: var(--ink); font-size: .8rem; }

.sp-faq-list { max-width: 900px; border-top: 1px solid rgba(96, 67, 91, .2); }
.sp-faq-item { border-bottom: 1px solid rgba(96, 67, 91, .2); }
.sp-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; }
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item h3 { margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 600; letter-spacing: -.01em; }
.sp-faq-item summary b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(96, 67, 91, .35); color: var(--plum); transition: transform .4s var(--sp-ease), background .3s, color .3s; }
.sp-faq-item[open] summary b { transform: rotate(45deg); background: var(--plum); color: var(--paper); }
.sp-faq-item p { margin: 0 0 22px; max-width: 70ch; color: var(--soft); line-height: 1.75; }

.svc-page .sp-cta { text-align: center; background: radial-gradient(600px 360px at 50% 0%, rgba(198, 180, 193, .25), transparent 70%), var(--plum); color: var(--paper); }
.sp-cta h2 { margin-inline: auto !important; max-width: none !important; }
.sp-cta > p { margin: 0 auto 28px; max-width: 56ch; line-height: 1.75; color: rgba(244, 238, 230, .82); }
.sp-cta .sp-btn { background: var(--mauve); color: var(--ink); }
.sp-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(244, 238, 230, .18); }
.sp-related span { width: 100%; font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mauve); }
.sp-related a { min-height: 0; color: var(--paper); text-decoration: none; font-weight: 600; }
.sp-related a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Links strip on the existing services page. */
.svc-links { padding: clamp(48px, 6vw, 90px) var(--gutter); background: #f3eaf0; }
.svc-links h2 { margin: 0 0 24px; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.04em; font-weight: 600; color: #211d1b; }
.svc-links .sp-tag { color: #60435b; }
.svc-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.svc-links-grid a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-radius: 16px; background: #fffdfa; border: 1px solid rgba(96, 67, 91, .14); color: #211d1b; text-decoration: none; font: 600 1.05rem var(--display); transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .3s; }
.svc-links-grid a:hover { transform: translateY(-3px); border-color: #60435b; }
.svc-links-grid a span { color: #60435b; }

@media (max-width: 1100px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-process ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .svc-page .sp-problems { grid-template-columns: 1fr; }
  .sp-process ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sp-grid, .sp-process ol, .svc-links-grid { grid-template-columns: 1fr; }
  .sp-actions { flex-direction: column; align-items: stretch; }
  .sp-btn { justify-content: center; }
}

/* ===== Inverted colours for the moon/sun switch (generated from the rules above — keep at end of file) ===== */
html[data-theme="inverted"] .svc-page { --soft: #cac3c6; }
html[data-theme="inverted"] .svc-page main { background: #271c24; color: #e1dddb; }
html[data-theme="inverted"] .sp-tag { color: #d2bfcf; }
html[data-theme="inverted"] .sp-crumbs { color: var(--soft); }
html[data-theme="inverted"] .sp-crumbs a { color: #d2bfcf; }
html[data-theme="inverted"] .svc-page .sp-hero { background: radial-gradient(600px 380px at 90% 10%, rgba(198, 180, 193, .45), transparent 70%); }
html[data-theme="inverted"] .sp-hero h1 em { color: #d2bfcf; }
html[data-theme="inverted"] .sp-intro { color: var(--soft); }
html[data-theme="inverted"] .sp-btn { background: #60435b; color: var(--paper); }
html[data-theme="inverted"] .sp-btn:hover { background: #4c3448; }
html[data-theme="inverted"] .sp-btn-ghost { background: transparent; color: #d2bfcf; }
html[data-theme="inverted"] .sp-btn-ghost:hover { background: rgba(96, 67, 91, .08); }
html[data-theme="inverted"] .svc-page .sp-problems { background: #f2ece3; color: #382d1e; }
html[data-theme="inverted"] .sp-problems .sp-tag { color: #4f3c4a; }
html[data-theme="inverted"] .sp-problems li { border-bottom: 1px solid rgba(56, 45, 30, 0.14); color: rgba(56, 45, 30, 0.85); }
html[data-theme="inverted"] .sp-problems li::before { color: #4f3c4a; }
html[data-theme="inverted"] .sp-grid article { background: #2d202a; border: 1px solid rgba(210, 191, 207, 0.14); }
html[data-theme="inverted"] .sp-num { background: #271c24; color: #d2bfcf; }
html[data-theme="inverted"] .sp-grid p { color: var(--soft); }
html[data-theme="inverted"] .svc-page .sp-process { background: #271c24; }
html[data-theme="inverted"] .sp-process li { background: #2d202a; }
html[data-theme="inverted"] .sp-process li::before { color: #d2bfcf; }
html[data-theme="inverted"] .sp-process span { color: var(--soft); }
html[data-theme="inverted"] .sp-work-card { background: #f2ece3; color: #382d1e; }
html[data-theme="inverted"] .sp-work-card:hover { background: #60435b; }
html[data-theme="inverted"] .sp-work-card span { color: rgba(56, 45, 30, 0.72); }
html[data-theme="inverted"] .sp-work-card b { background: #c6b4c1; color: var(--ink); }
html[data-theme="inverted"] .sp-faq-list { border-top: 1px solid rgba(210, 191, 207, 0.2); }
html[data-theme="inverted"] .sp-faq-item { border-bottom: 1px solid rgba(210, 191, 207, 0.2); }
html[data-theme="inverted"] .sp-faq-item summary b { border: 1px solid rgba(210, 191, 207, 0.35); color: #d2bfcf; }
html[data-theme="inverted"] .sp-faq-item[open] summary b { background: #60435b; color: var(--paper); }
html[data-theme="inverted"] .sp-faq-item p { color: var(--soft); }
html[data-theme="inverted"] .sp-related { border-top: 1px solid rgba(56, 45, 30, 0.18); }
html[data-theme="inverted"] .sp-related span { color: #4f3c4a; }
html[data-theme="inverted"] .sp-related a { color: #382d1e; }
html[data-theme="inverted"] .svc-links { background: #271c24; }
html[data-theme="inverted"] .svc-links h2 { color: #e1dddb; }
html[data-theme="inverted"] .svc-links .sp-tag { color: #d2bfcf; }
html[data-theme="inverted"] .svc-links-grid a { background: #2d202a; border: 1px solid rgba(210, 191, 207, 0.14); color: #e1dddb; }
html[data-theme="inverted"] .svc-links-grid a:hover { border-color: #d2bfcf; }
html[data-theme="inverted"] .svc-links-grid a span { color: #d2bfcf; }