/* /services — the page that has to earn the enquiry.

   Shape of the page: a hero that states the offer, a before/after band that
   shows what changes, then one full-width row per service pairing the copy
   with an abstract visual of the result. Alternating grounds and sides give
   the page a rhythm you can scan without reading every word. */

/* ---------- Hero ------------------------------------------ */

.service-hero { position: relative; padding-top: calc(var(--header-height) + 72px); overflow: hidden; }
.service-hero::before {
  /* One soft accent wash so the top of the page is not a flat rectangle. */
  content: '';
  position: absolute; inset: -30% -10% auto -10%; height: 620px;
  background: radial-gradient(ellipse at 30% 0%, var(--clr-accent-a15), transparent 62%);
  pointer-events: none;
}
/* The constraint goes on the children, not on .wrap itself — .wrap centres
   itself with auto margins, so narrowing it would pull the hero off the
   grid every other section lines up to. */
.service-hero-inner { position: relative; z-index: 1; padding-bottom: 56px; }
.service-hero h1 {
  max-width: 820px;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 800;
}
.service-hero .hero-lead { max-width: 640px; margin-bottom: 32px; }
.service-hero .hero-cta-group { display: flex; flex-wrap: wrap; gap: 14px; }

.service-index {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border-top: 1px solid var(--border-color);
}
.service-index a {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px 22px 0;
  font-size: .95rem; color: var(--clr-text-muted);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.service-index a:hover { color: var(--clr-text); border-bottom-color: var(--clr-accent); }
.idx-num { margin: 0; font-size: .72rem; color: var(--clr-accent-text); }

/* ---------- Before / after -------------------------------- */

.contrast-band { background: var(--clr-surface-1); border-block: 1px solid var(--border-subtle); padding-block: 80px; }
.contrast-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: stretch; }
.contrast-col {
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}
.contrast-col ul { list-style: none; display: grid; gap: 14px; }
.contrast-col li { position: relative; padding-left: 30px; line-height: 1.55; }
.contrast-col li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--ff-label); font-size: .95rem;
}

/* "Today" is deliberately the flatter of the two: same information, no
   colour, so the eye lands on the right-hand column. */
.is-before { background: transparent; color: var(--clr-text-muted); }
.is-before .contrast-title { color: var(--clr-text-subtle); }
.is-before li::before { content: '×'; color: var(--clr-text-subtle); }

.is-after {
  background: var(--clr-surface-2);
  border-color: var(--clr-accent-a30);
  color: var(--clr-text);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.is-after .contrast-title { color: var(--clr-accent-text); }
.is-after li::before { content: '✓'; color: var(--clr-accent); }

.contrast-arrow { align-self: center; font-size: 1.75rem; color: var(--clr-accent-a40); }

/* ---------- One row per service --------------------------- */

.service-feature { border-bottom: 1px solid var(--border-subtle); }
.service-feature:nth-child(even) { background: var(--clr-surface-1); }
.service-feature-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  padding-block: 88px;
}
/* Alternate which side the visual sits on. */
.service-feature:nth-child(even) .service-feature-copy { order: 2; }
.service-feature:nth-child(even) .service-feature-visual { order: 1; }

.service-num { color: var(--clr-text-subtle); margin-bottom: 12px; }
.service-feature-copy h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  line-height: 1.14; letter-spacing: -.025em;
}
.service-desc { color: var(--clr-text-muted); font-size: 1.06rem; line-height: 1.7; margin-top: 18px; }

/* Tinting this with the accent turned the panel muddy against the blue
   ground. It takes the next surface step up instead, and the accent stays
   on the rule down its left edge. */
.service-example {
  margin: 26px 0; padding: 20px 22px;
  background: var(--clr-surface-1);
  border-left: 3px solid var(--clr-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.service-feature:nth-child(even) .service-example { background: var(--clr-surface-2); }
.service-example-label { margin-bottom: 8px; }
.service-example p { margin: 0; line-height: 1.65; color: var(--clr-text); }

.service-deliverables-label { color: var(--clr-text-subtle); margin-bottom: 14px; }
.service-deliverables { list-style: none; display: grid; gap: 12px; }
.service-deliverables li {
  position: relative; padding-left: 30px;
  color: var(--clr-text-muted); line-height: 1.55;
}
.service-deliverables li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--clr-accent); font-size: .95rem;
}

/* ---------- The visuals ------------------------------------
   Every mock below is abstract on purpose: it shows the shape of a result
   without asserting a figure. All are aria-hidden in the markup. */

.mock {
  background: var(--clr-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
}
.service-feature:nth-child(even) .mock { background: var(--clr-bg); }
.mock-line { display: block; height: 9px; border-radius: var(--radius-full); background: var(--border-strong); }

/* AI: a question, a drafted answer, the sources it leaned on. */
.mock-question {
  margin: 0 0 20px; padding: 14px 16px;
  background: var(--clr-surface-3); border-radius: var(--radius-md);
  font-size: .95rem; line-height: 1.5; color: var(--clr-text);
}
.mock-answer { display: grid; gap: 10px; padding-left: 16px; border-left: 2px solid var(--clr-accent); }
.mock-sources { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mock-chip {
  font-family: var(--ff-label); font-size: .72rem; letter-spacing: .04em;
  padding: 7px 12px; border-radius: var(--radius-full);
  background: var(--clr-accent-a12); color: var(--clr-accent-text);
  border: 1px solid var(--clr-accent-a25);
}
.mock-foot {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border-subtle);
  font-family: var(--ff-label); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--clr-text-subtle);
}

/* RPA: four steps down a rail, the last one handed back to a person. */
.mock-flow { display: grid; gap: 0; }
.mock-flow-step {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 16px 0 16px 4px;
  font-size: .95rem; color: var(--clr-text-muted);
}
.mock-flow-step:not(:last-child)::after {
  content: ''; position: absolute; left: 9px; top: 32px; bottom: -6px;
  width: 2px; background: var(--clr-accent-a30);
}
.mock-flow-dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--clr-accent);
  box-shadow: 0 0 0 4px var(--clr-accent-a15);
}
.mock-flow-step.is-exception { color: var(--clr-cool-text); }
.mock-flow-step.is-exception .mock-flow-dot { background: var(--clr-cool); box-shadow: 0 0 0 4px var(--clr-cool-a25); }

/* BI: three key figures over one chart. */
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.mock-kpis > div { display: grid; gap: 9px; padding: 14px; background: var(--clr-surface-3); border-radius: var(--radius-md); }
.mock-line.is-big { height: 15px; background: var(--clr-text-muted); }
.mock-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
/* Bars need to read on both grounds this row alternates between, so they are
   a tint of the text colour rather than a fixed surface step. */
.mock-chart span { flex: 1; border-radius: 3px 3px 0 0; background: rgba(var(--clr-text-rgb), 0.25); }
.mock-chart .is-accent { background: var(--clr-accent); }

/* Connected systems: three sources into one store. */
.mock-nodes { display: grid; grid-template-columns: auto 80px auto; align-items: center; gap: 0; }
.node {
  display: block; padding: 12px 16px; text-align: center;
  background: var(--clr-surface-3); border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--ff-label); font-size: .78rem; color: var(--clr-text-muted);
}
.node-col { display: grid; gap: 22px; }
.node-wires { width: 80px; height: 160px; color: var(--clr-accent-a40); }
.node-hub {
  background: var(--clr-accent-a15); border-color: var(--clr-accent);
  color: var(--clr-accent-text); font-weight: 600; padding-block: 20px;
}

/* ---------- Web development ------------------------------- */

.web-service { border-bottom: 1px solid var(--border-subtle); }
.web-service-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 80px; }
.web-service h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: -.025em; }
.web-service p:not(.eyebrow):not(.service-num) { color: var(--clr-text-muted); line-height: 1.7; margin: 18px 0 24px; }
.web-offer-list { list-style: none; display: grid; gap: 0; }
.web-offer-list li {
  padding: 20px 0; border-top: 1px solid var(--border-color);
  color: var(--clr-text-muted); line-height: 1.55;
}
.web-offer-list li:last-child { border-bottom: 1px solid var(--border-color); }
.anchor-alias { display: block; scroll-margin-top: calc(var(--header-height) + 24px); }

/* ---------- Process --------------------------------------- */

.process-band { background: var(--clr-surface-1); border-bottom: 1px solid var(--border-subtle); padding-block: 80px; }
.process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: step; list-style: none; }
.process-list li {
  counter-increment: step;
  padding: 28px 26px;
  background: var(--clr-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.process-list li::before {
  content: '0' counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 20px;
  border-radius: 50%;
  background: var(--clr-accent-a15); color: var(--clr-accent-text);
  font-family: var(--ff-label); font-size: .82rem; font-weight: 700;
}
.process-list h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.process-list p { color: var(--clr-text-muted); line-height: 1.6; margin: 8px 0 0; }

/* ---------- FAQ ------------------------------------------- */

.service-faq { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; padding-block: 80px; }
.service-faq .section-intro { margin-bottom: 0; }
.faq-list { display: grid; gap: 12px; align-content: start; }
.faq-item {
  background: var(--clr-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color .2s ease, background .2s ease;
}
.faq-item:hover { border-color: var(--clr-accent-a30); }
.faq-item[open] { background: var(--clr-surface-2); border-color: var(--clr-accent-a30); }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 22px;
  font-size: 1.02rem; font-weight: 600; cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--ff-label); font-size: 1.3rem; font-weight: 400; line-height: 1;
  color: var(--clr-accent);
  transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--clr-accent-text); }
.faq-item > p { color: var(--clr-text-muted); padding: 0 22px 20px; line-height: 1.7; margin: 0; }

/* ---------- Responsive ------------------------------------ */

/* Grid and flex children size to min-content by default, so a single long
   German compound ("Unternehmenswissen") can push a column wider than its
   track and scroll the whole page sideways on a narrow phone. */
.service-feature-inner > *,
.contrast-grid > *,
.web-service-inner > *,
.service-faq > *,
.process-list > * { min-width: 0; }
.service-feature-copy h2,
.service-desc,
.service-deliverables li,
.contrast-col li { overflow-wrap: break-word; }

@media (max-width: 1000px) {
  .service-index { grid-template-columns: repeat(3, 1fr); }
  .service-feature-inner { gap: 44px; }
}

@media (max-width: 768px) {
  .service-hero { padding-top: calc(var(--header-height) + 40px); }
  .service-hero-inner { padding-bottom: 36px; }
  .service-hero .hero-cta-group .btn { width: 100%; }
  .service-index { grid-template-columns: 1fr 1fr; }
  .service-index a { padding: 16px 12px 16px 0; font-size: .88rem; gap: 6px; }

  .contrast-band { padding-block: 56px; }
  .contrast-grid { grid-template-columns: 1fr; gap: 16px; }
  .contrast-col { padding: 24px 20px; }
  .contrast-arrow { transform: rotate(90deg); justify-self: center; }

  /* On one column the visual always follows its copy, whatever the order
     rule says for two-column layouts. */
  .service-feature-inner { grid-template-columns: 1fr; gap: 32px; padding-block: 56px; }
  .service-feature:nth-child(even) .service-feature-copy,
  .service-feature:nth-child(even) .service-feature-visual { order: 0; }
  .service-example { padding: 16px 18px; }
  .mock { padding: 22px 18px; }
  .mock-kpis { gap: 10px; }
  .mock-kpis > div { padding: 10px; }
  .mock-chart { height: 120px; gap: 7px; }
  .mock-nodes { grid-template-columns: auto 50px auto; }
  .node-wires { width: 50px; }
  .node { font-size: .72rem; padding: 10px 12px; }

  .web-service-inner { grid-template-columns: 1fr; gap: 28px; padding-block: 56px; }
  .process-band { padding-block: 56px; }
  .process-list { grid-template-columns: 1fr; gap: 14px; }
  .process-list li { padding: 22px 20px; }
  .process-list li::before { width: 34px; height: 34px; margin-bottom: 14px; }
  .service-faq { grid-template-columns: 1fr; gap: 28px; padding-block: 56px; }
  .faq-item > summary { padding: 16px 18px; font-size: .98rem; }
  .faq-item > p { padding: 0 18px 16px; }
}

/* ---------- Pricing --------------------------------------
   Floors and ranges, not quotes. The figures use --ff-label because they are
   numbers, which is what the monospace is reserved for. The band sits on the
   page ground between two surface-1 bands, so depth comes from the cards. */

.pricing-band { padding-block: 80px; border-bottom: 1px solid var(--border-subtle); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card {
  background: var(--clr-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, background .2s ease;
}
.price-card:hover { border-color: var(--clr-accent-a30); background: var(--clr-surface-2); }
.price-kind {
  font-family: var(--ff-label);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.45;
  color: var(--clr-text-subtle);
  /* Two lines' worth, so the figures line up across the three cards even
     though only some labels wrap. */
  min-height: 2.9em;
  margin-bottom: 18px;
}
.price-figure {
  font-family: var(--ff-label);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 600; letter-spacing: -.01em;
  color: var(--clr-accent-text);
}
.price-desc { color: var(--clr-text-muted); font-size: .95rem; line-height: 1.6; margin-top: 14px; }

.price-notes {
  list-style: none; display: grid; gap: 12px;
  max-width: 760px; margin-top: 36px;
  padding-left: 20px; border-left: 2px solid var(--clr-accent-a40);
}
.price-notes li { color: var(--clr-text-muted); line-height: 1.6; }

/* ---------- Low risk -------------------------------------
   The promises that were spread across /about, the process steps and the FAQ,
   collected immediately before the closing CTA. */

.risk-band { background: var(--clr-surface-1); border-block: 1px solid var(--border-subtle); padding-block: 72px; }
.risk-band-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.risk-band-inner .section-intro { margin-bottom: 0; }
.risk-list li { color: var(--clr-text); font-size: 1.02rem; }

/* ---------- Case study (slot) ----------------------------
   Styled ahead of the first documented client story so publishing it is a
   copy edit. The markup is commented out in the template until then. */

.case-band { background: var(--clr-surface-1); border-block: 1px solid var(--border-subtle); padding-block: 80px; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-step {
  background: var(--clr-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.case-step p:not(.eyebrow) { color: var(--clr-text-muted); line-height: 1.65; margin: 0; }

/* Same narrow-screen guard as the sections above. */
.pricing-grid > *, .risk-band-inner > *, .case-grid > * { min-width: 0; }
.price-kind, .price-figure, .risk-list li { overflow-wrap: break-word; }

@media (max-width: 1000px) {
  .pricing-grid, .case-grid { grid-template-columns: 1fr 1fr; }
  .risk-band-inner { gap: 36px; }
}

@media (max-width: 768px) {
  .pricing-band { padding-block: 56px; }
  .pricing-grid, .case-grid { grid-template-columns: 1fr; gap: 14px; }
  .price-card { padding: 24px 20px; }
  .price-notes { margin-top: 28px; }
  .risk-band { padding-block: 48px; }
  .risk-band-inner { grid-template-columns: 1fr; gap: 26px; }
  .case-band { padding-block: 56px; }
}