/* ==========================================================================
   Dr. Lean Murali — leanmurali.in
   Design system: Onyx / Deep Red / Silver / White (Value Enablers palette)
   ========================================================================== */

:root {
  /* Brand palette — locked, see brand/color-palette.md */
  --onyx: #0D0D0D;
  --deep-red: #A81F1F;
  --red-hover: #A81F1F;
  --red-active: #5C0000;

  /* CTA button colors — see brand/color-palette.md (explicit request 2026-08-20) */
  --cta-bg: #8B0000;
  --cta-bg-hover: #A81F1F;
  --red-tint-10: #FBEAEA;
  --silver: #C0C0C0;
  --white: #FFFFFF;
  --off-white: #F7F7F5;
  --platinum: #E5E5E5;
  --graphite: #4A4A4A;
  --slate: #5C5C5C;
  --border: #DADAD9;
  --success: #2E7D4F;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* Layout */
  --max-width: 1200px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(13,13,13,0.04), 0 4px 16px rgba(13,13,13,0.05);

  /* Header height — referenced by nav-wrap and the mobile nav panel's
     top offset so the two never fall out of sync at any breakpoint. */
  --header-h: 112px;
}

/* Safety net: nothing on the page should ever be able to create
   horizontal scroll on mobile. Fixed/sticky elements are unaffected
   since they position against the viewport, not this box. */
html { overflow-x: hidden; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--onyx);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--onyx); }
p { margin: 0; }
figure { margin: 0; }

/* Skip link for accessibility */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--onyx); color: var(--white); padding: 12px 20px;
  border-radius: 0 0 6px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--deep-red);
  outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.section { padding: var(--space-6) 0; }
.section-tight { padding: var(--space-5) 0; }
@media (max-width: 700px) {
  .section { padding: var(--space-5) 0; }
  .section-tight { padding: var(--space-4) 0; }
}
.section-dark { background: var(--onyx); color: var(--white); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-offwhite { background: var(--off-white); }
.section-red { background: var(--deep-red); color: var(--white); }
.section-red h2, .section-red h3 { color: var(--white); }

.center { text-align: center; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-red);
  margin-bottom: var(--space-2);
  display: inline-block;
}
.section-dark .eyebrow, .section-red .eyebrow { color: var(--silver); }

.section-head { max-width: 700px; margin: 0 auto var(--space-5); text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: var(--space-2); }
.section-head p { color: var(--slate); font-size: 1.08rem; }
.section-dark .section-head p, .section-red .section-head p { color: var(--platinum); }

/* ---------- Typography scale ---------- */
h1 { font-size: clamp(2.1rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.lede { font-size: 1.2rem; color: var(--slate); }
/* On dark/red section backgrounds the default slate lede reads as
   low-contrast, hard-to-read grey text — lift it to platinum so it
   stays legible on both desktop and mobile (same rule, no breakpoint
   needed since it isn't a responsive-only bug). */
.section-dark .lede, .section-red .lede, .final-cta .lede, .mission-strip .lede, .page-hero .lede { color: var(--platinum); }
.small { font-size: 0.9rem; }
.stat-number {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  letter-spacing: -0.02em;
  color: var(--white);
}
.section-offwhite .stat-number, .section-light .stat-number { color: var(--onyx); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cta-bg); color: var(--white); }
.btn-primary:hover { background: var(--cta-bg-hover); }
.btn-primary:active { background: var(--red-active); }
.btn-secondary { background: transparent; color: var(--onyx); border-color: var(--silver); }
.btn-secondary:hover { border-color: var(--onyx); background: var(--platinum); }
.section-dark .btn-secondary, .section-red .btn-secondary, .hero .btn-secondary, .page-hero .btn-secondary, .final-cta .btn-secondary, .mission-strip .btn-secondary, .sticky-cta .btn-secondary { background: var(--platinum); color: var(--onyx); border-color: var(--platinum); }
.section-dark .btn-secondary:hover, .section-red .btn-secondary:hover, .hero .btn-secondary:hover, .page-hero .btn-secondary:hover, .final-cta .btn-secondary:hover, .mission-strip .btn-secondary:hover, .sticky-cta .btn-secondary:hover { background: var(--white); border-color: var(--white); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
@media (max-width: 700px) {
  /* Long CTA labels (e.g. "See the full Lean Six Sigma learning hub →")
     must never force horizontal scroll on a phone screen — let them
     wrap to a second line instead of pushing the button past the edge. */
  .btn { white-space: normal; text-align: center; }
}

.cta-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--onyx);
  border-bottom: 3px solid var(--deep-red);
}
.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 0.65rem; color: var(--white); flex-shrink: 0; min-width: 0; }
.brand img { height: 38px; width: auto; }
.brand-word { font-family: var(--font-display); font-size: 3.1rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; line-height: 1; }
.brand-word span { color: var(--deep-red); }

.main-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1 1 auto; justify-content: space-between; min-width: 0; }
.main-nav ul { display: flex; align-items: center; gap: 1.85rem; }
.main-nav a {
  color: var(--platinum);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--white); border-color: var(--deep-red); }

.nav-toggle {
  display: none;
  background: none; border: none; color: var(--white);
  padding: 0.4rem;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle:hover, .nav-toggle:active { background: rgba(255,255,255,0.1); }

/* ---------- Dropdown submenu (Free Training > Lean Six Sigma Learning) ---------- */
.main-nav li.has-dropdown { position: relative; display: flex; align-items: center; flex: none; }
.main-nav li.has-dropdown > a { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.main-nav .dropdown-toggle {
  display: none;
  background: none; border: none; color: var(--platinum);
  padding: 0.3rem; margin-left: -0.2rem;
}
.main-nav .dropdown-toggle svg { width: 11px; height: 11px; transition: transform .15s ease; }
.main-nav li.has-dropdown:hover .dropdown-toggle svg,
.main-nav li.has-dropdown:focus-within .dropdown-toggle svg,
.main-nav li.has-dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }
.main-nav .dropdown-menu {
  position: absolute; top: 100%; left: 0; margin-top: 0.6rem;
  min-width: 230px; background: var(--onyx);
  border: 1px solid rgba(255,255,255,0.14); border-top: 2px solid var(--deep-red);
  border-radius: var(--radius); padding: 0.4rem;
  box-shadow: 0 16px 34px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 60;
}
.main-nav .dropdown-menu li { display: block; }
.main-nav .dropdown-menu a {
  display: block; padding: 0.7rem 0.8rem; border-bottom: none; white-space: nowrap;
  border-radius: 4px; font-size: 0.86rem;
}
.main-nav .dropdown-menu a:hover,
.main-nav .dropdown-menu a[aria-current="page"] {
  background: rgba(255,255,255,0.08); color: var(--white); border-color: transparent;
}
.main-nav li.has-dropdown:hover .dropdown-menu,
.main-nav li.has-dropdown:focus-within .dropdown-menu,
.main-nav li.has-dropdown.open .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

@media (max-width: 1300px) {
  .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--onyx); flex-direction: column; align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-3); transform: translateX(100%); transition: transform .2s ease;
    overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; padding: 1rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .main-nav .cta-row { margin-top: var(--space-3); flex-direction: column; }
  .nav-toggle { display: block; }

  .main-nav li.has-dropdown { flex-direction: column; align-items: stretch; }
  .main-nav li.has-dropdown > a { flex: 1; padding-right: 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .main-nav .dropdown-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: 0; top: 0; height: 100%; width: 2.6rem;
  }
  .main-nav .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: none; box-shadow: none; margin-top: 0;
    padding: 0 0 0 1rem; max-height: 0; overflow: hidden;
    transition: max-height .2s ease;
  }
  .main-nav li.has-dropdown.open .dropdown-menu { max-height: 200px; }
  .main-nav .dropdown-menu a { padding: 0.85rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--silver); }
}

/* Phone header: the desktop wordmark size (3.1rem) overwhelms a phone
   screen and crowds the menu button, so it steps down in two stages
   and the sticky header shrinks to match — --header-h keeps the
   mobile nav panel's top offset in sync automatically. */
@media (max-width: 700px) {
  :root { --header-h: 76px; }
  .brand-word { font-size: 1.7rem; }
  .brand img { height: 30px; }
  .nav-toggle { padding: 0.6rem; }
  .nav-toggle svg { width: 26px; height: 26px; }
}
@media (max-width: 420px) {
  :root { --header-h: 68px; }
  .brand-word { font-size: 1.4rem; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--onyx);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-3) var(--space-6);
  position: relative;
  z-index: 2;
}
.hero-copy { max-width: 600px; }

/* Full-bleed hero portrait: no frame/box — a clean cutout sitting directly on
   the onyx background, scaled to the section's full height so the head meets
   the header's red line and the feet sit flush with the mission strip below. */
.hero .hero-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(var(--space-3), calc((100vw - var(--max-width)) / 2 + var(--space-3)));
  width: clamp(300px, 36vw, 500px);
  z-index: 1;
  pointer-events: none;
}
.hero .hero-photo picture,
.hero .hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
@media (max-width: 900px) {
  .hero-inner { padding: var(--space-6) var(--space-3) var(--space-5); }
  .hero-copy { max-width: none; }
  .hero .hero-photo {
    position: static;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto var(--space-4);
    aspect-ratio: 936 / 1341;
  }
  .hero .hero-photo img { height: 100%; }
}
.hero h1 { color: var(--white); margin-bottom: var(--space-3); }
.hero h1 em { font-style: italic; color: var(--deep-red); }
.hero .lede { color: var(--platinum); margin-bottom: var(--space-4); max-width: 46ch; }
.hero-photo-frame {
  /* Transparent portrait cutout — no card background/border behind it,
     so the photo floats directly on the section background. */
}
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-proof { margin-top: var(--space-5); display: flex; gap: var(--space-5); flex-wrap: wrap; }
.hero-proof .num { font-family: var(--font-body); font-weight: 800; font-size: 1.6rem; color: var(--white); }
.hero-proof .label { font-size: 0.82rem; color: var(--silver); letter-spacing: 0.02em; }

/* ---------- Mission strip ---------- */
.mission-strip {
  background: var(--deep-red);
  color: var(--white);
  padding: var(--space-5) 0;
  text-align: center;
}
.mission-strip .eyebrow { color: rgba(255,255,255,0.75); }
.mission-strip p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.3;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

.resource-card { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.resource-card > img { width: 96px; height: 96px; }
@media (max-width: 700px) {
  .resource-card { grid-template-columns: 1fr; text-align: center; gap: 1.1rem; }
  .resource-card > img { margin: 0 auto; }
  .resource-card > .btn { width: 100%; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--slate); }

.tool-card { display: flex; flex-direction: column; gap: 0.7rem; }
.tool-card .tag {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--deep-red); background: var(--red-tint-10); padding: 0.25rem 0.6rem; border-radius: 100px;
}

/* ---------- Journey (5-step) ---------- */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); counter-reset: step; }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .journey { grid-template-columns: 1fr; } }
.journey-step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--deep-red);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-2) var(--space-2);
}
.journey-step .step-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--deep-red); margin-bottom: 0.4rem; display: block;
}
.journey-step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.journey-step p { font-size: 0.92rem; color: var(--slate); }

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); text-align: center; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { .stats-grid-3 { grid-template-columns: 1fr; } }
.stat-item .stat-label { color: var(--silver); font-size: 0.85rem; margin-top: 0.4rem; }
.section-offwhite .stat-item .stat-label, .section-light .stat-item .stat-label { color: var(--slate); }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-card);
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--onyx);
  margin: 0;
}
.testimonial-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.testimonial-meta .who { font-weight: 700; font-size: 0.95rem; }
.testimonial-meta .role { color: var(--slate); font-size: 0.85rem; }
.testimonial-meta .result-chip {
  font-size: 0.78rem; font-weight: 700; color: var(--success); background: #EAF6EF;
  padding: 0.25rem 0.6rem; border-radius: 100px; white-space: nowrap;
}
.view-original { font-size: 0.82rem; color: var(--deep-red); font-weight: 600; }
.view-original:hover { text-decoration: underline; }

/* ---------- Logo strips ---------- */
.logo-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-5); }
.logo-strip img { height: 56px; width: auto; filter: grayscale(100%); opacity: 0.75; transition: filter .15s ease, opacity .15s ease; }
.logo-strip img:hover { filter: none; opacity: 1; }
.logo-strip .wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--graphite);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.4rem;
}

/* ---------- Article cards ---------- */
.article-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3); box-shadow: var(--shadow-card);
}
.article-card .tag { color: var(--deep-red); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.article-card .read-more { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--deep-red); margin-top: auto; }
.article-card .read-more:hover { text-decoration: underline; }

/* ---------- Community cards ---------- */
.community-card {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--white);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.community-card.telegram { background: linear-gradient(160deg, #229ED9 0%, #1c7fb0 100%); }
.community-card.linkedin { background: linear-gradient(160deg, #0A66C2 0%, #084a8c 100%); }
.community-card.youtube { background: linear-gradient(160deg, #FF0000 0%, #b30000 100%); }
.community-card .num { font-size: 2rem; font-weight: 800; }

/* ---------- Footer ---------- */
.site-footer { background: var(--onyx); color: var(--platinum); padding: var(--space-6) 0 var(--space-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-2); }
.site-footer .brand-word { color: var(--white); font-size: 1.55rem; }
.site-footer .mission-line { color: var(--silver); margin: var(--space-2) 0; max-width: 34ch; }
.site-footer ul li { margin-bottom: 0.6rem; }
.site-footer a { color: var(--platinum); }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  font-size: 0.85rem; color: var(--silver);
}

/* ---------- Final CTA band ---------- */
.final-cta { background: var(--onyx); color: var(--white); text-align: center; padding: var(--space-6) 0; }
.final-cta h2 { color: var(--white); margin-bottom: var(--space-2); }
.final-cta p { color: var(--platinum); max-width: 640px; margin: 0 auto var(--space-4); font-size: 1.1rem; }

/* ---------- Page hero (secondary pages) ---------- */
.page-hero { background: var(--onyx); color: var(--white); padding: var(--space-6) 0 var(--space-5); }
.page-hero .eyebrow { color: var(--silver); }
.page-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.9rem); }
.page-hero p { color: var(--platinum); max-width: 60ch; margin-top: var(--space-2); font-size: 1.1rem; }
.breadcrumb { font-size: 0.85rem; color: var(--silver); margin-bottom: var(--space-2); }
.breadcrumb a { color: var(--silver); }
.breadcrumb a:hover { color: var(--white); }

/* ---------- Utility ---------- */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.text-slate { color: var(--slate); }
.text-silver { color: var(--silver); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; }
.badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--deep-red); background: var(--red-tint-10); padding: 0.3rem 0.7rem; border-radius: 100px;
}
.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill { border: 1px solid var(--border); border-radius: 100px; padding: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--graphite); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll (subtle, one-shot) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Sticky mobile CTA bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--onyx); border-top: 3px solid var(--deep-red);
  padding: 0.7rem var(--space-3);
  display: none;
}
.sticky-cta .btn { width: 100%; }
@media (max-width: 700px) { .sticky-cta { display: block; } body { padding-bottom: 96px; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(13,13,13,0.92);
  display: none; align-items: center; justify-content: center; padding: var(--space-4);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(90vw, 720px); max-height: 88vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: transparent; border: 1.5px solid rgba(255,255,255,0.5); color: var(--white);
  width: 42px; height: 42px; border-radius: 50%; font-size: 1.3rem; line-height: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,0.12); }

/* Table (used sparingly, e.g., tool grid on LSS page) */
.plain-table { width: 100%; border-collapse: collapse; }
.plain-table th, .plain-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.plain-table th { font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); }