/* Longplay website — shared page styles.
   Visual tokens come from the bound Longplay Design System (_ds). */

:root { --site-max: 1140px; }

html, body { margin: 0; padding: 0; }
a { color: var(--lp-navy); text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

.h-hero { font-size: clamp(32px, 4.2vw, 51px); margin: 0; }
.h-xl { font-size: clamp(26px, 3vw, 38px); margin: 0; }
.h-lg { font-size: clamp(21px, 2.2vw, 27px); margin: 0; }
.lede { font-size: var(--text-lg); line-height: 1.6; max-width: 62ch; color: var(--text-body); }

.section { max-width: var(--site-max); margin: 0 auto; padding: 67px 28px; }
.section--tight { padding: 35px 28px; }
.section-center { text-align: center; }
.section-center .lede { margin-left: auto; margin-right: auto; }

/* full-bleed alternate section background, without restructuring the centered .section box */
.section-alt {
  position: relative;
  background: var(--lp-lilac-wash);
  box-shadow: 0 0 0 100vmax var(--lp-lilac-wash);
  clip-path: inset(0 -100vmax);
}

.section-title { display: flex; flex-direction: column; gap: 16px; margin-bottom: 44px; }
.section-title.section-center { align-items: center; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: linear-gradient(180deg, rgba(228, 239, 253, 0.72) 0%, rgba(212, 228, 248, 0.72) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(126, 173, 224, 0.35);
  box-shadow: 0 10px 30px -14px rgba(27, 34, 82, 0.30);
}
.site-header-inner {
  max-width: var(--site-max); margin: 0 auto;
  padding: 12px 24px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header-left { display: flex; align-items: center; gap: 30px; }
.site-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
.site-nav-item { position: relative; }
.site-nav .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: 11px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--lp-navy); padding: 9px 14px; border-radius: 999px; text-decoration: none;
  transition: color 200ms ease-out, background 200ms ease-out;
}
.site-nav button.nav-link { background: none; border: none; cursor: pointer; }
.site-nav .nav-link:hover, .site-nav .nav-link.open { color: var(--lp-navy); background: rgba(126, 207, 202, 0.28); }
.site-nav .nav-link.active { color: var(--lp-teal); background: rgba(126, 207, 202, 0.20); }
.nav-menu {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; min-width: 290px; padding: 10px; gap: 2px; z-index: 60;
}
.nav-menu.open { display: flex; }
.nav-menu a {
  padding: 11px 14px; border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-regular);
  color: var(--lp-navy); transition: background 200ms ease-out;
}
.nav-menu a:hover { background: rgba(126, 207, 202, 0.18); }
.nav-cta {
  color: var(--lp-navy); font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: 14px; padding: 11px 22px; border-radius: var(--radius-pill); white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, #4E93F5 30%, #fff), color-mix(in srgb, #4E93F5 11%, #fff));
  border: 1.5px solid color-mix(in srgb, #4E93F5 55%, #fff);
  box-shadow: 0 10px 26px -16px rgba(78,147,245,0.55), inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.nav-cta:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #4E93F5 78%, #fff);
  box-shadow: 0 16px 32px -16px rgba(78,147,245,0.6), inset 0 1px 0 rgba(255,255,255,0.9);
}
@media (max-width: 880px) {
  .site-header-inner { flex-wrap: wrap; }
  .site-header-left { gap: 18px; }
}

/* ---------- Logo strip ---------- */
.logo-strip-wrap { border-top: 1px solid rgba(143, 163, 192, 0.35); border-bottom: 1px solid rgba(143, 163, 192, 0.35); }
.logo-strip {
  display: flex; align-items: center; gap: clamp(28px, 5vw, 60px);
  flex-wrap: nowrap; width: max-content; max-width: 100%;
  margin: 0 auto; overflow-x: auto; padding: 6px 2px 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.logo-strip::-webkit-scrollbar { display: none; }
.logo-strip img {
  flex: 0 0 auto;
  height: 34px; width: auto; max-width: 160px; object-fit: contain;
  filter: grayscale(1); opacity: 0.72; mix-blend-mode: multiply;
}

/* ---------- Stats ---------- */
.stat-strip { display: grid; gap: 0; padding: 36px 16px; }
.stat-cell { padding: 8px 22px; border-left: 1px solid rgba(143, 163, 192, 0.35); display: flex; flex-direction: column; gap: 6px; }
.stat-cell:first-child { border-left: 0; }
.stat-value { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; }
.stat-label {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-navy);
}
.stat-desc { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }

/* ---------- Quote carousel ---------- */
.quote-carousel { max-width: 880px; margin: 0 auto; }
.quote-body {
  font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55; color: var(--lp-navy); margin: 0 0 22px;
}
.quote-logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; margin: 0 auto 14px; filter: grayscale(1); opacity: 0.8; }
.quote-name { margin: 0; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 15px; color: var(--lp-navy); }
.quote-role { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.carousel-arrow {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(27, 34, 82, 0.35); background: transparent; color: var(--lp-navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow 250ms ease-out, background 250ms ease-out;
}
.carousel-arrow:hover { background: rgba(27, 34, 82, 0.05); box-shadow: var(--shadow-soft); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(27, 34, 82, 0.18); transition: background 200ms ease-out; }
.carousel-dot.active { background: var(--lp-teal); }

/* ---------- Check / cross lists ---------- */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.check-list li svg { flex: 0 0 auto; margin-top: 2px; }

/* ---------- Compare table ---------- */
.compare { overflow: hidden; }
.compare-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px 30px 16px;
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 30px; }
.compare-cell { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; }
.compare-cell svg { flex: 0 0 auto; margin-top: 2px; }
.compare--dark { color: var(--text-on-dark-soft); }
.compare--dark .compare-head { color: var(--lp-mint); border-bottom: 1px solid rgba(222, 235, 245, 0.18); }
.compare--dark .compare-row { border-top: 1px solid rgba(222, 235, 245, 0.10); }
.compare--dark .compare-row:first-of-type { border-top: 0; }
.compare--light .compare-head { color: var(--text-secondary); border-bottom: var(--hairline-navy); }
.compare--light .compare-row { border-top: var(--hairline-light); }

/* ---------- Ring diagram ---------- */
.ring-wrap { display: flex; flex-direction: column; align-items: center; }
.ring-scroller { max-width: 100%; overflow: visible; padding: 8px; }
@media (max-width: 900px) { .ring-scroller { overflow-x: auto; overflow-y: visible; } }
.ring { position: relative; }
.ring-spokes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ring-circle {
  position: absolute; inset: 84px; border-radius: 50%; z-index: 1;
  border: 1.5px solid rgba(168, 180, 230, 0.28);
}
.ring .ring-center.lp-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 230px; height: 230px; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 30px; padding: 18px; box-sizing: border-box;
  background:
    radial-gradient(120% 100% at 30% 22%, rgba(255,255,255,0.96), rgba(244,247,253,0.9) 55%, rgba(224,231,247,0.92));
  box-shadow:
    inset 0 4px 12px rgba(255,255,255,0.9),
    inset 0 -16px 30px rgba(120,140,210,0.16),
    0 22px 48px -18px rgba(58,74,150,0.45);
}
.ring-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 50%; box-sizing: border-box; padding: 16px; overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(125% 105% at 28% 18%, rgba(255,255,255,0.92), rgba(255,255,255,0.12) 42%, transparent 64%),
    radial-gradient(95% 95% at 78% 82%, rgba(126,207,202,0.42), transparent 60%),
    radial-gradient(85% 85% at 82% 26%, rgba(180,174,221,0.46), transparent 58%),
    linear-gradient(155deg, rgba(221,230,252,0.62), rgba(176,187,234,0.40));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 3px 9px rgba(255,255,255,0.85),
    inset 0 -14px 26px rgba(120,140,210,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 16px 34px -14px rgba(58,74,150,0.5);
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 13px;
  line-height: 1.28; color: var(--lp-navy); cursor: pointer;
  transition: transform 220ms ease-out, box-shadow 260ms ease-out, filter 260ms ease-out;
}
.ring-node > span { position: relative; z-index: 2; }
.ring-node::before {
  content: ""; position: absolute; z-index: 1; top: 8%; left: 12%; width: 52%; height: 40%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0) 72%);
  filter: blur(1px);
}
.ring-node::after {
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 210deg, rgba(126,207,202,0) 0deg, rgba(126,207,202,0.5) 70deg, rgba(180,174,221,0.5) 150deg, rgba(126,207,202,0) 230deg);
  mix-blend-mode: screen; opacity: 0.5;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.ring-node:hover, .ring-node.selected {
  transform: translate(-50%, -50%) scale(1.06);
  filter: saturate(1.15) brightness(1.03);
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,0.9),
    inset 0 -16px 30px rgba(110,132,208,0.34),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 24px 46px -14px rgba(58,74,150,0.62);
}
.ring-node:hover::after, .ring-node.selected::after { opacity: 0.85; }
.ring-tip {
  position: absolute; width: 280px; max-width: 280px; padding: 18px 20px;
  z-index: 30; text-align: left; pointer-events: none; box-shadow: var(--shadow-card);
}
.ring-tip p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(27, 34, 82, 0.84); }
.ring-tip ul { margin: 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.55; color: rgba(27, 34, 82, 0.84); }
.ring-tip ul li { margin: 0 0 6px; }
.ring-tip ul li:last-child { margin-bottom: 0; }

/* ---------- Arrow link ---------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 14px;
  color: var(--lp-navy); transition: opacity 250ms ease-out;
}
.arrow-link:hover { opacity: 0.7; }
.arrow-link.on-dark { color: var(--lp-mint); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { padding: 0; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 20px 26px; font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: 16px; color: var(--lp-navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-plus { transition: transform 250ms ease-out; flex: 0 0 auto; }
.faq-item[open] summary .faq-plus { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 26px 22px; font-size: 15px; line-height: 1.65; color: var(--text-body); }
.faq-item .faq-body p { margin: 0 0 10px; }

/* ---------- Chat bubbles ---------- */
.chat-grid { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.chat-bubble { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
.chat-avatar {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 14px; color: var(--lp-navy);
}
.chat-meta { display: flex; gap: 10px; align-items: baseline; }
.chat-name { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 14px; color: var(--lp-navy); }
.chat-time { font-size: 11px; color: var(--text-secondary); }
.chat-text { margin: 3px 0 0; font-size: 15px; color: var(--text-body); }

/* ---------- Tier / layer cards ---------- */
.layer-card { display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.layer-num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--lp-navy); }
.layer-tint { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.layer-head {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Team cards ---------- */
.person-photo { width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; border-radius: var(--radius-md, 10px); background: var(--lp-light-blue); }
.person-name { font-family: var(--font-display); font-size: 24px; color: var(--lp-navy); margin: 18px 0 2px; }
.person-role { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--lp-teal); margin: 0 0 14px; }
.person-sub {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary);
  margin: 18px 0 10px;
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 40px; }
.site-footer-inner { max-width: var(--site-max); margin: 0 auto; padding: 64px 28px 36px; text-align: center; }
.site-footer-nav { display: flex; justify-content: center; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; margin: 30px 0 36px; }
.site-footer-nav a {
  color: var(--text-on-dark-soft); font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-regular);
  transition: color 200ms ease-out;
}
.site-footer-nav a:hover { color: var(--lp-mint); }
.site-footer-legal { font-size: var(--text-xs); color: rgba(222, 235, 245, 0.55); margin: 18px 0 0; }

/* ---------- Misc ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* ---------- CTA band (device + heading) ---------- */
.cta-band { position: relative; max-width: 880px; margin: 0 auto; }
.cta-content { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cta-device {
  position: absolute; left: -6px; top: -28px; width: 132px; height: auto;
  pointer-events: none; user-select: none; z-index: 1;
}
@media (max-width: 820px) {
  .cta-device { position: static; display: block; width: 116px; margin: 0 auto 14px; }
}

/* ---------- Growth-stage chess strip ---------- */
.growth-tabs {
  max-width: 960px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.growth-tab {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 14px;
  cursor: pointer; padding: 16px 14px; border-radius: var(--radius-md, 12px);
  line-height: 1.35; text-align: center; color: var(--lp-navy);
  border: 1px solid rgba(27, 34, 82, 0.16); background: #FFFFFF;
  transition: background 250ms ease-out, border-color 250ms ease-out, box-shadow 250ms ease-out;
}
.growth-tab:hover { border-color: rgba(27, 34, 82, 0.32); }
.growth-tab.active {
  background: var(--lp-light-blue, #c9d6f7); border-color: transparent;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(27, 34, 82, 0.10));
}
.growth-tab span { display: block; font-weight: var(--weight-regular); font-size: 12px; opacity: 0.7; margin-top: 3px; }
.growth-chess {
  display: block; width: 100%; max-width: 960px; height: auto;
  margin: 0 auto 8px;
}
@media (max-width: 820px) {
  .growth-tabs { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
  .growth-chess { display: none; }
}

.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }

/* ---------- About: team grid + brand/platform logo walls ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.team-photo {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-md, 12px); background: var(--lp-light-blue);
}
.brand-wall {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  max-width: 980px; margin: 0 auto 8px;
}
.brand-cell {
  background: #FFFFFF; border: 1px solid rgba(27, 34, 82, 0.08);
  border-radius: var(--radius-md, 12px); height: 96px; width: 100%;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  cursor: pointer; font: inherit;
  transition: transform 200ms ease-out, box-shadow 250ms ease-out, border-color 250ms ease-out;
}
.brand-cell:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-card);
  border-color: rgba(126, 207, 202, 0.5);
}
.brand-cell img {
  max-width: 100%; max-height: 48px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.72; transition: filter 250ms ease-out, opacity 250ms ease-out;
}
.brand-cell:hover img { filter: grayscale(0); opacity: 1; }
.platform-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 900px; margin: 0 auto;
}
.platform-cell { height: 84px; display: flex; align-items: center; justify-content: center; padding: 14px; }
.platform-cell img { max-width: 100%; max-height: 42px; width: auto; object-fit: contain; }
@media (max-width: 760px) {
  .team-grid, .brand-wall, .platform-wall { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- About hero collage ---------- */
.ah-stage {
  position: relative; width: 100%; max-width: 1120px; margin: 0 auto;
  aspect-ratio: 1120 / 660;
  background-image:
    linear-gradient(rgba(27, 34, 82, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 34, 82, 0.045) 1px, transparent 1px);
  background-size: 12.5% 16.66%;
}
.ah-heading {
  position: absolute; left: 50%; top: 3%; transform: translateX(-50%);
  width: 94%; max-width: 820px; text-align: center; margin: 0; z-index: 5;
}
/* The collage is sized so the headline sits in the top band, above the
   scattered photo tiles (which begin at ~30% down). The bold theme renders
   .h-hero very large (up to 104px), which wraps to 3 lines and overlaps the
   faces — constrain the headline here so it clears the cloud. High-specificity
   selector so it wins regardless of stylesheet load order. */
body.bold-theme .ah-stage .ah-heading {
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.03;
  max-width: 1000px;
  top: 2.5%;
}
.ah-tile {
  position: absolute; aspect-ratio: 1; object-fit: cover; border-radius: 16px;
  filter: grayscale(1); box-shadow: var(--shadow-card);
  background: var(--lp-light-blue); z-index: 2;
}
.ah-stat {
  position: absolute; background: #FFFFFF; border-radius: 14px; padding: 15px 20px;
  box-shadow: var(--shadow-card); z-index: 6; white-space: nowrap;
}
.ah-stat-val { font-size: 26px; color: var(--lp-navy); line-height: 1; margin-bottom: 6px; }
.ah-stat-label {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 11px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary);
}
@media (max-width: 860px) {
  .ah-stage {
    aspect-ratio: auto; background-image: none; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 8px;
  }
  .ah-tile { display: none; }
  .ah-heading { position: static; transform: none; width: 100%; }
  .ah-stat { position: static; display: inline-block; }
}

/* ---------- Testimonial modal ---------- */
.tmodal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(20, 26, 58, 0.55);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: tmodal-fade 200ms ease-out;
}
.tmodal {
  position: relative; max-width: 600px; width: 100%; max-height: 86vh; overflow-y: auto;
  padding: 40px 40px 34px; text-align: center; animation: tmodal-rise 240ms ease-out;
}
.tmodal-close {
  position: absolute; top: 14px; right: 16px; border: none; background: transparent;
  font-size: 26px; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 4px 8px;
}
.tmodal-close:hover { color: var(--lp-navy); }
.tmodal-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; margin: 0 auto 22px; display: block; }
.tmodal-quote { margin: 0 0 22px; font-size: 17px; line-height: 1.62; color: var(--lp-navy); }
.tmodal-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--lp-navy); }
.tmodal-role { margin: 4px 0 0; font-size: 13px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); }
@keyframes tmodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmodal-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Production gallery carousel ---------- */
.pgal { position: relative; }
.pgal-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pgal-track::-webkit-scrollbar { display: none; }
.pgal-item { flex: 0 0 auto; width: 240px; scroll-snap-align: center; }
.pgal-item--wide { width: 430px; }
.pgal-item img {
  width: 100%; height: 332px; object-fit: cover; border-radius: 16px;
  box-shadow: var(--shadow-card); display: block; background: var(--lp-light-blue);
}
.pgal-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: none; background: #FFFFFF;
  box-shadow: var(--shadow-card); cursor: pointer; font-size: 24px; line-height: 1;
  color: var(--lp-navy); display: flex; align-items: center; justify-content: center;
}
.pgal-btn:hover { background: var(--lp-light-blue); }
.pgal-prev { left: -12px; }
.pgal-next { right: -12px; }

/* ---------- Work-type cards + program cards (hover-swap media) ---------- */
.work-media {
  position: relative; width: 100%; height: 280px; border-radius: 10px;
  overflow: hidden; background: #EEF1FA;
}
.work-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 12px; box-sizing: border-box; transition: opacity 350ms ease-out;
}
.work-media-hover { opacity: 0; }
.work-media:hover .work-media-hover { opacity: 1; }
.prog-media {
  position: relative; width: 100%; height: 178px; border-radius: 10px;
  overflow: hidden; background: #EEF1FA;
}
.prog-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 350ms ease-out;
}
.prog-media-hover { opacity: 0; }
.prog-media:hover .prog-media-hover { opacity: 1; }

/* collage band variant (embedded-team) */
.ah-stage--band { aspect-ratio: 1120 / 520; margin-bottom: 28px; }

/* ---------- Production work cards: clickable + gallery modal ---------- */
.work-card { cursor: pointer; outline: none; }
.work-card .work-media::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  box-shadow: inset 0 0 0 0 rgba(126, 207, 202, 0); transition: box-shadow 250ms ease-out;
}
.work-card:hover .work-media::after, .work-card:focus-visible .work-media::after {
  box-shadow: inset 0 0 0 2px var(--lp-teal);
}
.work-label { margin-top: 16px; }
.work-img-name { margin: 0; font-size: 22px; line-height: 1.2; color: var(--lp-navy); }
.work-type-name {
  margin: 6px 0 0; font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-secondary);
}
.work-modal { max-width: 780px; text-align: left; }
.work-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.work-gallery-item { background: #EEF1FA; border-radius: 12px; overflow: hidden; }
.work-gallery-item img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) { .work-gallery { grid-template-columns: 1fr; } }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.photo-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.photo-strip image-slot { width: 100%; height: 230px; display: block; }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-navy);
}
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body); font-size: 14.5px; color: var(--lp-navy);
  background: #FFFFFF; border: 1px solid rgba(27, 34, 82, 0.22);
  border-radius: var(--radius-md, 10px); padding: 12px 14px; outline: none;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--lp-teal); box-shadow: 0 0 0 3px rgba(126, 207, 202, 0.25);
}
.contact-steps { display: flex; flex-direction: column; gap: 14px; }
.contact-step { display: flex; gap: 16px; align-items: flex-start; }
.contact-step-num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 17px; color: var(--lp-navy);
  background: var(--lp-mint);
}
.contact-direct { display: flex; gap: 26px; flex-wrap: wrap; }
.contact-direct a { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 14.5px; color: var(--lp-navy); }
.contact-direct a:hover { color: var(--lp-teal); }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Academy / library pages ---------- */
.stage-filter { display: flex; flex-wrap: wrap; gap: 14px 10px; justify-content: center; align-items: flex-start; }
.stage-filter button { background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 10px; transition: background 200ms ease-out; }
.stage-filter button:hover { background: rgba(27, 34, 82, 0.05); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.filter-chip {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 12.5px;
  padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid rgba(27, 34, 82, 0.30); background: transparent; color: var(--lp-navy);
  transition: background 200ms ease-out, color 200ms ease-out;
}
.filter-chip:hover { background: rgba(27, 34, 82, 0.05); }
.filter-chip.active { background: var(--lp-navy); color: #FFFFFF; border-color: transparent; }

.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.resource-cover {
  border-radius: var(--radius-md, 10px); min-height: 132px; padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  margin-bottom: 18px;
}
.resource-cover .cover-partner {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-navy); opacity: 0.75;
}
.resource-cover .cover-title { font-family: var(--font-display); font-size: 21px; line-height: 1.15; color: var(--lp-navy); }
/* case-study covers with a real work-sample photo behind the logo, instead of a flat tint */
.resource-cover--photo .cover-title { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.cover-logo-plain { display: inline-flex; align-self: flex-start; }
.cover-logo-plain .cover-logo { height: 26px; }
.cover-logo-badge {
  display: inline-flex; align-self: flex-start; background: rgba(255,255,255,0.94);
  border-radius: 10px; padding: 8px 14px; box-shadow: 0 8px 20px -10px rgba(27,34,82,0.5);
}
.cover-logo-badge .cover-logo { height: 20px; }
.cover-logo { width: auto; max-width: 140px; object-fit: contain; display: block; mix-blend-mode: multiply; }
.meta-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; }
.meta-row span { display: inline-flex; gap: 6px; align-items: center; }
.resource-desc { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
.result-stat { font-family: var(--font-display); font-size: 34px; line-height: 1.05; color: var(--lp-navy); margin: 0 0 8px; }

.newsletter-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-input {
  font-family: var(--font-body); font-size: 14px; color: var(--lp-navy);
  background: rgba(237, 241, 248, 0.95); border: 1px solid rgba(222, 235, 245, 0.4);
  border-radius: var(--radius-pill); padding: 12px 20px; min-width: 250px; outline: none;
}
.newsletter-input:focus { border-color: var(--lp-mint); }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.portfolio-item image-slot { width: 100%; display: block; }
.portfolio-media { width: 100%; border-radius: 10px; overflow: hidden; background: #EEF1FA; }
.portfolio-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.portfolio-label { margin: 10px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.portfolio-label .pl-name { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 13.5px; color: var(--lp-navy); }
.portfolio-label .pl-tags { display: flex; gap: 10px; align-items: center; }
.portfolio-label .pl-logo { height: 17px; width: auto; max-width: 92px; object-fit: contain; filter: grayscale(1); opacity: 0.8; mix-blend-mode: multiply; }
.portfolio-label .pl-client {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 11px;
  background: var(--lp-mint); color: var(--lp-navy);
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.portfolio-label .pl-cat { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }

/* ---------- Light quote card with gradient border ---------- */
figure.quote-card {
  margin: 0; border-radius: var(--radius-lg);
  background:
    linear-gradient(#fbfcfe, #fbfcfe) padding-box,
    linear-gradient(120deg, var(--lp-mint) 0%, var(--lp-lavender, #b4aedd) 55%, var(--lp-navy) 100%) border-box;
  border: 2px solid transparent;
  padding: 36px 40px;
  box-shadow: var(--shadow-lift);
}
.quote-card-body {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: 22px; line-height: 1.45; color: var(--lp-navy); text-wrap: pretty;
}
.quote-card-cite {
  margin-top: 20px; font-family: var(--font-body); font-size: 13px;
  color: var(--lp-navy); font-weight: var(--weight-bold); letter-spacing: 0.06em;
}
.quote-card-role { color: var(--text-secondary); font-weight: var(--weight-regular); letter-spacing: 0.02em; }

/* ---------- Campaign archive: masonry of board screenshots + lightbox ---------- */
.archive-masonry { columns: 5 180px; column-gap: 14px; }
.archive-board {
  break-inside: avoid; margin: 0 0 14px; padding: 0; width: 100%; display: block;
  border: 1px solid rgba(27,34,82,.08); background: #fff; cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
  border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(27,34,82,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.archive-board img { width: 100%; display: block; }
.archive-board:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -20px rgba(27,34,82,.45); }
.archive-board:focus-visible { outline: 2px solid var(--lp-mint); outline-offset: 3px; }

.board-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(15,20,45,.84);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 28px;
}
.board-lightbox img {
  max-width: min(580px, 94vw); max-height: 92vh; width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.board-lightbox .bl-btn {
  position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 999px; transition: background .2s ease;
}
.board-lightbox .bl-btn:hover { background: rgba(255,255,255,.28); }
.board-lightbox .bl-close { top: 22px; right: 26px; width: 44px; height: 44px; font-size: 22px; }
.board-lightbox .bl-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 26px; }
.board-lightbox .bl-prev { left: 18px; }
.board-lightbox .bl-next { right: 18px; }
.board-lightbox .bl-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: 13px; letter-spacing: .04em; }
.board-lightbox .bl-caption { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.9); font-size: 13px; max-width: 70vw; text-align: center; letter-spacing: .02em; }

/* ---------- Portfolio gallery (work-sample library) ---------- */
/* Work samples vary in aspect ratio (tall emails, square pop-ups), so use a
   masonry that shows each piece in full — never cropped. Full asset opens in a
   scrollable lightbox. */
.pf-masonry { columns: 4 220px; column-gap: 16px; }
.pf-board { position: relative; break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 16px; border-radius: 12px; overflow: hidden; cursor: pointer; background: #fff; border: 1px solid rgba(27,34,82,0.06); }
.pf-board img { width: 100%; height: auto; display: block; }
.pf-board--logo img { mix-blend-mode: multiply; padding: 18px; box-sizing: border-box; width: 100%; }
.pf-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 30px 12px 10px; text-align: left; color: #fff;
  background: linear-gradient(transparent, rgba(27,34,82,.82));
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.pf-board:hover .pf-cap, .pf-board:focus-visible .pf-cap { opacity: 1; }
.pf-cap-name { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 12.5px; line-height: 1.25; }
.pf-cap-brand { font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .85; }
/* Tall-asset lightbox: show the full piece and let it scroll; keep controls fixed. */
.pf-lightbox { align-items: flex-start; overflow-y: auto; }
.pf-lightbox img { max-width: min(600px, 94vw); max-height: none; width: auto; height: auto; margin: 64px auto; }
.pf-lightbox .bl-close, .pf-lightbox .bl-nav, .pf-lightbox .bl-count, .pf-lightbox .bl-caption { position: fixed; }
@media (max-width: 760px) {
  .pf-masonry { columns: 2 150px; }
  .archive-masonry { columns: 3 110px; }
  .board-lightbox .bl-nav { width: 42px; height: 42px; font-size: 22px; }
}

@media (max-width: 980px) {
  .resource-grid, .portfolio-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .resource-grid, .portfolio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
  .stat-cell { border-left: 0; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .compare-head, .compare-row { grid-template-columns: 1fr; gap: 10px; }
  .section { padding: 45px 20px; }
}

/* ---------- Academy hub ---------- */
.ach-working { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ach-working-label {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 11px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary);
}
.ach-working-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ach-chip {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 13px;
  padding: 9px 18px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid rgba(27, 34, 82, 0.20); background: #FFFFFF; color: var(--lp-navy);
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.ach-chip:hover { background: rgba(126, 207, 202, 0.16); }
.ach-chip.active { background: var(--lp-navy); color: #FFFFFF; border-color: transparent; }
.ach-stats { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

.ach-area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ach-area-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  padding: 26px 24px 22px; border-radius: var(--radius-lg);
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(150deg, var(--accent) 0%, rgba(180,174,221,0.5) 60%, rgba(126,207,202,0.4) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 1px 0 rgba(27,34,82,.04);
  transition: transform 240ms ease-out, box-shadow 260ms ease-out;
}
.ach-area-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -24px rgba(27,34,82,.48); }
.ach-area-tint { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--accent); }
.ach-area-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ach-area-name { font-family: var(--font-display); font-size: 21px; line-height: 1.15; color: var(--lp-navy); }
.ach-area-count {
  flex: 0 0 auto; font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--lp-navy); opacity: .45;
}
.ach-area-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); flex: 1; }
.ach-area-cta {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 13.5px; color: var(--lp-navy);
  display: inline-flex; gap: 7px; align-items: center;
}
.ach-area-card:hover .ach-area-cta { color: var(--lp-teal); }

.ach-rec-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.ach-feature {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
  background: #FFFFFF; border: 1px solid rgba(27,34,82,.10); box-shadow: var(--shadow-card);
  transition: transform 240ms ease-out, box-shadow 260ms ease-out;
}
.ach-feature:hover { transform: translateY(-4px); box-shadow: 0 26px 56px -26px rgba(27,34,82,.5); }
.ach-feature-cover {
  position: relative; padding: 30px 28px; min-height: 168px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 8px;
  background: linear-gradient(155deg, var(--lp-lavender, #b4aedd), rgba(126,207,202,.55));
}
.ach-feature-kicker, .ach-feature-cover-title { color: var(--lp-navy); }
.ach-feature-kicker {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; opacity: .8;
}
.ach-feature-cover-title { font-family: var(--font-display); font-size: 26px; line-height: 1.12; }
.ach-feature-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.ach-tag {
  align-self: flex-start; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-navy);
  background: var(--lp-mint); padding: 4px 10px; border-radius: var(--radius-pill);
}
.ach-feature-title { margin: 2px 0 0; font-family: var(--font-display); font-size: 22px; color: var(--lp-navy); }
.ach-feature-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.ach-feature-meta { margin: 0; font-size: 12.5px; color: var(--text-secondary); }

.ach-rec-col { display: flex; flex-direction: column; gap: 18px; }
.ach-rec-card { background: #FFFFFF; border: 1px solid rgba(27,34,82,.10); border-radius: var(--radius-lg); padding: 20px 22px; }
.ach-rec-head {
  margin: 0 0 12px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 11px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary);
}
.ach-rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ach-rec-list li + li { border-top: 1px solid rgba(27,34,82,.08); }
.ach-rec-list a { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; }
.ach-rec-list a:hover .ach-rec-name, .ach-rec-list a:hover .ach-rec-title { color: var(--lp-teal); }
.ach-rec-name { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 15px; color: var(--lp-navy); }
.ach-rec-sub, .ach-rec-meta { font-size: 12px; color: var(--text-secondary); }
.ach-rec-meta { font-weight: var(--weight-bold); letter-spacing: .03em; }
.ach-rec-title { font-size: 14px; color: var(--lp-navy); line-height: 1.4; }

.ach-essays { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ach-essay {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: var(--radius-lg);
  background: #FFFFFF; border: 1px solid rgba(27,34,82,.10);
  transition: transform 220ms ease-out, box-shadow 240ms ease-out;
}
.ach-essay:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(27,34,82,.45); }
.ach-essay-title { font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--lp-navy); }
.ach-essay-meta { font-size: 12.5px; color: var(--text-secondary); }

.ach-diag {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden;
  background:
    linear-gradient(#fbfcfe, #fbfcfe) padding-box,
    linear-gradient(125deg, var(--lp-mint) 0%, var(--lp-lavender, #b4aedd) 55%, var(--lp-navy) 100%) border-box;
  border: 2px solid transparent; box-shadow: var(--shadow-lift);
}
.ach-diag-main { padding: 38px 36px; display: flex; flex-direction: column; gap: 14px; }
.ach-diag-flag {
  align-self: flex-start; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-teal);
}
.ach-diag-title { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; color: var(--lp-navy); }
.ach-diag-sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); max-width: 46ch; }
.ach-diag-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ach-diag-fine { font-size: 12.5px; color: var(--text-secondary); }
.ach-diag-aside { padding: 34px 32px; background: rgba(126,207,202,.10); border-left: 1px solid rgba(27,34,82,.08); }
.ach-diag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ach-diag-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--lp-navy); }
.ach-diag-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--lp-mint); color: var(--lp-navy);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

.ach-memo {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px 32px; border-radius: var(--radius-lg);
  background: #FFFFFF; border: 1px solid rgba(27,34,82,.10);
}
.ach-memo-title { margin: 0 0 4px; font-size: 24px; color: var(--lp-navy); }
.ach-memo-sub { margin: 0; font-size: 14.5px; color: var(--text-secondary); }
.ach-memo-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ach-memo-input {
  font-family: var(--font-body); font-size: 14px; color: var(--lp-navy);
  background: rgba(237, 241, 248, 0.7); border: 1px solid rgba(27,34,82,.16);
  border-radius: var(--radius-pill); padding: 12px 20px; min-width: 240px; outline: none;
}
.ach-memo-input:focus { border-color: var(--lp-mint); }
.ach-memo-done { margin: 0; color: var(--lp-teal); font-weight: 700; font-family: var(--font-body); }

@media (max-width: 980px) {
  .ach-area-grid { grid-template-columns: 1fr 1fr; }
  .ach-rec-grid, .ach-diag { grid-template-columns: 1fr; }
  .ach-diag-aside { border-left: 0; border-top: 1px solid rgba(27,34,82,.08); }
}
@media (max-width: 680px) {
  .ach-area-grid, .ach-essays { grid-template-columns: 1fr; }
}

/* ---------- Tactics library ---------- */
.tactics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tactic-card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border-radius: var(--radius-lg);
  background: #FFFFFF; border: 1px solid rgba(27,34,82,.10);
  transition: transform 220ms ease-out, box-shadow 240ms ease-out;
}
.tactic-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -24px rgba(27,34,82,.45); }
.tactic-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tactic-time { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 12px; color: var(--lp-teal); letter-spacing: .03em; }
.tactic-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--lp-navy); }
.tactic-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-body); flex: 1; }
.tactic-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(27,34,82,.08); }
.tactic-area {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 11px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary);
}
@media (max-width: 980px) { .tactics-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .tactics-grid { grid-template-columns: 1fr; } }

/* ---------- Case study detail ---------- */
.cs-hero { max-width: 980px; margin: 0 auto; }
.cs-back {
  display: inline-flex; gap: 7px; align-items: center; font-family: var(--font-body);
  font-weight: var(--weight-bold); font-size: 13px; color: var(--text-secondary);
  letter-spacing: .02em; margin-bottom: 26px;
}
.cs-back:hover { color: var(--lp-teal); }
.cs-eyebrow {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 11.5px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-teal); margin: 0 0 14px;
}
.cs-title { font-size: clamp(29px, 3.8vw, 46px); line-height: 1.06; margin: 0; max-width: 16ch; }
.cs-dek { margin: 18px 0 0; max-width: 60ch; }
.cs-brandline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(27,34,82,.12); }
.cs-brand-logo { height: 30px; width: auto; max-width: 160px; object-fit: contain; mix-blend-mode: multiply; }
.cs-brand-name { font-family: var(--font-display); font-size: 22px; color: var(--lp-navy); }
.cs-services { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }

.cs-metrics-wrap { max-width: 980px; margin: 0 auto; }
.cs-metrics { display: grid; gap: 18px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(#fbfcfe,#fbfcfe) padding-box, linear-gradient(120deg, var(--lp-mint), var(--lp-lavender,#b4aedd) 60%, var(--lp-navy)) border-box;
  border: 2px solid transparent; box-shadow: var(--shadow-lift); padding: 30px 18px; }
.cs-metrics--2 { grid-template-columns: 1fr 1fr; }
.cs-metrics--3 { grid-template-columns: 1fr 1fr 1fr; }
.cs-metric { text-align: center; padding: 6px 14px; }
.cs-metric + .cs-metric { border-left: 1px solid rgba(27,34,82,.1); }
.cs-metric-val { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 52px); line-height: 1; color: var(--lp-navy); }
.cs-metric-label { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); }

.cs-body-wrap { max-width: 980px; margin: 0 auto; }
.cs-grid { display: grid; grid-template-columns: 248px 1fr; gap: 48px; align-items: start; }
.cs-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.cs-aside-card { border: 1px solid rgba(27,34,82,.12); border-radius: var(--radius-md, 12px); padding: 6px 18px; background: #fff; }
.cs-aside-row { padding: 14px 0; }
.cs-aside-row + .cs-aside-row { border-top: 1px solid rgba(27,34,82,.08); }
.cs-aside-key { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 10.5px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); margin-bottom: 5px; }
.cs-aside-val { font-size: 14px; line-height: 1.45; color: var(--lp-navy); }
.cs-aside-cta { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 13.5px; color: var(--lp-teal); padding-left: 2px; }

.cs-article { min-width: 0; }
.cs-lead { font-family: var(--font-display); font-size: 22px; line-height: 1.5; color: var(--lp-navy); margin: 0 0 28px; text-wrap: pretty; }
.cs-section { margin-top: 36px; }
.cs-h2 { font-family: var(--font-display); font-size: 27px; line-height: 1.15; color: var(--lp-navy); margin: 0 0 14px; }
.cs-h3 { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 16px; color: var(--lp-navy); margin: 22px 0 8px; }
.cs-p { font-size: 16px; line-height: 1.7; color: var(--text-body); margin: 0 0 14px; text-wrap: pretty; }
.cs-list { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.cs-list li { font-size: 15.5px; line-height: 1.6; color: var(--text-body); padding-left: 4px; }
.cs-list--num { list-style: decimal; }
.cs-callout { display: flex; gap: 14px; align-items: flex-start; background: var(--lp-pale-blue, #eef3f9); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; border-left: 3px solid var(--lp-teal); }
.cs-callout-tag { flex: 0 0 auto; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-teal); margin-top: 3px; }
.cs-callout p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--lp-navy); font-weight: var(--weight-bold); }

.cs-quote { margin: 0 0 8px; padding: 26px 30px; border-radius: var(--radius-lg);
  background: linear-gradient(#fbfcfe,#fbfcfe) padding-box, linear-gradient(120deg, var(--lp-mint), var(--lp-lavender,#b4aedd) 55%, var(--lp-navy)) border-box; border: 2px solid transparent; }
.cs-quote blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--lp-navy); text-wrap: pretty; }
.cs-quote figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.cs-quote-name { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 14px; color: var(--lp-navy); }
.cs-quote-role { font-size: 13px; color: var(--text-secondary); }

.cs-gallery-title, .cs-gallery-grid { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cs-gallery-title { font-family: var(--font-display); font-size: 24px; color: var(--lp-navy); margin: 0 0 22px; }
.cs-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-gallery-item {
  display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid rgba(27,34,82,.1); background: #fff; box-shadow: 0 20px 40px -28px rgba(27,34,82,.4);
  transition: transform .22s ease, box-shadow .24s ease;
}
.cs-gallery-item:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(27,34,82,.5); }
.cs-gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
@media (max-width: 860px) { .cs-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cs-gallery-grid { grid-template-columns: 1fr; } }

.cs-related-title, .cs-related-grid { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cs-related-title { font-family: var(--font-display); font-size: 24px; color: var(--lp-navy); margin: 0 0 22px; }
.cs-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cs-related-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(27,34,82,.1); transition: transform .22s ease, box-shadow .24s ease; }
.cs-related-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -22px rgba(27,34,82,.45); }
.cs-related-cover { min-height: 92px; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.cs-related-brand { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 11px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--lp-navy); }
.cs-related-stat { font-family: var(--font-display); font-size: 26px; color: var(--lp-navy); }
.cs-related-cover.resource-cover--photo .cs-related-stat { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.cs-related-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-body); flex: 1; margin: 0; }
.cs-related-link { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 13px; color: var(--lp-teal); }

@media (max-width: 860px) {
  .cs-grid { grid-template-columns: 1fr; gap: 28px; }
  .cs-aside { position: static; }
  .cs-metrics--3 { grid-template-columns: 1fr; }
  .cs-metrics--2 { grid-template-columns: 1fr; }
  .cs-metric + .cs-metric { border-left: 0; border-top: 1px solid rgba(27,34,82,.1); padding-top: 18px; margin-top: 4px; }
  .cs-related-grid { grid-template-columns: 1fr; }
}
/* ---------- Testimonial wall (home-style grid; used on service pages) ---------- */
.tw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.tw-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.48); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.75); border-radius: 18px; padding: 28px 28px 30px;
  box-shadow: 0 24px 54px -26px rgba(27,34,82,0.42), inset 0 1px 0 rgba(255,255,255,0.8);
}
.tw-top { display: flex; align-items: center; min-height: 70px; margin-bottom: 4px; }
.tw-logo { height: 66px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.tw-word { font-family: var(--font-display); font-size: 26px; color: var(--lp-navy); letter-spacing: 0.01em; }
.tw-result { font-size: 17px; font-weight: 700; font-style: italic; color: var(--lp-navy); margin: 4px 0 0; }
.tw-head { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.tw-ava {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--font-display); font-size: 20px; box-shadow: 0 6px 18px -8px rgba(27,34,82,0.5);
}
.tw-ava--i { background: linear-gradient(135deg, #5BBFB9, #8E86C9); }
.tw-ava img { width: 100%; height: 100%; object-fit: cover; }
.tw-name { font-family: var(--font-body); font-weight: 700; font-size: 16.5px; color: var(--lp-navy); line-height: 1.2; }
.tw-role { font-size: 14px; color: var(--text-secondary); margin-top: 3px; }
.tw-rule { height: 1px; background: rgba(27,34,82,0.10); margin: 20px 0 0; }
.tw-quote {
  font-size: 15.5px; line-height: 1.55; color: var(--lp-navy); margin: 16px 0 0;
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 960px) { .tw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tw-grid { grid-template-columns: 1fr; } }

.tw-scroll {
  overflow: hidden; position: relative; margin-top: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tw-scroll-track { display: flex; gap: 22px; width: max-content; animation: tw-scroll 50s linear infinite; align-items: stretch; }
.tw-scroll:hover .tw-scroll-track { animation-play-state: paused; }
@keyframes tw-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tw-scroll-track .tw-card { width: 380px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .tw-scroll-track { animation: none; } }
@media (max-width: 700px) { .tw-scroll-track .tw-card { width: 300px; } }

/* ---------- Brand refresh: gradient accent words + glass ---------- */
/* bold coloured gradient words used as accents in major headers */
.lp-display em, .h-hero em, .h-xl em, .h-lg em, .section-title em, .cs-h1 em {
  font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: 0;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--lp-accent-word); color: var(--lp-accent-word);
  -webkit-text-stroke: 0;
}
/* gold pull for the occasional highlight */
.lp-gold { color: var(--lp-gold); }
/* frosted glass surface utility */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 50px -28px rgba(27,34,82,0.4);
}

/* Sans display now needs explicit weight (DM Serif was heavy at 400; Sora is not) */
.layer-num, .person-name, .result-stat, .tmodal-name, .ach-area-name,
.resource-cover .cover-title { font-weight: 700; }