/* Direction D: C's look, plus services with the DTV up front, B's four steps in C's colours, and LINE and WhatsApp. */

/* LINE and WhatsApp in their own colours. Spans, not links, until the owner gives his details. */
.d-app { display: inline-flex; align-items: center; gap: 2px; padding: 15px 18px 15px 20px; border-radius: 999px; color: #fff; font-weight: 700; }
.d-app-line { background: #06c755; }
.d-app-wa { background: #25d366; }
.d-trust { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.d-trust-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 0.8rem/1 var(--serif); }

/* Services */
.d-svc { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--gut) 48px; }
.d-feature { margin-top: 36px; display: grid; gap: 14px; }
.d-big { display: flex; flex-direction: column; min-height: 260px; padding: 28px; border-radius: var(--r); color: #fff; }
.d-big-dtv { background: var(--navy); }
.d-big-ret { background: var(--clay); }
.d-tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--navy); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.d-big-ret .d-tag { background: rgba(255, 255, 255, 0.9); color: var(--clay); }
.d-big h3 { margin-top: auto; padding-top: 32px; font: 600 clamp(1.9rem, 3.6vw, 2.9rem)/1.02 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.d-big p:last-child { margin-top: 12px; max-width: 30rem; color: rgba(255, 255, 255, 0.85); }
.d-cards { margin-top: 14px; display: grid; gap: 10px; }
.d-card { padding: 20px; border-radius: 20px; background: var(--sand); }
.d-card h3 { font: 600 1.35rem/1.1 var(--serif); color: var(--navy); }
.d-card p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.d-more { margin-top: 24px; display: grid; gap: 10px; color: var(--muted); }
.d-more strong { color: var(--navy); }
.d-also { margin-top: 6px; }
@media (min-width: 640px) { .d-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .d-svc { padding-top: 96px; }
  .d-feature { grid-template-columns: 1.15fr 1fr; }
  .d-big { min-height: 320px; padding: 36px; }
  .d-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* How it works: B's four steps with a line that fills as you scroll, in C's colours */
.d-how { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--gut) 24px; }
.d-steps { position: relative; margin-top: 44px; }
.d-steps ol { display: grid; gap: 28px; }
.d-steps-line { position: absolute; top: 0; bottom: 0; left: 25px; width: 4px; border-radius: 4px; background: var(--sand-2); }
.d-steps-fill { position: absolute; inset: 0; border-radius: 4px; background: var(--clay); transform-origin: 50% 0; }
.d-step { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; }
.d-step-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--navy); color: var(--navy); font: 600 1.35rem/1 var(--serif);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.d-step.is-on .d-step-n { background: var(--gold); border-color: var(--gold); }
.d-step-card { padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 2px 0 rgba(42, 38, 34, 0.06); }
.d-step-card h3 { font: 600 clamp(1.35rem, 2.4vw, 1.8rem)/1.1 var(--serif); color: var(--navy); }
.d-step-card p { margin-top: 8px; color: var(--muted); }
.d-step-card a { font-weight: 700; color: var(--clay); }
@media (min-width: 880px) {
  .d-steps-line { left: 50%; margin-left: -2px; }
  .d-steps ol { gap: 20px; }
  .d-step { grid-template-columns: 1fr 64px 1fr; gap: 32px; align-items: center; }
  .d-step-n { grid-column: 2; grid-row: 1; width: 64px; height: 64px; }
  .d-step:nth-child(odd) .d-step-card { grid-column: 1; grid-row: 1; }
  .d-step:nth-child(even) .d-step-card { grid-column: 3; grid-row: 1; }
  .d-step-card { padding: 30px; }
}