/* Expertise → Artificial Intelligence & Data Science. Bespoke landing-style
   layout on the tl- design system: typographic hero, a four-phase lifecycle
   overview that anchors into per-phase sections of service cards, and two
   "beyond the lifecycle" panels. Loaded only by pages/expertise/data-science.js. */

html { scroll-behavior: smooth; }

/* Hero reuses the shared .tl-xp-hero classes (expertise.css) so the breadcrumb
   and "Expertise area" eyebrow match the other expertise pages exactly. */

/* --- Lifecycle overview ------------------------------------------------ */
.tl-ds-flow {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.tl-ds-flow__node { position: relative; }
/* forward chevron sitting in the gap between phase cards */
.tl-ds-flow__node:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; top: 50%; right: 0;
  width: 8px; height: 8px;
  border-top: 2px solid var(--neutral-300); border-right: 2px solid var(--neutral-300);
  transform: translate(calc(50% + var(--space-4) / 2), -50%) rotate(45deg);
}
.tl-ds-flow__link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  height: 100%; padding: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); text-decoration: none;
  transition: transform var(--dur-base, .18s) var(--ease-out, ease),
              box-shadow var(--dur-base, .18s) var(--ease-out, ease),
              border-color var(--dur-base, .18s) var(--ease-out, ease);
}
.tl-ds-flow__link:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-2);
  border-color: var(--orange-700);
}
.tl-ds-flow__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); width: 100%;
}
.tl-ds-flow__num {
  font-size: 13px; font-weight: var(--weight-bold, 700);
  letter-spacing: 0.08em; color: var(--fg-accent); font-variant-numeric: tabular-nums;
}
.tl-ds-flow__icon {
  display: inline-flex; width: 40px; height: 40px; border-radius: 11px;
  align-items: center; justify-content: center;
  background: var(--surface-accent); color: var(--fg-accent);
}
.tl-ds-flow__name { font-size: 15px; font-weight: var(--weight-semibold); color: var(--fg-1); line-height: 1.25; }
.tl-ds-flow__count { margin-top: auto; font-size: 12px; color: var(--fg-3); }
@media (max-width: 1080px) {
  .tl-ds-flow { grid-template-columns: repeat(2, 1fr); }
  .tl-ds-flow__node::after { display: none; }
}
@media (max-width: 540px) { .tl-ds-flow { grid-template-columns: 1fr; } }

/* --- Phase sections (editorial, no cards) ------------------------------ */
/* Each phase is a plain section separated by whitespace and hairlines, not a
   boxed card. A large phase number + name head it; the services below are
   two-column rows (name on the left, description on the right) divided by thin
   rules — a spec-sheet / editorial pattern rather than a grid of cards. */
.tl-ds-phase { scroll-margin-top: calc(88px + var(--subnav-h, 0px)); }
/* The phase head pins below the sticky nav (76px) while its own phase scrolls,
   then the next phase's head takes over. Solid page-coloured background so the
   service rows pass cleanly underneath.
   --subnav-h is the Expertise rail's height, published by about.css only while
   that rail is a sticky top bar pinned at the same 76px. Without clearing it too
   the head pins underneath the rail, which outranks it, and the phase number and
   title disappear. Resolves to 0px once the rail is a side column again. */
.tl-ds-phase__head {
  position: sticky;
  top: calc(76px + var(--subnav-h, 0px));
  z-index: 5;
  background: var(--surface-page);
  display: flex; gap: var(--space-5); align-items: flex-start;
  padding: var(--space-5) 0 var(--space-6); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-1);
}
@media (max-width: 640px) { .tl-ds-phase__head { position: static; } }
.tl-ds-phase__num {
  flex: none; font-size: 48px; line-height: 1; letter-spacing: -0.02em;
  font-weight: 800; color: var(--neutral-300); font-variant-numeric: tabular-nums;
}
.tl-ds-phase__title { margin: 0 0 var(--space-2); font-size: 26px; letter-spacing: -0.01em; color: var(--fg-1); }
.tl-ds-phase__summary { margin: 0; max-width: 64ch; color: var(--fg-2); font-size: 15px; line-height: 1.6; }

.tl-ds-phase__services { display: flex; flex-direction: column; }
.tl-ds-service {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7fr);
  gap: var(--space-4) var(--space-10);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-1);
}
.tl-ds-service:first-child { border-top: 0; }
.tl-ds-service__label { display: flex; align-items: flex-start; gap: var(--space-3); }
.tl-ds-service__icon { flex: none; color: var(--fg-accent); margin-top: 1px; }
.tl-ds-service__title {
  margin: 0; font-size: 18px; font-weight: var(--weight-semibold);
  letter-spacing: -0.01em; color: var(--fg-1); line-height: 1.3;
}
.tl-ds-service__body { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.7; }
@media (max-width: 760px) {
  .tl-ds-service { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5) 0; }
}
@media (max-width: 640px) {
  .tl-ds-phase__head { gap: var(--space-4); }
  .tl-ds-phase__num { font-size: 36px; }
}

/* --- Beyond the lifecycle --------------------------------------------- */
.tl-ds-extra {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (max-width: 820px) { .tl-ds-extra { grid-template-columns: 1fr; } }
/* Dark navy panels, matching the site's existing on-dark surfaces
   (--surface-ink, as used by the philosophy band and flagship CTA). */
.tl-ds-extra__panel {
  background: var(--surface-ink);
  color: var(--fg-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 3px solid var(--orange-700);
  border-radius: var(--radius-xl); padding: var(--space-8);
  box-shadow: var(--shadow-3, 0 18px 40px rgba(11, 21, 36, 0.22));
}
.tl-ds-extra__icon {
  display: inline-flex; width: 52px; height: 52px; border-radius: 14px;
  align-items: center; justify-content: center;
  background: rgba(255, 165, 59, 0.16); color: var(--orange-500);
  margin-bottom: var(--space-4);
}
.tl-ds-extra__kicker {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: var(--weight-semibold); color: var(--orange-500);
  margin-bottom: var(--space-2);
}
.tl-ds-extra__title { margin: 0 0 var(--space-3); font-size: 20px; font-weight: var(--weight-semibold); color: var(--fg-on-dark); line-height: 1.25; }
.tl-ds-extra__body { margin: 0; color: var(--neutral-300); font-size: 14.5px; line-height: 1.65; }