/* ============================================================
   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
   ============================================================ */
@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:hover { background: var(--lumos-lavender-ink); }
.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 { padding: 88px 0 80px; overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 920px) { .hero-inner { grid-template-columns: 7fr 5fr; } }
.hero-kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  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: 16px;
  line-height: 1.6;
  color: var(--lumos-graphite);
  max-width: 70ch;
  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);
}

/* ===== 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: 920px) {
  .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-graphite);
  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-graphite);
  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: 940px) {
  .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-graphite);
  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: 13.5px;
  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-size: 12px;
  line-height: 1.45;
  color: var(--lumos-graphite);
}
.duration-card-dark .duration-note { color: rgba(248,245,251,0.7); }

/* ===== 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(0 0, 100% clamp(48px, 7vw, 110px), 100% 100%, 0 100%);
  margin-top: calc(-1 * clamp(48px, 7vw, 110px));
  padding: calc(120px + clamp(48px, 7vw, 110px)) 0 calc(40px + clamp(48px, 7vw, 110px));
}
.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(0 clamp(48px, 7vw, 110px), 100% 0, 100% 100%, 0 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: 940px) {
  .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-body p {
  font-size: 15px;
  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: 13px; 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); }

/* ===== 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: 17px;
  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%; }
}

/* ===== 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: 760px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
}
.footer-mark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 26px;
  color: #ac9bff;
  margin: 0 0 20px;
}
.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; }
.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: 104px 0 64px; }
.work-hero-inner {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media (min-width: 900px) {
  .work-hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}
.work-hero-figure { display: flex; justify-content: center; }
.work-hero-figure img { width: 100%; max-width: 520px; 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: 18ch;
}
.work-hero h1 em { font-style: normal; font-weight: 500; }
.work-hero-intro {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(248, 245, 251, 0.78);
  max-width: 60ch;
  margin: 28px 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;
  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: 880px) {
  .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: 760px) { .work-grid { grid-template-columns: 1fr 1fr; } }
.work-card {
  cursor: pointer;
  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); }

/* ============================================================
   Case-study detail page (plum theme)
   ============================================================ */
.cs-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  color: var(--lumos-paper);
  text-decoration: none;
  margin-bottom: 40px;
  transition: gap var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.cs-back:hover { color: var(--lumos-lavender); gap: 14px; }

/* 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-hero-inner {
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
}
@media (min-width: 920px) { .cs-hero-inner { grid-template-columns: 1.3fr 1fr; } }
.cs-client {
  font-family: var(--font-display);
  font-size: 12px; 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: 880px) { .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: 880px) { .cs-panel .cs-grid-2 { grid-template-columns: 1.35fr 1fr; gap: 64px; } }
.cs-panel .cs-body p { font-size: var(--t-18); 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: var(--t-18); 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: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--lumos-navy);
  margin: 0;
}
.cs-disciplines {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px;
  margin-top: 48px; padding-top: 36px;
  border-top: 1px solid var(--border-1);
}
@media (min-width: 760px) { .cs-disciplines { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .cs-disciplines--3 { grid-template-columns: repeat(3, 1fr); } }
.cs-discipline { display: flex; flex-direction: column; gap: 14px; }
.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: 13px; 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: var(--t-18); line-height: 1.7; color: rgba(248, 245, 251, 0.78); margin: 0; max-width: 46ch; }
.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: 820px) { .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: var(--t-18); 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);
}

/* 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: 880px) { .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: 680px) { .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: 760px) { .cs-results-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .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; }
.cs-ow-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 720px) { .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;
  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-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: 80px 0 72px; }
.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: 920px) {
  .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, 6.4vw, 92px); line-height: 1.0; 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: 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: 860px) {
  .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; }
.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: 860px) { .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: 860px) { .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: 760px) { .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: 860px) { .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: 760px) { .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: 760px) {
  .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: 860px) { .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: 860px) { .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: 880px) {
  .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: 760px) { .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: 860px) { .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); }

/* 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(0 0, 100% clamp(48px, 7vw, 110px), 100% 100%, 0 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));
}

/* 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: 880px) { .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: 760px) { .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 32px; 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: 760px) {
  .lp4-wd-col { padding: 24px 32px 32px; }
}
.lp4-wd-icon { width: 297px; height: 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; }
.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: 26px 0 32px; transition: width var(--dur-base) var(--ease-out); }
.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); display: inline-flex; align-items: center; gap: 10px; }
.lp4-wd-link .arr { transition: transform var(--dur-base) var(--ease-out); }
.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); }
.lp4-wd-col.is-align { --accent: var(--lumos-cobalt); }
.lp4-wd-col.is-shape { --accent: var(--lumos-magenta); }
.lp4-wd-col.is-activate { --accent: var(--lumos-emerald); }

.lp4-do-head { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: end; }
@media (min-width: 920px) { .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: 880px) {
  .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: 760px) { .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; }

/* 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; 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; }
.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 { 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); }
.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: 500; 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-14); line-height: 1.55; color: var(--lumos-graphite); margin: 0 0 22px; }
.pulse-req { color: var(--lumos-magenta); }
.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: 560px) { .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: 13px; 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; }
.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-graphite); margin-top: 12px; }
.pulse-confidential { font-size: var(--t-12); color: var(--lumos-stone); margin-top: 14px; font-style: italic; }

/* Contact grid */
.pulse-contact-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 4px; }
@media (min-width: 620px) { .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-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 16px; }
.pulse-success h2 em { font-style: normal; font-weight: 500; }
.pulse-success p { font-size: var(--t-18); line-height: 1.6; color: var(--lumos-graphite); max-width: 46ch; margin: 0 auto 28px; }
.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: 920px) {
  .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: 13px; color: var(--lumos-stone); }

/* 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: 920px) {
  .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: 919px) {
  .pulse2-scroll { overflow: visible; }
}
@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); }
.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: 920px) {
  .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-graphite); 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; }

/* ===========================================================
   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: 920px) {
  .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: 2px; }
  .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-stone);
  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: 520px) {
  .pulse4-step-label { font-size: 0; letter-spacing: 0; }
  .pulse4-step.active .pulse4-step-label { font-size: 11px; letter-spacing: 0.12em; }
}

/* Micro progress within a question — dots only, two calm tones. */
.pulse4-within { display: flex; align-items: center; margin: 6px 0 22px; }
.pulse4-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.pulse4-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lumos-stone); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pulse4-dot.done { background: var(--lumos-navy); }
.pulse4-dot.current { background: var(--lumos-emerald); transform: scale(1.5); }

/* 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: 300;
  font-size: clamp(23px, 2.7vw, 36px); line-height: 1.14; letter-spacing: -0.02em;
  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: var(--t-14); letter-spacing: 0.02em; color: var(--lumos-graphite); margin-bottom: 14px; }

.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-18);
  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; }
.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-graphite); border-color: var(--lumos-graphite); color: var(--lumos-paper); }

/* 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-18); 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); }