/* ═══════════════════════════════════════════════════════════════════
   DT-WS — WorkSuite visual language for the Digital Transformation pages
   Loaded after each page's own stylesheet so it wins where it overrides.
   All 14 DT pages share the same component markup (.section-header,
   .icon-card, .steps-3, .dp-faq), so one file lifts all of them.
   Colour, radius and shadow come from each page's own tokens, so nothing
   here hard-codes brand values.
   ═══════════════════════════════════════════════════════════════════ */

/* Sprite host — icons are referenced with <use>, never rendered here. */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── SECTION HEADS ────────────────────────────────────────────────
   The kicker moves onto a row beside a tinted icon tile, which is what
   gives the WorkSuite sections their weight. */
.ws-head-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ws-head-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;background:var(--red-light);color:var(--red);flex-shrink:0}
.ws-head-ic .ic{width:25px;height:25px}
/* The kicker carried its own bottom margin for the stacked layout it used
   to have; on the icon row that becomes a misalignment. */
.ws-head-top .section-kicker{margin-bottom:0}
.section-header .section-title em{font-style:normal;color:var(--red)}

/* Dark sections invert the tile rather than losing it. */
.section-dark .ws-head-ic,
.ws-sec-dark .ws-head-ic{background:rgba(255,255,255,.1);color:#FF8A6B}

/* ── FEATURE CARDS ────────────────────────────────────────────────
   .icon-card was named for an icon it never had. The tile is added in
   markup; everything else is the WorkSuite card treatment. */
.icon-card{position:relative;padding:28px 26px;border-radius:16px;overflow:hidden;transition:var(--transition)}
.icon-card .fi{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--red-light);color:var(--red);margin-bottom:17px}
.icon-card:hover{border-color:var(--red);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
/* Accent rail that wipes in on hover, as on the WorkSuite cards. */
.icon-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--red),#EA580C);transform:scaleX(0);transform-origin:left;transition:transform 260ms cubic-bezier(.4,0,.2,1)}
.icon-card:hover::before{transform:scaleX(1)}
.icon-card h3{font-size:17px!important;font-weight:700;letter-spacing:-.01em;margin-bottom:9px}
.icon-card p{font-size:13.6px!important;line-height:1.62}

/* ── DELIVERY STEPS ───────────────────────────────────────────────
   Numerals become filled brand chips instead of flat squares. */
.steps-3 .step-num,
.step-card .num{background:linear-gradient(135deg,var(--red),#B91C1C)!important;color:#fff!important;box-shadow:0 4px 12px rgba(220,38,38,.3)}

/* ── FAQ ("Before you ask") ───────────────────────────────────────
   Same accordion, WorkSuite proportions: roomier rows, heavier question
   type, and an open state that reads clearly. */
.dp-faq{max-width:940px;margin:0 auto}
.dp-faq details{border-radius:var(--radius);margin-bottom:12px}
.dp-faq details[open]{border-color:var(--red);box-shadow:var(--shadow-sm)}
.dp-faq summary{padding:19px 24px;font-size:16px}
.dp-faq .a,
.dp-faq details > div:last-child,
.dp-faq details > p{padding:0 24px 20px;font-size:15px;line-height:1.75;color:var(--mid)}

@media(max-width:640px){
  .ws-head-ic{width:44px;height:44px;border-radius:13px}
  .ws-head-ic .ic{width:21px;height:21px}
  .icon-card{padding:24px 20px}
  .dp-faq summary{padding:16px 18px;font-size:15px}
  .dp-faq .a,
  .dp-faq details > div:last-child,
  .dp-faq details > p{padding:0 18px 17px}
}