/* Lean Layer site styles: the shared pieces of the redesign (header and menus,
   footer, closing CTA, buttons, team faces, marquee) and the homepage sections.
   Every value comes from styles/tokens.css. The few mockup values that have no
   token are named once below, so they are easy to find if one is added.

   Loaded from index.html's <head>, so it is in place before the runtime renders
   and applies to every view. Older views keep their own styles in the view
   template until their phase of the redesign replaces them. */

/* Section headings are 38px on desktop and 30px on phones on every
   redesigned page (Kim, 24 October 2026), and the 2px rules above
   section items use the accent purple. */
:root {
  --gutter: clamp(20px, 4vw, 32px);
  /* Mockup values with no token yet (see new-copy-for-review.md). */
  --ink-on-dark-soft: #C9BDF0;
  --line-on-dark: #3A2F55;
  --violet-500: #8E7CBF;
  /* Why not hire bars on /pricing. */
  --hatch-ground: #ECE8F4;
  --hatch-line: #B9B4C6;
  --bar-left: #9C97AA;
}

/* ---------- page ground and layout ---------- */
.ll-shell--new { background: var(--surface) !important; }
.ll-new { font-family: var(--font-body); color: var(--ink); background: var(--surface); }
/* The mockups set 1200px of content with the gutter outside it, so the
   wrapper is the container plus both gutters. */
.ll-wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.ll-new a { color: var(--brand-deep); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.ll-new a:hover { color: var(--brand); }
.ll-hdr a:focus-visible, .ll-hdr button:focus-visible,
.ll-new a:focus-visible, .ll-new button:focus-visible,
.ll-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ll-new .ll-link { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ll-new .ll-link:hover { text-underline-offset: 4px; }
.ll-new h1, .ll-new h2, .ll-new h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); }

/* ---------- buttons ---------- */
.ll-btn { display: inline-block; font-family: var(--font-body); font-size: 16px; line-height: 1.2; font-weight: 500; border-radius: var(--radius-button); text-decoration: none; }
.ll-new .ll-btn--primary, .ll-btn--primary { background: var(--brand); color: var(--on-brand); padding: 15px 24px; }
.ll-new .ll-btn--primary:hover, .ll-btn--primary:hover { background: var(--brand-deep); color: var(--on-brand); }
.ll-new .ll-btn--secondary, .ll-btn--secondary { border: 1px solid var(--line-control); color: var(--ink); padding: 14px 24px; }
.ll-new .ll-btn--secondary:hover, .ll-btn--secondary:hover { border-color: var(--brand); background: var(--surface-tint); color: var(--ink); }
.ll-btn--sm { padding: 13px 22px; }
.ll-btn--on-brand, .ll-new .ll-btn--on-brand { background: var(--card); color: var(--brand); padding: 12px 20px; }
.ll-btn--on-brand:hover, .ll-new .ll-btn--on-brand:hover { background: var(--accent-soft); color: var(--brand); }

/* ---------- team faces (cut from the sprite, 8 x 4) ---------- */
.ff { display: inline-block; flex: 0 0 auto; width: var(--s); height: var(--s); border-radius: var(--radius-face); background-color: var(--line); background-image: url("../uploads/team-sprite.webp"); background-repeat: no-repeat; background-size: calc(var(--s) * 8) calc(var(--s) * 4); background-position: calc(var(--c) * var(--s) * -1) calc(var(--r) * var(--s) * -1); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line-strong); }
/* The team chart's own faces (uploads/team-chart.webp): one row, one cell per
   role, in chart order: exec sponsor, RevOps Lead, CRM architect, demand and
   attribution, pipeline and forecasting, data engineer, BI developer. */
.ff--chart { background-image: url("../uploads/team-chart.webp"); background-size: calc(var(--s) * 8) var(--s); background-position: calc(var(--c) * var(--s) * -1) 0; }

/* ==========================================================================
   Header: event banner (styled in the view template), accent strip, brand bar
   ========================================================================== */
.ll-hdr { position: relative; z-index: 100; font-family: var(--font-body); }
/* Older views were laid out under a fixed header; they keep one until their
   phase rebuilds them. New views put the header in the page flow. */
.ll-hdr--fixed { position: fixed; top: 0; left: 0; right: 0; }
.ll-strip { height: 4px; background: var(--accent); }
.ll-bar { background: var(--brand); }
.ll-nav2 { position: relative; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ll-lockup { display: flex; align-items: center; gap: 14px; color: var(--on-brand); text-decoration: none; }
.ll-lockup img { display: block; width: 56px; height: 46px; }
.ll-lockup span { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.ll-menus { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.ll-menu { position: relative; }
.ll-menu--wide { position: static; }
.ll-menu-btn { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font-family: var(--font-body); font-size: 15px; line-height: 1.4; color: var(--on-brand-muted); cursor: pointer; text-underline-offset: 6px; }
.ll-menu-btn:hover { color: var(--on-brand); text-decoration: underline; }
.ll-menu-btn[aria-expanded="true"] { color: var(--on-brand); text-decoration: underline; text-decoration-color: var(--violet-300); }
.ll-menu-btn svg { margin-left: 6px; }

/* Panels, as in mockups/navigation-menus.html */
.dd-panel { display: none; position: absolute; z-index: 110; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); padding: 10px; text-align: left; }
.dd-panel.is-open { display: flex; flex-direction: column; }
.ll-menu .dd-panel { top: calc(100% + 12px); left: -24px; width: 300px; }
.ll-menu:last-of-type .dd-panel { left: auto; right: -24px; }
.ll-menu--wide .dd-panel { top: calc(100% - 8px); left: auto; right: var(--gutter); width: 760px; max-width: calc(100vw - 2 * var(--gutter)); }
.ll-menu--wide .dd-panel.is-open { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.dd-col { display: flex; flex-direction: column; }
.dd-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius-button); text-decoration: none; }
.dd-item:hover { background: var(--surface-tint); }
.dd-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--ink); }
.dd-d { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.dd-side { border-left: 1px solid var(--line); padding: 12px 8px 12px 20px; display: flex; flex-direction: column; gap: 4px; }
.dd-side-label { font-size: 13px; color: var(--ink-muted); padding: 0 14px 6px; }
.dd-sub { display: block; padding: 7px 14px; font-size: 14px; line-height: 1.35; color: var(--brand-deep); text-decoration: none; border-radius: var(--radius-button); }
.dd-sub:hover { background: var(--surface-tint); color: var(--brand); }
.dd-fit { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 14px 2px; display: flex; flex-direction: column; gap: 4px; }
.dd-fit span { font-size: 13px; color: var(--ink-muted); }
.dd-fit a { font-size: 14px; font-weight: 500; color: var(--brand-deep); text-decoration: none; }
.dd-fit a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }

/* Small screens: a menu button and a full width panel of expandable groups */
.ll-burger { display: none; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-button); background: none; color: var(--on-brand); font-family: var(--font-body); font-size: 15px; font-weight: 500; cursor: pointer; }
.ll-burger:hover { background: rgba(255, 255, 255, .1); }
.ll-mnav { display: none; }
@media (max-width: 959px) {
  .ll-menus { display: none; }
  .ll-burger { display: inline-flex; }
  .ll-mnav.is-open { display: block; background: var(--card); border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow-raised); max-height: calc(100vh - 80px); overflow-y: auto; }
  .ll-mnav-inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 8px var(--gutter) 24px; }
  .ll-mgroup { border-bottom: 1px solid var(--line); }
  .ll-mgroup-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border: 0; background: none; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
  .ll-mgroup-btn svg { transition: transform .15s ease; }
  .ll-mgroup-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ll-mgroup-list { display: none; padding: 0 0 12px; }
  .ll-mgroup-list.is-open { display: flex; flex-direction: column; }
  .ll-mgroup-list .dd-item, .ll-mgroup-list .dd-sub { padding: 10px 12px; margin: 0 -12px; }
  .ll-mgroup-label { font-size: 13px; color: var(--ink-muted); padding: 10px 0 4px; }
  .ll-mnav .ll-btn--primary { display: block; margin-top: 20px; text-align: center; }
}
@media (max-width: 420px) {
  .ll-lockup img { width: 44px; height: 36px; }
  .ll-lockup span { font-size: 21px; }
}

/* ==========================================================================
   Closing CTA panel
   ========================================================================== */
.ll-cta-sec { padding-bottom: var(--space-10); }
.ll-cta { background: var(--brand); border-radius: var(--radius-card); padding: 64px 48px; color: var(--on-brand); display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; justify-content: space-between; }
.ll-new .ll-cta h2, .ll-cta h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; max-width: 640px; color: var(--on-brand); }
.ll-cta .ll-btn { font-weight: 600; padding: 14px 22px; }
.ll-cta-copy { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.ll-cta-copy p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--on-brand-soft); }
@media (max-width: 640px) {
  .ll-cta { padding: 40px 24px; gap: 28px; }
  .ll-new .ll-cta h2, .ll-cta h2 { font-size: 30px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ll-foot { border-top: 1px solid var(--line); background: var(--surface); font-family: var(--font-body); }
.ll-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 32px; padding-top: 48px; padding-bottom: 32px; font-size: 14px; color: var(--ink-muted); }
.ll-foot .ll-foot-mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.ll-foot-mark img { display: block; width: 29px; height: 24px; }
.ll-foot-mark span { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ll-foot-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.ll-foot a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.ll-foot a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.ll-foot-meta { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 40px; font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
/* The divider spans the content, not the gutters. */
.ll-foot-meta::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.ll-foot-meta > span { display: flex; flex-direction: column; gap: 4px; }

/* ==========================================================================
   Homepage
   ========================================================================== */
.ll-h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; }
.ll-sec-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }

/* Hero */
.h-hero { padding-top: 88px; padding-bottom: 72px; display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch; align-content: center; }
/* On a desktop the hero and the client band fill the first screen, so the
   band sits at the fold and the next section starts below it. --hdr-h is the
   header's height (accent strip and bar, plus the event banner when it shows)
   and 79px is the client band. Capped so a very tall window does not leave
   the hero floating in empty space. */
.ll-shell--new { --hdr-h: 90px; }
.ll-shell--new.ll-shell--neweb { --hdr-h: calc(90px + var(--ll-eb-h)); }
.h-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.ll-new .h-proof { align-self: flex-start; font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--accent); text-decoration: none; }
.ll-new .h-proof:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 4px; }
.h-copy h1 { margin: 0; font-size: 52px; line-height: 1.04; letter-spacing: -0.025em; }
.h-copy h1 em { font-style: normal; color: var(--brand-deep); }
.h-sub { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink-secondary); max-width: 540px; }
.h-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

/* Team flow */
.tf-col { flex: 1 1 440px; min-width: 0; max-width: 540px; margin-left: auto; padding-top: 47px; display: flex; flex-direction: column; gap: 14px; }
.tf { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.tf-row { display: flex; align-items: stretch; }
.tf-cell { flex: 1 1 0; min-width: 0; display: flex; }
.tf-card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tf-role { width: 100%; height: 100%; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.tf-role--sponsor { border-left: 3px solid var(--ink); }
.tf-role--lead { border-left: 3px solid var(--brand); }
.tf-txt { display: flex; flex-direction: column; gap: 2px; }
.tf-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.2; }
.tf-d { font-size: 13px; line-height: 1.35; color: var(--ink-secondary); }
.tf-h { position: relative; align-self: stretch; flex: 0 0 54px; }
.tf-h--44 { flex-basis: 44px; }
.tf-h > span.tf-line { position: absolute; top: 50%; left: -16px; right: -16px; border-top: 1.5px dashed var(--connector); }
.tf-h > svg { position: absolute; left: 0; top: 50%; width: 100%; height: 8px; margin-top: -4px; overflow: visible; }
.tf-h > .tf-lbl { position: absolute; left: 50%; top: calc(50% + 9px); transform: translateX(-50%); font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.tf-v { position: relative; flex: 1 1 0; min-height: 34px; }
.tf-v > span.tf-line { position: absolute; left: var(--x, 50%); top: -16px; bottom: -16px; border-left: 1.5px dashed var(--connector); }
.tf-v > svg { position: absolute; left: var(--x, 50%); top: 0; width: 8px; height: 100%; margin-left: -4px; overflow: visible; }
.tf-v > .tf-lbl { position: absolute; left: calc(var(--x, 50%) + 14px); top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.tf-v--mobile { display: none; }
/* Brooke's feedback (Kim, 27 October 2026): each role reads as a team, so two
   plain circles peek out from behind every photo, one each side. They sit
   behind the photo, which keeps its size. Offsets use left, not transform,
   so reduced motion leaves them in place. */
.tf .ff--chart { position: relative; }
.tf .ff--chart::before, .tf .ff--chart::after { content: ''; position: absolute; top: calc(var(--s) * -0.06); width: 100%; height: 100%; border-radius: 50%; z-index: -1; box-shadow: 0 0 0 3px var(--card); }
.tf .ff--chart::before { left: calc(var(--s) * -0.2); background: var(--accent-soft); }
.tf .ff--chart::after { left: calc(var(--s) * 0.2); background: var(--line-strong); }
.tf-role .ff--chart { margin-left: calc(var(--s) * 0.14); margin-right: calc(var(--s) * 0.12); }
.tf-spec { position: relative; z-index: 1; border: 1px dashed var(--connector); border-radius: var(--radius-card); background: var(--surface-tint); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tf-spec-t { font-size: 13px; font-weight: 600; color: var(--brand); }
.tf-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tf-face { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.3; }
.tf-stack { flex: 1 1 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-top: 3px solid var(--brand); }
.tf-marks { display: flex; gap: 8px; }
.tf-agents { flex: 0 0 auto; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ll-icon-tile { width: 28px; height: 28px; border-radius: var(--radius-button); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }

@media (min-width: 1081px) {
  /* Kim, 27 October 2026: the hero is the largest section on the site and,
     with the client band, always fills the first screen, so on a laptop with
     its browser toolbars and Dock the band still shows. Type, team chart and
     spacing scale with the window's height (svh) between a floor for short
     windows (about 620px tall) and the full size from about 900px up. */
  .h-hero { min-height: clamp(420px, calc(100svh - var(--hdr-h) - 79px), 820px); padding-top: clamp(20px, 5svh, 56px); padding-bottom: clamp(20px, 5svh, 56px); gap: 64px; }
  .h-copy { gap: clamp(14px, 3.2svh, 30px); }
  .ll-new .h-proof { font-size: clamp(14px, 1.8svh, 16px); }
  .h-copy h1 { font-size: clamp(42px, 7.4svh, 66px); line-height: 1.03; }
  .h-sub { font-size: clamp(16px, 2.45svh, 22px); max-width: 620px; }
  .h-actions .ll-btn { font-size: clamp(17px, 2.2svh, 20px); padding: clamp(14px, 2.2svh, 19px) clamp(26px, 3.8svh, 36px); }
  .tf-col { max-width: 580px; padding-top: clamp(24px, 5svh, 47px); }
  .tf-role { padding: clamp(10px, 2svh, 18px) clamp(14px, 2.2svh, 20px); gap: 14px; }
  .tf-role .ff { --s: clamp(40px, 6.7svh, 60px) !important; }
  .tf-t { font-size: clamp(15px, 2svh, 18px); }
  .tf-d { font-size: clamp(12.5px, 1.6svh, 14.5px); }
  .tf-stack { padding: clamp(12px, 2.2svh, 20px) clamp(16px, 2.4svh, 22px); }
  .tf-agents { padding: clamp(8px, 1.3svh, 12px) clamp(12px, 1.8svh, 16px); font-size: clamp(13px, 1.7svh, 15px); }
  .tf-spec { padding: clamp(12px, 2.2svh, 20px) clamp(14px, 2.2svh, 20px) clamp(14px, 2.4svh, 22px); gap: clamp(8px, 1.8svh, 16px); }
  .tf-spec-t { font-size: clamp(13px, 1.7svh, 15px); }
  .tf-faces .ff { --s: clamp(42px, 7.1svh, 64px) !important; }
  .tf-face { font-size: clamp(11.5px, 1.5svh, 13.5px); }
  .tf-h > .tf-lbl { font-size: 12px; }
  .tf-v > .tf-lbl { font-size: clamp(11.5px, 1.45svh, 13px); }
  .tf-v { min-height: clamp(26px, 4.9svh, 44px); }
}

/* Client marquee */
.h-clients { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.ll-marquee-wrap { padding: 26px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ll-marquee { display: flex; width: max-content; animation: ll-scroll 28s linear infinite; will-change: transform; }
.h-clients .ll-marquee > span { flex: 0 0 auto; padding: 0 44px; font-size: 19px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
@keyframes ll-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Services */
/* On the lilac band, so the white cards read as clickable, like the offers. */
.h-services-band { background: var(--surface-tint); }
.h-services { padding-top: var(--space-10); padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 40px; }
/* One line for the heading on a desktop, so the section fits one screen. */
.h-services .ll-sec-head { max-width: none; }
.h-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
/* Every card in the services band is one link that fills deep purple on hover. */
.ll-new .h-row { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px 26px; display: flex; align-items: center; }
.h-row-txt { display: flex; flex-direction: column; gap: 6px; }
.h-row-t { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.h-row-d { font-size: 15px; color: var(--ink-secondary); max-width: 760px; }
.h-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
/* Three subgrid rows, so the titles, descriptions and the hairline above each
   proof line sit at the same height across all four cards. */
.h-areas { grid-auto-rows: auto; }
.ll-new .h-area { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-card); padding: 28px 26px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; align-content: start; }
.ll-new .h-row, .ll-new .h-area { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ll-new .h-row:hover, .ll-new .h-area:hover { color: var(--on-brand); background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.ll-new .h-row:hover .h-row-d, .ll-new .h-area:hover .h-area-d, .ll-new .h-area:hover .h-area-proof { color: var(--on-brand-soft); }
.ll-new .h-area:hover .h-area-proof { border-top-color: rgba(255, 255, 255, .3); }
.ll-new .h-area:hover .h-area-proof strong { color: var(--on-brand); }
.h-area-t { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; }
.h-area-d { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); }
.h-area-proof { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-secondary); }
.h-area-proof strong { color: var(--brand); }

/* How we work */
.h-how { padding-top: var(--space-9); padding-bottom: var(--space-9); display: flex; flex-direction: column; gap: 40px; }
.h-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.h-how-item { border-top: 2px solid var(--accent); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.h-how-t { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.h-how-d { font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }

/* Rep Scorecard feature */
/* How we work follows the Rep Scorecard feature on the same background, so a
   rule inside the gutters separates them. */
.h-feature + .h-how { position: relative; }
.h-feature + .h-how::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-strong); }
.h-feature { padding-top: 64px; padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 28px; }
.h-feature-head { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-end; justify-content: space-between; }
.h-feature-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ll-new .h-feature-copy h2 { margin: 0; font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; }
.h-feature-link { align-self: flex-start; font-size: 16px; }
.h-feature-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); max-width: 560px; }
.h-caption { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); border-left: 2px solid var(--line-control); padding-left: 12px; max-width: 300px; }
/* Under the Rep Scorecard graphic, centred like the graphic above it. */
.h-caption--below { border-left: 0; padding-left: 0; max-width: none; text-align: center; margin-top: -12px; }
.h-shot { margin: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-raised); }
.h-shot img { display: block; width: 100%; height: auto; }

/* Offers */
.h-offers-band { background: var(--surface-tint); }
.h-offers { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 40px; }
.h-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ll-new .ll-offer { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 32px; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 12px; align-content: start; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ll-offer-t { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; }
.ll-offer-d { font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
.ll-new .ll-offer:hover { background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.ll-new .ll-offer:hover .ll-offer-t, .ll-new .ll-offer:hover .ll-offer-d { color: var(--on-brand); }

/* What a full time hire spends */
.h-hire { padding-top: var(--space-10); padding-bottom: var(--space-10); display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.h-hire-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.h-hire-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); }
.ll-new .h-hire-copy .ll-btn { align-self: flex-start; }
.h-bars { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.h-bar { display: flex; flex-direction: column; gap: 6px; }
.h-bar-lbl { display: flex; justify-content: space-between; font-size: 14px; }
.h-bar-lbl span:last-child { font-family: var(--font-mono); }
.h-bar--total .h-bar-lbl { font-weight: 600; }
.h-bar-fill { height: 14px; border-radius: 7px; }

/* Proof: the one dark band */
.h-proof-band { background: var(--surface-ink); color: var(--on-brand); }
.h-proof-in { padding-top: var(--space-10); padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 48px; }
.h-quote { margin: 0; padding-left: 72px; position: relative; max-width: 940px; display: flex; flex-direction: column; gap: 22px; }
.h-quote-mark { position: absolute; left: 0; top: -18px; font-family: var(--font-display); font-size: 120px; line-height: 1; color: var(--violet-300); }
.h-quote blockquote { margin: 0; font-family: var(--font-body); font-size: 30px; line-height: 1.45; font-weight: 400; letter-spacing: -0.01em; color: var(--on-brand); }
.h-quote figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.h-quote figcaption span:first-child { font-weight: 600; color: var(--on-brand); }
.h-quote figcaption span:last-child { color: var(--ink-on-dark-soft); }
.h-proof-cols { display: flex; flex-wrap: wrap; gap: 32px 0; border-top: 1px solid var(--line-on-dark); padding-top: 36px; }
.h-proof-col { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 32px 4px 0; }
.h-proof-col + .h-proof-col { border-left: 1px solid var(--line-on-dark); padding-left: 32px; }
.h-stars { display: flex; gap: 3px; }
.h-big { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--on-brand); }
.h-names { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--on-brand); }
.h-soft { font-size: 15px; line-height: 1.5; color: var(--ink-on-dark-soft); }
.ll-new .h-proof-band a { color: var(--on-brand); font-weight: 500; font-size: 15px; padding-top: 4px; text-decoration: underline; text-underline-offset: 3px; }
.ll-new .h-proof-band a:hover { color: var(--on-brand-muted); text-decoration: underline; }

/* Deep Dive */
.h-learn { padding-top: var(--space-10); padding-bottom: var(--space-10); display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; justify-content: space-between; }
.h-learn-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ll-new .h-learn-copy h2 { font-size: 38px; line-height: 1.1; }
.h-learn-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); }
.ll-new .h-learn-copy .ll-btn { align-self: flex-start; margin-top: auto; }
.h-session { flex: 1 1 380px; min-width: 0; min-height: 168px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.h-session-when { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--brand-deep); }
.h-session-t { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
.ll-new .h-session .ll-link { margin-top: auto; padding-top: 6px; }

/* ==========================================================================
   How we price (/pricing)
   ========================================================================== */
.p-h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; }
.p-hero { padding-top: 80px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; justify-content: space-between; }
.p-hero-copy { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.p-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-muted); }
.ll-new .p-crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.ll-new .p-hero h1 { margin: 0; font-size: 48px; line-height: 1.05; letter-spacing: -0.025em; }
.p-sub { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-secondary); max-width: 600px; }

/* Offer cards with a footer line: three subgrid rows, so titles, descriptions
   and the hairline above each footer line up across the row. */
.p-offers { padding-bottom: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ll-new .ll-offer--3 { grid-row: span 3; row-gap: 14px; }
.ll-new .ll-offer--3 .ll-offer-t { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.ll-offer-f { border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.ll-new .ll-offer:hover .ll-offer-f { border-color: rgba(255, 255, 255, .25); color: var(--on-brand-soft); }

.p-band { background: var(--surface-tint); }
.p-band-in { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 56px; }
.p-col { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.p-k { display: block; font-weight: 600; }
.p-v { display: block; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
.p-shapes { margin: 0; padding: 0; list-style: none; }
.p-shapes li { border-top: 1px solid var(--line-strong); padding: 16px 0; display: flex; flex-direction: column; gap: 4px; }
.p-shapes li:last-child { border-bottom: 1px solid var(--line-strong); }
.p-model { flex: 1; margin: 0; padding: 24px 0 0; list-style: none; border-top: 2px solid var(--accent); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-content: space-between; gap: 20px 28px; }
.p-model li { display: flex; flex-direction: column; gap: 4px; }
.p-model .p-v { font-size: 14px; line-height: 1.5; }

/* Why not hire */
.p-hire { padding-top: var(--space-10); padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 28px; }
.p-hire-head { display: flex; flex-direction: column; gap: 10px; }
.p-hire-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); }
.p-table-scroll { overflow-x: auto; }
.p-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; }
/* The mockup's 1 : 1.15 : 0.95 columns, with the gaps folded into the first two. */
.p-table thead th:nth-child(1) { width: 32.5%; }
.p-table thead th:nth-child(2) { width: 39%; }
.p-table thead th { padding: 14px 28px 14px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-muted); vertical-align: bottom; }
.p-table thead th.p-ll-head { padding: 14px 18px; color: var(--on-brand); background: var(--accent); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.p-table tbody th, .p-table tbody td { border-top: 1px solid var(--line); padding: 18px 28px 18px 0; vertical-align: middle; font-weight: 400; }
.p-row-t { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.p-row-d { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-secondary); }
.p-row-d sup, .p-notes sup { font-size: .75em; line-height: 0; }
.p-bar { display: flex; align-items: center; gap: 12px; }
.p-bar-track { position: relative; flex: 1 1 auto; height: 26px; border-radius: 4px; background: var(--hatch-ground); overflow: hidden; }
.p-bar-lost { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--hatch-line) 0 3px, var(--hatch-ground) 3px 8px); }
.p-bar-left { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar-left); border-radius: 4px 0 0 4px; }
.p-pct { flex: 0 0 44px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-secondary); }
.p-total .p-bar-track { height: 34px; }
.p-total .p-bar-left { background: var(--ink); }
.p-total .p-pct { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.p-table tbody td.p-ll { padding: 16px 18px; background: var(--card); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.p-table tbody td.p-ll-end { background: var(--accent); color: var(--on-brand); border-color: var(--accent); border-radius: 0 0 var(--radius-card) var(--radius-card); font-weight: 600; }
.p-ll-in { display: flex; gap: 10px; align-items: center; }
.p-ll-in svg { flex: 0 0 auto; }
.p-ll-in p { margin: 0; font-size: 14px; line-height: 1.5; }
.p-notes { margin: 0; border-top: 1px solid var(--line); padding-top: 16px; font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.p-more { margin: 0; font-size: 15px; }

/* Common questions */
.p-faq { padding-bottom: 88px; display: flex; flex-direction: column; gap: 24px; }
.p-faq-list { border-top: 1px solid var(--line-strong); }
.p-faq details { border-bottom: 1px solid var(--line-strong); padding: 18px 0; }
.p-faq summary { cursor: pointer; }
.p-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ll-new .p-faq summary h3 { display: inline; margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 17px; }
.p-faq details p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-secondary); max-width: 760px; }

/* ==========================================================================
   Specialty Areas: the hub and the area template (/specialty-areas/...)
   ========================================================================== */
.sa-h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; }

/* Hub */
.sa-hub-hero { padding-top: 80px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; }
.ll-new .sa-hub-hero h1 { margin: 0; font-size: 48px; line-height: 1.05; letter-spacing: -0.025em; }
.sa-hub-list { padding-bottom: 88px; }
.sa-hub-list > ul { margin: 0; padding: 0; list-style: none; }
.sa-hub-txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ll-new .sa-hub-txt h2 { margin: 0; font-size: 26px; line-height: 1.2; }

/* Hub rows: each a single link, filled with the brand colour on hover like the
   offer cards. Name and description, the projects, then proof and Explore. */
.sa-hub-list > ul > li + li { margin-top: 16px; }
/* Fixed column proportions, so the columns line up row to row whatever each
   area's content, with a purple hairline between them. */
.ll-new .sa-hub-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 0; padding: 32px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--ink); text-decoration: none; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sa-hub-d { font-size: 16px; line-height: 1.55; color: var(--ink-secondary); max-width: 640px; }
.sa-hub-txt { padding: 0 40px 0 36px; }
.sa-hub-proj, .sa-hub-end { padding: 0 36px 0 40px; border-left: 1px solid var(--connector); }
.sa-hub-proj { display: flex; flex-direction: column; gap: 4px; }
/* A row with no projects (Salesforce & HubSpot Expertise, BI) gives its title
   the empty column, so the logos beside the title fit on its line. */
.sa-hub-proj.is-empty { display: none; }
.ll-new .sa-hub-row:has(.is-empty) .sa-hub-txt { grid-column: span 2; }
.ll-new .sa-hub-row:has(.is-empty) .sa-hub-d { max-width: 460px; }
.sa-hub-proj--logos { justify-content: center; }
.sa-hub-logos { display: flex; align-items: center; gap: 24px; }
.sa-hub-logos img { display: block; width: 64px; height: 64px; }
.ll-new .sa-hub-row:hover .sa-hub-proj, .ll-new .sa-hub-row:hover .sa-hub-end { border-left-color: rgba(255, 255, 255, .3); }
.sa-hub-k { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--brand-deep); }
.sa-hub-g { font-size: 14px; line-height: 1.45; color: var(--ink-secondary); }
.sa-hub-end { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sa-hub-proof { font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }
.sa-hub-proof strong { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--brand); }
.sa-hub-go { font-weight: 500; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.ll-new .sa-hub-row:hover { background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-hover); transform: translateY(-3px); color: var(--on-brand); }
.ll-new .sa-hub-row:hover h2, .ll-new .sa-hub-row:hover .sa-hub-proof strong, .ll-new .sa-hub-row:hover .sa-hub-go { color: var(--on-brand); }
.ll-new .sa-hub-row:hover .sa-hub-d, .ll-new .sa-hub-row:hover .sa-hub-g, .ll-new .sa-hub-row:hover .sa-hub-proof, .ll-new .sa-hub-row:hover .sa-hub-k { color: var(--on-brand-soft); }

/* Area hero: copy on the left, the area's diagram on the right */
.sa-hero { padding-top: 72px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.sa-hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ll-new .sa-hero h1 { margin: 0; font-size: 48px; line-height: 1.05; letter-spacing: -0.025em; }
.sa-intro { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-secondary); max-width: 540px; }
.sa-hero--solo .sa-hero-copy { flex-basis: 100%; }
.sa-diagram { flex: 1 1 400px; min-width: 0; max-width: 420px; margin-left: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 28px 20px; }
.sa-diagram svg { display: block; width: 100%; height: auto; }
/* Holds the diagram's space on areas whose diagram is still to come. */
.sa-diagram--ph { min-height: 440px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border: 1.5px dashed var(--connector); font-size: 14px; color: var(--ink-muted); }
/* On a short desktop window (a laptop with browser toolbars and the Dock is
   about 620px tall) the hero, diagram included, still fits on screen: its
   spacing, headline and diagram scale with the window's height and reach
   full size from about 900px up. */
@media (min-width: 1081px) {
  .sa-hero { padding-top: clamp(28px, 8svh, 72px); padding-bottom: clamp(32px, 9.8svh, 88px); }
  .sa-hero-copy { gap: clamp(16px, 2.7svh, 24px); }
  .ll-new .sa-hero h1 { font-size: clamp(40px, 5.4svh, 48px); }
  .sa-diagram { max-width: clamp(340px, calc((100svh - 260px) * 480 / 440 + 56px), 420px); padding: clamp(16px, 3.1svh, 28px) clamp(16px, 3.1svh, 28px) clamp(12px, 2.2svh, 20px); }
  .sa-diagram--ph { min-height: clamp(300px, calc(100svh - 300px), 440px); }
}
/* CRM audit card in the Salesforce & HubSpot Expertise hero: one real audit,
   client masked, in the three steps of the audit section below it. */
.sa-audit-fig { flex: 1 1 400px; min-width: 0; max-width: 420px; margin: 0 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
.sa-diagram.sa-diagram--audit { flex: none; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; box-shadow: 0 24px 60px -36px rgba(20, 12, 40, .45); }
.sa-audit-cap { font-size: 13px; line-height: 1.5; color: var(--ink-muted); text-align: center; }
.ca { font-size: 11.5px; line-height: 1.35; color: var(--ink); }
.ca :where(p, ul, ol) { margin: 0; padding: 0; list-style: none; }
.ca-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ca-top img { display: block; width: 22px; height: 18px; flex: none; }
.ca-mask { display: inline-block; width: 64px; height: 7px; margin-left: 2px; border-radius: 3px; background: var(--line-strong); vertical-align: 1px; }
.ca-step { padding: 10px 16px; }
.ca-step + .ca-step { border-top: 1px solid var(--line); }
.ca-h { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; }
.ca-h b { width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; line-height: 17px; text-align: center; flex: none; }
.ca-h span { margin-left: auto; font-family: var(--font-body); font-size: 10px; font-weight: 400; color: var(--ink-muted); }
.ca-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; color: var(--ink-secondary); }
.ca-stats b { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); }
.ca-rows li { display: grid; grid-template-columns: 168px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 2px 0; }
.ca-rows li > span:first-child { white-space: nowrap; }
.ca-rows li > span:last-child { font-size: 10px; color: var(--ink-muted); text-align: right; }
.ca-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; }
.ca-bar i { display: block; }
.ca-g { --c: #3BAA74; } .ca-r { --c: #F2B53C; } .ca-c { --c: #E5484D; } .ca-n { --c: #CFC9DB; }
.ca-bar i { background: var(--c); }
.ca-key { display: flex; gap: 12px; margin-top: 5px; font-size: 10px; color: var(--ink-secondary); }
.ca-key span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--c); }
.ca-note { margin-top: 8px; padding: 6px 9px; border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0; background: var(--accent-soft); font-size: 10.5px; font-style: italic; color: var(--surface-ink); }
.ca-note b { font-style: normal; color: var(--brand); }
.ca-fixes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ca-fixes li { display: flex; gap: 7px; padding: 6px 9px; border-radius: 7px; background: #F6F3FB; }
.ca-fixes b { font-family: var(--font-display); font-size: 11px; color: var(--accent); }
.ca-fixes span { display: flex; flex-direction: column; font-weight: 600; }
.ca-fixes em { font-size: 10px; font-style: normal; font-weight: 400; color: var(--ink-muted); }
@media (max-width: 420px) { .ca-stats { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 24px; } .ca-rows li { grid-template-columns: 182px minmax(0, 1fr) 44px; } }

/* Funnel report in the Attribution hero, drawn as a HubSpot report: its dark
   navigation bar, link blue, chart palette and plain data table. */
.fr { font-size: 11px; line-height: 1.35; color: #33475B; background: #fff; }
.fr :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.fr-nav { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: #213343; }
.fr-nav img { display: block; width: 16px; height: 16px; filter: brightness(0) saturate(100%) invert(62%) sepia(64%) saturate(2125%) hue-rotate(327deg) brightness(101%) contrast(101%); }
.fr-search { flex: 1; max-width: 180px; padding: 3px 10px; border-radius: 3px; background: #2E475D; font-size: 10px; color: #99AFC4; }
.fr-av { width: 18px; height: 18px; margin-left: auto; border-radius: 50%; background: #516F90; }
.fr-head { padding: 10px 16px 8px; border-bottom: 1px solid #DFE3EB; background: #F5F8FA; }
.fr-crumb { font-size: 10px; font-weight: 600; color: #0091AE; }
.fr-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px !important; font-size: 13.5px; font-weight: 600; color: #33475B; }
.fr-btn { padding: 3px 9px; border: 1px solid #CBD6E2; border-radius: 3px; background: #EAF0F6; font-size: 10px; font-weight: 600; color: #506E91; }
.fr-filters { display: flex; gap: 14px; margin-top: 6px !important; font-size: 10px; font-weight: 600; color: #0091AE; }
.fr-filters span::after { content: ''; display: inline-block; width: 4px; height: 4px; margin-left: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.fr-chart { padding: 10px 16px 6px; }
.fr-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px !important; font-size: 9.5px; color: #516F90; }
.fr-key span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 1px; background: var(--c); vertical-align: -1px; }
.fr-cols, .fr-x { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); }
.fr-cols { align-items: end; height: 122px; border-bottom: 1px solid #CBD6E2; background: repeating-linear-gradient(to top, transparent 0 29px, #EEF2F6 29px 30px); }
.fr-col { display: flex; flex-direction: column; width: 100%; }
.fr-col i { display: block; background: var(--c); }
.fr-step { align-self: center; text-align: center; }
.fr-step span { display: inline-block; padding: 1px 3px; border: 1px solid #CBD6E2; border-radius: 2px; background: #fff; font-size: 8.5px; font-weight: 600; color: #33475B; }
.fr-x li { min-width: 0; margin: 0 -15px; padding-top: 4px; font-size: 9px; line-height: 1.2; text-align: center; color: #516F90; }
.fr-cols, .fr-x { column-gap: 2px; }
.fr-s1 { --c: #00A4BD; } .fr-s2 { --c: #FF7A59; } .fr-s3 { --c: #00BDA5; } .fr-s4 { --c: #F5C26B; }
.fr-table { width: calc(100% - 32px); margin: 6px 16px 14px; border-collapse: collapse; font-size: 10px; }
.fr-table th { padding: 5px 6px; border: 1px solid #DFE3EB; background: #F5F8FA; font-weight: 600; text-align: left; color: #33475B; }
.fr-table td { padding: 3px 6px; border: 1px solid #DFE3EB; }
.fr-table td:not(:first-child), .fr-table th:not(:first-child) { text-align: right; }
.fr-table td:first-child { color: #0091AE; }

/* Opportunity record in the Pipeline hero, drawn as Salesforce Lightning: the
   global header, the app's tab bar, the record header, the stage path and
   Guidance for Success. Salesforce's own system font stack, not the site's. */
.sf { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 11px; line-height: 1.35; color: #181818; background: #fff; }
.sf :where(p, ul, ol, dl, dd) { margin: 0; padding: 0; list-style: none; }
.sf-global { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-bottom: 1px solid #E5E5E5; }
.sf-global img { display: block; width: 30px; height: 21px; }
.sf-search { flex: 1; max-width: 190px; margin: 0 auto; padding: 4px 10px; border: 1px solid #C9C9C9; border-radius: 4px; font-size: 10px; color: #747474; }
.sf-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #747474; }
.sf-av { width: 20px; height: 20px; border-radius: 50%; background: #B0C4DF; }
.sf-app { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 28px; border-bottom: 3px solid #0176D3; font-size: 10.5px; color: #181818; }
.sf-app b { font-size: 13px; font-weight: 400; margin-right: 4px; }
.sf-app .is-on { align-self: stretch; display: flex; align-items: center; margin-bottom: -3px; border-bottom: 3px solid #0176D3; box-shadow: inset 0 -3px 0 #0176D3; background: #F3F3F3; padding: 0 6px; }
.sf-waffle { width: 14px; height: 14px; background: radial-gradient(circle, #747474 1.4px, transparent 1.6px) 0 0 / 4.7px 4.7px; }
.sf-page { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #EEF4FF; }
.sf-card { padding: 8px 10px; border: 1px solid #DDDBDA; border-radius: 4px; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, .05); }
.sf-hd-top { display: flex; align-items: center; gap: 8px; }
.sf-hd-top small { display: block; font-size: 10px; color: #444; }
.sf-hd-top b { font-size: 13px; font-weight: 700; }
.sa-diagram .sf-icon svg { min-width: 0; }
.sf-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: #FF5D2D; flex: none; }
.sf-hl { display: flex; gap: 18px; margin-top: 6px !important; }
.sf dt { font-size: 9.5px; color: #444; }
.sf dd { font-size: 11px; }
.sf-link { color: #0B5CAB; }
.sf-path { display: flex; gap: 2px; }
.sf-path li { flex: 1; display: flex; align-items: center; justify-content: center; height: 22px; padding: 0 6px 0 10px; background: #F3F3F3; color: #181818; font-size: 9.5px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 7px 50%); }
.sf-path li:first-child { border-radius: 12px 0 0 12px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.sf-path li:last-child { border-radius: 0 12px 12px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7px 50%); }
.sf-path .is-done { background: #2E844A; }
.sf-path .is-cur { background: #0B5CAB; color: #fff; font-weight: 700; }
.sf-tick { width: 8px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.sf-h { margin-bottom: 4px !important; font-size: 11px; font-weight: 700; }
.sf-keys { margin-top: 8px; }
.sf-keys dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 22px; }
.sf-gfs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; margin-top: 8px; padding: 7px 10px; border-radius: 4px; background: #F3F3F3; }
.sf-gfs .sf-h { grid-column: 1 / -1; }
.sf-k { margin-bottom: 1px !important; font-size: 9.5px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .04em; }
.sf-gfs li { position: relative; padding: 1.5px 0 1.5px 15px; font-size: 10px; }
.sf-gfs li::before { content: ''; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border: 1px solid #939393; border-radius: 2px; background: #fff; }
.sf-gfs li.is-ok::before { border-color: #0176D3; background: #0176D3; }
.sf-gfs li.is-ok::after { content: ''; position: absolute; left: 3px; top: 5px; width: 5px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.sf-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sf-err { flex: 1; padding: 5px 8px; border-radius: 4px; background: #FEF1EE; color: #BA0517; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-act { flex: none; }
@media (max-width: 420px) { .sf-foot { flex-wrap: wrap; justify-content: flex-end; } .sf-err { flex-basis: 100%; white-space: normal; } }
.sf-act span { display: block; padding: 5px 8px; border-radius: 4px; background: #C9C9C9; color: #fff; font-size: 10px; font-weight: 700; }

/* A featured result with no screenshot spans the row. */
.sa-feature-copy:only-child { flex-basis: 100%; max-width: 760px; }
.sa-app { padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 32px; }
.sa-app-body { border-top: 2px solid var(--accent); padding-top: 28px; }
.sa-app-body p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-secondary); max-width: 760px; }

/* Problems */
.sa-problems { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; }
.sa-problems .sa-h2 { max-width: 940px; }
.sa-problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* Subgrid rows, so titles and descriptions line up across the row however
   many lines each title takes. */
.sa-problem { border-top: 2px solid var(--accent); padding-top: 18px; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; align-content: start; }
.ll-new .sa-problem h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.sa-problem p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }

/* Projects */
.sa-projects { padding-top: var(--space-10); padding-bottom: 64px; display: flex; flex-direction: column; gap: 40px; }
.sa-projects .sa-h2 { max-width: 820px; }
.sa-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px 24px; }
.sa-group { border-top: 2px solid var(--accent); padding-top: 18px; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 4px; align-content: start; }
.sa-group-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--brand-deep); }
.sa-project { display: contents; }
.sa-group-label { margin-bottom: 12px !important; }
.sa-project + .sa-project h3 { margin-top: 12px !important; }
.ll-new .sa-project h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.sa-project p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-secondary); }
.sa-note { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); max-width: 640px; }

/* Tools band: the label sits on the content edge, the logos run to the window edge */
.sa-tools { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.sa-tools-label { flex: 0 0 auto; padding: 0 28px 0 max(var(--gutter), calc((100% - var(--container)) / 2)); font-size: 15px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
.sa-tools-wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 28px 0; }
/* 14 tools: a longer loop keeps the scroll at the speed the 8-tool banner had. */
.sa-tools-wrap .ll-marquee { animation-duration: 49s; }
.sa-tool { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 40px; height: 40px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-muted); white-space: nowrap; }
.sa-tool img { display: block; }
.sa-tools-row { display: flex; flex-wrap: wrap; align-items: center; }
.sa-tools-row > [aria-hidden] { display: none; }
.sa-tools-row .sa-tool { padding: 0 32px 0 0; margin-right: 8px; }

/* Results */
.sa-results { padding-top: 88px; padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 32px; }
.sa-results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ll-new .sa-feature { text-decoration: none; color: var(--ink); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; border-top: 2px solid var(--accent); padding-top: 28px; }
.ll-new .sa-feature:hover { color: var(--ink); }
.sa-feature-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sa-feature-tag { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--ink-muted); }
.sa-feature-t { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.sa-feature-m { font-size: 17px; line-height: 1.55; color: var(--ink-secondary); }
.sa-feature-m strong, .sa-result-m strong { color: var(--brand); }
.sa-read { font-size: 15px; font-weight: 500; color: var(--brand-deep); }
.sa-result .sa-read { font-size: 14px; }
.ll-new .sa-feature:hover .sa-read, .ll-new .sa-result:hover .sa-read { text-decoration: underline; text-underline-offset: 4px; }
.sa-shot-ph { flex: 1.3 1 440px; min-width: 0; height: 280px; border: 1px dashed var(--connector); border-radius: var(--radius-card); background: var(--surface-tint); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 14px; color: var(--ink-muted); }
.sa-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.ll-new .sa-result { text-decoration: none; color: var(--ink); border-top: 1px solid var(--line-strong); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ll-new .sa-result:hover { color: var(--ink); }
.sa-result-m { font-size: 16px; line-height: 1.5; }
.sa-result-d { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); }

/* Audit: the page's one dark band */
.sa-audit-band { background: var(--surface-ink); color: var(--on-brand); }
.sa-audit { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.sa-audit-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ll-new .sa-audit .sa-h2 { color: var(--on-brand); }
.sa-audit-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-brand-soft); }
.sa-steps { flex: 1.4 1 520px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line-on-dark); border-radius: var(--radius-card); overflow: hidden; }
.sa-steps li { background: var(--surface-ink); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.sa-step-t { font-family: var(--font-display); font-size: 22px; }
.sa-step-d { font-size: 14px; color: var(--on-brand-soft); }

/* Closing CTA, then the other areas */
.sa-cta-gap { height: var(--space-10); }
.sa-others { margin-top: -40px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 16px; }
.sa-others-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.sa-others-list { display: flex; flex-wrap: wrap; gap: 12px; }
.ll-new .sa-other { padding: 12px 20px; font-weight: 400; }

/* ==========================================================================
   Engagement Types (/how-we-work): one section per type
   ========================================================================== */
.hw-sec { scroll-margin-top: 16px; }
.hw-in { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 56px; }
.hw-head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.hw-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--brand-deep); }
.hw-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-secondary); }
.hw-block { display: flex; flex-direction: column; gap: 24px; }
.ll-new .hw-h3 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.hw-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 32px; }
.hw-role { border-top: 2px solid var(--accent); padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.hw-role p, .hw-security p, .hw-terms p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
.hw-role .hw-role-k { font-size: 13px; font-weight: 600; color: var(--brand-deep); }
.ll-new .hw-role h4, .ll-new .hw-security h4 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.hw-role .hw-role-s { font-size: 14px; color: var(--ink-muted); margin-bottom: 4px; }
.hw-specs { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.hw-specs li { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.hw-security { border-top: 1px solid var(--line-strong); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.hw-intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); max-width: 760px; }
.hw-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px 40px; }
.hw-col-t { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.hw-tag { margin-left: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--accent); }
.hw-col ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.hw-col li { border-bottom: 1px solid var(--line-strong); padding: 12px 0; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
.hw-col--us ul { border-top: 2px solid var(--accent); }
.hw-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px 40px; }
.hw-terms p { font-size: 16px; }
.hw-price { margin: 0; font-size: 15px; color: var(--ink-secondary); }
.hw-price .ll-link { margin-left: 8px; }
/* Specialist Projects: the four steps as a numbered timeline, the audit
   filled in, and each Specialty Area as a card linking to its projects. */
.sp-audit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 24px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sp-audit-txt { display: flex; flex-direction: column; gap: 6px; }
.ll-new .sp-audit .hw-h3 { font-size: 22px; }
.sp-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-steps li { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.sp-steps li:not(:last-child)::after { content: ''; width: 28px; height: 2px; margin-left: 4px; background: var(--line-strong); }
.sp-n { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--card); font-size: 14px; color: var(--brand); }
.sp-steps .is-first .sp-n { border-color: var(--accent); background: var(--accent); color: #fff; }
.sp-areas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-area { height: 100%; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 8px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--ink); text-decoration: none; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ll-new .sp-area-t { color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; }
.sp-area-d { grid-column: 1; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
.sp-area-go { grid-column: 2; grid-row: 1; color: var(--brand); }
.ll-new .sp-area:hover { background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-hover); transform: translateY(-3px); color: var(--on-brand); }
.ll-new .sp-area:hover .sp-area-d { color: var(--on-brand-soft); }
.ll-new .sp-area:hover .sp-area-t { color: var(--on-brand); }
.ll-new .sp-area:hover .sp-area-go { color: var(--on-brand); }
@media (max-width: 1080px) { .sp-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .sp-areas { grid-template-columns: minmax(0, 1fr); }
  .sp-steps { gap: 10px 18px; }
  .sp-steps li:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ll-new .sp-area:hover, .ll-new .h-row:hover, .ll-new .h-area:hover { transform: none; } }

/* Engagement Team chart: the two leads in a column, each with its note
   beside it, joined by a dotted connector down to the technical team. */
.et-head { display: flex; flex-direction: column; gap: 8px; }
.et-sub { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-secondary); }
.et { display: grid; grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr); column-gap: 32px; align-items: center; }
.et-box { grid-column: 2; display: flex; align-items: center; justify-content: center; min-height: 60px; border-radius: var(--radius-card); font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--on-brand); box-shadow: var(--shadow-card); }
.et-box--exec { grid-row: 1; background: var(--surface-ink); }
.et-box--lead { grid-row: 3; background: var(--brand); }
.et-note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
.et-note strong { color: var(--ink); }
.et-note--left { grid-column: 1; grid-row: 1; text-align: right; }
.et-note--right { grid-column: 3; grid-row: 3; }
.et-link { grid-column: 2; grid-row: 2; justify-self: center; width: 0; height: 34px; border-left: 1.5px dashed var(--connector); }
.et-link--down { grid-row: 4; height: 26px; }
.et-team-label { grid-column: 2; grid-row: 5; margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
/* Seven specialist cards; title, description and tools share rows across
   the cards (subgrid), so the tool tags line up. */
.et-team { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 12px; }
.et-team > li { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 16px 14px 18px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
.et-tools { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; align-content: flex-start; }
.et-tools li { display: flex; align-items: center; gap: 6px; min-height: 30px; font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink-secondary); white-space: nowrap; }
.et-tools img { display: block; width: auto; height: 20px; max-width: 100%; }
.et-tools .et-tool--mark img { height: 30px; }
.et-tools .et-tool--icon img { height: 22px; }
.ll-new .et-team h4 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.et-team p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-secondary); }
.et-experts { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-secondary); max-width: 960px; }
.et-experts strong { color: var(--ink); }
@media (max-width: 1080px) { .et { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); } .et-team { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; } }

/* Hire or fractional: each column a panel that darkens on hover. */
.hw-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px 28px 12px; transition: background-color .2s ease, border-color .2s ease; }
.hw-col:hover { background: var(--accent-soft); border-color: var(--connector); }
.hw-col li:last-child { border-bottom: 0; }

/* ==========================================================================
   Services: CRM Foundations (its own view), BI & Revenue Analytics, Terrain Apps
   ========================================================================== */
/* CRM Foundations: one panel each for Salesforce and HubSpot */
.sv-platforms { padding-top: 88px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 36px; }
/* CRM Foundations: the tools banner under the platform cards */
.sv-tools { margin-top: 64px; }
.sv-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.sv-platform { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.sv-platform-head { display: flex; align-items: center; gap: 12px; }
.sv-platform-head img { display: block; }
.ll-new .sv-platform h3 { margin: 0; font-size: 24px; line-height: 1.2; }
.sv-platform p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
.sv-platform ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.sv-platform li { border-bottom: 1px solid var(--line-strong); padding: 12px 0; font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }
.sv-platform li strong { font-weight: 600; color: var(--ink); }

/* CRM Foundations: the hero's two intro lines */
.sv-intro { display: flex; flex-direction: column; gap: 12px; }

/* CRM Foundations: the audit and what comes after, two equal columns on the
   dark band with a rule between them and no boxes */
.sv-audit { padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sv-audit-col { display: flex; flex-direction: column; gap: 16px; }
.sv-audit-col:first-child { padding-right: 48px; }
.sv-audit-col + .sv-audit-col { padding-left: 48px; border-left: 1px solid var(--line-on-dark); }
.ll-new .sv-audit .sa-h2 { color: var(--on-brand); font-size: 32px; margin-bottom: 4px; }
.sv-audit p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-brand-soft); }
.sv-audit p strong { color: var(--on-brand); font-weight: 600; }
.sv-audit-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sv-audit-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--on-brand-soft); }
.sv-audit-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sv-audit-list li strong { color: var(--on-brand); font-weight: 600; }
.sv-audit .sv-audit-last { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-on-dark); color: var(--on-brand); }
.ll-new .sv-audit a { color: var(--on-brand); text-decoration: underline; text-underline-offset: 3px; }
.ll-new .sv-audit a:hover { color: var(--on-brand-soft); }

/* CRM Foundations: what AI needs from your CRM */
.sv-ai { padding-top: var(--space-10); padding-bottom: 8px; display: flex; flex-direction: column; gap: 32px; }
.sv-ai-head { display: flex; flex-direction: column; gap: 16px; }
.sv-ai-head p { margin: 0; max-width: 820px; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); }
.sv-ai-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.sv-ai-list li { border-bottom: 1px solid var(--line-strong); padding: 18px 0; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
.sv-ai-list li strong { font-weight: 600; color: var(--ink); }
.sv-ai-close { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.sv-ai-pov { align-self: flex-start; margin-top: -16px; font-size: 16px; }

/* CRM Foundations: how you work with us, a short band */
.sv-how { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: flex-start; }
.sv-how .sa-h2 { flex: 1 1 320px; font-size: 32px; }
.sv-how-body { flex: 1.4 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sv-how-body p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); max-width: 620px; }

/* CRM Foundations: the FAQ follows a band, so it needs its own top space */
.sv-faq { padding-top: var(--space-10); }
@media (max-width: 760px) {
  .sv-audit { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .sv-audit-col:first-child { padding-right: 0; padding-bottom: 40px; }
  .sv-audit-col + .sv-audit-col { padding-left: 0; padding-top: 40px; border-left: 0; border-top: 1px solid var(--line-on-dark); }
  .ll-new .sv-audit .sa-h2, .sv-how .sa-h2 { font-size: 28px; }
  .sv-ai, .sv-faq { padding-top: var(--space-9); }
  .sv-how { padding-top: 48px; padding-bottom: 48px; }
}

/* Shared by the BI and Terrain sections: a heading with its paragraph */
.bi-head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.bi-p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); }

/* The warehouse diagram, on the lilac band under the hero */
.bi-flow { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 28px; }
.ll-new .tr-hero .p-crumbs, .ll-new .tr-hero .p-crumbs a { color: var(--on-brand-soft); }

/* A quiet second button on a dark band */
.ll-btn--on-dark, .ll-new .ll-btn--on-dark { border: 1px solid rgba(255, 255, 255, .45); color: var(--on-brand); padding: 11px 20px; }
.ll-btn--on-dark:hover, .ll-new .ll-btn--on-dark:hover { border-color: var(--on-brand); background: rgba(255, 255, 255, .1); color: var(--on-brand); }

.bi-integrity { padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 64px; align-items: start; }
.bi-integrity-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* Followed by the results on the same white, so the gap is the results'
   own top padding. */
.sa-problems.bi-practice { padding-bottom: 0; }
.bi-disc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Not links, so no hover: a hover would read as clickable. */
.bi-disc li { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.bi-disc-i { width: 40px; height: 40px; color: var(--brand); }
.bi-disc-t { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* Terrain hero: the flythrough canvas under a wash that keeps the copy legible */
.tr-hero { position: relative; overflow: hidden; background: var(--surface-ink); color: var(--on-brand); }
.tr-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tr-hero-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(135% 105% at 22% 46%, rgba(28, 20, 48, .9) 0%, rgba(28, 20, 48, .55) 40%, rgba(28, 20, 48, .08) 76%); }
.tr-hero-in { position: relative; z-index: 1; min-height: 520px; padding-top: 96px; padding-bottom: 120px; }
.ll-new .tr-hero h1 { color: var(--on-brand); font-size: 64px; }
.tr-hero .sa-intro { color: var(--on-brand-soft); }
@media (min-width: 1081px) {
  .tr-hero-in { min-height: clamp(400px, calc(100svh - 160px), 520px); padding-top: clamp(40px, 10.7svh, 96px); padding-bottom: clamp(48px, 13.3svh, 120px); }
}

/* Terrain */
.tr-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.tr-day { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.tr-day p:last-child { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
.tr-rs { scroll-margin-top: 16px; padding-top: 88px; }
.tr-req { margin-top: 24px; background: var(--surface-tint); border-radius: var(--radius-card); padding: 28px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.tr-req-copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }
.tr-req-copy p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }

/* ==========================================================================
   Results: case studies (/case-studies and each study) and G2 reviews
   ========================================================================== */
.cs-hero { padding-top: 80px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; }
.ll-new .cs-hero h1 { margin: 0; max-width: 980px; font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; }
.cs-hero h1 span { color: var(--brand); }
.cs-list { padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 20px; }
.cs-tools { display: flex; flex-direction: column; gap: 16px; }
.cs-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ll-new .cs-filter { padding: 9px 16px; border: 1px solid var(--line-control); border-radius: var(--radius-button); font-size: 14px; color: var(--ink); text-decoration: none; background: var(--card); }
.ll-new .cs-filter:hover { border-color: var(--brand); color: var(--ink); }
.ll-new .cs-filter.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cs-search { position: relative; max-width: 480px; }
.cs-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.cs-search input { width: 100%; box-sizing: border-box; padding: 12px 42px; border: 1px solid var(--line-control); border-radius: var(--radius-button); background: var(--card); font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.cs-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); }
.cs-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cs-count { margin: 8px 0 0; font-size: 14px; color: var(--ink-muted); }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ll-new .cs-card { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, box-shadow .2s, transform .2s; }
/* Hover turns the card brand purple, as the Specialty Areas rows do. */
.ll-new .cs-card:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.ll-new .cs-card:hover .cs-card-tag, .ll-new .cs-card:hover .cs-card-d { color: var(--on-brand-soft); }
.ll-new .cs-card:hover .sa-read { color: var(--on-brand); text-decoration: underline; text-underline-offset: 4px; }
.cs-card-tag { font-size: 13px; font-weight: 600; color: var(--brand-deep); }
.cs-card-t { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.cs-card-d { flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--ink-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card .sa-read { font-size: 14px; }
.cs-empty { margin: 0; font-size: 16px; color: var(--ink-secondary); }
.cs-compare { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; }
.cs-compare-scroll { overflow-x: auto; }
.cs-table { min-width: 760px; width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line-strong); font-size: 14.5px; }
.cs-table th, .cs-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cs-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-muted); background: var(--surface-tint); }
.cs-table tbody th { font-weight: 500; }
.ll-new .cs-table a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--connector); text-underline-offset: 3px; }
.ll-new .cs-table a:hover { text-decoration-color: var(--brand); }
.cs-table td { color: var(--ink-secondary); }
.cs-table td:last-child { white-space: nowrap; }

/* A study: its heading, then its text in a reading column on the page edge */
.cs-art-head { padding-top: 72px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 18px; }
.ll-new .cs-art-head h1 { margin: 0; max-width: 900px; font-size: 44px; line-height: 1.1; letter-spacing: -0.025em; }
.cs-art-head .p-sub { max-width: 760px; }
.cs-byline { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; font-size: 14px; color: var(--ink-muted); max-width: 760px; }
.cs-byline span:first-child { font-weight: 600; color: var(--ink-secondary); }
.cs-art-body { padding-bottom: var(--space-10); }
/* Kim, 27 October 2026: a case study reads as one column centred on the page,
   white space either side, with the title, dek, byline and body sharing its
   left edge. The wrapper keeps the site width; the column inside it centres. */
.ll-new article > .cs-art-head > *, .ll-new .cs-art-body > .ll-cs-article { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; }
/* The bodies keep their own markup; this brings their type and colours onto
   the design system's. */
.ll-new .ll-cs-article { max-width: 760px; font-family: var(--font-body); color: var(--ink-secondary); font-size: 18px; }
.ll-new .ll-cs-article h2, .ll-new .ll-cs-article h3, .ll-new .ll-cs-article h4 { font-family: var(--font-display); color: var(--ink); }
.ll-new .ll-cs-article strong { color: var(--ink); }
.ll-new .ll-cs-article a { color: var(--brand); }
.ll-new .ll-cs-article li::marker { color: var(--brand); }
.ll-new .ll-cs-article blockquote { border-left-color: var(--accent); background: var(--surface-tint); }
.ll-new .ll-cs-article th { background: var(--surface-tint); }
/* The case study format from the reference study (Kim, 27 October 2026,
   ai-use-case-study PDF): the About section as a tinted card that ends on
   the headline numbers, the numbers in The Results as tiles, a callout box,
   and a Before / After table with an arrow column. The lilac to blue wash is
   the PDF's; it has no token. */
.ll-new .ll-cs-intro { margin: 0 0 56px; padding: 34px 36px 36px; border-radius: 18px; background: linear-gradient(135deg, #EEE6FB 0%, #E5EBFB 100%); border: 1px solid #DCD0F3; box-shadow: 0 14px 34px -26px rgba(28, 20, 48, .45); }
.ll-new .ll-cs-intro h2 { margin-top: 0; }
.ll-new .ll-cs-intro > p:last-of-type { margin-bottom: 0; }
.ll-new .ll-cs-intro > p.ll-cs-intro-lead { margin: 28px 0 22px; font-weight: 700; color: var(--ink); }
.ll-new .ll-cs-intro .ll-cs-stat-row { margin: 0; gap: 20px 28px; }
.ll-new .ll-cs-intro .ll-cs-stat { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.ll-new .ll-cs-intro > .ll-cs-stat { margin-top: 0; }
.ll-new .ll-cs-stat { background: linear-gradient(135deg, #EEE6FB 0%, #E5EBFB 100%); border: 1px solid #DCD0F3; border-radius: 14px; box-shadow: 0 8px 22px -18px rgba(28, 20, 48, .4); padding: 22px 24px; gap: 10px; }
.ll-new .ll-cs-stat-label { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; line-height: 1.45; color: var(--accent); }
.ll-new .ll-cs-stat-value { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.ll-new .ll-cs-aside { margin: 44px 0; padding: 28px 32px; border-radius: 0 16px 16px 0; border-left: 3px solid var(--accent); background: linear-gradient(135deg, #F3EEFC 0%, #EEF1FC 100%); }
.ll-new .ll-cs-aside h3 { margin-top: 0; }
.ll-new .ll-cs-aside p:last-child { margin-bottom: 0; }
.ll-new .ll-cs-article table:has(thead th:nth-child(2):empty) { display: table; }
.ll-new .ll-cs-article table:has(thead th:nth-child(2):empty) td:nth-child(2) { width: 32px; text-align: center; vertical-align: middle; color: var(--ink-muted); }
.ll-new .ll-cs-article td { font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) {
  .ll-new .ll-cs-intro { padding: 24px 22px 26px; margin-bottom: 44px; }
  .ll-new .ll-cs-aside { padding: 22px 22px; }
  .ll-new .ll-cs-article table:has(thead th:nth-child(2):empty) { display: block; }
}
.cs-more { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; }

/* G2 reviews */
.rv-hero { padding-top: 72px; padding-bottom: 48px; display: flex; align-items: center; gap: 28px; }
.rv-badge { flex: none; width: auto; height: 104px; }
.rv-hero-copy { display: flex; flex-direction: column; gap: 12px; }
.ll-new .rv-hero h1 { margin: 0; font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; }
.rv-hero-copy p { margin: 0; }
.rv-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; color: var(--ink-secondary); }
.rv-stars { display: inline-flex; gap: 1px; color: var(--brand); }
.rv-wall-band { background: var(--surface-tint); }
.rv-wall { padding-top: 64px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 40px; }
.rv-more { margin: 0; }
.rv-proof-band { background: var(--card); }
.rv-proof { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.rv-label { margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.rv-soup { width: 100%; margin-top: 8px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.rv-soup-row { display: flex; width: max-content; animation: ll-marquee 96s linear infinite; }
.rv-soup-row--rev { animation-name: ll-marquee-rev; animation-duration: 110s; }
.rv-soup-cell { flex: none; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 30px; }
.rv-soup-cell img { max-height: 40px; max-width: 170px; width: auto; height: auto; object-fit: contain; display: block; }
.rv-medals { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 22px; }
.rv-medals img { display: block; height: auto; filter: drop-shadow(0 10px 22px rgba(28, 20, 48, .14)); }
.rv-medals--sm { gap: 14px; }

/* ==========================================================================
   Company and Deep Dive: Why work with us, About and team, Learning Platform
   ========================================================================== */
/* Each card's heading, paragraph and list share rows with the other cards
   (subgrid), so the three lists start on the same line. */
.wu-cards { padding-bottom: 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.wu-card { border-top: 2px solid var(--accent); padding-top: 20px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
.ll-new .wu-card h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.wu-card > p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
.wu-card ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wu-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.wu-card li svg { flex: none; margin-top: 2px; color: var(--brand); }
.wu-refs { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; }
/* Referrals: three points on the page's usual top rules, then the investors
   in one row underneath */
/* Chelsea Zhang's quote (Brooke's feedback, Kim, 27 October 2026). */
.wu-quote { margin: 0; padding: 28px 32px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-card) var(--radius-card) 0; display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.wu-quote blockquote { margin: 0; }
.wu-quote blockquote p { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.45; color: var(--ink); }
.wu-quote figcaption { font-size: 15px; color: var(--ink-secondary); }
.wu-quote figcaption strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .wu-quote { padding: 22px 20px; } .wu-quote blockquote p { font-size: 18px; } }
.wu-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.wu-names-k { margin: 0; font-size: 14px; font-weight: 600; color: var(--brand-deep); }
.wu-names ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.wu-names li { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.wu-g2 { margin: 16px 0 0; font-size: 16px; color: var(--ink-secondary); }
.ll-new .wu-g2 a:not(.ll-link) { color: var(--ink); }
.wu-g2 .ll-link { margin-left: 8px; }
.wu-bench { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.wu-bench .bi-head { flex: 1 1 380px; }
.wu-bench .tf-col { padding-top: 0; }

/* The team photos, under the team chart */
.wu-team { --ab-s: 80px; flex-basis: 100%; display: flex; flex-direction: column; gap: 24px; }
.ab-faces { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ab-s), 1fr)); gap: 24px 16px; justify-items: center; }
.ab-faces .ff { box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line-strong); }

.dd-in { padding-top: 88px; padding-bottom: 88px; }
.dd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dd-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ll-new .dd-card h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.dd-card p { margin: 0; flex: 1; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }

/* Our view on AI: the summary, then the essay in a reading column on the
   page edge. The three-shifts diagram is flattened onto the design system's
   dark ground (the old panel had gradient glows). */
.pv-hero { padding-top: 80px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.pv-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.ll-new .pv-hero h1 { margin: 0; font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; }
/* Scales with a short desktop window, like the Specialty Area hero. */
@media (min-width: 1081px) {
  .pv-hero { padding-top: clamp(24px, 8.9svh, 80px); padding-bottom: clamp(24px, 9.8svh, 88px); }
  .ll-new .pv-hero h1 { font-size: clamp(40px, 5.4svh, 48px); }
}
.pv-summary { background: var(--surface-tint); border-radius: var(--radius-card); border-top: 2px solid var(--accent); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pv-summary p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-secondary); }
.pv-summary .pv-summary-lead { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pv-pull { padding-left: 20px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.pv-body-h { margin: 0 0 28px; }
.pv-body { padding-bottom: var(--space-10); }
/* The article reads in the same centred 800px column as case studies and blog
   posts; the Before / After AI diagram runs the full content width (Kim, 27 October). */
.pv-body > .pv-body-h, .pv-body > .pv-measure { max-width: 800px; margin-left: auto; margin-right: auto; }
.pv-body > .pv-body-h { margin-bottom: 28px; }
.pv-measure p { margin: 18px 0 0; font-size: 18px; line-height: 1.7; color: var(--ink-secondary); }
.pv-measure p:first-child { margin-top: 0; }
.ll-new .pv-measure h2 { margin: 56px 0 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; }
.pv-measure .pv-pull { margin: 28px 0; font-size: 19px; line-height: 1.55; }
.pv-pull b { color: var(--brand); }
.ll-new .ll-shift { margin: 36px 0; background: var(--surface-ink); }
.ll-new .ll-shift::before, .ll-new .ll-shift::after { display: none; }
.ll-new .pv-body > .ll-shift { margin: 56px 0; }
.ll-new .ll-shift .ll-shift-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.pv-beliefs { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; }
.pv-belief-list { margin: 0; padding: 0; list-style: none; counter-reset: belief; display: flex; flex-direction: column; }
.pv-belief-list li { counter-increment: belief; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 24px 0; border-top: 1px solid var(--line-strong); }
.pv-belief-list li::before { content: counter(belief); grid-row: span 2; font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1; color: var(--connector); }
.ll-new .pv-belief-list h3 { margin: 0; font-size: 21px; line-height: 1.3; }
.pv-belief-list p { margin: 8px 0 0; max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--ink-secondary); }
.pv-close { padding-top: 88px; padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: 40px; }
.pv-close .ll-pov-pyr-wrap { width: 100%; }

/* Live Sessions: the session cards keep their markup (.ll-ev-*) and move
   onto the design system's colours. Each card is a link, so it fills brand
   purple on hover like the case study cards. */
.ls-sessions { padding-bottom: 88px; display: flex; flex-direction: column; gap: 28px; }
.ls-past { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.ls-past > p { margin: 0; font-size: 15px; color: var(--ink-secondary); }
.ls-how { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ll-new .ll-ev-card { border-radius: var(--radius-card); border-color: var(--line-strong); box-shadow: none; text-decoration: none; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.ll-new .ll-ev-card:hover { background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-hover); }
.ll-new .ll-ev-date { background: var(--surface-ink); border-radius: var(--radius-button); }
.ll-new .ll-ev-mon { text-transform: none; letter-spacing: 0; color: var(--on-brand-soft); font-size: 12px; }
.ll-new .ll-ev-pill { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; border-radius: var(--radius-button); }
.ll-new .ll-ev-pill--type, .ll-new .ll-ev-pill--members { color: var(--brand-deep); background: var(--accent-soft); border-color: var(--accent-soft); }
.ll-new .ll-ev-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.ll-new .ll-ev-when, .ll-new .ll-ev-go { color: var(--brand-deep); }
.ll-new .ll-ev-card:hover .ll-ev-title, .ll-new .ll-ev-card:hover .ll-ev-when, .ll-new .ll-ev-card:hover .ll-ev-go { color: var(--on-brand); }
.ll-new .ll-ev-card:hover .ll-ev-sum, .ll-new .ll-ev-card:hover .ll-ev-host { color: var(--on-brand-soft); }
.ll-new .ll-ev-faces > * { background: var(--accent-soft); color: var(--brand-deep); }
.ll-new .ll-ev-none { border-radius: var(--radius-card); border-color: var(--connector); background: var(--surface-tint); }
.ll-new .ll-ev-rows a:hover { background: var(--surface-tint); }
.ll-new .ll-ev-rows a:hover .ll-ev-row-title, .ll-new .ll-ev-rows a:hover .ll-ev-row-go, .ll-new .ll-ev-row-type { color: var(--brand-deep); }
.ll-new .ll-ev-row-type { background: var(--accent-soft); border-color: var(--accent-soft); border-radius: var(--radius-button); }

/* Deep in Thought (/blog and each post): the blog's own markup (.ll-blog-*,
   .ll-post-*) moved onto the design system's type, colours and width. */
.bl-hero { align-items: flex-start; flex-direction: column; gap: 32px; }
.bl-hero .p-hero-copy { flex: none; }
.ll-new .bl-hero .ll-blog-filters { margin-top: 0; }
.bl-list { padding-bottom: var(--space-10); }
.ll-new .ll-blog-filter { border-radius: var(--radius-button); border-color: var(--line-control); color: var(--ink); background: var(--card); font-weight: 500; }
.ll-new .ll-blog-filter:hover { border-color: var(--brand); color: var(--ink); }
.ll-new .ll-blog-filter.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ll-new .ll-blog-eyebrow, .ll-new .ll-blog-starthere, .ll-new .ll-post-takeaways-label, .ll-new .ll-post-rail-label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--brand-deep); }
.ll-new .ll-blog-starthere::before { background: var(--accent); }
.ll-new .ll-blog-tag, .ll-new .ll-blog-cat-count { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; border-radius: var(--radius-button); border-color: var(--line-strong); color: var(--ink-secondary); }
.ll-new .ll-blog-feat, .ll-new .ll-blog-cat { border-top: 2px solid var(--accent); }
.ll-new .ll-blog-feat h2, .ll-new .ll-blog-cat-head h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ll-new .ll-blog-feat h2 { font-size: 40px; line-height: 1.1; }
.ll-new .ll-blog-cat-head h2 { font-size: 30px; }
.ll-new .ll-blog-row h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.32; color: var(--ink); }
.ll-new .ll-blog-row { text-decoration: none; }
.ll-new .ll-blog-feat h2 a:hover, .ll-new .ll-blog-guide h3 a:hover, .ll-new .ll-blog-row:hover h3 { color: var(--brand); }
.ll-new .ll-blog-feat p.ll-blog-dek, .ll-new .ll-blog-guide p, .ll-new .ll-blog-cat-head p, .ll-new .ll-blog-row-snip { color: var(--ink-secondary); }
.ll-new .ll-blog-meta { color: var(--ink-muted); }
.ll-new .ll-blog-meta strong { color: var(--ink-secondary); }
/* A post: the reading column on the left, a sticky sidebar on the right */
/* Kim, 27 October 2026: a blog post reads like a case study, as one 800px
   column centred on the page with white space either side, the byline under
   the title. The tags and the guide and case study links sit under the
   article. */
.bp-grid { padding-top: 64px; padding-bottom: var(--space-10); display: grid; grid-template-columns: minmax(0, 800px); justify-content: center; gap: 48px; align-items: start; }
.bp-head { padding-bottom: 8px; }
.ll-new .bp-head h1 { margin: 0; font-size: 40px; line-height: 1.12; letter-spacing: -0.025em; }
.bp-body { padding-top: 32px; }
/* The shell clips sideways overflow; clip rather than hidden keeps it from
   becoming a scroll box, which would stop sticky elements from sticking. */
.ll-shell--new { overflow: clip !important; }
.bp-aside-in { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.ll-new .bp-byline { margin: 20px 0 0; max-width: none; }
.ll-new .bp-aside .ll-post-rail { margin: 0; padding: 0; border: 0; background: none; }
.ll-new .bp-aside .ll-post-rail a { font-size: 15px; color: var(--ink); }
.ll-new .bp-aside .ll-post-rail li span { color: var(--brand); }
.ll-new .ll-post-answer { margin-top: 28px; padding: 4px 0 4px 20px; background: none; }
.ll-new .ll-post-answer p { font-size: 18px; line-height: 1.6; color: var(--ink); }
.ll-new .ll-post-measure, .ll-new .ll-post-article { max-width: 800px; }
.ll-new .ll-post-article { font-family: var(--font-body); color: var(--ink-secondary); }
.ll-new .ll-post-article h2, .ll-new .ll-post-article h3, .ll-new .ll-post-faq h2, .ll-new .ll-post-faq-item h3, .ll-new .ll-post-sources h2 { font-family: var(--font-display); color: var(--ink); }
.ll-new .ll-post-article strong { color: var(--ink); }
.ll-new .ll-post-article a, .ll-new .ll-post-sources a { color: var(--brand); }
.ll-new .ll-post-article li::marker, .ll-new .ll-post-takeaways li::marker { color: var(--brand); }
.ll-new .ll-post-article blockquote { border-left-color: var(--accent); background: var(--surface-tint); border-radius: 0; }
.ll-new .ll-post-answer { border-left-color: var(--accent); }
.ll-new .ll-post-crumb { font-size: 14px; color: var(--ink-muted); }
.ll-new .ll-post-crumb a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.ll-new .ll-post-crumb strong { color: var(--brand-deep); }
.ll-new .ll-post-bio { background: var(--surface-tint); border-color: var(--line); border-radius: var(--radius-card); }

/* Careers */
.cr-split { padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.cr-split--rev > img { order: -1; }
.cr-split .bi-head { gap: 16px; }
.cr-photo { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.cr-photo--sm { max-width: 520px; }
.cr-photo--tall { max-width: 420px; justify-self: center; }
.cr-clients { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; background: var(--card); }
.cr-stats { margin: 4px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cr-stats li { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); }
.cr-stats strong { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.cr-stats span { font-size: 15px; color: var(--ink-secondary); }
.cr-medals { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cr-consult, .cr-culture, .cr-lives { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; }
.cr-consult .sa-h2 { max-width: 900px; }
.cr-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.cr-points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-table { min-width: 620px; }
.cr-shots { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.cr-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-shots--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cr-shots img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.cr-shots--5 img { aspect-ratio: 1; }
.cr-shots li { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-secondary); }
.cr-pto { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
.cr-pto strong { color: var(--ink); }
.cr-pto span { display: block; font-size: 13px; color: var(--ink-muted); }

/* Book a call and the privacy policy */
.ct-in { padding-top: 72px; padding-bottom: var(--space-10); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: start; }
.ct-copy { display: flex; flex-direction: column; gap: 18px; }
.ll-new .ct-copy h1 { margin: 0; font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; }
.ct-form { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 32px; min-height: 360px; }
.lg-head { padding-top: 72px; padding-bottom: 24px; }
.ll-new .lg-head h1 { margin: 0; font-size: 44px; line-height: 1.1; letter-spacing: -0.025em; }
.lg-body { padding-top: 24px; padding-bottom: var(--space-10); }
/* A short legal page (the locked Trust Center) still fills the window, so the
   footer sits at the bottom with no white band under it. */
.ll-new:has(> .lg-head) { min-height: calc(100svh - var(--hdr-h)); display: flex; flex-direction: column; }
.ll-new:has(> .lg-head) > * { width: 100%; box-sizing: border-box; }
.ll-new:has(> .lg-head) > :last-child { margin-top: auto; }
/* Sentence case for every label, as the design system has it. The intake
   form's and the blog bio's own styles set some labels in capitals. */
.ll-new .ll-post-bio-role, .ll-new .rs-embed .steps .lbl-n, .ll-new .rs-embed .eyebrow, .ll-new .rs-embed .screen-meta, .ll-new .rs-embed .teamgrid th, .ll-new .rs-embed .mgroup .gh, .ll-new .rs-embed .conf-badge, .ll-new .rs-embed .confirm-chip, .ll-new .rs-embed .beforecall h4 { text-transform: none; letter-spacing: 0; }
.rs-wrap { padding-top: 64px; padding-bottom: var(--space-10); }
.rs-embed--new { max-width: 760px; }
.ll-new .ll-trust-gate { font-family: var(--font-body); color: var(--ink-secondary); }
.ll-new .ll-trust-gate a { color: var(--brand); }
.ll-new .ll-trust-gate button { border-radius: var(--radius-button); background: var(--brand); }
.ll-new .ll-trust-gate button:hover { background: var(--brand-deep); }
.ll-new .ll-trust-gate input { border-radius: var(--radius-button); border-color: var(--line-control); }
.lg-date { margin: 12px 0 0; font-size: 15px; color: var(--ink-muted); }
.lg-measure { max-width: 760px; }
.ll-new .ll-legal { font-family: var(--font-body); color: var(--ink-secondary); }
.ll-new .ll-legal h2, .ll-new .ll-legal h3 { font-family: var(--font-display); color: var(--ink); }

/* ==========================================================================
   Rep Scorecard in motion (LL_RepScorecardDemo.dc.html)
   An 18 second loop, six seconds per view: Team Scorecard, Seller View,
   Effort. Each view's bars grow in, dip and recover, and a few grades change,
   all on the view's own clock (--d) so they replay every time it comes round.
   ========================================================================== */
/* Framed like an app window in Terrain's colours, the ink of the Terrain
   hero with a hairline of its pale gold contour lines. Sized so the whole
   graphic fits on screen under its heading: never wider than the height
   left after the header and heading allows, between 720px and 1040px,
   centred in the wrapper. */
.rsd { width: 100%; max-width: clamp(720px, calc((100svh - 340px) * 1200 / 730 + 24px), 1040px); margin-left: auto; margin-right: auto; padding: 12px; background: var(--surface-ink); border: 1px solid rgba(251, 230, 162, .55); border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(28, 20, 48, .45); }
.rsd-svg { display: block; width: 100%; height: auto; border-radius: 10px; overflow: hidden; }
@media (max-width: 760px) { .rsd { padding: 6px; border-radius: 14px; } .rsd-svg { border-radius: 8px; } }
.rsd-scene { opacity: 0; animation: rsd-show 12s infinite; animation-delay: var(--d, 0s); }
.rsd-s1 { --d: 0s; }
.rsd-s2 { --d: 4s; }
.rsd-s3 { --d: 8s; }
@keyframes rsd-show { 0% { opacity: 0; } 2%, 31% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
.rsd-pill { opacity: 0; animation: rsd-show 12s infinite; animation-delay: var(--d, 0s); }
.rsd-barx, .rsd-bary { transform-box: fill-box; animation: rsd-grow-x 12s infinite backwards; animation-delay: calc(var(--d, 0s) + var(--k, 0s)); }
.rsd-barx { transform-origin: left center; }
.rsd-bary { transform-origin: center bottom; animation-name: rsd-grow-y; }
@keyframes rsd-grow-x { 0%, 2% { transform: scaleX(0); } 9%, 31% { transform: scaleX(1); } 33.3%, 100% { transform: scaleX(0); } }
/* Monthly bars fill in left to right, one month at a time, then hold. */
@keyframes rsd-grow-y { 0%, 2% { transform: scaleY(0); } 7%, 31% { transform: scaleY(1); } 33.3%, 100% { transform: scaleY(0); } }
.rsd-dot { animation: rsd-dot 12s infinite backwards; animation-delay: var(--d, 0s); }
@keyframes rsd-dot { 0%, 2% { transform: translateX(var(--dx)); opacity: 0; } 11%, 31% { transform: translateX(0); opacity: 1; } 33.3%, 100% { transform: translateX(0); opacity: 0; } }
.rsd-g-old { animation: rsd-old 12s infinite; animation-delay: var(--d, 0s); }
.rsd-g-new { opacity: 0; animation: rsd-new 12s infinite; animation-delay: var(--d, 0s); }
@keyframes rsd-old { 0%, 17% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes rsd-new { 0%, 17% { opacity: 0; } 19%, 31% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
/* The scene's clock reaches its children through --d. */
.rsd-s1 * { --d: 0s; }
.rsd-s2 * { --d: 4s; }
.rsd-s3 * { --d: 8s; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .cr-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-shots--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wu-cards, .dd-grid { grid-template-columns: minmax(0, 1fr); }
  .wu-cards { row-gap: 32px; }
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-disc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-col { margin-left: 0; padding-top: 0; max-width: 600px; }
}
@media (max-width: 640px) {
  .h-hero { padding-top: 48px; padding-bottom: 56px; gap: 48px; }
  .h-copy h1 { font-size: 38px; }
  .h-sub { font-size: 17px; }
  .ll-h2 { font-size: 30px; }
  .ll-new .h-learn-copy h2 { font-size: 30px; }
  .ll-new .h-feature-copy h2 { font-size: 30px; }
  .h-services, .h-feature, .h-hire, .h-proof-in, .h-learn { padding-bottom: var(--space-9); }
  .h-services, .h-hire, .h-proof-in, .h-learn { padding-top: var(--space-9); }
  .h-how { padding-top: 56px; padding-bottom: 56px; }
  .h-feature { padding-top: 40px; }
  .h-offers { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .h-rows, .h-areas, .h-offer-grid, .h-how-grid, .p-offers { grid-template-columns: minmax(0, 1fr); }
  .p-hero { padding-top: 48px; padding-bottom: 48px; gap: 28px; }
  .ll-new .p-hero h1 { font-size: 36px; }
  .p-sub { font-size: 17px; }
  .p-h2 { font-size: 30px; }
  .p-offers { padding-bottom: var(--space-9); }
  .ll-new .ll-offer--3 .ll-offer-t { font-size: 22px; }
  .p-band-in, .p-hire { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .p-faq { padding-bottom: var(--space-9); }
  .hw-in { padding-top: var(--space-9); padding-bottom: var(--space-9); gap: 44px; }
  .et { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .et-box, .et-note, .et-link, .et-team-label { grid-column: 1 !important; grid-row: auto !important; }
  .et-note--left { text-align: left; order: 2; }
  .et-box--exec { order: 1; }
  .et-link { order: 3; justify-self: start; margin-left: 24px; }
  .et-box--lead { order: 4; }
  .et-note--right { order: 5; }
  .et-link--down { order: 6; }
  .et-team-label { order: 7; text-align: left; }
  .et-team { grid-template-columns: minmax(0, 1fr); }
  .hw-col { padding: 20px 18px 8px; }
  .ll-new .hw-h3 { font-size: 22px; }
  .hw-lead { font-size: 17px; }
  .ll-new .sa-hero h1, .ll-new .sa-hub-hero h1 { font-size: 36px; }
  .sa-hero, .sa-hub-hero { padding-top: 48px; }
  .sa-hero { padding-bottom: var(--space-9); gap: 40px; }
  .sa-h2 { font-size: 30px; }
  .sa-intro { font-size: 17px; }
  .cs-hero, .cs-art-head, .rv-hero { padding-top: 48px; }
  .ll-new .cs-hero h1, .ll-new .rv-hero h1 { font-size: 34px; }
  .ll-new .cs-art-head h1 { font-size: 32px; }
  .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-compare, .cs-more { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .ll-new .ll-cs-article { font-size: 17px; }
  .rv-hero { flex-direction: column; align-items: flex-start; gap: 20px; }
  .rv-badge { height: 80px; }
  .ct-in { padding-top: 48px; grid-template-columns: minmax(0, 1fr); }
  .ll-new .ct-copy h1 { font-size: 36px; }
  .ct-form { padding: 20px; }
  .cr-split { padding-top: var(--space-9); padding-bottom: var(--space-9); grid-template-columns: minmax(0, 1fr); }
  .cr-split--rev > img { order: 0; }
  .cr-clients, .cr-consult, .cr-culture, .cr-lives { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .cr-points, .cr-points--2, .cr-shots--2 { grid-template-columns: minmax(0, 1fr); }
  .cr-shots--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-head { padding-top: 48px; }
  .ll-new .lg-head h1 { font-size: 32px; }
  .bp-grid { padding-top: 40px; grid-template-columns: minmax(0, 1fr); }
  .ll-new .bp-head h1 { font-size: 32px; }
  .ll-new .ll-blog-feat h2 { font-size: 30px; }
  .ll-new .ll-blog-cat-head h2 { font-size: 26px; }
  .ls-sessions { padding-bottom: var(--space-9); }
  .ls-how { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .pv-hero { padding-top: 48px; padding-bottom: var(--space-9); grid-template-columns: minmax(0, 1fr); }
  .pv-summary { padding: 22px 20px; }
  .ll-new .pv-hero h1 { font-size: 34px; }
  .pv-measure p { font-size: 17px; }
  .ll-new .pv-measure h2 { font-size: 26px; }
  .pv-beliefs, .pv-close { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .pv-belief-list li { grid-template-columns: 36px minmax(0, 1fr); }
  .pv-belief-list li::before { font-size: 26px; }
  .wu-cards { padding-bottom: var(--space-9); }
  .wu-refs, .wu-bench, .dd-in { padding-top: var(--space-9); padding-bottom: var(--space-9); }
    .wu-team { --ab-s: 56px; }
  .rv-proof { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .rv-medals img { max-width: 22vw; }
  .sv-platforms { padding-top: var(--space-9); }
  .sv-platform { padding: 22px 20px; }
  .bi-flow { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .bi-disc { grid-template-columns: minmax(0, 1fr); }
  .tr-hero-in { min-height: 0; padding-top: 56px; padding-bottom: 72px; }
  .ll-new .tr-hero h1 { font-size: 40px; }
  .bi-integrity { padding-top: var(--space-9); padding-bottom: var(--space-9); grid-template-columns: minmax(0, 1fr); }
  .tr-rs { padding-top: var(--space-9); }
  .tr-req { padding: 22px 20px; }
  /* Shrunk to a phone's width the diagram's labels fall to about 7px, so it
     keeps a readable size and scrolls sideways inside its box instead. */
  .sa-diagram { flex-basis: 100%; padding: 18px 14px 12px; overflow-x: auto; }
  .sa-audit-fig { flex-basis: 100%; max-width: none; }
  .sa-diagram svg { min-width: 440px; }
  .sa-diagram--ph { min-height: 220px; }
  .sa-problems, .sa-audit { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .sa-projects { padding-top: var(--space-9); padding-bottom: 48px; }
  .sa-results { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .sa-app { padding-bottom: var(--space-9); }
  .sa-feature-copy, .sa-shot-ph, .sa-audit-copy, .sa-steps { flex-basis: 100%; }
  .sa-shot-ph { height: 200px; }
  .sa-feature-t { font-size: 22px; }
  .sa-tools { flex-direction: column; align-items: flex-start; }
  .sa-tools-label { padding: 20px var(--gutter) 0; }
  .sa-tools-wrap { width: 100%; padding: 16px 0 20px; }
  .sa-tool { padding: 0 24px; }
  .sa-tools-wrap--static { padding: 12px var(--gutter) 20px; }
  .sa-tools-row .sa-tool { padding-right: 24px; height: 36px; }
  .sa-cta-gap { height: var(--space-9); }
  .ll-new .sa-hub-txt h2 { font-size: 22px; }
  .sa-hub-list { padding-bottom: var(--space-9); }
  .ll-new .sa-hub-row { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .ll-new .sa-hub-row:has(.is-empty) .sa-hub-txt { grid-column: auto; }
  .sa-hub-txt { padding: 0; }
  .sa-hub-proj, .sa-hub-end { padding: 16px 0 0; margin-top: 16px; border-left: 0; border-top: 1px solid var(--connector); }
  .sa-hub-logos img { width: 44px; height: 44px; }
  .sa-hub-proj:empty, .sa-hub-proj.is-empty { display: none; }
  .ll-offer-t { font-size: 22px; }
  .ll-new .ll-offer { padding: 24px; }
  .h-feature-copy, .h-hire-copy, .h-bars, .h-learn-copy, .h-session { flex-basis: 100%; }
  .h-quote { padding-left: 0; padding-top: 52px; }
  .h-quote-mark { font-size: 96px; top: -14px; }
  .h-quote blockquote { font-size: 22px; }
  .h-proof-col { flex-basis: 100%; padding-right: 0; }
  .h-proof-col + .h-proof-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-on-dark); padding-top: 28px; }
  .h-clients .ll-marquee > span { padding: 0 28px; font-size: 17px; }
  /* Team flow: the two role cards and the stack row stack vertically, with
     vertical connectors in place of the horizontal ones. */
  .tf-row { flex-direction: column; }
  .tf-h { display: none; }
  .tf-v--mobile { display: block; min-height: 30px; }
  .tf-faces { gap: 4px; }
  .tf-faces .ff { --s: 44px !important; }
  .tf-face { font-size: 11px; }
  .tf-agents { align-self: flex-start; }
  /* Stacked, the chart reads down one column: the GTM stack straight into
     the specialists, then Apps, agents and skills on its own at the end,
     since it is a separate offering. */
  .tf-row--mid { display: contents; }
  .tf > .tf-row:first-child { order: 1; }
  .tf > .tf-v--right:not(.tf-v--spec) { order: 2; }
  .tf-row--mid > .tf-stack { order: 3; }
  .tf > .tf-v--spec { order: 4; }
  .tf > .tf-spec { order: 5; }
  .tf-row--mid > .tf-v--mobile { display: none; }
  .tf-row--mid > .tf-agents { order: 6; margin-top: 14px; }
  /* A connector near the right edge puts its label on the left of the line. */
  .tf-v--right > .tf-lbl { left: auto; right: calc(100% - var(--x) + 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .ll-dot { display: none; }
  .ll-new .sa-hub-row:hover { transform: none; }
  .ll-marquee { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .ll-marquee > [aria-hidden] { display: none; }
  .ll-new .ll-offer:hover { transform: none; }
  .ll-new .cs-card:hover { transform: none; }
  /* The review wall stands still and scrolls by hand instead. */
  .ll-wol-col, .rv-soup-row { animation: none !important; }
  /* The Rep Scorecard holds still on Team Scorecard, grades as first shown. */
  .rsd-s2, .rsd-s3, .rsd-g-new { display: none !important; }
  .rsd-s1, .rsd-g-old, .rsd-dot { opacity: 1 !important; }
  .rsd-pill.rsd-s2, .rsd-pill.rsd-s3 { display: none !important; }
  .ll-wol-viewport { overflow-y: auto; }
}