/* ============================================================
   Lumos Digital — Offering pages (Align · Design · Activate · Lumos AI)
   Aligned to the Lumos Design System website UI kit.
   Imports brand tokens from ./colors_and_type.css
   ------------------------------------------------------------
   RESPONSIVE BREAKPOINTS — standardised across the whole site.
   Mobile-first: base styles are the stacked/mobile layout; the
   queries below progressively enhance. Use ONLY these values:
     · sm  →  600px   2-up card grids, 2-col form fields
     · md  →  900px   3+ column grids, asymmetric editorial splits
     · lg  → 1200px   layouts gated on a wide graphic (rare)
   Max-width (collapse) queries use 599 / 899 as the complements.
   Print and prefers-reduced-motion queries are exempt.
   ============================================================ */
@import url("./colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--lumos-paper);
  color: var(--fg-1);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* ===== Layout ===== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.divider { height: 1px; background: var(--border-1); margin: 0; border: 0; }

/* ===== Top nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--lumos-paper);
  /* Interpolable start so the backdrop-filter transition animates (Chromium
     freezes when transitioning from `none`). */
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  border-bottom: 1px solid var(--border-1);
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
/* Frost-on-scroll: semi-transparent + backdrop blur so content behind the bar
   blurs as the page scrolls under it. Per-theme translucent fills below. */
.nav.scrolled {
  background: rgba(248, 245, 251, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-top: 18px; padding-bottom: 18px;
}
.nav-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--lumos-navy);
  text-decoration: none;
}
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--lumos-graphite);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--lumos-navy); background: rgba(26, 25, 49, 0.06); }
.nav-links a.active {
  color: var(--lumos-paper);
  font-weight: 600;
  background: var(--lumos-navy);
}
.nav-links a.active:hover { color: var(--lumos-paper); background: var(--lumos-navy-ink); }
.nav-cta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--lumos-navy);
  text-decoration: none;
  border: 1px solid var(--lumos-navy);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
}
.nav-cta:hover { background: var(--lumos-navy); color: var(--lumos-paper); }

/* ===== Mobile nav — hamburger + full-screen menu ===== */
/* Hamburger: hidden on desktop, shown below 900px. Navy so it reads on the
   light paper bar; flips to paper on the dark themed bars. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--lumos-navy);
}
.nav-burger-bar {
  display: block;
  width: 24px; height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
}
.nav-burger:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 3px; }
.theme-landing .nav-burger,
.theme-plum .nav-burger,
.theme-blue .nav-burger { color: var(--lumos-paper); }
.theme-landing .nav-burger:focus-visible,
.theme-plum .nav-burger:focus-visible,
.theme-blue .nav-burger:focus-visible { outline-color: var(--lumos-paper); }

/* Full-screen panel — always deep navy regardless of page theme. */
.mobile-menu { display: none; }
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu-mark { color: var(--lumos-paper); }
.mobile-menu-close {
  position: relative;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--lumos-paper);
}
.mobile-menu-close span {
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.mobile-menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu-close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-menu-close:focus-visible { outline: 2px solid var(--lumos-lavender); outline-offset: 2px; }

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}
.mobile-menu-links a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 0.005em;
  color: var(--lumos-paper);
  text-decoration: none;
  padding: 19px 4px;
  border-bottom: 1px solid rgba(248, 245, 251, 0.14);
  transition: color var(--dur-fast) var(--ease-out);
}
.mobile-menu-links a:first-child { border-top: 1px solid rgba(248, 245, 251, 0.14); }
.mobile-menu-links a:hover,
.mobile-menu-links a.active { color: var(--lumos-lavender); }
.mobile-menu-links a:focus-visible {
  outline: 2px solid var(--lumos-lavender);
  outline-offset: 2px;
  color: var(--lumos-lavender);
}
.mobile-menu-cta {
  align-self: flex-start;
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--lumos-navy);
  background: var(--lumos-lavender);
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 14px 30px;
  transition: background var(--dur-base) var(--ease-out);
}
.mobile-menu-cta { transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.mobile-menu-cta:hover { background: var(--lumos-navy); color: var(--lumos-paper); box-shadow: inset 0 0 0 1px var(--lumos-paper); }
.mobile-menu-cta:focus-visible { outline: 2px solid var(--lumos-paper); outline-offset: 2px; }

@media (max-width: 899px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .mobile-menu.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--lumos-navy);
    padding: 18px var(--container-pad) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ===== Hero (two-column: text + circular brand photo) ===== */
/* Hero top padding standardised to 108px so the eyebrow sits a consistent
   distance below the nav, matching the case-study hero (the reference). */
.hero { padding: 108px 0 80px; overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.54fr 1fr; } }
.hero-kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lumos-navy);
  margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(46px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg-brand);
  margin: 0;
}
.hero h1 em { font-style: normal; font-weight: 500; }
.hero-subhead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-22);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-brand);
  max-width: none;
  margin: 28px 0 22px;
}
.hero-tag {
  font-size: clamp(var(--t-16), 1.4vw, var(--t-18));
  line-height: 1.6;
  font-weight: 400;
  color: var(--lumos-ink);
  max-width: none;
  margin: 0;
}
.hero-image {
  width: 100%;
  max-width: 506px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-2);
}
@media (min-width: 900px) {
  /* Anchor the hero image to a fixed offset so it stays put when navigating
     between Align / Shape / Activate (whose headlines differ in height). */
  .hero-image { margin-top: 24px; }
}

/* ===== Section template ===== */
.section { padding: 96px 0; }
/* Offering pages — diagonal 1: Shift (01, paper) → Journey (02, lilac).
   Journey's top is clipped on the up-right angle, revealing the paper above. */
.section-lilac {
  background: var(--lumos-lilac);
  clip-path: polygon(0 clamp(48px, 7vw, 110px), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(96px + clamp(48px, 7vw, 110px));
  padding-bottom: calc(48px + clamp(48px, 7vw, 110px));
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lumos-graphite);
}
.eyebrow .num { color: var(--lumos-stone); margin-right: 12px; }
.eyebrow .sep { color: var(--lumos-stone); margin-right: 12px; }

/* Section head — heading (left) + body (right) */
.section-head {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-brand);
  margin: 18px 0 0;
  max-width: 14ch;
}
.section-head h2.has-breaks { max-width: none; }
.shift-body { display: flex; flex-direction: column; gap: 20px; }
.shift-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--lumos-ink);
  max-width: 60ch;
  margin: 0;
}

/* Stacked section head (journey) */
.section-head-stacked { display: block; }
.journey-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-brand);
  margin: 18px 0 0;
}
.journey-title .arrow { display: inline-block; font-size: 0.62em; font-weight: 400; color: var(--lumos-navy-400); margin: 0 0.18em; vertical-align: middle; }
.journey-intro {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--lumos-ink);
  max-width: 56ch;
}

/* ===== Numbered offering rows ===== */
.offering-list { display: flex; flex-direction: column; margin-top: 56px; }
.offering-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--border-1);
  align-items: start;
}
.offering-row:last-child { border-bottom: 1px solid var(--border-1); }
@media (min-width: 900px) {
  .offering-row {
    grid-template-columns: 88px minmax(0, 1.4fr) minmax(0, 1.5fr) 200px;
    gap: 28px;
  }
}
.offering-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--fg-brand);
}
.offering-cat {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lumos-graphite);
  margin-bottom: 12px;
}
.offering-cat .onum { color: var(--lumos-stone); margin-right: 12px; }
.offering-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fg-brand);
  margin: 0 0 12px;
}
.offering-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lumos-ink);
  margin: 0;
  max-width: 36ch;
}
.offering-get .col-label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--lumos-graphite);
  margin-bottom: 14px;
}
.offering-get ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.offering-get li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lumos-ink);
}
.offering-get li::before {
  content: "";
  position: absolute; left: 0; top: 0.42em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--lumos-navy-400);
  border-radius: 50%;
  background: transparent;
}

/* Duration callout — inside the row */
.duration-card {
  background: var(--lumos-paper);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.duration-card-dark {
  background: var(--lumos-navy);
  border-color: var(--lumos-navy);
  box-shadow: var(--shadow-2);
}
.duration-label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lumos-stone);
  margin-bottom: 10px;
}
.duration-card-dark .duration-label { color: rgba(248,245,251,0.55); }
.duration-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--lumos-navy);
  margin-bottom: 8px;
}
.duration-card-dark .duration-value { color: var(--lumos-paper); }
.duration-note {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-18);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lumos-navy);
}
.duration-card-dark .duration-note { color: var(--lumos-paper); }

/* ===== Testimonial band (quote on gradient) ===== */
/* Offering pages — diagonal 2: Journey (02, lilac) → quote (dark). The quote
   band is pulled UP to overlap the journey and clipped on the down-right angle,
   revealing the lilac behind the cut. */
.testimonial {
  background: url('assets/gradient-dark.png') center/cover, var(--lumos-navy-900);
  position: relative;
  z-index: 1;
  clip-path: polygon(-2px 0, calc(100% + 2px) clamp(48px, 7vw, 110px), calc(100% + 2px) 100%, -2px 100%);
  margin-top: calc(-1 * clamp(48px, 7vw, 110px));
  padding: calc(80px + clamp(48px, 7vw, 110px)) 0;
}
.testimonial-quote {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--lumos-paper);
  text-wrap: balance;
  text-align: center;
}

/* ===== In related work (dark) + case-study cards ===== */
/* Offering pages — diagonal 3: quote (dark) → Complements (03, dark navy).
   Complements is pulled UP to overlap the quote and clipped on the up-right
   angle, revealing the quote's gradient behind the cut. */
.complements {
  background: var(--lumos-navy);
  color: var(--lumos-paper);
  position: relative;
  z-index: 1;
  clip-path: polygon(-2px clamp(48px, 7vw, 110px), calc(100% + 2px) 0, calc(100% + 2px) 100%, -2px 100%);
  margin-top: calc(-1 * clamp(48px, 7vw, 110px));
  padding: calc(96px + clamp(48px, 7vw, 110px)) 0 96px;
}
/* Keep PDF/print exports flat — clip-path + negative margins can misbehave when paginating. */
@media print {
  .section-lilac, .testimonial, .complements {
    clip-path: none !important;
    margin-top: 0 !important;
  }
}
.complements-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .complements-grid { grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; }
}
.complements-eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(248,245,251,0.6);
  margin-bottom: 22px;
}
.complements-eyebrow .num { color: rgba(248,245,251,0.4); margin-right: 12px; }
.complements-eyebrow .sep { color: rgba(248,245,251,0.4); margin-right: 12px; }
.complements-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lumos-paper);
  margin: 0 0 22px;
}
.complements-word { color: var(--lumos-lavender); }
.complements-body { display: flex; flex-direction: column; gap: 16px; }
.complements-em { font-weight: 500; color: var(--lumos-paper); }
.complements-body p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(248,245,251,0.78);
  max-width: 46ch;
  margin: 0;
}
.case-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.complements-lenses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.complements-lenses li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; color: rgba(248,245,251,0.78); max-width: 46ch; }
.complements-lenses li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--lumos-lavender); }
.complements-lenses li strong { font-weight: 500; color: var(--lumos-paper); }
.complements-close { margin-top: 6px; }
.case-card { display: flex; flex-direction: column; gap: 14px; }
.case-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background-color: rgba(248,245,251,0.05);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(248,245,251,0.14);
}
.case-client {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--lumos-paper);
  margin-bottom: 4px;
}
.case-sub { font-size: 14px; color: rgba(248,245,251,0.7); }
.case-card--link {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.case-card--link .case-image {
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.case-card--link:hover { transform: translateY(-3px); }
.case-card--link:hover .case-image {
  border-color: rgba(248,245,251,0.32);
  box-shadow: 0 22px 50px -28px rgba(20, 12, 30, 0.8);
}
.case-card--link:hover .case-client { color: var(--lumos-lavender); }
.case-card--link:focus-visible { outline: 2px solid var(--lumos-lavender); outline-offset: 4px; border-radius: var(--radius-md); }

/* ===== Activate promo block (replaces case cards on the Activate page) ===== */
/* ===== Activate promo block (replaces case cards on the Activate page) =====
   A bright pastel-gradient card with a bold cobalt footer band holding the
   format meta and a punchy magenta CTA. */
.complements-promo {
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 40px 90px -40px rgba(8, 4, 22, 0.9);
  border: 1px solid rgba(255,255,255,0.4);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.complements-promo:hover { box-shadow: 0 50px 104px -36px rgba(8, 4, 22, 0.98); }
.promo-body-zone {
  padding: 40px 42px 38px;
  background-color: var(--lumos-paper);
  background-image:
    linear-gradient(135deg, rgba(248,245,251,0.70) 0%, rgba(248,245,251,0.42) 55%, rgba(248,245,251,0.28) 100%),
    url("assets/gradient-light.png");
  background-size: cover, cover;
  background-position: center, 78% 82%;
}
.promo-eyebrow {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--lumos-navy);
  background: rgba(56, 59, 138, 0.10);
  border: 1px solid var(--lumos-cobalt);
  padding: 7px 15px; border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
.promo-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -0.02em; line-height: 1.0;
  margin: 0; color: var(--lumos-navy);
}
.promo-body { font-size: var(--t-18); line-height: 1.6; color: var(--lumos-ink); margin: 22px 0 0; max-width: 50ch; }
.promo-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
  padding: 22px 42px;
  background: var(--lumos-cobalt);
}
.promo-meta {
  font-family: var(--font-display); font-size: 13px; font-weight: 500; white-space: normal;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(248,245,251,0.92);
  line-height: 1.4; max-width: 22ch;
}
.promo-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--lumos-navy); background: var(--lumos-lilac);
  padding: 14px 28px; border-radius: var(--radius-sm);
  text-decoration: none; border: 1px solid var(--lumos-lilac); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.promo-cta:hover { background: var(--lumos-navy); color: var(--lumos-lilac); border-color: var(--lumos-navy); transform: translateY(-2px); }
.promo-cta:focus-visible { outline: 2px solid var(--lumos-lilac); outline-offset: 3px; }
@media (max-width: 599px) {
  .promo-body-zone { padding: 30px 26px 26px; }
  .promo-foot { padding: 22px 26px; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  /* Pill was set to nowrap and overflowed the narrow card — let it wrap. */
  .promo-eyebrow { white-space: normal; letter-spacing: 0.1em; max-width: 100%; }
  /* Format meta centred above the Explore button. */
  .promo-meta { white-space: normal; text-align: center; }
}

/* ===== CTA ===== */
.cta-section { background: var(--lumos-navy-900); padding: 128px 0; }
.cta-inner { max-width: 960px; margin: 0 auto; text-align: center; }
.cta-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lumos-lavender);
  margin-bottom: 24px;
}
.cta-eyebrow .num { color: rgba(172, 155, 255, 0.55); margin-right: 12px; }
.cta-eyebrow .sep { color: rgba(172, 155, 255, 0.5); margin-right: 12px; }
.cta-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--lumos-paper);
  margin: 0 auto 28px;
  max-width: 16ch;
}
.cta-headline .accent { color: var(--lumos-lavender); font-weight: 500; }
.cta-body {
  font-size: 16px;
  color: rgba(248, 245, 251, 0.72);
  margin: 0 auto 48px;
  max-width: 52ch;
  line-height: 1.55;
}

/* Split CTA button (DS — sharp corners) */
.split-cta {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(172, 155, 255, 0.4);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: transparent;
  padding: 0;
  font-family: var(--font-display);
  text-decoration: none;
}
.split-right { text-decoration: none; cursor: pointer; }
.split-left {
  display: flex; align-items: center;
  padding: 18px 26px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(248, 245, 251, 0.78);
  white-space: nowrap;
}
.split-right {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--lumos-navy);
  background: var(--lumos-lavender);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out);
}
.split-cta:hover .split-right, .split-right:hover { background: var(--lumos-navy); color: var(--lumos-paper); }

@media (max-width: 899px) {
  .split-cta {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .split-left, .split-right { white-space: normal; justify-content: center; }
  .split-left { padding: 16px 22px; }
  .split-right { padding: 16px 22px; }
  /* Hero CTA wrapper is a flex item that otherwise shrinks to content —
     let it span the row so the full-width split CTA has room to fill. */
  .lp4-hero-ctas { width: 100%; }

  /* Offering pages (Align / Shape / Activate) — the desktop section rhythm is
     far too generous on mobile. Tighten every vertical gap. */
  .hero { padding-bottom: 32px; }
  .section { padding: 48px 0; }
  .section.shift { padding-bottom: 32px; }
  .section-lilac { padding-top: calc(20px + clamp(48px, 7vw, 110px)); padding-bottom: calc(20px + clamp(48px, 7vw, 110px)); }
  .testimonial { padding: calc(40px + clamp(48px, 7vw, 110px)) 0; }
  .complements { padding-top: calc(40px + clamp(48px, 7vw, 110px)); padding-bottom: 48px; }
  .cta-section { padding-top: 52px; padding-bottom: 60px; }
}

/* ===== Footer (DS) ===== */
.footer {
  background: var(--lumos-navy-900);
  color: var(--lumos-paper);
  padding: 88px 0 36px;
  position: relative;
}
/* Subtle divider, one step up from the footer bg, contained to page width */
.footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
  width: min(calc(100% - 2 * var(--container-pad)), calc(var(--container-max) - 2 * var(--container-pad)));
  height: 1px;
  background: var(--lumos-navy-800);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
}
.footer-mark {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 26px;
  color: #ac9bff;
  margin: 0 0 20px;
  transition: color var(--dur-fast) var(--ease-out);
}
a.footer-mark:hover { color: var(--lumos-paper); }
a.footer-mark:focus-visible { outline: 2px solid var(--lumos-paper); outline-offset: 4px; }
.footer-social { display: flex; gap: 16px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--lumos-paper);
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.footer-social a svg { width: 100%; height: 100%; display: block; }
.footer-social a:hover { color: var(--lumos-lavender); }
.footer-col h5 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: #ac9bff;
  margin: 0 0 22px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.footer-col a {
  color: var(--lumos-paper);
  text-decoration: none;
  font-size: 16px;
  transition: color var(--dur-fast);
}
.footer-col a:hover { color: #ac9bff; }
/* Mobile: guarantee 44px tap targets for footer links, social icons and wordmarks. */
@media (max-width: 899px) {
  .footer-col ul { gap: 2px; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-social { gap: 8px; }
  .footer-social a { width: 44px; height: 44px; padding: 8px; }
  a.nav-mark, a.footer-mark { display: inline-flex; align-items: center; min-height: 44px; }
}
.footer-ack p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lumos-paper);
  margin: 0;
  max-width: 42ch;
}
.footer-bottom {
  display: flex; justify-content: flex-end; align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(248,245,251,0.14);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--lumos-paper);
}

/* ===== Our Work page — dark plum, editorial ===== */
:root {
  --plum: #4e3d5d;          /* darkened to match the purple nav bar */
  --plum-ink: #3f3050;      /* deeper plum for borders / wells */
  --plum-line: rgba(236, 226, 243, 0.20);   /* lilac hairline */
  --plum-line-strong: rgba(236, 226, 243, 0.42);
}
body.theme-plum {
  background: var(--plum);
  color: var(--lumos-paper);
}
/* Nav adapts to the plum page — solid bar matching the page colour */
.theme-plum .nav {
  background: var(--plum);
  border-bottom: 1px solid var(--plum-line);
}
.theme-plum .nav.scrolled { background: rgba(78, 61, 93, 0.66); }
.theme-plum .nav-mark { color: var(--lumos-paper); }
.theme-plum .nav-links a { color: rgba(248, 245, 251, 0.78); }
.theme-plum .nav-links a:hover { color: var(--lumos-paper); background: rgba(248, 245, 251, 0.10); }
.theme-plum .nav-links a.active { color: var(--plum-ink); background: var(--lumos-lilac); }
.theme-plum .nav-links a.active:hover { color: var(--plum-ink); background: var(--lumos-lilac); }
.theme-plum .nav-cta { color: var(--lumos-paper); border-color: rgba(248, 245, 251, 0.55); }
.theme-plum .nav-cta:hover { background: var(--lumos-lilac); color: var(--plum-ink); border-color: var(--lumos-lilac); }

/* ===== Our Team page — deep cobalt/indigo theme (from the Our Team mockup).
   Reuses the plum component machinery but rebinds the surface tokens to the
   DS cobalt scale, so the body, nav and quote band all read blue. ===== */
body.theme-blue {
  --plum: #383b8a;          /* DS --lumos-cobalt (royal blue, brand image 01) */
  --plum-ink: #2a2c6c;      /* DS --lumos-cobalt-ink — deeper bands / wells */
  --plum-line: rgba(236, 226, 243, 0.20);
  --plum-line-strong: rgba(236, 226, 243, 0.42);
  background: var(--plum);
  color: var(--lumos-paper);
}
/* Header blends into the blue page — solid bar matching the page colour, light links. */
.theme-blue .nav {
  background: var(--plum);
  border-bottom: 1px solid var(--plum-line);
}
.theme-blue .nav.scrolled { background: rgba(56, 59, 138, 0.64); }
.theme-blue .nav-mark { color: var(--lumos-paper); }
.theme-blue .nav-links a { color: rgba(248, 245, 251, 0.78); }
.theme-blue .nav-links a:hover { color: var(--lumos-paper); background: rgba(248, 245, 251, 0.10); }
.theme-blue .nav-links a.active { color: var(--plum-ink); background: var(--lumos-lilac); }
.theme-blue .nav-links a.active:hover { color: var(--plum-ink); background: var(--lumos-lilac); }
.theme-blue .nav-cta { color: var(--lumos-paper); border-color: rgba(248, 245, 251, 0.55); }
.theme-blue .nav-cta:hover { background: var(--lumos-lilac); color: var(--plum-ink); border-color: var(--lumos-lilac); }

.work-hero { padding: 108px 0 64px; }
.work-hero-inner {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start;
}
@media (min-width: 900px) {
  .work-hero-inner { grid-template-columns: 1.54fr 1fr; gap: 56px; }
}
.work-hero-figure { display: flex; justify-content: center; align-items: center; align-self: center; }
.work-hero-figure img { width: 100%; max-width: 660px; height: auto; display: block; }
.work-hero .hero-kicker { margin-bottom: 22px; color: var(--lumos-lavender); }
.work-hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(46px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--lumos-paper);
  margin: 0;
  max-width: none;
}
.work-hero h1 em { font-style: normal; font-weight: 500; }
.work-hero-subhead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-22);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lumos-paper);
  margin: 28px 0 0;
  max-width: none;
}
.work-hero-intro {
  font-size: clamp(var(--t-16), 1.4vw, var(--t-18));
  line-height: 1.6;
  color: rgba(248, 245, 251, 0.78);
  max-width: none;
  margin: 18px 0 0;
}

.work-section { padding: 24px 0 112px; }
.work-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 52px; }
.work-filter {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(248, 245, 251, 0.75);
  background: transparent;
  border: 1px solid var(--plum-line);
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.work-filter:hover { color: var(--lumos-paper); border-color: var(--plum-line-strong); }
.work-filter.active { color: var(--plum-ink); background: var(--lumos-lilac); border-color: var(--lumos-lilac); }
.work-empty { color: rgba(248, 245, 251, 0.7); font-size: 18px; margin: 0; }
.work-eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(248, 245, 251, 0.7);
  padding-bottom: 22px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--plum-line);
}
.work-eyebrow .num { color: var(--lumos-lavender); margin-right: 12px; }
.work-eyebrow .sep { color: rgba(248, 245, 251, 0.4); margin-right: 12px; }

/* Shared editorial bits */
.work-index {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--lumos-lavender);
}
.work-client {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--lumos-lavender);
}
.work-summary {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(248, 245, 251, 0.74);
  margin: 0;
  max-width: 48ch;
}
.work-tags {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(248, 245, 251, 0.55);
}
.work-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lumos-lavender);
}
.work-cta .arr { transition: transform var(--dur-base) var(--ease-out); }

/* Circular arrow affordance */
.work-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--plum-line-strong);
  color: var(--lumos-paper);
  font-size: 18px; line-height: 1;
  background: rgba(63, 49, 76, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* Featured case study — image left, text right */
.work-feature {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 64px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--plum-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(248, 245, 251, 0.045);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (min-width: 900px) {
  .work-feature { grid-template-columns: 1.1fr 1fr; }
}
.work-feature:hover {
  background: rgba(248, 245, 251, 0.08);
  border-color: var(--lumos-lavender);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -28px rgba(20, 12, 30, 0.7);
}
.work-feature-media { position: relative; overflow: hidden; min-height: 280px; }
.work-feature-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-feature:hover .work-feature-image { transform: scale(1.045); }
.work-feature-text { padding: 48px; display: flex; flex-direction: column; }
.work-feature-top {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 22px;
}
.work-feature-top .work-client { margin: 0; }
.work-feature h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--lumos-paper);
  margin: 0 0 18px;
  max-width: 18ch;
}
.work-feature .work-summary { margin-bottom: 30px; }
.work-feature-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--plum-line);
}
.work-feature:hover .work-cta .arr { transform: translateX(4px); }

/* Case-study grid */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 600px) { .work-grid { grid-template-columns: 1fr 1fr; } }
.work-card {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  border: 1px solid var(--plum-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(248, 245, 251, 0.045);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.work-card:hover {
  background: rgba(248, 245, 251, 0.08);
  border-color: var(--lumos-lavender);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -28px rgba(20, 12, 30, 0.7);
}
.work-card-media { position: relative; overflow: hidden; aspect-ratio: 16 / 11; }
.work-card-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-card:hover .work-card-image { transform: scale(1.05); }
.work-card .work-arrow { position: absolute; top: 18px; right: 18px; }
.work-card:hover .work-arrow {
  background: var(--lumos-lilac);
  color: var(--plum-ink);
  border-color: var(--lumos-lilac);
  transform: rotate(-45deg);
}
.work-card-body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.work-card-top {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.work-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--lumos-paper);
  margin: 0 0 14px;
  max-width: 22ch;
}
.work-card .work-summary { margin-bottom: 26px; }
.work-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--plum-line);
}
.work-card:hover .work-cta .arr { transform: translateX(4px); }
.work-feature:focus-visible,
.work-card:focus-visible { outline: 2px solid var(--lumos-lavender); outline-offset: 2px; }

/* Mobile — the featured case study drops its special "feature" styling and
   matches the standard cards (same media ratio, padding, heading size). */
@media (max-width: 899px) {
  .work-feature { margin-bottom: 32px; }
  .work-feature-media { min-height: 0; aspect-ratio: 16 / 11; }
  .work-feature-text { padding: 28px 30px 30px; }
  .work-feature-top { margin-bottom: 16px; }
  .work-feature h2 { font-size: 23px; line-height: 1.14; margin: 0 0 14px; max-width: 22ch; }
  .work-feature .work-summary { margin-bottom: 26px; }
  .work-feature-foot { padding-top: 22px; gap: 16px; }
}

/* ============================================================
   Case-study detail page (plum theme)
   ============================================================ */
/* Numbered overline — reuse the offerings .eyebrow, themed for plum.
   Light on dark plum sections; dark inside white .cs-panel. */
.theme-plum .eyebrow { color: rgba(248, 245, 251, 0.72); }
.theme-plum .eyebrow .num { color: var(--lumos-lavender); }
.theme-plum .eyebrow .sep { color: rgba(248, 245, 251, 0.4); }
.theme-plum .cs-panel .eyebrow { color: var(--lumos-navy); }
.theme-plum .cs-panel .eyebrow .num { color: var(--lumos-navy-400); }
.theme-plum .cs-panel .eyebrow .sep { color: var(--lumos-stone); }
.cs-panel .eyebrow { margin-bottom: 24px; }

/* Hero */
.cs-hero { padding: 56px 0 88px; }
.cs-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(248, 245, 251, 0.72);
  text-decoration: none; margin-bottom: 30px;
  transition: color var(--dur-base) var(--ease-out);
}
.cs-back:hover { color: var(--lumos-lavender); }
.cs-hero-inner {
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
}
@media (min-width: 900px) { .cs-hero-inner { grid-template-columns: 1.3fr 1fr; } }
.cs-client {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--lumos-lavender);
  margin-bottom: 22px;
}
.cs-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--lumos-paper);
  margin: 0;
  max-width: 12ch;
}
.cs-title em { font-style: normal; font-weight: 500; }
.cs-hero-figure { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px; overflow: visible; }
.cs-hero-img { width: 100%; max-width: 600px; height: auto; display: block; transform: scale(1.2); transform-origin: right center; }

/* White content panel */
.cs-panel {
  background: var(--lumos-white);
  border-radius: var(--radius-md);
  padding: 56px;
  box-shadow: var(--shadow-2);
}
.cs-section { padding: 56px 0; }
.cs-grid-2 { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .cs-grid-2 { grid-template-columns: 1fr 1.4fr; gap: 56px; } }
/* Challenge panel: wider heading column + larger body to balance the long heading */
@media (min-width: 900px) { .cs-panel .cs-grid-2 { grid-template-columns: 1.35fr 1fr; gap: 64px; } }
.cs-panel .cs-body p { font-size: 16px; line-height: 1.7; }

.cs-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lumos-navy);
  margin: 0 0 28px;
}
.cs-body { display: flex; flex-direction: column; gap: 18px; }
.cs-body p { font-size: 16px; line-height: 1.7; color: var(--lumos-graphite); margin: 0; }

/* Icon list (challenge) */
.cs-iconlist { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.cs-iconlist-row { display: flex; align-items: center; gap: 16px; }
.cs-iconlist-row i { color: var(--lumos-navy); width: 26px; height: 26px; flex-shrink: 0; }
.cs-iconlist-row span {
  font-size: 15px; color: var(--lumos-ink);
}

/* Challenge — large heading left, body right (matches offerings .section-head) */
.cs-challenge-head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--lumos-navy);
  margin: 0;
}
.cs-disciplines {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 48px;
}
@media (min-width: 900px) { .cs-disciplines { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .cs-disciplines--3 { grid-template-columns: repeat(3, 1fr); } }
.cs-discipline {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  border-top: 1px solid var(--border-1);
  padding: 16px 24px 0 0;
}
.cs-discipline i { width: 26px; height: 26px; color: var(--lumos-navy-400); stroke-width: 1.5; }
.cs-discipline span {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--lumos-navy);
}

/* Approach (plum) */
.cs-subhead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lumos-paper);
  margin: 0 0 18px;
}
.cs-approach-body { font-size: 16px; line-height: 1.7; color: rgba(248, 245, 251, 0.78); margin: 0; max-width: 46ch; }
.cs-approach-body + .cs-approach-body { margin-top: 22px; }
.cs-collage { position: relative; min-height: 340px; display: flex; justify-content: center; align-items: center; }
.cs-collage-img { width: 100%; max-width: 460px; height: auto; display: block; }

/* Member value (white panel, image + bullets) */
.cs-value-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .cs-value-grid { grid-template-columns: 1fr 1.15fr; } }
.cs-value-image {
  min-height: 300px;
  background-size: cover; background-position: center;
  background-color: var(--lumos-bone);
}
.cs-value-body { background: var(--lumos-white); padding: 48px; }
.cs-value-body h3 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 26px; letter-spacing: -0.01em;
  color: var(--lumos-navy); margin: 0 0 24px;
}
.cs-value-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cs-value-body li {
  position: relative; padding-left: 22px;
  font-size: 16px; line-height: 1.55; color: var(--lumos-graphite);
}
.cs-value-body li::before {
  content: ""; position: absolute; left: 4px; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lumos-navy-400);
}
.cs-value-outcome {
  margin: 28px 0 0; padding-top: 24px;
  border-top: 1px solid var(--border-1);
  font-size: 16px; line-height: 1.55; color: var(--lumos-navy);
  font-style: italic; font-family: var(--font-display); font-weight: 300;
}

/* Full-bleed showcase montage (between sections 02 and 03) */
.cs-showcase { width: 100%; }
.cs-showcase img { width: 100%; height: auto; display: block; }

/* Full-bleed photo band */
.cs-band {
  position: relative;
  min-height: 420px;
  background-size: cover; background-position: center;
  background-color: var(--plum-ink);
  display: flex; align-items: flex-start;
}
.cs-band.placeholder {
  background:
    repeating-linear-gradient(48deg, rgba(248,245,251,0.06) 0 2px, transparent 2px 16px),
    var(--plum-ink);
  align-items: center; justify-content: center;
}
.cs-band .cs-band-num {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 300; color: rgba(255,255,255,0.85);
  position: absolute; top: 26px; left: 0; right: 0;
}
.cs-band .cs-band-label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(248, 245, 251, 0.5);
}

/* Outcomes */
.cs-outcomes-head {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
  margin-bottom: 48px;
}
@media (min-width: 900px) { .cs-outcomes-head { grid-template-columns: 1fr 1fr; } }
.cs-ghost-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--lumos-paper);
  margin: 18px 0 0; max-width: 12ch;
}
.cs-ghost-title .hl { font-weight: 500; color: var(--lumos-paper); }
.cs-outcomes-figure {
  min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.cs-outcomes-img { width: 100%; max-width: 540px; height: auto; display: block; transform: scale(1.08); transform-origin: right center; }
.cs-outcomes-grid { display: grid; grid-template-columns: 1fr; gap: 40px 56px; }
@media (min-width: 600px) { .cs-outcomes-grid { grid-template-columns: 1fr 1fr; } }
.cs-outcome {
  display: flex; flex-direction: row; align-items: center; gap: 22px;
  padding: 0;
  border-top: none;
}
.cs-outcome-icon { width: 64px; height: 64px; flex-shrink: 0; display: block; }
.cs-outcome p { font-size: var(--t-16); line-height: 1.55; color: var(--lumos-graphite); margin: 0; }

/* Results */
.cs-results { padding: 80px 0 96px; }
.cs-results-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px;
  margin-top: 56px;
}
@media (min-width: 900px) { .cs-results-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .cs-results-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; } }
.cs-result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.cs-result-icon {
  width: 156px; height: 156px;
  display: flex; align-items: center; justify-content: center;
}
.cs-result-glyph {
  width: 156px; height: 156px; display: block;
  background-color: var(--lumos-lavender); opacity: 0.5;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.cs-result span {
  font-family: var(--font-display); font-size: 24px; font-weight: 300;
  color: var(--lumos-paper); line-height: 1.25;
}

/* Pull-quote band — brand gradient + paper quote, matching offerings testimonial */
.cs-quote-band {
  background: url('assets/gradient-dark.png') center/cover, var(--lumos-navy-900);
  padding: 120px 0;
}
.cs-quote {
  margin: 0 auto; max-width: 24ch; text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.14; letter-spacing: -0.02em;
  color: var(--lumos-paper);
  text-wrap: balance;
}

/* Concept video — motion moment (replaces the full-width band where the
   legacy page embedded a video). Sits between the value panel and outcomes. */
.cs-video { padding: 8px 0 64px; }
.cs-video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-3); background: var(--plum-ink);
}
.cs-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cs-video-cap {
  margin: 18px 0 0; font-size: var(--t-14); color: rgba(248, 245, 251, 0.6);
  letter-spacing: 0.01em;
}

/* Attributed client testimonial — calm white panel on the plum page.
   Distinct from the abstract gradient pull-quote band; carries a named voice. */
.cs-testimonial { padding: 24px 0 80px; }
.cs-testimonial-panel {
  background: var(--lumos-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: clamp(40px, 6vw, 80px) clamp(28px, 7vw, 104px);
  max-width: 1000px; margin: 0 auto;
  text-align: center;
}
.cs-testimonial-mark {
  font-family: var(--font-display); font-weight: 300;
  font-size: 72px; line-height: 0.6; color: var(--lumos-navy-300);
  margin-bottom: 8px; user-select: none;
}
.cs-testimonial blockquote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.34; letter-spacing: -0.015em;
  color: var(--lumos-navy); margin: 0 0 36px; text-wrap: balance;
}
.cs-testimonial-attr { display: flex; flex-direction: column; gap: 6px; }
.cs-testimonial-name {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-18);
  color: var(--lumos-navy); letter-spacing: -0.005em;
}
.cs-testimonial-role {
  font-family: var(--font-display); font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lumos-graphite);
}

/* Other work — two equal cards */
.cs-otherwork { padding: 96px 0 104px; background: var(--lumos-navy-900); }
.cs-otherwork .eyebrow { margin-bottom: 44px; }

/* ===== Case studies — mobile: fix hero-image crop, white-panel padding,
   and standardise the section rhythm (consistent, not too wide). ===== */
@media (max-width: 899px) {
  /* Hero image was scaled 1.2x (origin right) for a desktop bleed, which crops
     the left/right on a phone. Show it at natural size. */
  .cs-hero-img { transform: none; }
  .cs-hero-figure { min-height: 0; }
  /* White content panel had 56px on every side — far too much on mobile. */
  .cs-panel { padding: 30px 22px; }
  /* Value panel (image + bullets) — its inner white body matches the panel. */
  .cs-value-body { padding: 30px 22px; }
  /* Consistent, tighter vertical section padding. */
  .cs-hero { padding-bottom: 40px; }
  .cs-section { padding: 44px 0; }
  .cs-results { padding: 44px 0 48px; }
  .cs-otherwork { padding: 48px 0 56px; }
}
.cs-ow-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 600px) { .cs-ow-grid { grid-template-columns: 1fr 1fr; } }
.cs-ow-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--plum-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(248, 245, 251, 0.05);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cs-ow-card:hover {
  background: rgba(248, 245, 251, 0.09);
  border-color: var(--lumos-lavender);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -28px rgba(20, 12, 30, 0.7);
}
.cs-ow-figure { overflow: hidden; aspect-ratio: 16 / 11; }
.cs-ow-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cs-ow-card:hover .cs-ow-figure img { transform: scale(1.04); }
.cs-ow-card:focus-visible { outline: 2px solid var(--lumos-lavender); outline-offset: 2px; }
.cs-ow-body {
  display: flex; flex-direction: column;
  padding: 28px 30px 30px;
}
.cs-ow-client {
  font-family: var(--font-display);
  font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lumos-lavender);
  margin-bottom: 12px;
}
.cs-ow-title {
  font-family: var(--font-display);
  font-weight: 500; font-size: 22px; letter-spacing: -0.01em;
  color: var(--lumos-paper);
  margin: 0 0 18px;
}
.cs-ow-tag {
  font-family: var(--font-display);
  font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(248, 245, 251, 0.55);
}


/* ============================================================
   Our Team page — editorial layout (cobalt-blue theme)
   ============================================================ */

/* ---- Hero ---- */
.team-hero { padding: 108px 0 72px; }
/* On mobile the standard heroes stack (no figure-centering), so match the
   case-study hero's mobile top padding (56px). At >=900px the base 108px
   applies, matching the case-study hero's centered desktop position. */
@media (max-width: 899px) {
  .hero, .work-hero, .team-hero { padding-top: 56px; }
}
.theme-blue .hero-kicker { color: var(--lumos-lavender); }
.team-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: end;
}
@media (min-width: 900px) {
  .team-hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: end; column-gap: 56px;
  }
  .team-hero-lead { grid-column: 1; }
  .team-hero-sub { grid-column: 2; }
}
.team-hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(46px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--lumos-paper); margin: 18px 0 0;
}
.team-hero-title em { font-style: normal; font-weight: 500; }
.team-hero-sub {
  font-size: clamp(var(--t-16), 1.4vw, var(--t-18)); line-height: 1.6; color: rgba(248,245,251,0.82);
  max-width: 44ch; margin: 0; align-self: end;
}

/* Staggered portrait cluster */
.team-hero-cluster { display: flex; justify-content: flex-end; align-items: flex-end; gap: 18px; }
.team-hero-cluster .team-portrait { width: clamp(96px, 12vw, 150px); }
.team-hero-cluster .c1 { transform: translateY(-28px); }
.team-hero-cluster .c2 { transform: translateY(14px); }
.team-hero-cluster .c3 { transform: translateY(-8px); }

/* Circular portrait (shared) */
.team-portrait {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: rgba(248,245,251,0.08);
}
.team-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Founders: alternating editorial rows ---- */
.team-founders { padding: 40px 0 24px; }
/* Our Team — diagonal between the founders/profile section and the
   "Start a conversation" CTA. The dark-navy CTA is pulled UP to overlap the
   cobalt founders section and clipped on the up-right angle, revealing the
   cobalt behind the cut. Scoped to the team theme so other CTAs are untouched;
   the founders section gets extra bottom padding so the last profile clears. */
.theme-blue .team-founders { padding-bottom: calc(24px + clamp(48px, 7vw, 110px)); }
.theme-blue .cta-section {
  position: relative;
  z-index: 1;
  clip-path: polygon(0 clamp(48px, 7vw, 110px), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * clamp(48px, 7vw, 110px));
  padding-top: calc(128px + clamp(48px, 7vw, 110px));
}
@media print {
  .theme-blue .cta-section { clip-path: none !important; margin-top: 0 !important; }
}
.team-founders-head { margin-bottom: 8px; }
.team-founders .eyebrow,
.team-quote-eyebrow { color: rgba(248,245,251,0.6); }
.team-founders .eyebrow .num,
.team-quote-eyebrow .num { color: var(--lumos-lavender); }
.team-founders .eyebrow .sep,
.team-quote-eyebrow .sep { color: rgba(248,245,251,0.4); }

.founder-row {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: center;
  padding: 64px 0;
  border-top: 1px solid var(--plum-line);
}
.founder-row:first-of-type { border-top: none; }
@media (min-width: 900px) {
  .founder-row { grid-template-columns: 5fr 7fr; gap: 72px; padding: 80px 0; }
  /* Alternate: even rows put the portrait on the right */
  .founder-row:nth-child(even) .founder-media { order: 2; }
  .founder-row:nth-child(even) .founder-text { order: 1; }
}
.founder-media { display: flex; justify-content: center; }
.founder-media .team-portrait {
  width: 100%; max-width: 360px;
}
.founder-media .team-portrait::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(248,245,251,0.18);
}
.founder-index {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em;
  color: rgba(248,245,251,0.30); margin-bottom: 18px;
}
.founder-role {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-12);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lumos-lavender); margin-bottom: 14px;
}
.founder-name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 4vw, 54px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--lumos-paper); margin: 0 0 22px;
}
.founder-name strong { font-weight: 500; }
.founder-bio {
  font-size: var(--t-18); line-height: 1.7; color: rgba(248,245,251,0.80);
  max-width: 46ch; margin: 0;
}

/* ---- Closing pull-quote ---- */
.team-quote-band { background: var(--plum-ink); padding: 104px 0; }

/* ===== Our Team — mobile: tighten the gap from the hero quote to the first
   profile, and from the last profile to the "Start a conversation" CTA. ===== */
@media (max-width: 899px) {
  .team-hero { padding-bottom: 32px; }
  .team-founders { padding-top: 20px; }
  .theme-blue .team-founders { padding-bottom: calc(8px + clamp(48px, 7vw, 110px)); }
  .theme-blue .cta-section { padding-top: calc(40px + clamp(48px, 7vw, 110px)); }
}
.team-quote-eyebrow { margin-bottom: 40px; }
.team-quote {
  margin: 0; max-width: 22ch;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 3.6vw, 50px); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--lumos-paper); text-wrap: balance;
}
.team-quote-attr { margin-top: 36px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.team-quote-attr .name {
  font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--lumos-paper);
}
.team-quote-attr .role {
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lumos-lavender);
}

/* ===== Reveal on scroll — content is visible by default; the entrance
   fade is a progressive enhancement layered on once JS marks the page ready,
   so the page never depends on the observer to show content. ===== */
.reveal { opacity: 1; transform: none; }
html.reveal-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
html.reveal-ready .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   LANDING PAGE
   ============================================================ */

/* ----- Hero ----- */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: url('assets/gradient-light.png') center/cover no-repeat, var(--lumos-paper);
  border-bottom: 1px solid var(--border-1);
}
.lp-hero-inner { padding: 104px 0 116px; max-width: 1000px; }
.lp-hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lumos-navy);
  margin-bottom: 30px;
}
.lp-hero-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lumos-magenta); }
.lp-hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--lumos-navy);
  margin: 0;
  max-width: 16ch;
}
.lp-hero h1 em { font-style: normal; font-weight: 500; }
.lp-hero-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--lumos-navy);
  margin: 36px 0 22px; max-width: 32ch;
}
.lp-hero-tag {
  font-size: var(--t-18); line-height: 1.65;
  color: var(--lumos-graphite); max-width: 60ch; margin: 0;
}
.lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }

/* Buttons */
.lp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  padding: 16px 30px; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lp-btn-primary { background: var(--lumos-navy); color: var(--lumos-paper); }
.lp-btn-primary:hover { background: var(--lumos-navy-ink); transform: translateY(-2px); }
.lp-btn-secondary { background: transparent; color: var(--lumos-navy); border-color: var(--lumos-navy); }
.lp-btn-secondary:hover { background: var(--lumos-navy); color: var(--lumos-paper); transform: translateY(-2px); }

/* ----- Section scaffold ----- */
.lp-section { padding: 104px 0; }
.lp-section-head { max-width: 760px; }
.lp-section-head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--lumos-navy); margin: 18px 0 0; max-width: 18ch;
}
.lp-section-head h2 em { font-style: normal; font-weight: 500; }
.lp-section-intro {
  font-size: var(--t-18); line-height: 1.65; color: var(--lumos-graphite);
  max-width: 60ch; margin: 26px 0 0;
}

/* ----- Offerings ----- */
.lp-offerings { background: var(--lumos-lilac); }
.lp-offer-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 56px;
}
@media (min-width: 900px) { .lp-offer-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-offer-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-1);
  background: var(--lumos-white);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lp-offer-card:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
.lp-offer-head { background: var(--accent); color: var(--lumos-paper); padding: 30px 28px 26px; }
.lp-offer-name {
  font-family: var(--font-display);
  font-weight: 500; font-size: 26px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.lp-offer-steps {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(248,245,251,0.85); margin-top: 14px;
}
.lp-offer-body { display: flex; flex-direction: column; flex: 1; padding: 28px; }
.lp-offer-desc { font-size: var(--t-16); line-height: 1.6; color: var(--lumos-graphite); margin: 0 0 26px; }
.lp-offer-cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--accent); text-decoration: none;
}
.lp-offer-cta .arr { transition: transform var(--dur-base) var(--ease-out); }
.lp-offer-card:hover .lp-offer-cta .arr { transform: translateX(4px); }
.lp-offer-card.is-align    { --accent: var(--lumos-cobalt); }
.lp-offer-card.is-shape    { --accent: var(--lumos-magenta); }
.lp-offer-card.is-activate { --accent: var(--lumos-emerald); }

/* ----- Rapid Align feature panel ----- */
.lp-rapid {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr; gap: 36px;
  background: var(--lumos-navy); color: var(--lumos-paper);
  border-radius: var(--radius-md); overflow: hidden;
  padding: 48px;
  box-shadow: var(--shadow-2);
}
@media (min-width: 900px) { .lp-rapid { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 56px; } }
.lp-rapid-eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lumos-lavender); margin-bottom: 20px;
}
.lp-rapid h3 {
  font-family: var(--font-display);
  font-weight: 300; font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--lumos-paper); margin: 0; max-width: 16ch;
}
.lp-rapid h3 em { font-style: normal; font-weight: 500; }
.lp-rapid-body { font-size: var(--t-16); line-height: 1.7; color: rgba(248,245,251,0.78); margin: 0 0 26px; }
.lp-rapid-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lumos-navy); background: var(--lumos-lavender);
  padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 28px;
  white-space: nowrap;
}
.lp-rapid-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500; color: var(--lumos-paper); text-decoration: none;
  border-bottom: 1px solid rgba(248,245,251,0.4); padding-bottom: 4px;
  transition: color var(--dur-fast), border-color var(--dur-fast), gap var(--dur-base) var(--ease-out);
}
.lp-rapid-cta:hover { color: var(--lumos-lavender); border-color: var(--lumos-lavender); gap: 14px; }

/* ----- Approach ----- */
.lp-approach-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .lp-approach-grid { grid-template-columns: 5fr 7fr; gap: 64px; } }
.lp-approach-body { display: flex; flex-direction: column; gap: 22px; }
.lp-approach-body p { font-size: var(--t-18); line-height: 1.7; color: var(--lumos-graphite); margin: 0; }
.lp-quoteband {
  background: url('assets/gradient-dark.png') center/cover, var(--lumos-navy-900);
  padding: 120px 0;
}
.lp-quote {
  margin: 0 auto; max-width: 20ch; text-align: center;
  font-family: var(--font-display);
  font-weight: 500; font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--lumos-paper);
  text-wrap: balance;
}

/* ----- Our Work ----- */
.lp-work-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
@media (min-width: 600px) { .lp-work-grid { grid-template-columns: 1fr 1fr; } }
.lp-work-card {
  display: flex; flex-direction: column; cursor: pointer; text-decoration: none;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-1); background: var(--lumos-white);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lp-work-card:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
.lp-work-figure { aspect-ratio: 16 / 10; overflow: hidden; }
.lp-work-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.lp-work-card:hover .lp-work-figure img { transform: scale(1.04); }
.lp-work-body { padding: 28px 30px 30px; }
.lp-work-client {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lumos-navy-400); margin-bottom: 12px;
}
.lp-work-title {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  letter-spacing: -0.01em; color: var(--lumos-navy); margin: 0 0 16px;
}
.lp-work-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--lumos-navy);
}
.lp-work-link .arr { transition: transform var(--dur-base) var(--ease-out); }
.lp-work-card:hover .lp-work-link { color: var(--lumos-magenta); }
.lp-work-card:hover .lp-work-link .arr { transform: translateX(4px); }

/* ----- Clients ----- */
.lp-clients { background: var(--lumos-lilac); }
.lp-clients-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 56px; }
@media (min-width: 900px) { .lp-clients-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-client-card {
  display: flex; flex-direction: column;
  background: var(--lumos-white); border: 1px solid var(--border-1);
  border-radius: var(--radius-md); padding: 36px 32px;
  box-shadow: var(--shadow-1);
}
.lp-client-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 0.6;
  color: var(--lumos-lavender); margin-bottom: 18px;
}
.lp-client-quote {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: 21px; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--lumos-navy); margin: 0 0 28px; flex: 1;
}
.lp-client-name { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--lumos-navy); }
.lp-client-role {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-graphite); margin-top: 6px;
}

/* ============================================================
   LANDING PAGE v2 — visual / minimal-copy
   ============================================================ */
.lp2-main { background: var(--lumos-paper); }

/* Landing nav — navy bar to sit over the dark hero */
.theme-landing .nav { background: var(--lumos-navy-900); border-bottom: 1px solid rgba(248, 245, 251, 0.14); }
.theme-landing .nav.scrolled { background: rgba(21, 20, 42, 0.8); }
.theme-landing .nav-mark { color: var(--lumos-paper); }
.theme-landing .nav-links a { color: rgba(248, 245, 251, 0.8); }
.theme-landing .nav-links a:hover { color: var(--lumos-paper); background: rgba(248, 245, 251, 0.1); }
.theme-landing .nav-links a.active { color: var(--lumos-navy); background: var(--lumos-paper); }
.theme-landing .nav-cta { color: var(--lumos-paper); border-color: rgba(248, 245, 251, 0.5); }
.theme-landing .nav-cta:hover { background: var(--lumos-paper); color: var(--lumos-navy); }

/* ----- Hero — split: copy on gradient (left), brand image (right) ----- */
.lp2-hero {
  display: grid; grid-template-columns: 1fr;
  min-height: clamp(560px, 88vh, 900px);
  background: var(--lumos-navy-900);
  color: var(--lumos-paper);
}
@media (min-width: 900px) { .lp2-hero { grid-template-columns: 1.06fr 0.94fr; } }
.lp2-hero-text {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--lumos-navy-900) url('assets/gradient-dark.png') left center/cover no-repeat;
  padding-top: 96px; padding-bottom: 96px;
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: clamp(28px, 5vw, 96px);
}
.lp2-hero-textinner { max-width: 32ch; }
.lp2-hero-media {
  min-height: 320px;
  background: var(--lumos-navy) url('assets/brand-image-02.jpg') center/cover no-repeat;
}
@media (max-width: 899px) { .lp2-hero-media { order: -1; min-height: 46vw; } }
.lp2-hero-eyebrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(248, 245, 251, 0.82); margin-bottom: 30px;
}
.lp2-hero-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lumos-lavender); }
.lp2-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(46px, 5.4vw, 92px); line-height: 0.98; letter-spacing: -0.04em;
  color: var(--lumos-paper); margin: 0;
}
.lp2-hero h1 em { font-style: normal; font-weight: 500; }
.lp2-hero-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 2vw, 24px); line-height: 1.35; letter-spacing: -0.01em;
  color: rgba(248, 245, 251, 0.9); margin: 30px 0 0; max-width: 38ch;
}
.lp2-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.lp2-hero .lp-btn-primary { background: var(--lumos-lavender); color: var(--lumos-navy); border-color: var(--lumos-lavender); }
.lp2-hero .lp-btn-primary:hover { background: var(--lumos-lavender-ink); border-color: var(--lumos-lavender-ink); }
.lp2-hero .lp-btn-secondary { color: var(--lumos-paper); border-color: rgba(248, 245, 251, 0.5); }
.lp2-hero .lp-btn-secondary:hover { background: var(--lumos-paper); color: var(--lumos-navy); border-color: var(--lumos-paper); }

/* ----- Section heads ----- */
.lp2-section { padding: 112px 0; }
.lp2-h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--lumos-navy); margin: 18px 0 0; max-width: 18ch;
}
.lp2-h2 em { font-style: normal; font-weight: 500; }

/* ----- Approach — ALIGN featured, lenses as an editorial list ----- */
.lp2-approach { background: var(--lumos-lilac); }
.lp2-approach-head { max-width: 60ch; }

/* Featured ALIGN band — big editorial panel on the brand gradient */
.lp2-align {
  display: grid; grid-template-columns: 1fr; gap: 36px;
  margin-top: 56px; padding: 52px 36px;
  background: var(--lumos-navy-900) url('assets/gradient-dark.png') center/cover no-repeat;
  color: var(--lumos-paper);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2); overflow: hidden;
}
@media (min-width: 900px) { .lp2-align { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; padding: 72px; } }
.lp2-align-name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(72px, 11vw, 168px); line-height: 0.82; letter-spacing: -0.05em;
  color: var(--lumos-paper); margin: 0;
}
.lp2-align-steps {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lumos-lavender); margin-top: 26px;
}
.lp2-align-lead { font-size: var(--t-18); line-height: 1.7; color: rgba(248,245,251,0.84); margin: 0 0 30px; }
.lp2-align-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--lumos-navy); background: var(--lumos-lavender);
  padding: 15px 28px; border-radius: var(--radius-sm); text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lp2-align-cta:hover { background: var(--lumos-paper); transform: translateY(-2px); }
.lp2-align-cta .arr { transition: transform var(--dur-base) var(--ease-out); }
.lp2-align-cta:hover .arr { transform: translateX(4px); }

/* Supporting lenses — editorial list, not boxes */
.lp2-lens-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-18); letter-spacing: -0.01em; color: var(--lumos-navy);
  margin: 76px 0 8px;
}
.lp2-lenses { border-top: 1px solid var(--border-2); }
.lp2-lens-row {
  display: grid; grid-template-columns: 1fr; gap: 6px 40px;
  padding: 30px 0; border-bottom: 1px solid var(--border-1);
  align-items: baseline;
  transition: padding-left var(--dur-base) var(--ease-out);
}
@media (min-width: 600px) { .lp2-lens-row { grid-template-columns: minmax(220px, 0.5fr) 1fr; } }
.lp2-lens-row:hover { padding-left: 12px; }
.lp2-lens-name {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.01em; color: var(--accent);
}
.lp2-lens-name .tick { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.lp2-lens-desc { font-size: var(--t-18); line-height: 1.5; color: var(--lumos-graphite); margin: 0; }
.lp2-lens-row.is-design   { --accent: var(--lumos-magenta); }
.lp2-lens-row.is-activate { --accent: var(--lumos-emerald); }
.lp2-lens-row.is-ai       { --accent: var(--lumos-cobalt); }
.lp2-lens-row.is-spec     { --accent: var(--lumos-sky-ink); }
.lp2-approach-close {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.24; letter-spacing: -0.02em;
  color: var(--lumos-navy); margin: 64px 0 0; max-width: 26ch;
}
.lp2-approach-close em { font-style: normal; font-weight: 500; }

/* ----- Work — on navy, staggered cards ----- */
.lp2-work { background: var(--lumos-navy); color: var(--lumos-paper); }
.lp2-work .eyebrow { color: rgba(248,245,251,0.6); }
.lp2-work .eyebrow .num, .lp2-work .eyebrow .sep { color: rgba(248,245,251,0.4); }
.lp2-work-head { max-width: 760px; }
.lp2-work-head .lp2-h2 { color: var(--lumos-paper); }
.lp2-work-intro { font-size: var(--t-18); line-height: 1.65; color: rgba(248,245,251,0.72); max-width: 54ch; margin: 24px 0 0; }
.lp2-work-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 64px; }
@media (min-width: 600px) {
  .lp2-work-grid { grid-template-columns: 1fr 1fr; gap: 36px 44px; }
  .lp2-work-grid > :nth-child(even) { margin-top: 64px; }
}
.lp2-wcard { display: flex; flex-direction: column; text-decoration: none; cursor: pointer; }
.lp2-wcard-figure {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md);
  background: rgba(248,245,251,0.05); border: 1px solid rgba(248,245,251,0.12);
}
.lp2-wcard-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.lp2-wcard:hover .lp2-wcard-figure img { transform: scale(1.04); }
.lp2-wcard-client {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--lumos-lavender); margin: 24px 0 12px;
}
.lp2-wcard-title {
  font-family: var(--font-display); font-weight: 500; font-size: 24px;
  letter-spacing: -0.01em; color: var(--lumos-paper); margin: 0;
  display: inline-flex; align-items: baseline; gap: 12px;
}
.lp2-wcard-title .arr { font-size: 18px; transition: transform var(--dur-base) var(--ease-out); }
.lp2-wcard:hover .lp2-wcard-title .arr { transform: translateX(5px); }
.lp2-work-all { margin-top: 64px; }
.lp2-work-all a {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--lumos-paper); text-decoration: none;
  border: 1px solid rgba(248,245,251,0.4); border-radius: var(--radius-sm); padding: 15px 28px;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lp2-work-all a:hover { background: var(--lumos-paper); color: var(--lumos-navy); }

/* ----- Clients — large editorial quotes, no boxes ----- */
.lp2-clients-list { margin-top: 60px; border-top: 1px solid var(--border-2); }
.lp2-cquote {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  padding: 52px 0; margin: 0; border-bottom: 1px solid var(--border-1);
  align-items: start;
}
@media (min-width: 900px) { .lp2-cquote { grid-template-columns: 1fr 280px; gap: 72px; } }
.lp2-cquote-text {
  position: relative;
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1.22; letter-spacing: -0.02em;
  color: var(--lumos-navy); margin: 0;
  text-indent: -0.05em;
}
.lp2-cquote-text::before { content: "\201C"; color: var(--lumos-lavender); }
.lp2-cquote-attr { align-self: end; }
@media (min-width: 900px) { .lp2-cquote-attr { text-align: right; padding-bottom: 8px; } }
.lp2-cquote-name { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--lumos-navy); }
.lp2-cquote-role { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-graphite); margin-top: 8px; }

/* ============================================================
   LANDING PAGE v3 — bold / statement / action-oriented
   ============================================================ */
.lp3-main { background: var(--lumos-paper); }

/* Hero — full-height statement on the brand gradient */
.lp3-hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  background: var(--lumos-navy-900) url('assets/gradient-dark.png') center/cover no-repeat;
  color: var(--lumos-paper); padding: 132px 0 0;
}
.lp3-hero-kicker {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lumos-lavender); margin-bottom: 34px;
}
.lp3-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(58px, 10.5vw, 184px); line-height: 0.9; letter-spacing: -0.05em;
  color: var(--lumos-paper); margin: 0; max-width: 14ch;
}
.lp3-hero h1 em { font-style: normal; font-weight: 500; color: var(--lumos-lavender); }
.lp3-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; margin-top: 48px; }
.lp3-hero-sub {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.35; color: rgba(248,245,251,0.86); margin: 0; max-width: 34ch;
}
.lp3-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.lp3-hero .lp-btn-primary { background: var(--lumos-lavender); color: var(--lumos-navy); border-color: var(--lumos-lavender); }
.lp3-hero .lp-btn-primary:hover { background: var(--lumos-lavender-ink); border-color: var(--lumos-lavender-ink); }
.lp3-hero .lp-btn-secondary { color: var(--lumos-paper); border-color: rgba(248,245,251,0.5); }
.lp3-hero .lp-btn-secondary:hover { background: var(--lumos-paper); color: var(--lumos-navy); border-color: var(--lumos-paper); }
/* Client ticker pinned to the bottom of the hero */
.lp3-ticker {
  margin-top: auto; border-top: 1px solid rgba(248,245,251,0.18);
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center;
  padding: 26px 0 30px;
}
.lp3-ticker .lbl { font-family: var(--font-display); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(248,245,251,0.5); }
.lp3-ticker .mk { font-family: var(--font-display); font-weight: 500; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.02em; color: rgba(248,245,251,0.72); }

/* Section scaffold */
.lp3-section { padding: 120px 0; }
.lp3-eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--lumos-graphite);
}
.lp3-eyebrow .num { color: var(--lumos-stone); margin-right: 12px; }
.lp3-eyebrow .sep { color: var(--lumos-stone); margin-right: 12px; }
.lp3-h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 5.4vw, 78px); line-height: 0.98; letter-spacing: -0.035em;
  color: var(--lumos-navy); margin: 20px 0 0; max-width: 16ch;
}
.lp3-h2 em { font-style: normal; font-weight: 500; }

/* What we do — bold colour-block tiles, ALIGN featured */
.lp3-do-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 60px; }
@media (min-width: 900px) {
  .lp3-do-grid { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; }
  .lp3-tile.is-align { grid-column: 1; grid-row: 1 / span 2; }
}
.lp3-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px; padding: 44px; border-radius: var(--radius-md); min-height: 230px;
  color: var(--lumos-paper); text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.lp3-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.lp3-tile.is-align { background: var(--lumos-cobalt); min-height: 440px; }
.lp3-tile.is-shape { background: var(--lumos-magenta); }
.lp3-tile.is-activate { background: var(--lumos-emerald); }
.lp3-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lp3-tile-name { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.lp3-tile.is-align .lp3-tile-name { font-size: clamp(40px, 5vw, 72px); }
.lp3-tile-name.sm { font-size: clamp(26px, 3vw, 38px); }
.lp3-tile-steps { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(248,245,251,0.7); }
.lp3-tile-line { font-family: var(--font-display); font-weight: 500; font-size: var(--t-18); line-height: 1.35; color: var(--lumos-paper); margin: 0; max-width: 26ch; }
.lp3-tile.is-align .lp3-tile-line { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.01em; }
.lp3-tile-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--lumos-paper); }
.lp3-tile-cta .arr { transition: transform var(--dur-base) var(--ease-out); }
.lp3-tile:hover .lp3-tile-cta .arr { transform: translateX(5px); }
.lp3-do-close { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.02em; color: var(--lumos-navy); margin: 56px 0 0; max-width: 30ch; }
.lp3-do-close em { font-style: normal; font-weight: 500; }

/* Work — bold featured */
.lp3-work { background: var(--lumos-navy); color: var(--lumos-paper); }
.lp3-work .lp3-eyebrow, .lp3-work .lp3-eyebrow .num, .lp3-work .lp3-eyebrow .sep { color: rgba(248,245,251,0.55); }
.lp3-work .lp3-h2 { color: var(--lumos-paper); }
.lp3-work-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 60px; }
@media (min-width: 600px) { .lp3-work-grid { grid-template-columns: 1fr 1fr; gap: 36px 44px; } .lp3-work-grid > :nth-child(even) { margin-top: 56px; } }
.lp3-wcard { display: flex; flex-direction: column; text-decoration: none; }
.lp3-wcard-fig { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-md); border: 1px solid rgba(248,245,251,0.12); }
.lp3-wcard-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.lp3-wcard:hover .lp3-wcard-fig img { transform: scale(1.04); }
.lp3-wcard-client { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lumos-lavender); margin: 24px 0 12px; }
.lp3-wcard-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; color: var(--lumos-paper); margin: 0; display: inline-flex; align-items: baseline; gap: 12px; }
.lp3-wcard-title .arr { font-size: 18px; transition: transform var(--dur-base) var(--ease-out); }
.lp3-wcard:hover .lp3-wcard-title .arr { transform: translateX(5px); }
.lp3-work-all { margin-top: 60px; }
.lp3-work-all a { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--lumos-paper); text-decoration: none; border: 1px solid rgba(248,245,251,0.4); border-radius: var(--radius-sm); padding: 15px 28px; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.lp3-work-all a:hover { background: var(--lumos-paper); color: var(--lumos-navy); }

/* Clients — bold names */
.lp3-clients-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 60px; border-top: 1px solid var(--border-2); }
.lp3-client { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 44px 0; border-bottom: 1px solid var(--border-1); align-items: center; }
@media (min-width: 900px) { .lp3-client { grid-template-columns: 0.8fr 1.2fr; gap: 56px; } }
.lp3-client-name { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4vw, 56px); line-height: 0.96; letter-spacing: -0.03em; color: var(--lumos-navy); }
.lp3-client-q { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; color: var(--lumos-graphite); margin: 0 0 14px; }
.lp3-client-by { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-navy); }

/* ============================================================
   LANDING PAGE v4 — creative / kinetic / bold
   ============================================================ */
.lp4-main { background: var(--lumos-paper); }

/* Hero — kinetic statement */
.lp4-hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding: 128px 0 0; color: var(--lumos-paper);
  background: var(--lumos-navy-900) url('assets/gradient-dark.png') center/cover no-repeat;
}
.lp4-hero > .container, .lp4-hero > .lp4-marquee { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .lp4-hero-grad { animation: none; } }
.lp4-hero-kicker { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lumos-lavender); margin-bottom: 32px; }
.lp4-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 10.5vw, 188px); line-height: 0.88; letter-spacing: -0.05em; color: var(--lumos-paper); margin: 0;
}
.lp4-rot { font-weight: 500; transition: color var(--dur-base) var(--ease-out); }
.lp4-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; margin-top: 52px; }
.lp4-hero-sub { font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.35; color: rgba(248,245,251,0.86); margin: 0; max-width: 32ch; }
.lp4-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.lp4-hero .lp-btn-primary { background: var(--lumos-lavender); color: var(--lumos-navy); border-color: var(--lumos-lavender); }
.lp4-hero .lp-btn-primary:hover { background: var(--lumos-navy); color: var(--lumos-paper); border-color: var(--lumos-navy); }
.lp4-hero .lp-btn-secondary { color: var(--lumos-paper); border-color: rgba(248,245,251,0.5); }
.lp4-hero .lp-btn-secondary:hover { background: var(--lumos-paper); color: var(--lumos-navy); border-color: var(--lumos-paper); }

/* ===== Landing v5 hero refinements (scoped to .lp5-hero — v4 untouched) ===== */
/* 4 + 1 — sit the hero within the fold (nav ≈ 72px) and vertically centre the
   copy with balanced, reduced top/bottom whitespace. */
.lp5-hero {
  min-height: calc(100svh - 72px);
  padding: 36px 0 calc(36px + clamp(48px, 7vw, 110px));
  justify-content: center;
}
/* LUMOS prism image over the gradient, behind the hero copy, aligned right.
   Scaled to fill the full hero height. */
.lp5-hero-prism {
  position: absolute;
  inset: 0 0 0 auto;
  height: 100%;
  width: auto;
  object-position: right center;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
/* Feature headline reduced 30% (from clamp(56,10.5vw,188)). */
.lp5-hero h1 { font-size: clamp(39px, 7.35vw, 132px); }
/* Keep the hero copy aligned to the page margin (the flex column was
   shrink-wrapping + centring the container). Force it full width. */
.lp5-hero > .container { width: 100%; align-self: stretch; }
/* 2 — 1px white rule (50% opacity) between the headline and the sub/CTA row,
   inset to the page margins (it lives inside .container, never full-bleed). */
.lp5-hero .lp4-hero-row {
  margin-top: 36px;
  padding: 0;
}
.lp5-hero .lp4-hero-sub { color: var(--lumos-paper); }

/* Hero copy block: a prominent lead paragraph + a lighter supporting line. */
.lp5-hero-copy { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 16px; }
.lp5-hero-lead { max-width: 680px; font-size: var(--t-22); line-height: 1.3; letter-spacing: -0.01em; }
.lp5-hero-support {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(var(--t-16), 1.4vw, var(--t-18)); line-height: 1.6;
  color: rgba(248, 245, 251, 0.74); margin: 0; max-width: 680px;
}

/* Diagonal separation between "What we do" (paper) and "Our work" (dark).
   Same angle as the hero cut, opposite direction — the dark section's top
   edge slopes DOWN from upper-left to lower-right, revealing the paper above
   on the right. Extra bottom padding leaves room for the 02→03 overlap below
   so the "View all work" button is never touched by the next section's cut. */
.lp5-work {
  clip-path: polygon(-2px 0, calc(100% + 2px) clamp(48px, 7vw, 110px), calc(100% + 2px) 100%, -2px 100%);
  padding-bottom: calc(60px + clamp(48px, 7vw, 110px));
}

/* Hero → section 01: a clear DIAGONAL division. Section 01 is pulled UP to
   overlap the hero and its top edge is clipped on the up-right angle, so the
   dark hero meets section 01 along a crisp diagonal. The light purple gradient
   begins right AT that diagonal seam and fades down into the paper.
   The gradient is OPAQUE (pre-mixed lavender→paper) so the dark hero does NOT
   bleed through the semi-transparent fill — that bleed-through was creating a
   hard horizontal line at the hero's bottom edge. Now the only seam is the
   intended diagonal. Compound selector beats the later .lp4-section shorthand. */
.lp4-section.lp5-approach {
  position: relative;
  z-index: 1;
  clip-path: polygon(0 clamp(48px, 7vw, 110px), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * clamp(48px, 7vw, 110px));
  padding-top: calc(110px + clamp(48px, 7vw, 110px));
  padding-bottom: 60px;
  background: linear-gradient(180deg,
    rgb(214, 205, 253) 0%,
    rgb(231, 225, 252) 210px,
    rgb(248, 245, 251) 470px);
}

/* Diagonal separation between "Our work" (02, dark navy) and "Our clients"
   (03, dark gradient). Both surfaces are dark, so the clients section is
   pulled up to overlap section 02 and its top edge is clipped on the SAME
   upward angle as the hero — sloping UP from lower-left to the right,
   revealing the navy of section 02 behind the cut. */
/* Compound selector (.lp4-quoteband.lp5-clients) so this padding-top beats the
   later .lp4-quoteband { padding: 132px 0 } shorthand on a specificity tie. */
.lp4-quoteband.lp5-clients {
  position: relative;
  z-index: 1;
  clip-path: polygon(0 clamp(48px, 7vw, 110px), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * clamp(48px, 7vw, 110px));
  padding-top: calc(200px + clamp(48px, 7vw, 110px));
  /* Dark drop-shadow hugs the clipped diagonal so the anti-aliased edge never
     reveals the light page background behind it (a 1px hairline on the left,
     where the cut meets the paper boundary). drop-shadow follows the clip
     silhouette; box-shadow would be clipped away. */
  filter: drop-shadow(0 -1.5px 0 #2a1230);
}

/* ============================================================
   Home (v5) — mobile polish. One consolidated block so the
   homepage's responsive behaviour is easy to reason about.
   Breakpoints standardised to TWO values:
     · 600px — work cards go 2-up
     · 900px — full desktop layout (offerings 3-up, clients split)
   Everything else stacks below 900. (Previously these flipped at
   an inconsistent mix of 760 / 899 / 900.)
   ============================================================ */

/* Work cards: 2-up from 600px (was 760px) so larger phones and
   small tablets use the width. */
@media (min-width: 600px) {
  .lp5-work .lp3-work-grid { grid-template-columns: 1fr 1fr; gap: 36px 44px; }
  .lp5-work .lp3-work-grid > :nth-child(even) { margin-top: 56px; }
}

@media (max-width: 899px) {
  /* --- Hero: drop the faded, full-height background prism and
     instead place the image, scaled, BELOW the copy. The dark
     gradient background is retained. Top padding matches the other
     pages (56px below the nav). --- */
  .lp5-hero {
    min-height: auto;
    justify-content: flex-start;
    padding: 56px 0 52px;
  }
  /* Feature hero headline scaled up ~50% on mobile. */
  .lp5-hero h1 { font-size: clamp(58px, 7.4vw, 72px); }
  .lp5-hero > .container { order: 1; }
  .lp5-hero-prism {
    position: static;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    margin: 24px 0 0;
    object-position: center;
    opacity: 1;
    /* Scale up from the top so the image's bottom edge extends down and tucks
       under the section 01 diagonal (no abrupt hard edge / dark wedge). The
       sideways bleed is clipped by the hero's overflow:hidden. */
    transform: scale(1.24);
    transform-origin: top center;
  }
  .lp5-hero .lp4-hero-kicker { margin-bottom: 18px; }
  .lp5-hero .lp4-hero-row { margin-top: 22px; }
  /* Hero copy fills the full column width on mobile. */
  .lp5-hero .lp4-hero-sub, .lp5-hero-lead, .lp5-hero-support { max-width: none; }

  /* --- Offerings (What we do): stack below 900, large feature icons
     with tight inter-card spacing. --- */
  .lp5-approach .lp4-wd-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .lp5-approach .lp4-wd-col { padding-top: 24px; padding-bottom: 24px; border-radius: 100px; }
  .lp5-approach .lp4-wd-icon { width: min(264px, 70vw); height: min(264px, 70vw); }

  /* --- Tame the over-generous section rhythm. Diagonal-clip
     sections keep only enough top padding to clear their cut. --- */
  .lp4-section.lp5-approach { padding-top: 92px; padding-bottom: 48px; }
  .lp3-section.lp5-work { padding-top: 60px; padding-bottom: calc(36px + clamp(48px, 7vw, 110px)); }
  .lp4-quoteband.lp5-clients { padding-top: calc(52px + clamp(48px, 7vw, 110px)); padding-bottom: 60px; }
  .lp4-main .cta-section { padding: 64px 0; }

  /* Inner spacing on small screens */
  .lp5-clients .lp4-clients-grid { gap: 28px; }
  .lp5-work .lp3-work-grid { margin-top: 40px; }
  .lp5-work .lp3-work-all { margin-top: 40px; }
}

/* Below 480px the rotating feature word changes line count as it cycles
   (e.g. "momentum." wraps but "action." doesn't), which made the headline
   height jump and shoved the sub-paragraph up and down. Putting the word on
   its own line fixes the headline height so nothing below it moves. */
@media (max-width: 479px) {
  .lp5-hero h1 .lp4-rot { display: block; }
}

/* Marquee */
.lp4-marquee { margin-top: auto; border-top: 1px solid rgba(248,245,251,0.18); overflow: hidden; padding: 22px 0; }
.lp4-mq-track { display: flex; align-items: center; gap: 52px; width: max-content; animation: lp4-scroll 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lp4-mq-track { animation: none; } }
@keyframes lp4-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp4-mk { font-family: var(--font-display); font-weight: 500; font-size: clamp(15px, 1.5vw, 20px); letter-spacing: 0.02em; color: rgba(248,245,251,0.72); }
.lp4-mk-star { color: var(--lumos-lavender); margin: 0 52px; }

/* Section */
.lp4-section { padding: 120px 0; }
.lp4-eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lumos-graphite); }
.lp4-eyebrow .num, .lp4-eyebrow .sep { color: var(--lumos-stone); margin-right: 12px; }
.lp4-h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.035em; color: var(--lumos-navy); margin: 20px 0 0; max-width: 16ch; }
.lp4-h2 em { font-style: normal; font-weight: 500; }

/* Approach — big numbered rows that fill with accent on hover */
.lp4-rows { margin-top: 60px; border-top: 2px solid var(--lumos-navy); }
.lp4-row {
  position: relative; overflow: hidden; text-decoration: none;
  display: grid; grid-template-columns: 1fr; gap: 8px 32px; padding: 38px 22px;
  border-bottom: 1px solid var(--border-1); align-items: center;
}
@media (min-width: 900px) { .lp4-row { grid-template-columns: 132px minmax(220px, 0.8fr) 1fr 150px; } }
.lp4-row::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform var(--dur-base) var(--ease-out); z-index: 0; }
.lp4-row:hover::before { transform: translateY(0); }
.lp4-row > * { position: relative; z-index: 1; transition: color var(--dur-base) var(--ease-out); }
.lp4-row-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 5vw, 76px); line-height: 0.8; letter-spacing: -0.02em; color: var(--accent); transition: color var(--dur-base) var(--ease-out); }
.lp4-row-name { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lumos-navy); font-size: clamp(26px, 2.8vw, 40px); }
.lp4-row.is-align .lp4-row-name { font-size: clamp(30px, 3.4vw, 52px); }
.lp4-row-desc { font-family: var(--font-body); font-size: var(--t-16); line-height: 1.55; color: var(--lumos-graphite); margin: 0; }
.lp4-row-cta { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--lumos-navy); display: inline-flex; align-items: center; gap: 10px; }
.lp4-row-cta .arr { transition: transform var(--dur-base) var(--ease-out); }
.lp4-row:hover .lp4-row-num, .lp4-row:hover .lp4-row-name, .lp4-row:hover .lp4-row-desc, .lp4-row:hover .lp4-row-cta { color: var(--lumos-paper); }
.lp4-row:hover .lp4-row-cta .arr { transform: translateX(6px); }
.lp4-row.is-align { --accent: var(--lumos-cobalt); }
.lp4-row.is-shape { --accent: var(--lumos-magenta); }
.lp4-row.is-activate { --accent: var(--lumos-emerald); }
.lp4-row.is-ai { --accent: var(--lumos-navy); }
.lp4-row.is-spec { --accent: var(--lumos-sky-ink); }
.lp4-rows-close { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.02em; color: var(--lumos-navy); margin: 56px 0 0; max-width: 28ch; }
.lp4-rows-close em { font-style: normal; font-weight: 500; }

/* What we do — v3 3-block layout with v4 fill-on-hover */
/* What we do (v5) — visual three-column with line icons */
.lp4-wd-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.1; letter-spacing: -0.03em; color: var(--lumos-navy); margin: 22px 0 0; max-width: 20ch; }
.lp4-wd-title strong { font-weight: 500; }
.lp4-wd-grid { display: grid; grid-template-columns: 1fr; gap: 64px 0; margin-top: 44px; }
@media (min-width: 900px) { .lp4-wd-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
/* Clickable offering cards — rounded, spaced; fill with the nav's navy and
   invert all content to white on hover. */
.lp4-wd-col {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; padding: 24px 28px 56px; color: var(--accent);
  border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
@media (min-width: 900px) {
  .lp4-wd-col { padding: 24px 32px 56px; }
}
/* Fluid so the 3-up offering grid fits from the md (900px) breakpoint;
   caps at the original 297px on wide desktops. */
.lp4-wd-icon { width: clamp(132px, 19vw, 297px); height: clamp(132px, 19vw, 297px); margin-bottom: 11px; transition: transform var(--dur-slow) var(--ease-out); will-change: transform; }
.lp4-wd-icon svg { width: 100%; height: 100%; display: block; }
@media (hover: hover) { .lp4-wd-col:hover .lp4-wd-icon { transform: scale(1.14); } }
.lp4-wd-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 42px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.lp4-wd-rule { width: 40px; height: 2px; background: var(--accent); margin: 16px 0 16px; transition: width var(--dur-base) var(--ease-out); }
@media (hover: hover) { .lp4-wd-col:hover .lp4-wd-rule { width: 72px; } }
.lp4-wd-link { font-family: var(--font-display); font-weight: 500; font-size: var(--t-18); color: var(--accent); }
.lp4-wd-link .arr { display: inline-block; margin-left: 6px; transition: transform var(--dur-base) var(--ease-out); }
.lp4-wd-end { white-space: nowrap; }
/* Hover fill — pointer devices only, so touch taps don't get a stuck hover. */
@media (hover: hover) {
  .lp4-wd-col:hover {
    background: var(--lumos-navy);
    transform: translateY(-6px);
    box-shadow: var(--shadow-3);
    color: var(--lumos-paper);
  }
  .lp4-wd-col:hover .lp4-wd-name,
  .lp4-wd-col:hover .lp4-wd-link,
  .lp4-wd-col:hover .lp4-wd-icon { color: var(--lumos-paper); }
  .lp4-wd-col:hover .lp4-wd-rule { background: var(--lumos-paper); }
  .lp4-wd-col:hover .lp4-wd-link .arr { transform: translateX(5px); }
}
/* Press highlight — fires on tap (touch) and click-hold; colour fill only. */
.lp4-wd-col:active {
  background: var(--lumos-navy);
  color: var(--lumos-paper);
}
.lp4-wd-col:active .lp4-wd-name,
.lp4-wd-col:active .lp4-wd-link,
.lp4-wd-col:active .lp4-wd-icon { color: var(--lumos-paper); }
.lp4-wd-col:active .lp4-wd-rule { background: var(--lumos-paper); }
.lp4-wd-col.is-align { --accent: var(--lumos-sky-ink); }
.lp4-wd-col.is-shape { --accent: var(--lumos-magenta); }
.lp4-wd-col.is-activate { --accent: var(--lumos-cobalt); }

.lp4-do-head { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: end; }
@media (min-width: 900px) { .lp4-do-head { grid-template-columns: 1.25fr 1fr; gap: 56px; } }
.lp4-do-intro { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; letter-spacing: -0.02em; color: var(--lumos-navy); margin: 0; max-width: 30ch; }
.lp4-do-intro em { font-style: normal; font-weight: 500; }
.lp4-do-note { font-size: var(--t-16); line-height: 1.6; color: var(--lumos-graphite); margin: 22px 0 0; max-width: 44ch; }
.lp4-do-note strong { font-weight: 500; color: var(--lumos-navy); }
.lp4-do-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 60px; }
@media (min-width: 900px) {
  .lp4-do-grid { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; }
  .lp4-do-tile.is-align { grid-column: 1; grid-row: 1 / span 2; }
}
.lp4-do-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  gap: 28px; padding: 30px 32px; border-radius: var(--radius-md); min-height: 170px;
  border: 1px solid var(--accent); background: var(--lumos-white); text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(26, 25, 49, 0.34);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lp4-do-tile.is-align { min-height: 368px; }
.lp4-do-tile::before {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateY(101%); transition: transform var(--dur-base) var(--ease-out); z-index: 0;
}
.lp4-do-tile:hover::before { transform: translateY(0); }
.lp4-do-tile:hover { box-shadow: 0 26px 50px -16px rgba(26, 25, 49, 0.46); transform: translateY(-4px); }
.lp4-do-tile > * { position: relative; z-index: 1; }
.lp4-do-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lp4-do-name { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); transition: color var(--dur-base) var(--ease-out); }
.lp4-do-tile.is-align .lp4-do-name { font-size: clamp(40px, 5vw, 72px); }
.lp4-do-name.sm { font-size: clamp(26px, 3vw, 38px); }
.lp4-do-steps { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-stone); transition: color var(--dur-base) var(--ease-out); }
.lp4-do-line { font-family: var(--font-display); font-weight: 500; font-size: var(--t-18); line-height: 1.35; color: var(--lumos-navy); margin: 0; max-width: 26ch; transition: color var(--dur-base) var(--ease-out); }
.lp4-do-tile.is-align .lp4-do-line { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.01em; }
.lp4-do-cta { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--lumos-navy); display: inline-flex; align-items: center; gap: 10px; transition: color var(--dur-base) var(--ease-out); }
.lp4-do-cta .arr { transition: transform var(--dur-base) var(--ease-out); }
.lp4-do-tile:hover .lp4-do-name,
.lp4-do-tile:hover .lp4-do-steps,
.lp4-do-tile:hover .lp4-do-line,
.lp4-do-tile:hover .lp4-do-cta { color: var(--lumos-paper); }
.lp4-do-tile:hover .lp4-do-cta .arr { transform: translateX(5px); }
.lp4-do-tile.is-align { --accent: var(--lumos-cobalt); }
.lp4-do-tile.is-shape { --accent: var(--lumos-magenta); }
.lp4-do-tile.is-activate { --accent: var(--lumos-emerald); }
.lp4-do-extra { display: grid; grid-template-columns: 1fr; gap: 22px 56px; margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--border-1); }
@media (min-width: 600px) { .lp4-do-extra { grid-template-columns: 1fr 1fr; } }
.lp4-do-extra p { font-size: var(--t-16); line-height: 1.6; color: var(--lumos-graphite); margin: 0; max-width: 42ch; }
.lp4-do-extra .lbl { font-family: var(--font-display); font-weight: 500; color: var(--lumos-navy); letter-spacing: 0.01em; }

/* Ticker tape — landing v5, adapted from the design-system Marquee.
   Sits as a slim dark band between the clients quote (03) and the CTA (04). */
.lp5-ticker {
  background: var(--lumos-navy-900);
  border-top: 1px solid rgba(248, 245, 251, 0.16);
  border-bottom: 1px solid rgba(248, 245, 251, 0.16);
  overflow: hidden;
  padding: 15px 0;
}
.lp5-ticker-track {
  display: flex; align-items: center; width: max-content;
  white-space: nowrap;
  animation: lp5-ticker-scroll 46s linear infinite;
}
.lp5-ticker:hover .lp5-ticker-track { animation-play-state: paused; }
.lp5-ticker-item {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 400; letter-spacing: 0.01em;
  color: rgba(248, 245, 251, 0.6);
  margin-right: 12px;
}
.lp5-ticker-item strong { font-weight: 700; color: var(--lumos-paper); letter-spacing: 0.06em; }
.lp5-ticker-rest { color: rgba(248, 245, 251, 0.6); }
.lp5-ticker-dot { color: var(--lumos-lavender); font-size: 8px; line-height: 1; }
@keyframes lp5-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .lp5-ticker-track { animation: none; } }

/* Big rotating client quote on navy */
.lp4-quoteband { background: var(--lumos-navy-900) url('assets/gradient-dark.png') center/cover no-repeat; color: var(--lumos-paper); padding: 132px 0; }
.lp4-quoteband .lp4-eyebrow, .lp4-quoteband .lp4-eyebrow .num, .lp4-quoteband .lp4-eyebrow .sep { color: rgba(248,245,251,0.55); }
.lp4-clients-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 900px) { .lp4-clients-grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; } }
.lp4-clients-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6vw, 88px); line-height: 0.96; letter-spacing: -0.04em; color: var(--lumos-paper); margin: 18px 0 0; }
.lp4-clients-title em { font-style: normal; font-weight: 500; }
.lp4-quote-stack { display: grid; }
.lp4-quote-stack > .lp4-bigquote { grid-area: 1 / 1; align-self: center; margin: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.lp4-quote-stack > .lp4-bigquote.on { opacity: 1; }
.lp4-bigquote { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -0.025em; color: var(--lumos-paper); margin: 0; max-width: 22ch; }
/* Paragraph-length testimonials: smaller, wider and looser so they don't tower
   over the punchy one-line quotes in the same rotating slot. */
.lp4-bigquote.is-long { font-size: clamp(20px, 2.05vw, 29px); line-height: 1.4; letter-spacing: -0.01em; max-width: 36ch; }
.lp4-bigquote-mark { color: var(--lumos-lavender); }
.lp4-quote-by { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-lavender); margin-top: 36px; }
.lp4-dots { display: flex; gap: 10px; margin-top: 28px; }
.lp4-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(248,245,251,0.5); background: transparent; cursor: pointer; padding: 0; transition: background var(--dur-fast); }
/* Expand the tap area to ~44px without enlarging the visible dot. */
.lp4-dot::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; }
.lp4-dot.on { background: var(--lumos-lavender); border-color: var(--lumos-lavender); }

/* ============================================================
   TAKE YOUR PULSE — contact form
   ============================================================ */
.pulse-main { background: var(--lumos-paper); }
.pulse-form-section { background: #4e3d5d; }
.pulse-hero {
  position: relative; overflow: hidden; color: var(--lumos-paper);
  padding: 150px 0 120px;
  background: var(--lumos-navy-900) url('assets/pulse-hero.jpg') center 38%/cover no-repeat;
}
.pulse-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(20,18,42,0.92) 0%, rgba(20,18,42,0.72) 48%, rgba(20,18,42,0.34) 100%); }
.pulse-hero .container { position: relative; z-index: 1; }
.pulse-hero-eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lumos-lavender); margin-bottom: 24px; }
.pulse-hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.035em; color: var(--lumos-paper); margin: 0; max-width: 16ch; }
.pulse-hero h1 em { font-style: normal; font-weight: 500; }
.pulse-hero p { font-size: var(--t-18); line-height: 1.65; color: rgba(248,245,251,0.84); max-width: 56ch; margin: 26px 0 0; }
.contact-page .pulse-hero p { max-width: none; }
.pulse-hero .meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: rgba(248,245,251,0.7); }

/* Form card overlapping the hero */
.pulse-form-wrap { max-width: 820px; margin: -72px auto 0; position: relative; z-index: 2; padding: 0 var(--container-pad) 120px; }
.pulse-form { background: var(--lumos-white); border: 1px solid var(--border-1); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 16px clamp(24px, 4vw, 56px) 48px; }
.pulse-q { border-top: 1px solid var(--border-1); padding: 38px 0 8px; }
.pulse-q:first-child { border-top: none; }
.pulse-q-num { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lumos-navy-400); margin-bottom: 14px; }
.pulse-q-label { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -0.01em; color: var(--lumos-navy); margin: 0 0 8px; }
.pulse-q-hint { font-size: var(--t-16); line-height: 1.55; color: var(--lumos-ink); margin: 0 0 32px; }
.pulse-q-hint-label { font-weight: 700; color: var(--lumos-navy); }
/* Clarity section: tighten the gap between the question intro and the response rows. */
.pulse5-clarity .pulse-q-hint { margin-bottom: 16px; }
.pulse5-clarity .pulse4-within { margin-bottom: 24px; }
.pulse5-clarity .pulse4-statement { margin-bottom: 12px; }
.pulse-req { color: var(--lumos-magenta); font-size: 1.35em; font-weight: 700; line-height: 0; vertical-align: -0.05em; margin-left: 3px; }
.pulse-opt { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lumos-stone); }

/* Selectable chips (checkbox / radio) */
.pulse-chips { display: flex; flex-direction: column; gap: 12px; }
/* "Who would you like to speak with" — short labels, lay out as a compact grid. */
.pulse-chips.contact-who { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .pulse-chips.contact-who { grid-template-columns: 1fr 1fr; } }
.contact-who .pulse-chip { align-items: center; }
.pulse-chip { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pulse-chip:hover { border-color: var(--lumos-navy-400); background: var(--lumos-bone); }
.pulse-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pulse-box { flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid var(--lumos-stone); border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: border-color var(--dur-fast), background var(--dur-fast); }
.pulse-chip.radio .pulse-box { border-radius: 50%; }
.pulse-box svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-fast); color: var(--lumos-paper); }
.pulse-chip-text { font-size: var(--t-16); line-height: 1.45; color: var(--lumos-ink); padding-top: 1px; }
.pulse-chip.on { border-color: var(--lumos-navy); background: var(--lumos-navy); }
.pulse-chip.on .pulse-box { background: var(--lumos-lavender); border-color: var(--lumos-lavender); }
.pulse-chip.on .pulse-box svg { opacity: 1; transform: scale(1); color: var(--lumos-navy); }
.pulse-chip.on .pulse-chip-text { color: var(--lumos-paper); }

/* Text inputs */
.pulse-field { margin-top: 16px; }
.pulse-label { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--lumos-navy); margin-bottom: 8px; }
.pulse-input, .pulse-textarea { width: 100%; font-family: var(--font-body); font-size: var(--t-16); color: var(--lumos-ink); background: var(--lumos-paper); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 13px 16px; box-shadow: var(--shadow-inset); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.pulse-input:focus, .pulse-textarea:focus { outline: none; border-color: var(--lumos-navy); box-shadow: 0 0 0 3px rgba(36,34,66,0.12); }
.pulse-input.is-invalid { border-color: var(--lumos-magenta); box-shadow: 0 0 0 3px rgba(210,89,134,0.14); }
.pulse-input.is-invalid:focus { border-color: var(--lumos-magenta); box-shadow: 0 0 0 3px rgba(210,89,134,0.2); }
.pulse-field-error { margin-top: 7px; font-family: var(--font-body); font-size: var(--t-14); font-weight: 500; color: var(--lumos-magenta-ink); }
.pulse-textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
/* Custom dropdown — matches .pulse-input, consistent across all browsers. */
.pulse-cselect { position: relative; }
.pulse-cselect-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer;
}
.pulse-cselect-btn.is-placeholder .pulse-cselect-value { color: var(--lumos-graphite); }
.pulse-cselect-btn[aria-expanded="true"] { background: var(--lumos-white); border-color: var(--lumos-navy); box-shadow: 0 0 0 3px rgba(36,34,66,0.12); }
.pulse-cselect-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-cselect-caret { flex: none; display: inline-flex; color: var(--lumos-navy); transition: transform var(--dur-base) var(--ease-out); }
.pulse-cselect-caret svg { width: 16px; height: 16px; display: block; }
.pulse-cselect-caret.is-open { transform: rotate(180deg); }
.pulse-cselect-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: var(--lumos-white); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-3);
  max-height: 260px; overflow-y: auto;
  animation: pulse-cselect-up var(--dur-fast) var(--ease-out);
}
@keyframes pulse-cselect-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pulse-cselect-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: var(--radius-xs); cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-16); color: var(--lumos-ink);
}
.pulse-cselect-opt.is-active { background: var(--lumos-bone); }
.pulse-cselect-opt.is-selected { color: var(--lumos-navy); font-weight: 500; }
.pulse-cselect-tick { flex: none; display: inline-flex; color: var(--lumos-navy); }
.pulse-cselect-tick svg { width: 15px; height: 15px; display: block; }
.pulse-subtext { margin-top: 10px; }

/* File upload */
.pulse-file { margin-top: 18px; }
.pulse-file-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--lumos-navy); background: var(--lumos-bone); border: 1px dashed var(--lumos-stone); border-radius: var(--radius-sm); padding: 13px 22px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.pulse-file-btn:hover { border-color: var(--lumos-navy); background: var(--lumos-navy); color: var(--lumos-paper); }
.pulse-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pulse-file-names { font-size: var(--t-14); color: var(--lumos-ink); margin-top: 12px; }
.pulse-confidential { font-size: var(--t-12); color: var(--lumos-ink); margin-top: 14px; font-style: normal; }

/* Contact grid */
.pulse-contact-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 4px; }
@media (min-width: 600px) { .pulse-contact-grid { grid-template-columns: 1fr 1fr; } }
/* Reserve room under each field for an inline error so revealing one never
   shifts the surrounding fields (the message sits in pre-allocated space). */
.pulse-contact-grid .pulse-field { position: relative; padding-bottom: 22px; }
.pulse-contact-grid .pulse-field-error { position: absolute; left: 0; right: 0; top: 100%; transform: translateY(-20px); margin: 0; line-height: 1.3; }

/* Step progress */
.pulse-progress { padding: 28px 0 30px; }
.pulse-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pulse-progress-step { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lumos-navy-400); }
.pulse-progress-name { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--lumos-graphite); }
.pulse-progress-track { height: 5px; border-radius: var(--radius-pill); background: var(--lumos-bone); overflow: hidden; }
.pulse-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--lumos-navy); transition: width var(--dur-slow) var(--ease-out); }

/* Submit + error + success */
.pulse-actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.pulse-back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--lumos-navy); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 16px 28px; cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.pulse-back:hover { background: var(--lumos-bone); border-color: var(--lumos-navy); }
.pulse-back-arrow { width: 17px; height: 17px; flex: none; display: block; transition: transform var(--dur-base) var(--ease-out); }
.pulse-back:hover .pulse-back-arrow { transform: translateX(-3px); }
.pulse-actions .pulse-submit { margin-left: auto; }
.pulse-submit { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--lumos-paper); background: var(--lumos-navy); border: none; border-radius: var(--radius-sm); padding: 17px 34px; cursor: pointer; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pulse-submit:hover { background: var(--lumos-lavender); color: var(--lumos-navy); transform: translateY(-2px); }
.pulse-submit:disabled, .pulse-submit:disabled:hover { background: var(--lumos-mist); color: var(--lumos-stone); cursor: not-allowed; transform: none; }
.pulse-note { font-size: var(--t-14); color: var(--lumos-graphite); max-width: 40ch; }
.pulse-error { margin-top: 18px; font-size: var(--t-14); color: var(--lumos-magenta-ink); font-weight: 500; }
.pulse-success { text-align: center; padding: 40px 16px; }
.pulse-success-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--lumos-emerald); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.pulse-success-mark svg { width: 30px; height: 30px; color: var(--lumos-paper); }
.pulse-success h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; color: var(--lumos-navy); margin: 0 0 40px; }
.pulse-success h2 em { font-style: normal; font-weight: 500; }
.pulse-success p { font-size: var(--t-16); line-height: 1.6; color: var(--lumos-ink); max-width: 46ch; margin: 0 auto 28px; }
.pulse-success .pulse-success-next { font-family: var(--font-body); font-weight: 700; font-size: var(--t-16); letter-spacing: 0; text-transform: none; color: var(--lumos-navy); margin: 0 auto 12px; }
.pulse-success a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--lumos-paper); background: var(--lumos-navy); border-radius: var(--radius-sm); padding: 15px 30px; text-decoration: none; }

/* ============================================================
   TAKE YOUR PULSE v2 — frictionless single-screen stepper.
   No tall hero: a fixed left rail + a question card whose
   actions never move. Reuses the v1 chip/input/progress styles.
   ============================================================ */
.pulse2-main {
  background: linear-gradient(180deg, rgba(172, 155, 255, 0.30) 0%, rgba(172, 155, 255, 0) 340px), var(--lumos-paper);
}
.pulse2-stage {
  display: flex; align-items: stretch;
  min-height: calc(100svh - 73px);
  padding: clamp(24px, 4vw, 56px) 0;
}
.pulse2-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  width: 100%; align-items: center;
}
@media (min-width: 900px) {
  .pulse2-grid { grid-template-columns: 0.84fr 1.16fr; gap: clamp(40px, 5vw, 88px); }
}

/* Left rail — context + step list */
.pulse2-side { align-self: center; }
.pulse2-eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lumos-navy-400); margin-bottom: 20px; }
.pulse2-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -0.03em; color: var(--lumos-navy); margin: 0; max-width: 14ch; }
.pulse2-title em { font-style: normal; font-weight: 500; }
.pulse2-intro { font-size: var(--t-16); line-height: 1.6; color: var(--lumos-graphite); margin: 22px 0 0; max-width: 40ch; }
.pulse2-steps { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pulse2-step { width: 100%; display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 0; background: none; border: 0; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--lumos-stone); cursor: default; transition: color var(--dur-base) var(--ease-out); }
.pulse2-step:not(:disabled) { cursor: pointer; }
.pulse2-step:not(:disabled):hover { color: var(--lumos-navy); }
.pulse2-step:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 3px; border-radius: var(--radius-sm); }
.pulse2-step-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--lumos-mist); background: var(--lumos-white); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--lumos-stone); transition: all var(--dur-base) var(--ease-out); }
.pulse2-step-dot svg { width: 14px; height: 14px; }
.pulse2-step.done { color: var(--lumos-graphite); }
.pulse2-step.done .pulse2-step-dot { background: var(--lumos-navy); border-color: var(--lumos-navy); color: var(--lumos-paper); }
.pulse2-step.current { color: var(--lumos-navy); }
.pulse2-step.current .pulse2-step-dot { border-color: var(--lumos-navy); color: var(--lumos-navy); box-shadow: 0 0 0 4px rgba(36, 34, 66, 0.08); }
.pulse2-reassure { margin-top: 30px; font-size: 12px; color: var(--lumos-ink); }

/* Right card — actions stay put; only this card's inner area scrolls */
.pulse2-card {
  display: flex; flex-direction: column;
  background: var(--lumos-white);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3.4vw, 46px) clamp(22px, 3vw, 32px);
}
@media (min-width: 900px) {
  .pulse2-card { max-height: calc(100svh - 73px - clamp(48px, 8vw, 112px)); }
}
.pulse2-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pulse2-progress { flex: none; padding-bottom: 20px; border-bottom: 1px solid var(--border-1); }
.pulse2-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pulse2-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 26px 2px 6px; }
.pulse2-q { animation: p2fade var(--dur-base) var(--ease-out); }
@keyframes p2fade { from { transform: translateY(8px); } to { transform: none; } }
.pulse2-q .pulse-q-num { margin-bottom: 12px; }
.pulse2-q .pulse-q-label { outline: none; }
.pulse2-actions { flex: none; margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--border-1); display: flex; align-items: center; gap: 16px 24px; }
.pulse2-actions .pulse-submit { margin-left: auto; }
.pulse2-actions-spacer { flex: 1; }

@media (max-width: 899px) {
  .pulse2-scroll { overflow: visible; }
  /* Forms: top-align below the nav rather than vertically centering inside a
     full-viewport stage. On tall viewports the centering floated the form in
     the middle, leaving a large empty gap under the nav. Top-aligning keeps the
     mobile experience predictable while desktop keeps its centered card. */
  .pulse2-stage, .pulse3-stage {
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 28px;
    padding-bottom: 44px;
  }
  .pulse2-main .pulse3-intro {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 40px;
    padding-bottom: 56px;
  }
  /* Keep Back + Next on the same row (don't wrap), with tighter buttons. */
  .pulse2-actions { flex-wrap: nowrap; gap: 12px; margin-top: 16px; padding-top: 16px; }
  .pulse2-actions .pulse-back { padding: 13px 18px; }
  .pulse2-actions .pulse-submit { padding: 14px 20px; }

  /* Form header (aside) tightening lives in a later block (after the base
     .pulse3-aside rules) so it isn't overridden by source order. */

  /* Details fields — reserve fixed room for an inline error so showing one
     never changes the field/form height, with the input min-width fix to
     prevent grid overflow and a little gap above the error text. */
  .pulse-contact-grid { gap: 2px 18px; }
  .pulse-contact-grid .pulse-field { padding-bottom: 28px; min-width: 0; }
  .pulse-input, .pulse-textarea { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse2-q { animation: none; }
}

/* Take Your Pulse v3 — intro "gate" shown before the questionnaire.
   A full-viewport hero with a Start prompt; once started it is replaced by
   the v2 stepper, so neither the intro nor the form needs scrolling. */
.pulse3-intro {
  min-height: calc(100svh - 73px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(40px, 7vh, 96px) 0;
}
.pulse3-intro-inner { max-width: 760px; }
.pulse3-eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lumos-navy-400); margin-bottom: 26px; }
.pulse3-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.0; letter-spacing: -0.04em; color: var(--lumos-navy); margin: 0; }
.pulse3-title em { font-style: normal; font-weight: 500; }
.pulse3-sub { font-size: var(--t-18); line-height: 1.6; color: var(--lumos-graphite); margin: 28px auto 0; max-width: 54ch; }
/* When the Start button follows the intro text directly (no meta row), add the
   breathing room the meta row would have provided. */
.pulse3-sub + .pulse3-start { margin-top: 44px; }
.pulse3-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin: 30px 0 42px; }
.pulse3-meta span { display: inline-flex; align-items: center; gap: 18px; font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-graphite); }
.pulse3-meta span:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--lumos-stone); }
@media (max-width: 599px) {
  /* Stack the meta items on their own lines, no dot separators. */
  .pulse3-meta { flex-direction: column; gap: 8px; }
  .pulse3-meta span:not(:last-child)::after { display: none; }
}
.pulse3-start { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: 0.01em; color: var(--lumos-paper); background: var(--lumos-navy); border: 0; border-radius: var(--radius-sm); padding: 20px 42px; cursor: pointer; box-shadow: var(--shadow-2); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pulse3-start:hover { background: var(--lumos-lavender); color: var(--lumos-navy); transform: translateY(-2px); }
.pulse3-start:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 3px; }
.pulse3-start .arr { transition: transform var(--dur-base) var(--ease-out); }
.pulse3-start:hover .arr { transform: translateX(5px); }

/* v3 stepper — header on the left, wider form on the right (desktop).
   No internal form scroll: the card grows to its natural height. */
.pulse3-stage { align-items: center; justify-content: center; }
.pulse3-grid { display: grid; grid-template-columns: 1fr; gap: 32px; width: 100%; align-items: center; }
@media (min-width: 900px) {
  .pulse3-grid { grid-template-columns: minmax(240px, 0.6fr) minmax(0, 1.4fr); gap: clamp(40px, 4.5vw, 76px); }
}
.pulse3-aside { align-self: center; }
.pulse3-aside .pulse2-eyebrow { margin-bottom: 18px; }
.pulse3-head-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.03; letter-spacing: -0.03em; color: var(--lumos-navy); margin: 0; max-width: 14ch; }
.pulse3-head-title em { font-style: normal; font-weight: 500; }
.pulse3-aside-intro { font-size: var(--t-16); line-height: 1.6; color: var(--lumos-ink); margin: 22px 0 0; max-width: 40ch; }
.pulse3-aside .pulse2-reassure { margin-top: 28px; }
.pulse3-grid .pulse2-card { max-height: none; }
.pulse3-grid .pulse2-scroll { overflow: visible; padding-bottom: 4px; }

/* Mobile — tighten the form header (aside) so the form card is reachable
   without scrolling. Placed after the base .pulse3-aside rules so it wins. */
@media (max-width: 899px) {
  .pulse3-grid { gap: 18px; grid-template-columns: minmax(0, 1fr); }
  .pulse3-aside .pulse2-eyebrow { margin-bottom: 8px; }
  .pulse3-aside-intro { margin-top: 12px; }
  .pulse3-aside .pulse2-reassure { margin-top: 14px; }
}

/* ===========================================================
   v4 — one statement at a time, answered Yes / No.
   The question header stays fixed; only the statement and the
   Yes/No buttons swap. Auto-advances on a choice.
   =========================================================== */
/* 1 · Consistent card height so the component never resizes between steps.
   Fixed height; spacing is tuned so every step fits without scrolling. */
@media (min-width: 900px) {
  .pulse4-grid .pulse2-card { min-height: 660px; height: 660px; padding-top: 30px; padding-bottom: 26px; }
  .pulse4-grid .pulse2-scroll { overflow: hidden; padding-top: 18px; padding-bottom: 2px; }
  .pulse4-grid .pulse2-q { margin-block: auto; }
  /* 2 · Tighter chrome so nothing needs to scroll. */
  .pulse4-grid .pulse2-actions { margin-top: 14px; padding-top: 14px; }
  .pulse4-grid .pulse-contact-grid { gap: 2px 18px; }
  .pulse4-grid .pulse-field { margin-top: 0; }
  .pulse4-grid .pulse-q-hint { margin-top: 8px; margin-bottom: 20px; }
  .pulse4-grid .pulse2-q .pulse-q-num { margin-bottom: 8px; }
  .pulse4-grid .pulse-textarea { min-height: 210px; }
}

/* Macro progress — a slim named 5-segment stepper (one source of truth). */
.pulse4-steps { display: flex; gap: 8px; margin-bottom: clamp(24px, 3.2vw, 36px); }
.pulse4-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.pulse4-step-bar { height: 3px; border-radius: 2px; background: var(--lumos-stone); transition: background var(--dur-base) var(--ease-out); }
.pulse4-step.done .pulse4-step-bar { background: var(--lumos-navy); }
.pulse4-step.active .pulse4-step-bar { background: var(--lumos-emerald); }
.pulse4-step-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lumos-navy-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--dur-base) var(--ease-out);
}
.pulse4-step.done .pulse4-step-label { color: var(--lumos-navy); }
.pulse4-step.active .pulse4-step-label { color: var(--lumos-emerald-ink); }
@media (max-width: 599px) {
  /* Hide the step names entirely on mobile — the bars alone show progress. */
  .pulse4-steps { margin-bottom: 24px; }
  .pulse4-step-label { display: none; }
}

/* Micro progress within a question — a slim linear meter only, no label.
   Deliberately a LINE (not circles) and navy (not green) so it reads as a
   different, subtle signal from the numbered circular timeline above. */
.pulse4-within { display: flex; flex-direction: column; align-items: flex-start; margin: 2px 0 48px; }
.pulse4-track { width: 180px; max-width: 60%; height: 3px; border-radius: 999px; background: var(--lumos-stone); overflow: hidden; }
.pulse4-fill { display: block; height: 100%; border-radius: inherit; background: var(--lumos-navy); transition: width var(--dur-slow, 360ms) var(--ease-out); }

/* New-question cue: a clearly bigger, emerald-accented entrance so moving from
   one question to the next is obvious. Keyed to the QUESTION in the JSX, so it
   plays only when the question changes, not on every statement swap. */
.pulse4-qhead .pulse-q-num { position: relative; display: inline-block; }
.pulse4-qhead .pulse-q-num::before {
  content: ""; position: absolute; left: 0; top: -11px; height: 2px; width: 28px;
  border-radius: 2px; background: var(--lumos-emerald); transform-origin: left center;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pulse4-qhead { animation: pulse4-qhead-in 560ms var(--ease-out) both; }
  .pulse4-qhead .pulse-q-num { animation: pulse4-qnum-flash 1150ms var(--ease-out) both; }
  .pulse4-qhead .pulse-q-num::before { animation: pulse4-qnum-bar 1150ms var(--ease-out) both; }
}
@keyframes pulse4-qhead-in {
  from { transform: translateY(18px); }
  to   { transform: none; }
}
@keyframes pulse4-qnum-flash {
  0%, 50% { color: var(--lumos-emerald-ink); }
  100%    { color: var(--lumos-navy-400); }
}
@keyframes pulse4-qnum-bar {
  0%   { transform: scaleX(0); opacity: 1; }
  30%  { transform: scaleX(1); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Quiet fade/slide as each statement (or step) swaps in. Starts at 50%
   opacity (not 0) so content is never blank if the animation is paused
   or throttled, e.g. in a backgrounded tab. */
@keyframes pulse4-in { from { opacity: 0.5; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pulse4-swap { animation: pulse4-in var(--dur-base) var(--ease-out); }
}

.pulse4-statement {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--lumos-navy); margin: 0 0 clamp(24px, 3vw, 36px); text-wrap: pretty;
  min-height: 2.3em;
}
.pulse4-statement .lead { display: block; font-family: var(--font-body); font-weight: 400; font-size: 15px; letter-spacing: 0.01em; color: var(--lumos-ink); margin-bottom: 12px; }

.pulse4-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pulse4-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 20px 18px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-16);
  letter-spacing: 0.01em; color: var(--lumos-navy);
  background: var(--lumos-white); border: 1.5px solid var(--border-strong);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pulse4-btn svg { width: 22px; height: 22px; flex: none; }
.pulse4-btn:hover { background: var(--lumos-navy-50); border-color: var(--lumos-navy); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pulse4-btn:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.pulse4-btn.yes.on { background: var(--lumos-navy); border-color: var(--lumos-navy); color: var(--lumos-paper); }
.pulse4-btn.no.on { background: var(--lumos-navy); border-color: var(--lumos-navy); color: var(--lumos-paper); }
@media (max-width: 599px) {
  /* Tighter chrome so longer labels (“Not for this enquiry”) keep to one or two lines at full text size. */
  .pulse4-btn { padding-left: 10px; padding-right: 10px; gap: 7px; line-height: 1.2; text-wrap: balance; }
}

/* timing — single pick, taps to select + advance. Compact rows that fit the
   fixed card without scrolling. */
.pulse4-picks { display: flex; flex-direction: column; gap: 8px; }
.pulse4-opt {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 12px 20px; border-radius: var(--radius-sm); color: var(--lumos-navy);
  font-family: var(--font-display); font-size: var(--t-16); font-weight: 500;
  background: var(--lumos-white); border: 1.5px solid var(--border-strong);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pulse4-opt:hover { background: var(--lumos-navy-50); border-color: var(--lumos-navy); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pulse4-opt:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.pulse4-opt.on { background: var(--lumos-navy); border-color: var(--lumos-navy); color: var(--lumos-paper); }
.pulse4-opt-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-base) var(--ease-out); }
.pulse4-opt:hover .pulse4-opt-mark { border-color: var(--lumos-navy); }
.pulse4-opt-mark svg { width: 13px; height: 13px; opacity: 0; color: var(--lumos-navy); }
.pulse4-opt.on .pulse4-opt-mark { border-color: var(--lumos-paper); }
.pulse4-opt.on .pulse4-opt-mark svg { opacity: 1; color: var(--lumos-paper); }

/* Tightened type scale for the Take Your Pulse card — fewer competing sizes,
   one clear hierarchy: overline (12) · question (20) · focal statement (26) ·
   helper (15) · controls (16). Scoped here so other forms are unaffected. */
.pulse4-grid .pulse-q-label { font-size: 20px; line-height: 1.3; }
.pulse4-grid .pulse4-qhead { margin-bottom: 24px; }
.pulse4-grid .pulse-q-hint { font-size: 15px; }

/* ===== Our Stories (blog index) ============================================
   Editorial index on the plum theme. Reuses the dark card vocabulary from
   Our Work (plum hairlines, radius-md, hover lift) and the .work-filters pills,
   then adds blog-specific bits: category chips, a byline (avatar + name + role)
   and a share affordance. */
.stories-hero { padding: 108px 0 56px; }
.stories-hero-inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .stories-hero-inner { grid-template-columns: 1.54fr 1fr; gap: 56px; } }
.stories-hero-figure { display: flex; justify-content: center; }
.stories-hero-figure img { width: 100%; max-width: 520px; height: auto; display: block; }
.stories-hero .hero-kicker { margin-bottom: 22px; color: var(--lumos-lavender); }
.stories-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(46px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--lumos-paper); margin: 0; max-width: none;
}
.stories-hero h1 em { font-style: normal; font-weight: 500; }

/* Our Work & Our Stories — desktop hero special treatment: enlarge the
   right-hand image and place it BEHIND the copy so it overlaps slightly.
   Below 900px the image reflows below the text (grid stacks) as before. */
@media (min-width: 900px) {
  .work-hero, .stories-hero { overflow: hidden; }
  .work-hero-inner, .stories-hero-inner { position: relative; }
  .work-hero-text, .stories-hero-text { position: relative; z-index: 2; }
  .work-hero-figure, .stories-hero-figure {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    width: min(43.2%, 544px); margin: 0; z-index: 1; pointer-events: none;
  }
  .work-hero-figure img, .stories-hero-figure img { width: 100%; max-width: none; }
}
.stories-hero-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-22); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--lumos-paper); margin: 28px 0 0; max-width: none;
}
.stories-hero-intro {
  font-size: clamp(var(--t-16), 1.4vw, var(--t-18)); line-height: 1.6; color: rgba(248, 245, 251, 0.82);
  margin: 24px 0 0; max-width: none;
}

.stories-section { padding: 8px 0 224px; }

.stories-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 640px) { .stories-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .stories-grid { grid-template-columns: repeat(3, 1fr); } }

.story-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--plum-line); border-radius: var(--radius-md);
  overflow: hidden; background: rgba(248, 245, 251, 0.02);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.story-card:hover {
  border-color: var(--lumos-lavender);
  background: rgba(248, 245, 251, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 24px 60px -28px rgba(20, 12, 30, 0.7);
}
.story-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; }
.story-card-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.story-card:hover .story-card-image { transform: scale(1.05); }
.story-tag {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius-pill);
  color: var(--lumos-paper);
}
/* Offering chip colours mirror the landing page: Align = teal, Shape = pink,
   Activate = purple. */
.story-tag--align { background: var(--lumos-sky); color: var(--lumos-navy-900); }
.story-tag--shape { background: var(--lumos-magenta); }
.story-tag--activate { background: var(--lumos-lavender); color: var(--lumos-navy-900); }

.story-card-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 24px; }
.story-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: rgba(248, 245, 251, 0.55);
}
.story-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.story-series { color: var(--lumos-lavender); }
.story-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.16; letter-spacing: -0.01em;
  color: var(--lumos-paper); margin: 0 0 12px; text-wrap: pretty;
}
.story-title a {
  color: inherit; text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.story-card:hover .story-title a { color: var(--lumos-lavender); }
.story-desc { font-size: 15px; line-height: 1.6; color: rgba(248, 245, 251, 0.74); margin: 0 0 24px; }

.story-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--plum-line);
}
.story-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.story-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--plum-line-strong);
}
.story-author-meta { display: flex; flex-direction: column; min-width: 0; }
.story-author-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--lumos-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story-author-role {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lumos-lavender);
  margin-top: 2px;
}
.story-share {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--plum-line-strong); background: transparent;
  color: var(--lumos-paper); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.story-share svg { width: 17px; height: 17px; }
.story-share:hover { background: var(--lumos-lilac); color: var(--plum-ink); border-color: var(--lumos-lilac); }
.story-share:focus-visible { outline: 2px solid var(--lumos-lavender); outline-offset: 2px; }
.story-share.is-done { background: var(--lumos-lilac); color: var(--plum-ink); border-color: var(--lumos-lilac); }
.story-share-done { font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; }

/* Quote band — editorial belief statement before the footer.
   Diagonal top edge (same gesture as the landing clients band): the deeper
   plum-ink rises on a slope into the stories section above. The negative
   margin overlaps the cut; the extra padding-top keeps content clear of it. */
.stories-quote-band {
  position: relative; z-index: 1;
  background: var(--plum-ink);
  clip-path: polygon(0 clamp(40px, 6vw, 96px), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * clamp(40px, 6vw, 96px));
  padding: calc(104px + clamp(40px, 6vw, 96px)) 0 104px;
}
.stories-quote-eyebrow { margin-bottom: 36px; padding-bottom: 0; border-bottom: none; }
.stories-quote {
  margin: 0; max-width: 24ch;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.12; letter-spacing: -0.025em;
  color: var(--lumos-paper); text-wrap: balance;
}
.stories-quote em { font-style: normal; font-weight: 500; }
.stories-quote-mark { color: var(--lumos-lavender); }
.stories-quote-attr {
  margin-top: 32px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-lavender);
}

@media (max-width: 899px) {
  .stories-hero { padding-top: 56px; }
  .stories-quote-band { padding: calc(72px + clamp(40px, 6vw, 96px)) 0 72px; }
}

/* ===== Article / Story page (reading template) ============================
   Light, single-column reading layout. A narrow ~760px column keeps line
   length comfortable; images and the closing "More stories" band reuse the
   index card vocabulary. Header carries the label, title, byline and share. */
.article-col { max-width: 960px; margin-left: auto; margin-right: auto; }

.article-head { padding: 72px 0 0; }
.article-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--lumos-graphite);
  text-decoration: none; margin-bottom: 30px;
  transition: color var(--dur-base) var(--ease-out);
}
.article-back:hover { color: var(--lumos-magenta); }

.article-tag {
  display: inline-block;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius-pill); color: var(--lumos-paper);
}
.article-tag.is-align { background: var(--lumos-sky); color: var(--lumos-navy-900); }
.article-tag.is-shape { background: var(--lumos-magenta); }
.article-tag.is-activate { background: var(--lumos-lavender); color: var(--lumos-navy-900); }

.article-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -0.04em;
  color: var(--lumos-navy); margin: 22px 0 0; text-wrap: balance;
}
.article-byline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px;
  margin-top: 34px; padding-bottom: 32px; border-bottom: 1px solid var(--border-1);
}
.article-byline-id { display: flex; align-items: center; gap: 13px; }
.article-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.article-byline-meta { display: flex; flex-direction: column; gap: 4px; }
.article-author-name { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--lumos-ink); }
/* Role, date and read time share ONE style and sit on a single sub-line. */
.article-author-detail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--lumos-graphite);
}
.article-author-detail .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--lumos-stone); }

.article-share { display: inline-flex; gap: 10px; margin-left: auto; }
.article-share-btn {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); background: transparent; color: var(--lumos-navy); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.article-share-btn svg { width: 17px; height: 17px; }
.article-share-btn:hover { background: var(--lumos-navy); color: var(--lumos-paper); border-color: var(--lumos-navy); }
.article-share-btn:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.article-share-btn.is-done { background: var(--lumos-navy); color: var(--lumos-paper); border-color: var(--lumos-navy); }
.article-share-done { font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; }

/* ===== Mock share sheet — previews how a story appears when shared ===== */
/* ===== Site-wide share modal (one general icon → channels + page link) ===== */
.share-ov {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(36, 34, 66, 0.46); backdrop-filter: blur(6px);
  animation: share-fade var(--dur-base) var(--ease-out);
}
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }
.share-modal {
  width: 100%; max-width: 456px; background: var(--lumos-paper);
  border-radius: var(--radius-md); box-shadow: var(--shadow-3); overflow: hidden;
  padding: 8px 8px 28px; animation: share-rise var(--dur-base) var(--ease-out);
}
@keyframes share-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.share-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 0; }
.share-modal-headings { min-width: 0; }
.share-modal-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--lumos-navy); margin: 0; }
.share-modal-sub {
  font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.32; letter-spacing: -0.01em;
  color: var(--lumos-ink); margin: 7px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.share-modal-close {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: var(--lumos-bone); color: var(--lumos-graphite); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.share-modal-close svg { width: 17px; height: 17px; }
.share-modal-close:hover { background: var(--lumos-navy); color: var(--lumos-paper); }
.share-modal-close:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }

.share-storytitle {
  margin: 16px 0 4px; padding: 16px 18px; background: var(--lumos-lilac);
  font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--lumos-navy); text-wrap: pretty;
}
.share-channels { display: flex; gap: 8px; padding: 14px 0 4px; }
.share-channel {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: none; cursor: pointer; padding: 6px 4px;
}
.share-channel-ic {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--lumos-bone); color: var(--lumos-navy);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.share-channel-ic svg { width: 26px; height: 26px; }
.share-channel:hover .share-channel-ic { background: var(--lumos-navy); color: var(--lumos-paper); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.share-channel:focus-visible { outline: none; }
.share-channel:focus-visible .share-channel-ic { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.share-channel-label { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--lumos-navy); }

.share-pagelink { padding: 20px 18px 0; }
.share-pagelink-label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--lumos-navy); margin-bottom: 12px; }
.share-pagelink-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--lumos-bone); border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 6px 6px 6px 16px;
}
.share-pagelink-input {
  flex: 1 1 0; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font-body); font-size: 15px; color: var(--lumos-graphite); text-overflow: ellipsis;
}
.share-pagelink-copy {
  width: 42px; height: 42px; flex: none; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: transparent; color: var(--lumos-navy); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.share-pagelink-copy svg { width: 19px; height: 19px; }
.share-pagelink-copy:hover { background: var(--lumos-navy); color: var(--lumos-paper); }
.share-pagelink-copy:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.share-pagelink-copy.is-done { color: var(--lumos-emerald); }
.share-pagelink-copy.is-done:hover { background: var(--lumos-emerald); color: var(--lumos-paper); }

.share-trigger {
  width: 40px; height: 40px; border-radius: 50%; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-2); color: var(--lumos-graphite);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.share-trigger svg { width: 17px; height: 17px; }
.share-trigger:hover { background: var(--lumos-navy); color: var(--lumos-paper); border-color: var(--lumos-navy); }
.share-trigger:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }

@media (max-width: 479px) {
  .share-channel-ic { width: 58px; height: 58px; }
}

/* In-this-series nav at the top of a series article. */
.article-series { padding: 30px 0 0; }
.article-series-eyebrow { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lumos-graphite); margin-bottom: 16px; }
.article-series-links { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .article-series-links { grid-template-columns: 1fr 1fr; gap: 16px; } }
.article-series-link {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--border-1); border-radius: var(--radius-sm);
  text-decoration: none; background: var(--lumos-paper); box-shadow: var(--shadow-1);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.article-series-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-3); transform: translateY(-4px); }
.article-series-link:active { border-color: var(--lumos-navy); background: var(--lumos-bone); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.article-series-link:focus-visible { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.article-series-link-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.article-series-link-kicker { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lumos-lavender-ink); }
.article-series-link-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--lumos-navy); }
.article-series-link .arr { flex: none; color: var(--lumos-navy); transition: transform var(--dur-base) var(--ease-out); }
.article-series-link:hover .arr { transform: translateX(4px); }

.article-lead { margin: 40px auto 0; }
.article-lead img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.article-lead figcaption,
.article-figure figcaption {
  font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--lumos-graphite); margin-top: 12px;
}

.article-body { padding: 44px 0 64px; }
/* Lead body sits between the byline and the hero — tighter vertical rhythm. */
.article-lead-body { padding: 36px 0 8px; }
.article-body > * + * { margin-top: 26px; }
.article-p { font-family: var(--font-body); font-size: 18px; line-height: 1.75; color: var(--lumos-ink); margin: 0; max-width: none; }
/* Paragraph break. Higher-specificity than .article-p's margin reset so the
   gap between a paragraph and whatever precedes it actually renders. */
.article-body > * + .article-p { margin-top: 1.5em; }
.article-p a { color: var(--lumos-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out); }
.article-p a:hover { color: var(--lumos-magenta); text-decoration-color: currentColor; }
.article-p em { font-style: italic; }

.article-h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--lumos-navy); margin: 54px 0 0; text-wrap: pretty;
}
.article-h2 + * { margin-top: 18px !important; }
.article-h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--lumos-navy); margin: 40px 0 0; text-wrap: pretty;
}
.article-h3 + * { margin-top: 14px !important; }

.article-figure { margin: 44px 0; }
.article-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }

.article-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
/* Give lists a clear breath before they start — they sit too close to the
   preceding paragraph otherwise (the .article-list margin reset overrides the
   generic sibling spacing). A touch more than the paragraph gap (1.5em). */
.article-body > * + .article-list { margin-top: 2em; }
.article-list li { font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: var(--lumos-ink); padding-left: 32px; position: relative; }
/* Bullets match the offerings page: a small hollow circle in muted
   lavender-navy. */
.article-ul li::before {
  content: ""; position: absolute; left: 1px; top: 0.5em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--lumos-navy-400); border-radius: 50%; background: transparent;
}
/* Numbers in purple, set at the body size + line-height so each numeral sits
   on the same baseline as the text beside it. */
.article-ol { counter-reset: a; }
.article-ol li { counter-increment: a; padding-left: 44px; }
.article-ol li::before {
  content: counter(a, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; line-height: 1.65; letter-spacing: 0.02em;
  color: var(--lumos-navy-400);
}

/* Table — clean editorial style. Display-cap header over a navy rule, hairline
   row dividers, the first column emphasised. Scrolls horizontally if narrow. */
.article-table-wrap { margin: 8px 0 0; overflow-x: auto; }
.article-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.article-table caption {
  caption-side: bottom; text-align: left;
  font-size: 13px; line-height: 1.5; color: var(--lumos-graphite); margin-top: 12px;
}
.article-table th, .article-table td { text-align: left; padding: 14px 18px; vertical-align: top; }
.article-table th:first-child, .article-table td:first-child { padding-left: 0; }
.article-table th:last-child, .article-table td:last-child { padding-right: 0; }
.article-table thead th {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--lumos-graphite);
  border-bottom: 1.5px solid var(--lumos-navy); white-space: nowrap;
}
.article-table tbody td {
  font-size: 16px; line-height: 1.6; color: var(--lumos-ink);
  border-bottom: 1px solid var(--border-1);
}
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody td:first-child {
  font-family: var(--font-display); font-weight: 500; color: var(--lumos-navy); white-space: nowrap;
}

.article-quote { margin: 48px 0; padding: 0; border: none; }
.article-quote p { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 3vw, 34px); line-height: 1.22; letter-spacing: -0.02em; color: var(--lumos-navy); margin: 0; text-wrap: balance; }
.article-quote .mark { color: var(--lumos-lavender-ink); }
.article-quote cite { display: block; margin-top: 18px; font-style: normal; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-graphite); }

.article-end-share {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid var(--border-1);
}
.article-end-share .label { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lumos-graphite); }
.article-end-share .article-share { margin-left: 0; }

/* More stories — dark band reusing the index card vocabulary, into the footer */
.article-related { background: var(--plum); color: var(--lumos-paper); padding: 88px 0 100px; margin-top: 80px; }
.article-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 44px; flex-wrap: wrap; }
.article-related-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.03em; color: var(--lumos-paper); margin: 0; }
.article-related-all { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lumos-paper); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color var(--dur-base) var(--ease-out); }
.article-related-all:hover { color: var(--lumos-lavender); }

@media (max-width: 899px) {
  .article-head { padding-top: 56px; }
  .article-share { margin-left: 0; }
  .article-related { margin-top: 56px; }
}

/* ============================================================
   Take Your Pulse V2 — 7-section flow (pulse5-*).
   Numbered progress (no per-step names) + the current section
   name surfaced once. New 4-step readiness scale. Adds only;
   the live form's pulse4-* styles are untouched.
   ============================================================ */

/* Numbered macro progress: 7 segments, numbered not named, with the
   current section's name shown once beside the step count. */
.pulse5-progress { margin-bottom: clamp(22px, 3vw, 32px); }
.pulse5-progress-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pulse5-progress-count { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumos-navy-400); flex: none; white-space: nowrap; }
.pulse5-progress-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse5-progress-count .sep { margin: 0 3px; opacity: 0.55; }
.pulse5-progress-name { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lumos-emerald-ink); }
.pulse5-steps {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; list-style: none; margin: 0; padding: 0 0 28px;
}
/* Base track + completed-progress fill, spanning circle centre to circle centre
   (18px = circle radius), so the first/last circles sit flush to the margins. */
.pulse5-steps::before, .pulse5-steps::after {
  content: ''; position: absolute; top: 17px; left: 18px; height: 2px; z-index: 0;
}
.pulse5-steps::before { right: 18px; background: var(--lumos-stone); }
.pulse5-steps::after {
  width: calc((100% - 36px) * var(--p, 0)); background: var(--lumos-navy);
  transition: width var(--dur-base) var(--ease-out);
}
.pulse5-step { flex: 0 0 auto; width: 36px; position: relative; }
.pulse5-step-btn {
  display: block; width: 36px; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: default;
}
.pulse5-step.done .pulse5-step-btn { cursor: pointer; }
.pulse5-step-btn:focus-visible { outline: none; }
.pulse5-step-dot {
  position: relative; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  background: var(--lumos-paper); border: 2px solid var(--lumos-stone);
  color: var(--lumos-navy-400);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pulse5-step-dot svg { width: 17px; height: 17px; }
.pulse5-step.done .pulse5-step-dot { background: var(--lumos-navy); border-color: var(--lumos-navy); color: var(--lumos-paper); }
.pulse5-step.active .pulse5-step-dot { background: var(--lumos-emerald); border-color: var(--lumos-emerald); color: var(--lumos-paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lumos-emerald) 18%, transparent); }
/* Hover + press feedback when stepping back to a completed section. */
.pulse5-step.done .pulse5-step-btn:hover .pulse5-step-dot { background: var(--lumos-navy-ink); border-color: var(--lumos-navy-ink); box-shadow: 0 0 0 4px var(--lumos-navy-50); transform: translateY(-1px); }
.pulse5-step.done .pulse5-step-btn:active .pulse5-step-dot { transform: scale(0.92); box-shadow: 0 0 0 3px var(--lumos-navy-100); }
.pulse5-step-btn:focus-visible .pulse5-step-dot { box-shadow: 0 0 0 3px var(--lumos-paper), 0 0 0 5px var(--lumos-navy); }
.pulse5-step-label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 12px; font-weight: 500; line-height: 1.2;
  text-align: center; white-space: nowrap; color: var(--lumos-navy-400);
}
.pulse5-step:first-child .pulse5-step-label { left: 50%; transform: translateX(-50%); text-align: center; }
.pulse5-step:last-child .pulse5-step-label { left: 50%; right: auto; transform: translateX(-50%); text-align: center; }
.pulse5-step.active .pulse5-step-label { color: var(--lumos-emerald); }
.pulse5-step.done .pulse5-step-label { color: var(--lumos-navy); }
.pulse5-step.done .pulse5-step-btn:hover .pulse5-step-label { color: var(--lumos-navy-ink); }
@media (max-width: 560px) {
  .pulse5-step, .pulse5-step-btn, .pulse5-step-dot { width: 30px; }
  .pulse5-step-dot { height: 30px; font-size: 13px; }
  .pulse5-steps::before, .pulse5-steps::after { top: 14px; left: 15px; }
  .pulse5-steps::before { right: 15px; }
  .pulse5-steps::after { width: calc((100% - 30px) * var(--p, 0)); }
  .pulse5-step-label { font-size: 10px; }
}

/* 4-step readiness scale: a single connected track with four labelled
   stops. Click any stop to select (no dragging); keyboard accessible. */
.pulse5-scale { margin: 6px 0 10px; }
.pulse5-scale-stops { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.pulse5-scale-stops::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 22px; height: 2px;
  background: var(--lumos-stone); border-radius: 2px;
}
.pulse5-stop {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 0 4px 4px; background: transparent; border: none; cursor: pointer; font: inherit;
}
.pulse5-stop-mark {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  background: var(--lumos-paper); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--lumos-navy);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pulse5-stop:hover .pulse5-stop-mark { border-color: var(--lumos-navy); transform: translateY(-3px) scale(1.12); box-shadow: var(--shadow-2); }
.pulse5-stop:focus-visible { outline: none; }
.pulse5-stop:focus-visible .pulse5-stop-mark { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.pulse5-stop.sel .pulse5-stop-mark { background: var(--lumos-navy); border-color: var(--lumos-navy); color: var(--lumos-paper); transform: scale(1.08); box-shadow: var(--shadow-2); }
.pulse5-stop-label {
  font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: 1.25;
  text-align: center; color: var(--lumos-graphite); text-wrap: balance; max-width: 13ch;
  transition: color var(--dur-base) var(--ease-out);
}
.pulse5-stop.sel .pulse5-stop-label { color: var(--lumos-navy); font-weight: 500; }
@media (max-width: 599px) {
  /* Keep the horizontal scaler, but pull the end stops out to the text edges so
     the timeline spans the full content width (aligned left/right with the
     statement above) and the four stops sit evenly across it. */
  .pulse5-scale { margin: 10px 0 6px; }
  .pulse5-scale-stops { display: flex; justify-content: space-between; padding-bottom: 52px; }
  .pulse5-scale-stops::before { left: 18px; right: 18px; top: 18px; }
  .pulse5-stop { flex: 0 0 36px; width: 36px; padding: 0; }
  .pulse5-stop-mark { width: 36px; height: 36px; font-size: 15px; }
  .pulse5-stop-label {
    position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 60px; text-align: center; font-size: 13px;
    line-height: 1.2; text-wrap: balance;
  }
  .pulse5-stop:first-child .pulse5-stop-label { left: 0; transform: none; text-align: left; }
  .pulse5-stop:last-child .pulse5-stop-label { left: auto; right: 0; transform: none; text-align: right; }
}

/* Preferred contact method — real radio buttons (native input, branded dot). */
.pulse5-radios { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.pulse5-radio { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0; }
.pulse5-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.pulse5-radio-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border-strong); background: var(--lumos-paper);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base) var(--ease-out);
}
.pulse5-radio-dot::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--lumos-navy);
  transform: scale(0); transition: transform var(--dur-base) var(--ease-out);
}
.pulse5-radio:hover .pulse5-radio-dot { border-color: var(--lumos-navy); }
.pulse5-radio input:checked + .pulse5-radio-dot { border-color: var(--lumos-navy); }
.pulse5-radio input:checked + .pulse5-radio-dot::after { transform: scale(1); }
.pulse5-radio input:focus-visible + .pulse5-radio-dot { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.pulse5-radio-label { font-family: var(--font-body); font-size: 16px; color: var(--lumos-navy); }

/* Contact field that should span the full grid width (Name, Preferred method). */
@media (min-width: 600px) {
  .pulse-contact-grid .pulse-field-wide { grid-column: 1 / -1; }
}

/* Suppress the inherited "new question" emerald bar that flashes above the
   eyebrow on Q1 / Q2 / Q5 — it reads like a loading indicator. Scoped to the
   V2 form only so the original Take Your Pulse keeps its cue. */
.pulse5-grid .pulse4-qhead .pulse-q-num::before { display: none; animation: none; }

/* The V2 flow holds more variable content per step (a 7-option Context list,
   a 6-field contact step). Let the card grow to the tallest step instead of
   clipping at a fixed height, while keeping a comfortable minimum so the
   shorter yes/no steps don't feel cramped. */
@media (min-width: 900px) {
  .pulse5-grid .pulse2-card { height: auto; min-height: 660px; }
  /* Clarity, Timing and Details share one fixed height (the tallest, the
     8-option Details dept/relationship steps) so the card doesn't resize
     between them. */
  .pulse5-grid .pulse2-card.pulse6-tall { height: 748px; min-height: 748px; }
  .pulse5-grid .pulse2-scroll { overflow: visible; }
  /* Top-align the question so the heading stays at a fixed position across
     every section instead of recentring to each step's content height. */
  .pulse5-grid .pulse2-q { margin-block: 0; }
  /* Details step: bound the card so the "anything else" textarea grows INTO a
     scrollable area instead of pushing the Submit button (which sits outside
     .pulse2-scroll) down the page. */
  .pulse5-grid .pulse2-card.pulse6-contact-step { height: 748px; min-height: 748px; }
  .pulse5-grid .pulse6-contact-step .pulse2-scroll { overflow-y: auto; padding-right: 10px; }
  /* Once the user opens the "anything else" note the fields scroll within the
     same fixed card. */
  .pulse5-grid .pulse6-contact-step.pulse6-expanded { height: 748px; min-height: 748px; }
  .pulse5-grid .pulse6-contact-step.pulse6-expanded .pulse2-scroll { overflow-y: auto; }
  /* Soft white fade over the bottom edge of the scrolling fields, lighter so
     more of the obscured fields stay visible, plus the light separator line
     above the Submit button. */
  .pulse5-grid .pulse6-contact-step .pulse2-actions {
    position: relative; border-top: 1px solid var(--border-2); margin-top: 0; padding-top: 24px;
  }
  .pulse5-grid .pulse6-contact-step.pulse6-expanded .pulse2-actions::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 2px);
    height: 46px; pointer-events: none;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  }
}

/* Mobile refinements for the Take Your Pulse V2 form. Scoped to .pulse5-grid
   so the other forms are untouched. */
@media (max-width: 599px) {
  /* 1 · Only the active step keeps its name; the rest read as numbers alone. */
  .pulse5-grid .pulse5-step-label { display: none; }
  .pulse5-grid .pulse5-step.active .pulse5-step-label { display: block; }
  /* Keep the one visible end-label inside the card bounds. */
  .pulse5-grid .pulse5-step:first-child.active .pulse5-step-label { left: 0; transform: none; text-align: left; }
  .pulse5-grid .pulse5-step:last-child.active .pulse5-step-label { left: auto; right: 0; transform: none; text-align: right; }

  /* 2 · Question and statement run the full available width, wrapping greedily
     (text-wrap: balance was splitting the heading into odd short lines). */
  .pulse5-grid .pulse-q-label,
  .pulse5-grid .pulse4-statement { max-width: none; width: 100%; }
  .pulse5-grid .pulse-q-label { text-wrap: wrap !important; text-wrap-style: auto !important; }

  /* 3 · Internal side padding on the white card. */
  .pulse5-grid .pulse2-card { padding-left: 16px; padding-right: 16px; }

  /* 4 · 24px from the question down to the progress meter, 40px from the meter
     down to the statement. */
  .pulse5-grid .pulse4-qhead { margin-bottom: 24px; }
  .pulse5-grid .pulse4-within { margin-bottom: 40px; }

  /* 5 · Halve the space between the progress bar and the question. */
  .pulse5-grid .pulse5-progress { margin-bottom: 11px; }
  .pulse5-grid .pulse2-scroll { padding-top: 13px; }

  /* 6 · Reserve the statement height so the card doesn't jump as statements
     (2–3 lines) swap within a question; this also keeps sections 1 & 2 (both
     yes/no) matched. Sections 3, 4, 5 take their own natural, stable height. */
  .pulse5-grid .pulse4-statement { min-height: 79px; }
}

/* ============================================================
   Take Your Pulse V2 — pulse6 updates (June 2026).
   Loading-bar progress (no numbers, names beneath, current step
   green), auto-advancing flow, and the "anything else" toggle on
   the details step. Adds only; pulse5-* above is untouched.
   ============================================================ */

/* Loading-bar progress: one filled segment per step, current step green,
   completed steps navy, the step name beneath each. Not interactive. */
.pulse6-bars { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.pulse6-bar { flex: 1 1 0; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pulse6-bar-track {
  height: 6px; border-radius: 999px; background: var(--lumos-stone);
  transition: background var(--dur-base) var(--ease-out);
}
.pulse6-bar.done .pulse6-bar-track { background: var(--lumos-navy); }
.pulse6-bar.active .pulse6-bar-track { background: var(--lumos-emerald); }
.pulse6-bar-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; line-height: 1.25; text-align: center;
  color: var(--lumos-navy-400); text-wrap: balance;
  transition: color var(--dur-base) var(--ease-out);
}
.pulse6-bar.done .pulse6-bar-label { color: var(--lumos-navy); }
.pulse6-bar.active .pulse6-bar-label { color: var(--lumos-emerald); }
@media (max-width: 599px) {
  .pulse5-grid .pulse6-bars { gap: 6px; }
  .pulse5-grid .pulse6-bar-label { display: none; }
  .pulse5-grid .pulse6-bar.active .pulse6-bar-label { display: block; }
}

/* "Anything else" toggle on the details step — a checkbox that reveals a
   free-text field when ticked. */
.pulse6-check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0; }
.pulse6-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pulse6-check-box {
  width: 22px; height: 22px; border-radius: var(--radius-sm); flex: none;
  border: 1.5px solid var(--border-strong); background: var(--lumos-paper);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lumos-paper);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pulse6-check-box svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.pulse6-check:hover .pulse6-check-box { border-color: var(--lumos-navy); }
.pulse6-check input:checked + .pulse6-check-box { background: var(--lumos-navy); border-color: var(--lumos-navy); }
.pulse6-check input:checked + .pulse6-check-box svg { opacity: 1; }
.pulse6-check input:focus-visible + .pulse6-check-box { outline: 2px solid var(--lumos-navy); outline-offset: 2px; }
.pulse6-check-label { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--lumos-ink); }
.pulse6-more { margin-top: 16px; animation: pulse6-expand var(--dur-base) var(--ease-out); }
@keyframes pulse6-expand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Larger question + statement type on the live V2 form. Scoped to .pulse5-grid
   so the v4 form keeps its tighter scale. */
.pulse5-grid .pulse-q-label { font-size: 24px; }
.pulse5-grid .pulse4-statement { font-size: clamp(24px, 2.4vw, 30px); }

/* Timing step: give the options more breathing room below the question. */
.pulse5-grid .pulse-q-label + .pulse4-picks { margin-top: 32px; }
@media (max-width: 599px) {
  .pulse5-grid .pulse-q-label + .pulse4-picks { margin-top: 24px; }
}

/* ============================================================
   Case study — Portfolio section (03). Extended-template only
   (SLNSW "Shaping Content Into Connected Experiences"). Sits on
   paper, navy editorial type, with drop-in image-slot galleries
   per theme so the visual richness of the work can be shown.
   ============================================================ */
.cs-pf-head { max-width: 760px; }
.cs-pf-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.025em;
  color: var(--lumos-paper); margin: 18px 0 0;
}
.cs-pf-intro {
  font-size: var(--t-16); line-height: 1.7; color: rgba(248, 245, 251, 0.78);
  margin: 22px 0 0; max-width: 60ch;
}

/* Full-bleed montage at the top of the portfolio section */
.cs-pf-montage { width: 100%; margin: 0 0 56px; }
.cs-pf-montage img { width: 100%; height: auto; display: block; }

.cs-pf-themes { display: flex; flex-direction: column; gap: 96px; margin-top: 72px; }

/* Bold alternating 1:1 split — text one half, visuals the other, flipping
   each row (text→image, image→text, text→image). */
.cs-pf-theme {
  display: grid; grid-template-columns: 1fr; gap: 36px 64px; align-items: stretch;
}
.cs-pf-copy, .cs-pf-figure { min-width: 0; }
.cs-pf-copy { align-self: center; }
@media (min-width: 900px) {
  .cs-pf-theme { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-pf-theme--reverse .cs-pf-copy { order: 2; }
  .cs-pf-theme--reverse .cs-pf-figure { order: 1; }
}

.cs-pf-kicker { display: flex; align-items: baseline; gap: 12px; }
.cs-pf-kicker-num {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-14);
  color: var(--lumos-lavender);
}
.cs-pf-kicker-label {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-14);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--lumos-paper);
}
.cs-pf-headline {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--lumos-paper); margin: 20px 0 0; text-wrap: balance;
}
.cs-pf-body { margin-top: 24px; }
.cs-pf-body p { font-size: var(--t-16); line-height: 1.7; color: rgba(248, 245, 251, 0.78); margin: 0; max-width: 52ch; }
.cs-pf-body p + p { margin-top: 18px; }

/* Visual half — one bold image that fills the column edge to edge. */
.cs-pf-figure { display: flex; }
.cs-pf-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 12px; box-shadow: var(--shadow-2); min-height: 320px;
}