/* =====================================================================
   PRASHANTH SAMUDRALA — UX PORTFOLIO
   Design system: systems / clean (Linear · Stripe · Vercel · Figma)
   ===================================================================== */

/* -- TOKENS ----------------------------------------------------------- */
:root {
  /* Base */
  --bg:           #FFFFFF;
  --bg-subtle:    #F5F5F5;
  --bg-overlay:   #FFFFFF;
  --bg-cta:       #0A0A0A;
  --bg-stat-strip:#F5F5F5;
  --surface:      var(--bg);

  /* Borders */
  --border:        #E5E5E5;
  --border-strong: #C4C4C4;
  --border-light:  #EFEFEF;

  /* Text */
  --text-primary:   #0A0A0A;
  --text-secondary: #3F3F46;
  --text-tertiary:  #71717A;
  --text-muted:     #52525B;

  /* Primary accent — indigo */
  --in:           #4F46E5;
  --in-deep:      #4338CA;
  --in-mid:       #6366F1;
  --in-light:     #EEF2FF;
  --in-border:    #C7D2FE;
  --in-glow:      rgba(79, 70, 229, 0.18);

  /* Legacy aliases → mapped to indigo for consistency */
  --accent-blue:      var(--in);
  --accent-teal:      var(--in);
  --accent-teal-deep: var(--in-deep);
  --accent-light:     var(--in-light);
  --tint-blue:        var(--in-light);

  /* Functional accents */
  --accent-green:  #15803D;
  --accent-amber:  #B45309;
  --accent-purple: #6D28D9;
  --accent-red:    #B91C1C;

  /* Soft tints */
  --tint-green:  #F0FDF4;
  --tint-amber:  #FFFBEB;
  --tint-purple: #F5F3FF;
  --tint-red:    #FEF2F2;

  /* Role badges */
  --badge-leadership: #F0FDF4;   --badge-leadership-text: #15803D;
  --badge-ic:         #EEF2FF;   --badge-ic-text:         var(--in);
  --badge-research:   #FFFBEB;   --badge-research-text:   #B45309;
  --badge-innovation: #F5F3FF;   --badge-innovation-text: #6D28D9;

  /* Dark surfaces */
  --surface-dark:           #0A0A0A;
  --surface-dark-soft:      #1A1A1A;
  --surface-dark-text:      #FFFFFF;
  --surface-dark-text-soft: rgba(255,255,255,0.55);
  --ft-bg:                  #0D0D1A;

  /* Type families */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-roboto:  'Roboto', system-ui, sans-serif;
  --font-inter:   'Inter', system-ui, sans-serif;

  /* Layout */
  --nav-height: 64px;
  --content-max: 1200px;
  --reading-max: 760px;
  --side-pad: 3rem;
  --side-pad-mobile: 1.25rem;

  /* Shadows */
  --shadow-hover: 0 2px 12px rgba(0,0,0,0.06);
}

/* -- RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
::selection { background: var(--text-primary); color: var(--bg); }

/* -- TYPOGRAPHY ------------------------------------------------------- */
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; color: var(--text-primary); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.025em; }
.h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
.h3 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 500; line-height: 1.35; }
.lead { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.7; max-width: 560px; }
p { margin: 0 0 1.25rem 0; color: var(--text-secondary); line-height: 1.75; }
p:last-child { margin-bottom: 0; }
strong { color: var(--text-primary); font-weight: 500; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--font-inter);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--in); margin-bottom: 0.75rem;
}
.mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* -- LINK STYLING ----------------------------------------------------- */
.text-link {
  color: var(--accent-teal);
  border-bottom: 1px solid currentColor;
  transition: color 0.2s ease;
}
.text-link:hover { color: var(--accent-teal-deep); }

/* -- LAYOUT HELPERS --------------------------------------------------- */
.container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--side-pad); padding-right: var(--side-pad); }
.reading { max-width: var(--reading-max); margin: 0 auto; padding-left: var(--side-pad); padding-right: var(--side-pad); }
.section { padding: 5rem 0; }
.section-tight { padding: 3rem 0; }
.section-tinted { background: var(--bg-subtle); padding: 5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* -- NAVIGATION ------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--side-pad);
  background: rgba(250, 250, 250, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
  z-index: 100;
}
.nav.scrolled { border-bottom-color: var(--border); background: rgba(250,250,250,0.92); }

.nav-logo {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 400;
  transition: color 0.15s ease;
}
.nav-links a { position: relative; padding-bottom: 2px; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--text-primary); font-weight: 500; }
.nav-links a.active::after {
  content: ''; position: absolute; left: 50%; bottom: -8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-teal);
  transform: translateX(-50%);
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--accent-teal);
  border-radius: 6px;
  background: var(--accent-teal);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-cta::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.nav-cta:hover { background: var(--accent-teal-deep); border-color: var(--accent-teal-deep); }

/* Download Profile variant — replaces dot with download icon */
.nav-cta--download::before { display: none; }
.nav-cta--download .nav-cta-icon { width: 12px; height: 12px; opacity: 0.95; transition: transform 0.15s ease; }
.nav-cta--download:hover .nav-cta-icon { transform: translateY(1px); }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: 0; padding: 0.4rem; cursor: pointer; color: var(--text-primary); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-mobile-overlay {
  position: fixed; inset: 0; background: var(--bg);
  display: none; flex-direction: column; align-items: flex-start;
  padding: 5rem var(--side-pad-mobile) 2rem;
  z-index: 99;
}
.nav-mobile-overlay.open { display: flex; }
.nav-mobile-overlay a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text-primary);
  padding: 0.75rem 0;
}

@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* -- FOOTER ----------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 2rem var(--side-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: 6rem;
}
.footer-brand { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-primary); }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: 0.85rem; color: var(--text-secondary); transition: color 0.15s ease; }
.footer-links a:hover { color: var(--text-primary); }

@media (max-width: 600px) {
  .footer { flex-direction: column; align-items: flex-start; padding: 2rem var(--side-pad-mobile); }
}

/* -- BUTTONS ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 500;
  padding: 0.7rem 1.25rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.btn-primary { background: var(--accent-teal); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-teal-deep); }
.btn-primary .arrow { transition: transform 0.2s ease; }
.btn-primary:hover .arrow { transform: translateX(2px); }

.btn-ghost {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: transparent;
}
.btn-ghost:hover { background: var(--bg-subtle); border-color: var(--text-primary); }

/* Pill (filter) buttons */
.pill {
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pill:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pill.active { background: var(--accent-teal); color: #FFFFFF; border-color: var(--accent-teal); }

/* -- ROLE BADGES ------------------------------------------------------ */
.role-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
}
.role-leadership { background: var(--badge-leadership); color: var(--badge-leadership-text); }
.role-ic         { background: var(--badge-ic); color: var(--badge-ic-text); }
.role-research   { background: var(--badge-research); color: var(--badge-research-text); }
.role-innovation { background: var(--badge-innovation); color: var(--badge-innovation-text); }


/* -- BREADCRUMB ------------------------------------------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb .sep { margin: 0 0.5rem; opacity: 0.5; }

/* -- META BAR (case study header) ------------------------------------ */
.meta-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-overlay);
  margin: 2rem 0 1.5rem;
}
.meta-cell {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
}
.meta-cell:last-child { border-right: none; }
.meta-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.35rem;
}
.meta-value {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}
@media (max-width: 720px) {
  .meta-bar { grid-template-columns: repeat(2, 1fr); }
  .meta-cell:nth-child(2) { border-right: none; }
  .meta-cell:nth-child(1), .meta-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* -- HERO IMAGE ------------------------------------------------------- */
.hero-image {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-subtle);
  margin: 2.5rem 0;
}
.hero-image img { width: 100%; display: block; }
.image-caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}

/* -- CASE STUDY SECTIONS --------------------------------------------- */
.cs-section { margin-bottom: 3rem; }
.cs-section .eyebrow { margin-bottom: 0.5rem; }
.cs-section h2 { margin-bottom: 1.25rem; }
.cs-section p + p { margin-top: 1rem; }

/* -- COMPONENT: CALLOUT ---------------------------------------------- */
/* Default = green-tinted bg + teal border (the primary callout) */
.callout {
  border-left: 2px solid var(--accent-teal);
  background: var(--tint-green);
  padding: 1.25rem 1.5rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}
.callout p { color: var(--text-primary); margin: 0; }
.callout p + p { margin-top: 0.75rem; }
.callout-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-teal);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.callout--green { border-left-color: var(--accent-teal); background: var(--tint-green); }
.callout--green .callout-label { color: var(--accent-teal); }
.callout--blue   { border-left-color: #1A3A5C; background: var(--tint-blue); }
.callout--blue .callout-label   { color: #1A3A5C; }
.callout--amber  { border-left-color: var(--accent-amber); background: var(--tint-amber); }
.callout--amber .callout-label  { color: var(--accent-amber); }
.callout--purple { border-left-color: var(--accent-purple); background: var(--tint-purple); }
.callout--purple .callout-label { color: var(--accent-purple); }
.callout--red    { border-left-color: var(--accent-red); background: var(--tint-red); }
.callout--red .callout-label    { color: var(--accent-red); }

/* -- COMPONENT: STAT ROW (dark) -------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface-dark);
  color: var(--surface-dark-text);
  border-radius: 12px;
  overflow: hidden;
  margin: 2rem 0;
}
.stat-cell {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--surface-dark-soft);
}
.stat-cell:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--surface-dark-text);
  margin-bottom: 0.5rem;
}
.stat-cap {
  font-size: 0.8rem;
  color: var(--surface-dark-text-soft);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat-cell { border-right: none; border-bottom: 1px solid var(--surface-dark-soft); }
  .stat-cell:last-child { border-bottom: none; }
}

/* Stat row variant: 4-col light (used in home stats) */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-stat-strip);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.stat-bar-cell {
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--border);
  position: relative;
}
.stat-bar-cell:last-child { border-right: none; }
.stat-bar-num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}
.stat-bar-cap {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Feature variant — bigger numbers, ordinal prefix, more breathing */
.stat-bar--feature {
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.stat-bar--feature .stat-bar-cell {
  padding: 2rem 1.75rem 1.75rem;
  border-right: 1px solid var(--border);
}
.stat-bar--feature .stat-bar-cell:last-child { border-right: none; }
.stat-bar-prefix {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--accent-teal);
  margin-bottom: 1.25rem;
}
.stat-bar--feature .stat-bar-num {
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.stat-bar-suffix {
  font-size: 0.6em;
  color: var(--accent-teal);
  margin-left: 0.05em;
  vertical-align: 0.25em;
}
.stat-bar--feature .stat-bar-cap {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-bar-cell:nth-child(1), .stat-bar-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
  .stat-bar-cell:nth-child(2) { border-right: none; }
  .stat-bar--feature { grid-template-columns: 1fr; border-radius: 12px; }
  .stat-bar--feature .stat-bar-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-bar--feature .stat-bar-cell:last-child { border-bottom: none; }
}

/* -- COMPONENT: DECISION BLOCKS -------------------------------------- */
.decisions { display: flex; flex-direction: column; gap: 0; margin: 2rem 0; }
.decision {
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.decision:last-child { border-bottom: none; }
.decision-num {
  font-family: var(--font-roboto);
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-tertiary);
  letter-spacing: -0.03em;
  line-height: 1;
  padding-top: 0.2rem;
  opacity: 0.3;
}
.decision-title {
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.6rem;
}
.decision-body { font-family: var(--font-inter); font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; max-width: 620px; }
.decision-content { }

/* -- COMPONENT: IMPACT GRID ------------------------------------------ */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.impact-cell {
  padding: 1.5rem;
  border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.impact-cell--green  { background: var(--tint-green);  border-color: rgba(22,163,74,0.2); }
.impact-cell--blue   { background: var(--tint-blue);   border-color: rgba(37,99,235,0.2); }
.impact-cell--amber  { background: var(--tint-amber);  border-color: rgba(217,119,6,0.2); }
.impact-cell--purple { background: var(--tint-purple); border-color: rgba(124,58,237,0.2); }

.impact-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.impact-cell ul { margin: 0; padding-left: 1.1rem; }
.impact-cell li { font-size: 0.875rem; line-height: 1.7; color: var(--text-primary); margin-bottom: 0.4rem; }
.impact-cell li:last-child { margin-bottom: 0; }

@media (max-width: 720px) { .impact-grid { grid-template-columns: 1fr; } }

/* -- COMPONENT: TAKEAWAY (dark reflection) --------------------------- */
.takeaway {
  background: var(--surface-dark);
  color: var(--surface-dark-text);
  padding: 2.5rem;
  border-radius: 12px;
  margin: 2rem 0;
}
.takeaway-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--surface-dark-text-soft);
  margin-bottom: 1rem;
}
.takeaway p { color: var(--surface-dark-text); font-size: 1rem; line-height: 1.8; }
.takeaway p:last-child { margin-bottom: 0; }

/* -- COMPONENT: BEFORE / AFTER --------------------------------------- */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
.ba-cell {
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.ba-cell--before { background: var(--tint-red); border-color: rgba(220,38,38,0.18); }
.ba-cell--after  { background: var(--tint-green); border-color: rgba(22,163,74,0.2); }
.ba-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.ba-cell--before .ba-label { color: var(--accent-red); }
.ba-cell--after  .ba-label { color: var(--accent-green); }
.ba-cell p { font-size: 0.9rem; color: var(--text-primary); line-height: 1.7; }
@media (max-width: 720px) { .before-after { grid-template-columns: 1fr; } }

/* -- COMPONENT: SCREEN FRAME ----------------------------------------- */
.screen-frame {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-overlay);
  margin: 2rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.screen-chrome {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0.85rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.screen-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.screen-dot:nth-child(1) { background: #f87171; }
.screen-dot:nth-child(2) { background: #fbbf24; }
.screen-dot:nth-child(3) { background: #4ade80; }
.screen-label {
  margin-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.screen-frame img { width: 100%; display: block; }

/* -- COMPONENT: QUOTE BLOCK ------------------------------------------ */
.quote {
  border-left: 2px solid var(--accent-amber);
  background: var(--tint-amber);
  padding: 1.5rem 1.75rem;
  border-radius: 0 8px 8px 0;
  margin: 2rem 0;
}
.quote p {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0;
}
.quote-attr {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-top: 1rem;
}


/* -- CARDS (work + home featured) ------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .card-grid, .card-grid--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  display: flex; flex-direction: column;
  gap: 1rem;
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong);
}
.card:hover .card-arrow { transform: translate(2px, -2px); }

.card-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.card-company { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.card-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.2; color: var(--text-primary); letter-spacing: -0.01em; }
.card-desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; flex-grow: 1; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card-footer { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--border); margin-top: auto; }
.card-metric { font-family: var(--font-display); font-size: 1.65rem; line-height: 1.1; color: var(--text-primary); }
.card-metric-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 0.25rem; }
.card-cta { font-size: 0.85rem; color: var(--text-primary); display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.card-arrow { display: inline-block; transition: transform 0.2s ease; }

/* compact card (tier 2) */
.card--compact { padding: 1.5rem; }
.card--compact .card-title { font-size: 1.2rem; }
.card--compact .card-footer { padding-top: 0.75rem; }

/* -- HOME HERO -------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-height) var(--side-pad) 4rem;
  position: relative;
  overflow: hidden;
}
.hero-grid-bg { display: none; }   /* removed per redesign — type and space only */
.hero-inner { max-width: 1200px; position: relative; z-index: 1; }
.hero-eyebrow {
  margin-bottom: 2rem;
  color: var(--accent-teal);
  display: flex; align-items: center; gap: 0.75rem;
}
.hero-eyebrow::before {
  content: ''; display: inline-block;
  width: 32px; height: 1px;
  background: var(--accent-teal);
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 11vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 2rem;
  max-width: 14ch;
}
.hero-lead { max-width: 560px; margin-bottom: 2.5rem; font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.7; }
.hero-ctas { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* Stagger animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { opacity: 0; animation: fadeUp 0.55s ease forwards; }
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* -- HOME PROCESS STRIP ---------------------------------------------- */
.process-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.process-step {
  padding: 1.75rem 1.25rem;
  border-right: 1px solid var(--border);
}
.process-step:last-child { border-right: none; }
.ps-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}
.ps-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.ps-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 1100px) {
  .process-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .process-step { flex: 0 0 220px; scroll-snap-align: start; }
}

/* -- HOME WRITING TEASER --------------------------------------------- */
.writing-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .writing-row { grid-template-columns: 1fr; } }
.writing-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
  background: var(--bg-overlay);
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.writing-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.writing-date { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 0.6rem; }
.writing-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.3; color: var(--text-primary); margin-bottom: 0.6rem; }
.writing-excerpt { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; }

/* -- ABOUT PAGE ------------------------------------------------------- */
.about-top {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 3rem;
  align-items: start;
  margin-top: 1.5rem;
}
.about-photo {
  width: 240px; height: 320px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo svg { width: 36px; height: 36px; opacity: 0.5; margin-bottom: 0.75rem; }
@media (max-width: 720px) {
  .about-top { grid-template-columns: 1fr; }
  .about-photo { width: 100%; max-width: 280px; }
}

.process-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-overlay); }
.process-row { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; }
.process-row:last-child { border-bottom: none; }
.process-row .ps-num { margin-bottom: 0; padding-top: 0.2rem; }
.process-row-content h3 { margin-bottom: 0.25rem; }

.beliefs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 720px) { .beliefs-grid { grid-template-columns: 1fr; } }
.belief-card {
  padding: 1.5rem;
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.belief-card--indigo { background: #EEF2FF; border-color: #C7D2FE; }
.belief-card--violet { background: #F5F3FF; border-color: #DDD6FE; }
.belief-card--teal   { background: #F0FDFA; border-color: #99F6E4; }
.belief-card--indigo .belief-num { color: #4F46E5; }
.belief-card--violet .belief-num { color: #7C3AED; }
.belief-card--teal   .belief-num { color: #0D9488; }
.belief-num { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: 0.75rem; }
.belief-title { font-family: var(--font-inter); font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.6rem; color: var(--text-primary); }
.belief-body { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; }

/* -- ABOUT: HOW I WORK ------------------------------------------ */
.how-i-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
}
@media (max-width: 768px) {
  .how-i-work-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.how-i-work-group-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--in);
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.how-i-work-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.how-i-work-item:last-child { border-bottom: none; }
.how-i-work-title {
  font-family: var(--font-inter);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.how-i-work-body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.how-i-work-toolkit {
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

/* -- ABOUT: CAREER TIMELINE ------------------------------------------ */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  /* the connecting vertical line */
  content: '';
  position: absolute;
  left: 196px;                  /* center of marker column (180 + 16) */
  top: 1.5rem; bottom: 1.5rem;
  width: 1px;
  background: var(--border);
}
.timeline-row {
  display: grid;
  grid-template-columns: 180px 32px 1fr;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.timeline-row:last-child { border-bottom: none; }
.timeline-when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: 0.4rem;
}
.timeline-marker {
  position: relative;
  height: 2rem;
}
.timeline-marker::before {
  content: '';
  position: absolute;
  left: 50%; top: 0.5rem;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  z-index: 1;
}
.timeline-row--current .timeline-marker::before {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.18);
}
.timeline-where { padding-left: 0.25rem; }
.timeline-co {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.timeline-role {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.timeline-row--current .timeline-co { color: var(--text-primary); }
.timeline-row--current .timeline-role { color: var(--accent-teal); font-weight: 500; }

@media (max-width: 720px) {
  .timeline::before { left: 14px; top: 0.5rem; bottom: 0.5rem; }
  .timeline-row { grid-template-columns: 32px 1fr; row-gap: 0.25rem; padding: 1.25rem 0; }
  .timeline-when { grid-column: 2; padding-top: 0; }
  .timeline-marker { grid-column: 1; grid-row: 1 / span 2; height: 100%; }
  .timeline-marker::before { top: 0.4rem; }
  .timeline-where { grid-column: 2; padding-left: 0; }
}

.skills-block { margin-bottom: 2.5rem; }
.skills-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.skills-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
  flex-shrink: 0;
}
.skill-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.skill-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  cursor: default;
}
.skill-tag:hover {
  border-color: var(--accent-teal);
  background: var(--accent-light);
  color: var(--accent-teal-deep);
  transform: translateY(-1px);
}

/* -- ABOUT: COMPANY JOURNEY STRIP ------------------------------------ */
.company-journey-wrap {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.25rem 0;
  overflow: hidden;
}
.company-journey-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
.years-badge-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--text-primary);
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  flex-shrink: 0;
  min-width: 90px;
}
.years-badge-num {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.years-badge-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 0.3rem;
}
.company-journey-track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.25rem 0;
  scrollbar-width: none;
}
.company-journey-track::-webkit-scrollbar { display: none; }
.cj-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: default;
}
.cj-item:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.cj-item--current {
  border-color: var(--accent-teal);
  background: var(--accent-light);
}
.cj-item--current:hover { border-color: var(--accent-teal-deep); }
.cj-dates {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.cj-item--current .cj-dates { color: var(--accent-teal); }
.cj-name {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
  white-space: nowrap;
}
.cj-item--current .cj-name { color: var(--accent-teal-deep); }
.cj-role {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cj-arrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--border-strong);
  flex-shrink: 0;
  user-select: none;
}
.company-journey-bio {
  max-width: 200px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex-shrink: 0;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border);
}
@media (max-width: 1024px) {
  .company-journey-inner { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .company-journey-bio {
    grid-column: 1 / -1;
    max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 1rem;
  }
}
@media (max-width: 600px) {
  .company-journey-inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .years-badge-block { flex-direction: row; gap: 0.75rem; width: fit-content; padding: 0.75rem 1.25rem; }
  .years-badge-num { font-size: 2rem; }
}

/* -- ABOUT: SKILL BARS ------------------------------------------------ */
.skill-bars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 4rem;
}
@media (max-width: 720px) { .skill-bars-grid { grid-template-columns: 1fr; } }
.skill-bars-col-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.skill-bars-col-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
  flex-shrink: 0;
}
/* Competency 2×2 grid */
.competency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 640px) {
  .competency-grid { grid-template-columns: 1fr; }
}

/* Competency blocks (replace skill bars) */
.competency-block {
  padding: 1.75rem 2rem 1.75rem 0;
  border-bottom: 1px solid var(--border);
}
.competency-block:nth-child(odd) {
  padding-right: 2.5rem;
  border-right: 1px solid var(--border);
}
.competency-block:nth-child(even) {
  padding-left: 2.5rem;
  padding-right: 0;
}
.competency-block:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 640px) {
  .competency-block { padding: 1.25rem 0; border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .competency-block:last-child { border-bottom: none; }
  .competency-block:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .competency-block:last-child { border-bottom: none; }
}
.competency-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  font-family: var(--font-inter);
}
.competency-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.skill-bar-item { margin-bottom: 1.35rem; }
.skill-bar-item:last-child { margin-bottom: 0; }
.skill-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}
.skill-bar-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}
.skill-level {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.skill-level--expert  { background: var(--tint-blue);  color: var(--accent-teal); }
.skill-level--advanced{ background: var(--tint-amber); color: var(--accent-amber); }
.skill-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.skill-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--accent-teal);
  transform-origin: left center;
  animation: sbExpand 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.15s;
}
.skill-bar-fill--dark { background: var(--text-primary); }
@keyframes sbExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* -- WIP TOAST NOTIFICATION ------------------------------------------ */
.wip-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 304px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  z-index: 200;
  animation: toastIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}
.wip-toast.dismissing {
  animation: toastOut 0.28s cubic-bezier(0.55, 0, 0.55, 0.45) both;
  pointer-events: none;
}
.wip-toast-inner { padding: 1rem 1rem 1.1rem; }
.wip-toast-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.wip-toast-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.18);
  flex-shrink: 0;
  animation: wipPulse 2.4s ease-in-out infinite;
}
@keyframes wipPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(15,118,110,0.18); }
  50%       { box-shadow: 0 0 0 6px rgba(15,118,110,0.06); }
}
.wip-toast-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
}
.wip-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.1rem 0.15rem;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  border-radius: 4px;
}
.wip-toast-close:hover { color: var(--text-primary); }
.wip-toast-body {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0)   scale(1);    }
  to   { opacity: 0; transform: translateY(14px) scale(0.96); }
}
@media (max-width: 480px) {
  .wip-toast { left: 1rem; right: 1rem; bottom: 1rem; width: auto; }
}

/* -- PERSPECTIVES (article reading) ---------------------------------- */
.article {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--side-pad);
}
.article-header { margin-bottom: 2rem; }
.article-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--text-tertiary); display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.article-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--text-primary); }
.article-body p { font-size: 1.0625rem; line-height: 1.85; color: var(--text-secondary); }
.article-body h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 2rem 0 1rem; color: var(--text-primary); }
.article-body strong { color: var(--text-primary); }
.article-divider { border-top: 1px solid var(--border); margin: 5rem auto; max-width: 640px; }

/* -- CONTACT PAGE ----------------------------------------------------- */
.contact-block { margin-top: 1.5rem; }
.contact-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-primary);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  padding-bottom: 2px;
}
.contact-link:hover { border-color: var(--text-primary); }

.availability {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--tint-blue);
  border: 1px solid rgba(13,148,136,0.18);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--accent-teal-deep);
}
.availability::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 0 4px rgba(13,148,136,0.18);
}

/* -- WORK PAGE FILTER ROW -------------------------------------------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2.5rem; }

/* -- MARQUEE (running ticker under hero) ----------------------------- */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 3rem;
  padding: 1rem 0;
  animation: marquee-scroll 38s linear infinite;
  width: max-content;
}
.marquee-item {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3rem;
}
.marquee-item::after {
  content: '◆';
  color: var(--accent-teal);
  font-size: 0.6rem;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* -- HOME CONTACT CTA STRIP — true dark editorial ------------------- */
.contact-strip {
  background: var(--bg-cta);
  color: var(--surface-dark-text);
  padding: 6rem 0;
  margin-top: 6rem;
}
.contact-strip-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--side-pad);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
}
.contact-strip .eyebrow { color: var(--surface-dark-text-soft); }
.contact-strip h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--surface-dark-text);
  margin: 0 0 1rem;
  max-width: 12ch;
}
.contact-strip p { color: var(--surface-dark-text-soft); max-width: 38ch; margin: 0; }
.contact-strip-side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; }
.contact-strip-email {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--surface-dark-text);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.15s ease;
}
.contact-strip-email:hover { opacity: 0.7; }
.contact-strip .btn-primary { background: #FFFFFF; color: #0A0A0A; }
.contact-strip .btn-primary:hover { background: var(--accent-teal); color: #FFFFFF; }
@media (max-width: 720px) {
  .contact-strip-inner { grid-template-columns: 1fr; align-items: start; padding: 0 var(--side-pad-mobile); }
  .contact-strip-side { align-items: flex-start; }
}

/* -- UTILITIES -------------------------------------------------------- */
.muted { color: var(--text-secondary); }
.center { text-align: center; }

/* Page header for non-home pages */
.page-header {
  padding: calc(var(--nav-height) + 4rem) 0 3rem;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 1rem;
}

/* Mobile padding adjustments */
@media (max-width: 720px) {
  .container, .nav, .footer, .reading, .article { padding-left: var(--side-pad-mobile); padding-right: var(--side-pad-mobile); }
  .hero { padding-left: var(--side-pad-mobile); padding-right: var(--side-pad-mobile); }
  .meta-bar { font-size: 0.85rem; }
  .takeaway { padding: 1.75rem 1.5rem; }
  .stat-cell { padding: 1.5rem 1.25rem; }
  .quote p { font-size: 1.15rem; }
  .card { padding: 1.5rem; }
  .section { padding: 3rem 0; }
}


/* =====================================================================
   V2 DESIGN SYSTEM — Figma (Roboto + Inter, Indigo #4F46E5)
   Merged from home.css — single file architecture
   ==================================================================== */


/* --- NAV V2 ----------------------------------------------- */
.nav-v2 {
  position: fixed; top: 0; left: 0; right: 0;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  z-index: 100;
}
.nav-v2.scrolled { border-bottom-color: var(--border); }

.nav-v2-logo {
  display: flex; align-items: center; gap: 0;
  text-decoration: none; flex-shrink: 0;
}
.nav-v2-logo-img { height: 26px; width: auto; display: block; flex-shrink: 0; }

.nav-v2-links {
  display: flex; align-items: center; gap: 0.25rem;
}
.nav-v2-link {
  font-family: var(--font-inter);
  font-size: 0.875rem; font-weight: 400;
  color: var(--text-secondary);
  padding: 0.4rem 1rem; border-radius: 6px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.nav-v2-link:hover { color: var(--text-primary); background: var(--bg-subtle); }
.nav-v2-link.active { background: var(--in); color: #fff; font-weight: 500; }

.nav-v2-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-inter);
  font-size: 0.78rem; font-weight: 500;
  color: #fff; background: var(--in);
  padding: 0.45rem 1rem; border-radius: 6px;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.nav-v2-cta:hover { background: var(--in-deep); }
.nav-v2-cta svg { width: 12px; height: 12px; opacity: 0.9; }

.nav-v2-toggle {
  display: none; background: none; border: 0;
  padding: 0.4rem; cursor: pointer; color: var(--text-primary);
}
.nav-v2-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav-v2 { padding: 0 1.25rem; height: 56px; }
  .nav-v2-links, .nav-v2-cta { display: none; }
  .nav-v2-toggle { display: block; }
}

/* --- HERO V2 ---------------------------------------------- */
.hero-v2-wrap {
  padding-top: 64px;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-v2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem; align-items: center;
  padding-top: 5rem; padding-bottom: 5rem;
}



.hero-v2-h1 {
  font-family: var(--font-roboto);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 300; line-height: 1.18;
  letter-spacing: -0.02em; color: var(--text-primary);
  margin: 0 0 1.5rem;
}
.hero-v2-h1 em { font-style: normal; color: var(--in); }

.hero-v2-lead {
  font-family: var(--font-inter);
  font-size: 1rem; color: var(--text-secondary);
  line-height: 1.75; max-width: 500px;
  margin: 0 0 2.25rem;
}

.hero-v2-actions {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}

.btn-indigo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--in); color: #fff;
  font-family: var(--font-inter);
  font-size: 0.9rem; font-weight: 500;
  padding: 0.75rem 1.5rem; border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 16px var(--in-glow);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-indigo:hover { background: var(--in-deep); transform: translateY(-1px); box-shadow: 0 6px 24px var(--in-glow); }
.btn-indigo .arrow { transition: transform 0.2s; }
.btn-indigo:hover .arrow { transform: translateX(3px); }

.btn-ghost-v2 {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--text-secondary);
  font-family: var(--font-inter);
  font-size: 0.9rem; font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.btn-ghost-v2:hover { color: var(--text-primary); border-color: var(--text-primary); }

/* Hero right: stat card + blobs */
.hero-v2-right { position: relative; }

.blob-field {
  position: absolute;
  inset: -80px; pointer-events: none; z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 67% 33% 49% 51% / 43% 59% 41% 57%;
}
.blob-a {
  width: 420px; height: 380px;
  top: -40px; right: -60px;
  background: var(--in-light); opacity: 0.7;
  animation: morphA 14s ease-in-out infinite;
}
.blob-b {
  width: 260px; height: 240px;
  bottom: -20px; left: -30px;
  background: #F5F3FF; opacity: 0.7;
  border-radius: 43% 57% 61% 39% / 45% 51% 49% 55%;
  animation: morphB 18s ease-in-out infinite;
}
@keyframes morphA {
  0%,100% { border-radius: 67% 33% 49% 51% / 43% 59% 41% 57%; }
  33%      { border-radius: 55% 45% 35% 65% / 55% 45% 55% 45%; }
  66%      { border-radius: 38% 62% 57% 43% / 50% 38% 62% 50%; }
}
@keyframes morphB {
  0%,100% { border-radius: 43% 57% 61% 39% / 45% 51% 49% 55%; }
  50%      { border-radius: 62% 38% 43% 57% / 37% 63% 37% 63%; }
}

.hero-stat-card {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border);
  gap: 1px; background: var(--border);
  box-shadow: 0 24px 64px rgba(79,70,229,0.12), 0 4px 16px rgba(0,0,0,0.06);
}
.hero-stat {
  background: var(--bg);
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.hero-stat-num {
  font-family: var(--font-roboto);
  font-size: 2.75rem; font-weight: 300;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--text-primary);
}
.hero-stat-num sup { font-size: 1.1rem; color: var(--in); vertical-align: super; font-weight: 400; }
.hero-stat-label {
  font-family: var(--font-inter);
  font-size: 0.74rem; color: var(--text-tertiary); line-height: 1.45;
}

@media (max-width: 900px) {
  .hero-v2 { grid-template-columns: 1fr; gap: 3rem; padding-top: 3rem; padding-bottom: 3rem; }
  .hero-v2-right { max-width: 480px; }
  .blob-a { width: 300px; height: 280px; }
  .blob-b { width: 200px; height: 180px; }
}

/* --- V2 SECTION LABEL ------------------------------------- */
.v2-label {
  font-family: var(--font-inter);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--in); margin-bottom: 0.75rem;
}

.v2-h2 {
  font-family: var(--font-roboto);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 300; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--text-primary);
  margin: 0 0 2.5rem;
}

/* --- SKILLS PREVIEW --------------------------------------- */
.skills-v2 {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5rem 0;
  position: relative; overflow: hidden;
}
.skills-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 5rem; align-items: start;
}

/* --- SKILLS TAG CLOUD (right of capabilities) ------------- */
.skills-tags-section { }
.skills-tags-cloud {
  display: flex; flex-wrap: wrap;
  gap: 0.55rem; margin-top: 0.5rem;
}
.skill-chip {
  display: inline-flex; align-items: center;
  background: var(--chip-bg, var(--in));
  color: #fff;
  font-family: var(--font-inter);
  font-size: 0.8rem; font-weight: 500;
  padding: 0.45rem 1rem; border-radius: 7px;
  letter-spacing: 0.01em;
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: default;
}
.skill-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* Override global.css teal → indigo sitewide (home.css loaded everywhere) */
.skill-bar-fill:not(.skill-bar-fill--dark) { background: var(--in); }
.skill-level, .skill-level--expert, .skill-level--advanced { color: var(--in); }

/* Company journey current item — indigo */
.cj-item--current .cj-name { color: var(--in); }
.cj-item--current .cj-dates,
.cj-item--current .cj-role { color: var(--in-mid); }

/* Timeline current row — indigo marker */
.timeline-row--current .timeline-marker { background: var(--in); border-color: var(--in); }
.timeline-row--current .timeline-co { color: var(--in); }

/* Section spacing — accounts for fixed 64px nav */
.about-hero-section { padding-top: calc(64px + 3.5rem); padding-bottom: 3.5rem; }
.about-section { padding-top: 4rem; padding-bottom: 4rem; }

@media (max-width: 800px) {
  .skills-v2-grid { grid-template-columns: 1fr; }
}

/* --- PROJECTS SHOWCASE ------------------------------------ */
.projects-v2 { padding: 5rem 0; }
.projects-v2-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;
}

.v2-pcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .v2-pcard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v2-pcard-grid { grid-template-columns: 1fr; } }

.v2-pcard {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none; display: block;
  background: var(--bg);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.v2-pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(79,70,229,0.16), 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--in-border);
}

.v2-pcard-top {
  height: 210px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  justify-content: space-between; padding: 1rem;
}
.grad-indigo { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); }
.grad-violet { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); }
.grad-cobalt { background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%); }
.grad-slate  { background: linear-gradient(135deg, #1E293B 0%, #334155 100%); }
.grad-teal   { background: linear-gradient(135deg, #0D9488 0%, #0891B2 100%); }
.grad-rose   { background: linear-gradient(135deg, #DB2777 0%, #9333EA 100%); }
.grad-blue   { background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%); }

.v2-pcard-num {
  position: absolute; right: 1rem; bottom: 0;
  font-family: var(--font-roboto);
  font-size: 7rem; font-weight: 700;
  color: rgba(255,255,255,0.07);
  line-height: 1; letter-spacing: -0.04em;
  pointer-events: none; user-select: none;
}
.v2-pcard-badge {
  display: inline-flex; align-self: flex-start;
  font-family: var(--font-inter);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  padding: 4px 10px; border-radius: 4px;
}
.v2-pcard-metric-wrap { align-self: flex-end; text-align: right; }
.v2-pcard-metric {
  font-family: var(--font-roboto);
  font-size: 1.5rem; font-weight: 300;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.02em; line-height: 1;
}
.v2-pcard-metric-sub {
  font-family: var(--font-inter);
  font-size: 0.6rem; color: rgba(255,255,255,0.6);
  margin-top: 0.15rem;
}

.v2-pcard-body { padding: 1.25rem; }
.v2-pcard-co {
  font-family: var(--font-inter);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--in); margin-bottom: 0.4rem;
}
.v2-pcard-title {
  font-family: var(--font-roboto);
  font-size: 1.08rem; font-weight: 400;
  color: var(--text-primary);
  line-height: 1.45; margin-bottom: 0.85rem;
}
.v2-pcard-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}
.v2-pcard-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.v2-pcard-tag {
  font-family: var(--font-inter);
  font-size: 0.58rem; font-weight: 500;
  padding: 3px 7px; border-radius: 3px;
  background: var(--in-light); color: var(--in);
}
.v2-pcard-cta {
  font-family: var(--font-inter);
  font-size: 0.78rem; font-weight: 500;
  color: var(--in); white-space: nowrap; margin-left: 0.5rem; flex-shrink: 0;
}

/* --- WORK PAGE FILTER ------------------------------------ */
.work-filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 2rem; }
.filter-btn {
  font-family: var(--font-inter);
  font-size: 0.8rem; font-weight: 500;
  padding: 0.45rem 1.1rem; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg); color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--in-border); color: var(--in); background: var(--in-light); }
.filter-btn.active { background: var(--in); color: #fff; border-color: var(--in); }

/* --- COMPACT CARDS (Tier 2 work listing) ----------------- */
.v2-pcard-sm {
  border-radius: 10px; border: 1px solid var(--border);
  text-decoration: none; display: block;
  background: var(--bg); overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.v2-pcard-sm:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(79,70,229,0.1);
  border-color: var(--in-border);
}
.v2-pcard-sm-accent { height: 4px; display: block; }
.v2-pcard-sm-body { padding: 1.25rem 1.25rem 1rem; }
.v2-pcard-sm-co {
  font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--in); margin-bottom: 0.4rem;
}
.v2-pcard-sm-title {
  font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 400;
  color: var(--text-primary); line-height: 1.4; margin-bottom: 0.6rem;
}
.v2-pcard-sm-desc {
  font-family: var(--font-inter); font-size: 0.82rem;
  color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;
}
.v2-pcard-sm-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.75rem; border-top: 1px solid var(--border-light);
}
.v2-pcard-sm-metric {
  font-family: var(--font-roboto); font-size: 1.1rem; font-weight: 300;
  color: var(--text-primary); letter-spacing: -0.02em; line-height: 1;
}
.v2-pcard-sm-metric-sub {
  font-family: var(--font-inter); font-size: 0.6rem;
  color: var(--text-tertiary); margin-top: 0.2rem;
}
.v2-pcard-sm-cta {
  font-family: var(--font-inter); font-size: 0.78rem;
  font-weight: 500; color: var(--in); white-space: nowrap;
}

/* --- WRITING V2 ------------------------------------------- */
.writing-v2 {
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
.writing-v2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 600px) { .writing-v2-grid { grid-template-columns: 1fr; } }
.writing-v2-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1.5rem; text-decoration: none; display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.writing-v2-card:hover {
  border-color: var(--in-border);
  box-shadow: 0 4px 20px rgba(79,70,229,0.08);
}
.writing-v2-date {
  font-family: var(--font-inter);
  font-size: 0.68rem; font-weight: 600;
  color: var(--in); margin-bottom: 0.5rem;
}
.writing-v2-title {
  font-family: var(--font-roboto);
  font-size: 1.05rem; font-weight: 400;
  color: var(--text-primary); line-height: 1.35; margin-bottom: 0.6rem;
}
.writing-v2-excerpt {
  font-family: var(--font-inter);
  font-size: 0.84rem; color: var(--text-secondary); line-height: 1.65;
}

/* --- CONTACT STRIP V2 ------------------------------------- */
.contact-v2 {
  background: var(--in); padding: 4rem 0;
  position: relative; overflow: hidden;
}
.contact-v2::before {
  content: '';
  position: absolute; width: 500px; height: 500px;
  top: -150px; right: -100px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}
.contact-v2::after {
  content: '';
  position: absolute; width: 300px; height: 300px;
  bottom: -100px; left: 40%;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}
.contact-v2-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; position: relative; z-index: 1;
}
.contact-v2-label {
  font-family: var(--font-inter);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 0.5rem;
}
.contact-v2-h2 {
  font-family: var(--font-roboto);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300; color: #fff;
  margin: 0 0 0.5rem; letter-spacing: -0.02em;
}
.contact-v2-sub {
  font-family: var(--font-inter);
  font-size: 0.9rem; color: rgba(255,255,255,0.65); margin: 0;
}
.contact-v2-side {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.contact-v2-email {
  font-family: var(--font-inter);
  font-size: 0.9rem; font-weight: 500;
  color: rgba(255,255,255,0.8); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px; transition: color 0.15s, border-color 0.15s;
}
.contact-v2-email:hover { color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-white {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; color: var(--in);
  font-family: var(--font-inter);
  font-size: 0.875rem; font-weight: 600;
  padding: 0.7rem 1.4rem; border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.btn-white:hover { background: var(--in-light); transform: translateY(-1px); }

/* --- FOOTER V2 -------------------------------------------- */
.footer-v2 {
  background: var(--ft-bg, #0D0D1A);
  padding: 2.5rem 3rem;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
@media (max-width: 900px) {
  .footer-v2 { padding: 2rem 1.25rem; flex-direction: column; align-items: flex-start; }
}
.footer-v2-brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-roboto);
  font-size: 1rem; font-weight: 300;
  color: rgba(255,255,255,0.85);
}
.footer-v2-logo {
  height: 22px; width: auto; display: block; flex-shrink: 0;
  filter: brightness(0) invert(1); opacity: 0.7;
}
.footer-v2-links { display: flex; gap: 1.75rem; }
.footer-v2-links a {
  font-family: var(--font-inter);
  font-size: 0.82rem; color: rgba(255,255,255,0.4);
  text-decoration: none; transition: color 0.15s;
}
.footer-v2-links a:hover { color: rgba(255,255,255,0.85); }
.footer-v2-meta {
  font-family: var(--font-inter);
  font-size: 0.72rem; color: rgba(255,255,255,0.25);
}

/* =====================================================================
   CASE STUDY V2 LAYOUT SYSTEM
   Applies to all cs-*.html pages
   ===================================================================== */

/* --- Identifier bar (01 · COMPANY) ---------------------------------- */
.cs-v2-bar {
  padding-top: calc(var(--nav-height) + 2rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1.5rem;
}
.cs-v2-bar-num {
  font-family: var(--font-inter);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}
.cs-v2-bar-line {
  flex: 1; height: 1px; background: var(--border-light);
}
.cs-v2-bar-company {
  font-family: var(--font-inter);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--in);
}

/* --- Hero ----------------------------------------------------------- */
.cs-v2-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem; align-items: start;
  padding-top: 3rem; padding-bottom: 3.5rem;
}
.cs-v2-hero-h1 {
  font-family: var(--font-roboto);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 300; line-height: 1.18;
  letter-spacing: -0.02em; color: var(--text-primary);
  margin: 0 0 1.75rem;
}
.cs-v2-hero-desc {
  font-family: var(--font-inter);
  font-size: 1rem; color: var(--text-secondary);
  line-height: 1.75; margin: 0;
}

/* My Contribution */
.cs-v2-contribution {
  margin-bottom: 1.5rem;
}
.cs-v2-contribution-label {
  font-family: var(--font-inter);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.6rem;
}
.cs-v2-contribution-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.cs-v2-contrib-tag {
  font-family: var(--font-inter);
  font-size: 0.75rem; color: var(--text-secondary);
  line-height: 1.6;
}
.cs-v2-contrib-tag:not(:last-child)::after {
  content: ' ·'; color: var(--border-strong); margin-left: 0.35rem;
}

/* Image placeholder zone */
.cs-img-zone {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-tertiary);
  font-family: var(--font-inter);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  gap: 0.5rem;
  position: relative; overflow: hidden;
}
.cs-img-zone svg { opacity: 0.3; }
.cs-img-zone--hero  { aspect-ratio: 4 / 3; }
.cs-img-zone--wide  { aspect-ratio: 21 / 8; width: 100%; margin: 2rem 0; }
.cs-img-zone--half  { aspect-ratio: 4 / 3; }
.cs-img-zone img    { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.cs-img-zone--has-img { background: transparent; border-color: transparent; }

/* --- Meta strip ----------------------------------------------------- */
.cs-v2-meta-strip {
  display: flex; gap: 0; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4rem;
}
.cs-v2-meta-cell {
  flex: 1; min-width: 180px;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
}
.cs-v2-meta-cell:last-child { border-right: none; }
.cs-v2-meta-key {
  font-family: var(--font-inter);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 0.3rem;
}
.cs-v2-meta-val {
  font-family: var(--font-inter);
  font-size: 0.85rem; font-weight: 400;
  color: var(--text-primary);
}

/* --- Section divider ------------------------------------------------ */
.cs-v2-section {
  margin-bottom: 4rem;
}
.cs-v2-section-hdr {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-bottom: 2rem;
}
.cs-v2-section-label {
  font-family: var(--font-roboto);
  font-size: 1.1rem; font-weight: 500;
  color: var(--text-primary); letter-spacing: -0.01em;
}

/* --- Problem split layout ------------------------------------------- */
.cs-v2-problem-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: start;
  margin-bottom: 2rem;
}
.cs-v2-stat-cards {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.cs-v2-stat-card {
  background: var(--surface-dark);
  color: var(--surface-dark-text);
  padding: 1.1rem 1.25rem;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.cs-v2-stat-card-num {
  font-family: var(--font-inter);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.35);
  padding-top: 0.2rem;
}
.cs-v2-stat-card-text {
  font-family: var(--font-inter);
  font-size: 0.875rem; line-height: 1.6;
  color: rgba(255,255,255,0.88);
}
.cs-v2-stat-card-num-large {
  font-family: var(--font-roboto);
  font-size: 1.5rem; font-weight: 300;
  color: #fff; letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}

/* --- Objective (large display text) --------------------------------- */
.cs-v2-objective {
  padding: 3rem 0 2.5rem;
  border-top: 1px solid var(--border);
  margin-bottom: 4rem;
}
.cs-v2-objective-text {
  font-family: var(--font-roboto);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 300; font-style: italic;
  line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text-primary); max-width: 760px;
}

/* --- Approach / process grid --------------------------------------- */
.cs-v2-approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  background: var(--border); gap: 1px;
  margin: 1.5rem 0;
}
.cs-v2-approach-cell {
  background: var(--bg);
  padding: 1.25rem 1.5rem;
}
.cs-v2-approach-step {
  font-family: var(--font-inter);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 0.5rem;
}
.cs-v2-approach-name {
  font-family: var(--font-inter);
  font-size: 0.9rem; font-weight: 500;
  color: var(--text-primary);
}

/* --- Indigo band (dark highlight sections) -------------------------- */
.cs-v2-band {
  background: var(--in);
  padding: 3rem 0; margin: 3rem 0;
}
.cs-v2-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; overflow: hidden;
}
.cs-v2-band-cell {
  background: var(--in);
  padding: 1.5rem;
}
.cs-v2-band-cell-label {
  font-family: var(--font-inter);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 0.5rem;
}
.cs-v2-band-cell-text {
  font-family: var(--font-inter);
  font-size: 0.875rem; line-height: 1.65;
  color: rgba(255,255,255,0.88);
}

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .cs-v2-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2rem; }
  .cs-v2-problem-split { grid-template-columns: 1fr; }
  .cs-v2-approach-grid { grid-template-columns: 1fr 1fr; }
  .cs-v2-band-grid { grid-template-columns: 1fr; }
  .cs-v2-meta-strip { flex-direction: column; }
  .cs-v2-meta-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .cs-v2-meta-cell:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .cs-v2-approach-grid { grid-template-columns: 1fr; }
  .cs-v2-hero-h1 { font-size: 1.75rem; }
}

/* ── Shared: case study prev/next navigation ── */
.cs-nav-b { display: flex; justify-content: space-between; align-items: flex-start; 
  padding: 2rem 0; border-top: 1px solid var(--border); margin-top: 1rem; gap: 1rem; }
.cs-nav-b a { font-family: var(--font-inter); font-size: 0.85rem; color: var(--text-secondary); 
  text-decoration: none; display: flex; flex-direction: column; gap: 0.2rem; transition: color .15s; }
.cs-nav-b a:hover { color: var(--text-primary); }
.cs-nav-b .cs-nav-b-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.cs-nav-b .cs-nav-b-next { text-align: right; margin-left: auto; }

/* ── cs-amararaja.html ── */
/* ── Warranty Platform · .am- prefix ── */
    :root { --am-in: #B45309; --am-ink: #0F172A; --am-gold: #D97706; }

    .am-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .am-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: center; padding: 4.5rem 0 3.5rem; }
    .am-h1 { font-family: var(--font-roboto); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin: 0 0 0.75rem; }
    .am-sub { font-family: var(--font-roboto); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.25rem; }
    .am-stats { display: flex; gap: 2.5rem; margin-bottom: 1.5rem; }
    .am-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--am-in); line-height: 1; }
    .am-stat-label { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; max-width: 110px; margin-top: 0.2rem; }
    .am-meta { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
    .am-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
    .am-meta-cell:last-child { border-right: none; }
    .am-meta-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .am-meta-val { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-primary); margin-top: 0.15rem; }
    .am-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

    .am-section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
    .am-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--am-in); margin-bottom: 0.5rem; }
    .am-h2 { font-family: var(--font-roboto); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 300; color: var(--text-primary); margin: 0 0 0.75rem; }
    .am-body { font-family: var(--font-inter); font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; max-width: 680px; margin-bottom: 1rem; }

    /* 5-failure grid */
    .am-failures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 2rem 0; }
    .am-failure { background: var(--surface); padding: 1.25rem 1rem; }
    .am-failure-type { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--am-in); margin-bottom: 0.4rem; }
    .am-failure-desc { font-family: var(--font-inter); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

    /* Insight callout */
    .am-callout { background: var(--am-ink); border-radius: 12px; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .am-callout-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FCD34D; margin-bottom: 0.5rem; }
    .am-callout-text { font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 300; color: #F8FAFC; line-height: 1.65; margin: 0; }

    /* 3-persona cards */
    .am-personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .am-persona { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); border-top: 3px solid var(--am-in); }
    .am-persona-role { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--am-in); margin-bottom: 0.25rem; }
    .am-persona-name { font-family: var(--font-inter); font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.35rem; }
    .am-persona-context { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-tertiary); margin-bottom: 0.5rem; }
    .am-persona-need { font-family: var(--font-inter); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

    /* CEO quote */
    .am-quote { border-left: 3px solid var(--am-gold); padding: 1.25rem 1.5rem; background: #FFFBEB; border-radius: 0 10px 10px 0; border-top: 1px solid #FEF3C7; border-right: 1px solid #FEF3C7; border-bottom: 1px solid #FEF3C7; margin: 1.5rem 0; }
    .am-quote-text { font-family: var(--font-roboto); font-size: 1rem; font-style: italic; font-weight: 300; color: var(--text-primary); line-height: 1.65; margin-bottom: 0.5rem; }
    .am-quote-attr { font-family: var(--font-inter); font-size: 0.75rem; color: var(--am-in); font-weight: 500; }

    /* Key decisions */
    .am-decisions { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
    .am-decision { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); align-items: start; }
    .am-decision-n { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--am-in); }
    .am-decision-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; }
    .am-decision-body { font-family: var(--font-inter); font-size: 0.83rem; color: var(--text-secondary); line-height: 1.6; }

    /* Impact */
    .am-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .am-impact-lane { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; background: var(--surface); }
    .am-impact-title { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--am-in); margin-bottom: 0.75rem; }
    .am-impact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
    .am-impact-list li { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); padding-left: 1rem; position: relative; line-height: 1.45; }
    .am-impact-list li::before { content: "→"; position: absolute; left: 0; color: var(--am-in); font-size: 0.7rem; top: 0.1rem; }

    /* Reflection */
    .am-reflection { background: #FFFBEB; border-left: 4px solid var(--am-gold); border-radius: 0 10px 10px 0; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .am-reflection-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--am-in); margin-bottom: 0.5rem; }
    .am-reflection-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; color: var(--am-ink); line-height: 1.7; margin: 0; }

    /* Placeholder */
    .am-ph { border: 1.5px solid #FDE68A; border-radius: 16px; box-shadow: 0 8px 32px rgba(180,83,9,0.12), 0 2px 8px rgba(180,83,9,0.06); background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin: 1.5rem 0; }
    .am-ph-path { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--am-in); background: #FFFBEB; padding: 0.2rem 0.6rem; border-radius: 4px; }
    .am-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 320px; }

    .am-nav { display: flex; justify-content: space-between; padding: 2.5rem 0; border-top: 1px solid var(--border); }
    .am-nav a { font-family: var(--font-inter); font-size: 0.82rem; color: var(--am-in); text-decoration: none; }
    .am-nav a:hover { text-decoration: underline; }

    @media (max-width: 900px) {
      .am-hero { grid-template-columns: 1fr; gap: 2rem; }
      .am-hero-right { display: none; }
      .am-failures, .am-personas, .am-impact { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .am-meta { grid-template-columns: 1fr 1fr; width: 100%; }
      .am-meta-cell:nth-child(even) { border-right: none; }
      .am-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
  
    /* ── Signature visual: 5-failure grid — elevated ── */
    .am-failures {
      background: #FFFBEB;
      border-color: #FDE68A;
      border-radius: 14px;
      margin: 2.5rem 0;
      box-shadow: 0 2px 12px rgba(180,83,9,0.08);
    }
  

/* ── cs-arvr.html ── */
/* ── AR Installation Guide · .av- prefix ── */
    :root { --av-in: #0284C7; --av-ink: #0F172A; --av-amber: #D97706; }

    /* Hero */
    .av-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .av-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: center; padding: 4.5rem 0 3.5rem; }
    .av-h1 { font-family: var(--font-roboto); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin: 0 0 0.75rem; }
    .av-sub { font-family: var(--font-roboto); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.25rem; }
    .av-stats { display: flex; gap: 2.5rem; margin-bottom: 1.5rem; }
    .av-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--av-in); line-height: 1; }
    .av-stat-label { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; max-width: 110px; margin-top: 0.2rem; }
    .av-meta { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
    .av-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
    .av-meta-cell:last-child { border-right: none; }
    .av-meta-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .av-meta-val { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-primary); margin-top: 0.15rem; }
    .av-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

    /* Sections */
    .av-section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
    .av-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--av-in); margin-bottom: 0.5rem; }
    .av-h2 { font-family: var(--font-roboto); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 300; color: var(--text-primary); margin: 0 0 0.75rem; }
    .av-body { font-family: var(--font-inter); font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; max-width: 680px; margin-bottom: 1rem; }

    /* Dark callout */
    .av-callout { background: var(--av-ink); border-radius: 12px; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .av-callout-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #818CF8; margin-bottom: 0.5rem; }
    .av-callout-text { font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 300; color: #F8FAFC; line-height: 1.65; margin: 0; }

    /* Considered vs Chosen */
    .av-decision-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }
    .av-rejected { border: 1px solid #FECACA; border-radius: 10px; padding: 1.5rem 1.75rem; background: #FEF2F2; }
    .av-chosen { border: 2px solid var(--av-in); border-radius: 10px; padding: 1.5rem 1.75rem; background: #EEF2FF; }
    .av-split-badge { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 0.75rem; }
    .av-rejected .av-split-badge { color: #DC2626; }
    .av-chosen .av-split-badge { color: var(--av-in); }
    .av-split-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
    .av-split-body { font-family: var(--font-inter); font-size: 0.82rem; line-height: 1.55; }
    .av-rejected .av-split-body { color: #991B1B; }
    .av-chosen .av-split-body { color: #3730A3; }
    .av-split-reason { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); margin-top: 0.75rem; line-height: 1.5; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 0.6rem; }

    /* 3-step pipeline */
    .av-pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; position: relative; }
    .av-pipe-step { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.5rem 1.25rem; background: var(--surface); position: relative; }
    .av-pipe-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--av-in); line-height: 1; margin-bottom: 0.5rem; }
    .av-pipe-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
    .av-pipe-body { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }
    .av-pipe-tag { display: inline-block; margin-top: 0.75rem; font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--av-in); background: #EEF2FF; padding: 0.15rem 0.5rem; border-radius: 20px; }

    /* Impact strip */
    .av-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 2rem 0; }
    .av-impact-cell { padding: 2rem 1.75rem; border-right: 1px solid var(--border); }
    .av-impact-cell:last-child { border-right: none; }
    .av-impact-num { font-family: var(--font-roboto); font-size: 3rem; font-weight: 300; color: var(--av-in); line-height: 1; }
    .av-impact-title { font-family: var(--font-inter); font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin: 0.35rem 0 0.25rem; }
    .av-impact-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; }

    /* Reflection */
    .av-reflection { background: #EEF2FF; border-left: 4px solid var(--av-in); border-radius: 0 10px 10px 0; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .av-reflection-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--av-in); margin-bottom: 0.5rem; }
    .av-reflection-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; color: var(--av-ink); line-height: 1.7; margin: 0; }

    /* Placeholder */
    .av-ph { border: 1.5px solid #BAE6FD; border-radius: 16px; box-shadow: 0 8px 32px rgba(2,132,199,0.12), 0 2px 8px rgba(2,132,199,0.06); background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin: 1.5rem 0; }
    .av-ph-icon { font-size: 1.5rem; opacity: 0.3; }
    .av-ph-path { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--av-in); background: #EEF2FF; padding: 0.2rem 0.6rem; border-radius: 4px; }
    .av-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 320px; }

    /* Prev/next */
    .av-nav { display: flex; justify-content: space-between; padding: 2.5rem 0; border-top: 1px solid var(--border); }
    .av-nav a { font-family: var(--font-inter); font-size: 0.82rem; color: var(--av-in); text-decoration: none; }
    .av-nav a:hover { text-decoration: underline; }

    @media (max-width: 900px) {
      .av-hero { grid-template-columns: 1fr; gap: 2rem; }
      .av-hero-right { display: none; }
      .av-pipeline, .av-impact, .av-decision-split { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .av-meta { grid-template-columns: 1fr 1fr; width: 100%; }
      .av-meta-cell:nth-child(even) { border-right: none; }
      .av-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
  
    /* ── Signature visual: Considered vs Chosen — elevated ── */
    .av-decision-split {
      background: #F0F9FF;
      border: 1px solid #BAE6FD;
      border-radius: 16px;
      padding: 1.75rem;
      margin: 2.5rem 0;
    }
  

/* ── cs-expenses.html ── */
/* ── Expense Management · .ex- prefix ── */
    :root { --ex-in: #EA580C; --ex-ink: #0F172A; }

    .ex-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .ex-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: center; padding: 4.5rem 0 3.5rem; }
    .ex-h1 { font-family: var(--font-roboto); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin: 0 0 0.75rem; }
    .ex-sub { font-family: var(--font-roboto); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.25rem; }
    .ex-stats { display: flex; gap: 2.5rem; margin-bottom: 1.5rem; }
    .ex-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--ex-in); line-height: 1; }
    .ex-stat-label { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; max-width: 110px; margin-top: 0.2rem; }
    .ex-meta { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
    .ex-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
    .ex-meta-cell:last-child { border-right: none; }
    .ex-meta-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .ex-meta-val { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-primary); margin-top: 0.15rem; }
    .ex-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

    .ex-section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
    .ex-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-in); margin-bottom: 0.5rem; }
    .ex-h2 { font-family: var(--font-roboto); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 300; color: var(--text-primary); margin: 0 0 0.75rem; }
    .ex-body { font-family: var(--font-inter); font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; max-width: 680px; margin-bottom: 1rem; }

    /* 3-actor strip */
    .ex-actors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .ex-actor { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); border-top: 3px solid var(--ex-in); }
    .ex-actor-role { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ex-in); margin-bottom: 0.4rem; }
    .ex-actor-pain { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }
    .ex-actor-pain strong { color: var(--text-primary); font-weight: 500; }

    /* Feature grid */
    .ex-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .ex-feature { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); }
    .ex-feature-n { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--ex-in); margin-bottom: 0.35rem; }
    .ex-feature-title { font-family: var(--font-inter); font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; }
    .ex-feature-body { font-family: var(--font-inter); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; }
    .ex-feature-moment { font-family: var(--font-inter); font-size: 0.72rem; color: var(--ex-in); font-style: italic; margin-top: 0.5rem; }

    /* Leadership callout */
    .ex-callout { background: var(--ex-ink); border-radius: 12px; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .ex-callout-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #818CF8; margin-bottom: 0.5rem; }
    .ex-callout-text { font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 300; color: #F8FAFC; line-height: 1.65; margin: 0; }

    /* Principle */
    .ex-principle { background: #EEF2FF; border-left: 4px solid var(--ex-in); border-radius: 0 10px 10px 0; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .ex-principle-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-in); margin-bottom: 0.5rem; }
    .ex-principle-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; color: var(--ex-ink); line-height: 1.7; margin: 0; }

    /* Impact */
    .ex-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .ex-impact-lane { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; background: var(--surface); }
    .ex-impact-title { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-in); margin-bottom: 0.75rem; }
    .ex-impact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
    .ex-impact-list li { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); padding-left: 1rem; position: relative; line-height: 1.45; }
    .ex-impact-list li::before { content: "→"; position: absolute; left: 0; color: var(--ex-in); font-size: 0.7rem; top: 0.1rem; }

    /* Placeholder */
    .ex-ph { border: 1.5px solid #FED7AA; border-radius: 16px; box-shadow: 0 8px 32px rgba(234,88,12,0.12), 0 2px 8px rgba(234,88,12,0.06); background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin: 1.5rem 0; }
    .ex-ph-path { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--ex-in); background: #EEF2FF; padding: 0.2rem 0.6rem; border-radius: 4px; }
    .ex-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 320px; }

    .ex-nav { display: flex; justify-content: space-between; padding: 2.5rem 0; border-top: 1px solid var(--border); }
    .ex-nav a { font-family: var(--font-inter); font-size: 0.82rem; color: var(--ex-in); text-decoration: none; }
    .ex-nav a:hover { text-decoration: underline; }

    @media (max-width: 900px) {
      .ex-hero { grid-template-columns: 1fr; gap: 2rem; }
      .ex-hero-right { display: none; }
      .ex-actors, .ex-features, .ex-impact { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .ex-meta { grid-template-columns: 1fr 1fr; width: 100%; }
      .ex-meta-cell:nth-child(even) { border-right: none; }
      .ex-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
  
    /* ── Signature visual: feature moment grid — elevated ── */
    .ex-features {
      background: #FFF7ED;
      border: 1px solid #FED7AA;
      border-radius: 16px;
      padding: 1.75rem;
      margin: 2.5rem 0;
    }
  

/* ── cs-flydubai.html ── */
/* ============================================================
   FlyDubai — Research Case Study (page-scoped)
   ============================================================ */
.fd-hero-wrap { padding-top: var(--nav-height); }
.fd-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: start; padding-top: 4.5rem; padding-bottom: 3.5rem; }
.fd-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

.fd-title { font-family: var(--font-roboto); font-size: clamp(2.5rem,5vw,3.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 1rem; }
.fd-subtitle { font-family: var(--font-roboto); font-size: clamp(1.05rem,2vw,1.35rem); font-weight: 300; line-height: 1.4; color: var(--text-secondary); font-style: italic; margin: 0 0 1.5rem; max-width: 520px; }
.fd-summary { font-family: var(--font-inter); font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 2.25rem; max-width: 500px; }

.fd-hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }
.fd-stat-item { background: var(--bg); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fd-stat-num { font-family: var(--font-roboto); font-size: 2rem; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.fd-stat-num--red { color: #DC2626; }
.fd-stat-num--ink { color: var(--text-primary); }
.fd-stat-label { font-family: var(--font-inter); font-size: 0.68rem; color: var(--text-tertiary); line-height: 1.4; }

.fd-meta-strip { display: grid; grid-template-columns: repeat(5, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fd-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
.fd-meta-cell:last-child { border-right: none; }
.fd-meta-key { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--in); margin-bottom: 0.25rem; }
.fd-meta-val { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-primary); line-height: 1.3; }

.img-ph { border: 1.5px solid #C7D2FE; border-radius: 16px; box-shadow: 0 8px 32px rgba(79,70,229,0.12), 0 2px 8px rgba(79,70,229,0.06); background: var(--bg); padding: 2rem; text-align: center; margin: 1.5rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.img-ph svg { color: var(--text-tertiary); opacity: 0.45; }
.img-ph-path { font-family: var(--font-mono); font-size: 0.78rem; color: var(--in); background: var(--in-light); padding: 3px 10px; border-radius: 4px; }
.img-ph-desc { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-tertiary); }

.fd-section { padding-top: 4rem; padding-bottom: 4rem; border-top: 1px solid var(--border); }
.fd-img-wrap { margin-top: 2rem; }
.fd-img-title { font-family: var(--font-inter); font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.6rem; letter-spacing: 0.01em; }
.fd-img-caption { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-tertiary); margin-top: 0.6rem; letter-spacing: 0.02em; }
.fd-section-label { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--in); margin-bottom: 0.75rem; }
.fd-section-h2 { font-family: var(--font-roboto); font-size: clamp(1.5rem,2.8vw,2rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 1.5rem; max-width: 660px; }
.fd-body { font-family: var(--font-inter); font-size: 0.95rem; line-height: 1.8; color: var(--text-secondary); max-width: 680px; margin: 0 0 1.1rem; }

.fd-phase-timeline { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; margin: 2rem 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fd-phase { padding: 1.25rem 1rem; border-right: 1px solid var(--border); background: var(--bg); }
.fd-phase:last-child { border-right: none; }
.fd-phase-num { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--in); opacity: 0.3; line-height: 1; margin-bottom: 0.4rem; }
.fd-phase-name { font-family: var(--font-inter); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 0.35rem; }
.fd-phase-desc { font-family: var(--font-inter); font-size: 0.7rem; color: var(--text-tertiary); line-height: 1.5; }

.fd-persona-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 2rem 0; }
.fd-persona-card { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; background: var(--bg-subtle); }
.fd-persona-card--p1 { border-top: 3px solid var(--in); }
.fd-persona-card--p2 { border-top: 3px solid #059669; }
.fd-persona-card--p3 { border-top: 3px solid #D97706; }
.fd-persona-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 0.35rem; }
.fd-persona-name { font-family: var(--font-roboto); font-size: 1rem; font-weight: 400; color: var(--text-primary); margin-bottom: 0.4rem; }
.fd-persona-count { font-family: var(--font-inter); font-size: 0.72rem; color: var(--in); font-weight: 600; margin-bottom: 0.75rem; }
.fd-persona-desc { font-family: var(--font-inter); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; }

.fd-sev-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.fd-sev-group { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.fd-sev-header { padding: 0.75rem 1rem; font-family: var(--font-inter); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fd-sev-header--critical { background: #FEF2F2; color: #B91C1C; border-bottom: 2px solid #DC2626; }
.fd-sev-header--high { background: #FFFBEB; color: #B45309; border-bottom: 2px solid #D97706; }
.fd-sev-header--good { background: #F0FDF4; color: #15803D; border-bottom: 2px solid #22C55E; }
.fd-sev-card { padding: 0.875rem 1rem; border-top: 1px solid var(--border-light); background: var(--bg); }
.fd-sev-card:first-of-type { border-top: none; }
.fd-sev-card-title { font-family: var(--font-inter); font-size: 0.78rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; }
.fd-sev-card-desc { font-family: var(--font-inter); font-size: 0.75rem; color: var(--text-secondary); line-height: 1.55; }

.fd-pipe-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0; }
.fd-pipe-row { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; }
.fd-pipe-finding { border: 1px solid #FECACA; border-left: 4px solid #DC2626; border-radius: 8px; padding: 1.1rem 1.25rem; background: #FEF2F2; }
.fd-pipe-action { border: 1px solid var(--in-border); border-left: 4px solid var(--in); border-radius: 8px; padding: 1.1rem 1.25rem; background: var(--in-light); }
.fd-pipe-chip { font-family: var(--font-inter); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; display: inline-block; margin-bottom: 0.4rem; }
.fd-pipe-chip--finding { background: #FECACA; color: #B91C1C; }
.fd-pipe-chip--action { background: var(--in-light); color: var(--in); border: 1px solid var(--in-border); }
.fd-pipe-title { font-family: var(--font-inter); font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 0.3rem; }
.fd-pipe-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; }
.fd-pipe-arrow { display: flex; align-items: center; justify-content: center; }
.fd-pipe-arrow svg { width: 20px; height: 20px; color: var(--text-tertiary); }

.fd-rec-list { display: flex; flex-direction: column; }
.fd-rec-item { display: grid; grid-template-columns: 36px auto 1fr; gap: 0 1.25rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--border-light); }
.fd-rec-item:last-child { border-bottom: none; }
.fd-rec-num { font-family: var(--font-roboto); font-size: 1.25rem; font-weight: 300; color: var(--text-tertiary); opacity: 0.4; padding-top: 0.15rem; }
.fd-sev-badge { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-top: 0.2rem; white-space: nowrap; }
.fd-sev-badge--high { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.fd-sev-badge--med  { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.fd-sev-badge--low  { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.fd-rec-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 0.4rem; }
.fd-rec-desc { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; }

.fd-quotes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.fd-quote-card { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; background: var(--bg-subtle); }
.fd-quote-persona-tag { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--in); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.fd-quote-persona-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--in); border-radius: 50%; }
.fd-quote-text { font-family: var(--font-roboto); font-size: 0.92rem; font-weight: 300; font-style: italic; line-height: 1.65; color: var(--text-primary); margin-bottom: 0.75rem; }
.fd-quote-text::before { content: '\201C'; }
.fd-quote-text::after  { content: '\201D'; }
.fd-quote-step { font-family: var(--font-inter); font-size: 0.68rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 0.3rem; }
.fd-quote-step::before { content: '\2192'; color: var(--in); }

.fd-impact-band { background: var(--in); border-radius: 16px; padding: 2.5rem; margin: 2.5rem 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.fd-impact-col-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 0.75rem; }
.fd-impact-item { font-family: var(--font-inter); font-size: 0.82rem; color: rgba(255,255,255,0.82); line-height: 1.6; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; gap: 0.5rem; align-items: flex-start; }
.fd-impact-item::before { content: '\00B7'; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.fd-impact-item:last-child { border-bottom: none; }

.fd-reflection-callout { border-left: 3px solid var(--in); padding: 1.5rem 1.75rem; background: var(--in-light); border-radius: 0 10px 10px 0; margin: 2rem 0; }
.fd-reflection-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--in); margin-bottom: 0.6rem; }
.fd-reflection-callout p { font-family: var(--font-inter); font-size: 0.9rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 0.75rem; }
.fd-reflection-callout p:last-child { margin-bottom: 0; }

@media (max-width: 960px) {
  .fd-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .fd-hero-right { max-width: 480px; aspect-ratio: 16/9; }
  .fd-sev-grid { grid-template-columns: 1fr; }
  .fd-persona-grid { grid-template-columns: 1fr; }
  .fd-impact-band { grid-template-columns: 1fr; }
  .fd-quotes-grid { grid-template-columns: 1fr; }
  .fd-phase-timeline { grid-template-columns: 1fr 1fr; }
  .fd-meta-strip { grid-template-columns: 1fr 1fr 1fr; width: 100%; }
  .fd-meta-cell:nth-child(3) { border-right: none; }
  .fd-meta-cell:nth-child(n+4) { border-top: 1px solid var(--border); }
}

@media (max-width: 620px) {
  .fd-hero-stats { grid-template-columns: 1fr; }
  .fd-meta-strip { grid-template-columns: 1fr 1fr; width: 100%; }
  .fd-meta-cell:nth-child(even) { border-right: none; }
  .fd-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
  .fd-phase-timeline { grid-template-columns: 1fr; }
  .fd-pipe-row { grid-template-columns: 1fr; }
  .fd-pipe-arrow { display: none; }
  .fd-rec-item { grid-template-columns: 28px auto 1fr; }
}

/* ── cs-lenexa.html ── */
/* ── Clinical Safety Dashboard · .lx- prefix ── */
    :root { --lx-in: #0E7490; --lx-ink: #0F172A; --lx-red: #B91C1C; }

    .lx-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .lx-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: center; padding: 4.5rem 0 3.5rem; }
    .lx-h1 { font-family: var(--font-roboto); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin: 0 0 0.75rem; }
    .lx-sub { font-family: var(--font-roboto); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.25rem; }
    .lx-stats { display: flex; gap: 2.5rem; margin-bottom: 1.5rem; }
    .lx-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--lx-red); line-height: 1; }
    .lx-stat-label { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; max-width: 120px; margin-top: 0.2rem; }
    .lx-meta { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
    .lx-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
    .lx-meta-cell:last-child { border-right: none; }
    .lx-meta-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .lx-meta-val { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-primary); margin-top: 0.15rem; }
    .lx-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

    .lx-section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
    .lx-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lx-in); margin-bottom: 0.5rem; }
    .lx-h2 { font-family: var(--font-roboto); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 300; color: var(--text-primary); margin: 0 0 0.75rem; }
    .lx-body { font-family: var(--font-inter); font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; max-width: 680px; margin-bottom: 1rem; }

    /* Stakes numbers */
    .lx-stakes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
    .lx-stake { border-radius: 10px; padding: 1.75rem 1.5rem; text-align: center; }
    .lx-stake:nth-child(1) { background: #FEF2F2; border: 1px solid #FECACA; }
    .lx-stake:nth-child(2) { background: #FFF7ED; border: 1px solid #FED7AA; }
    .lx-stake:nth-child(3) { background: #FEF2F2; border: 1px solid #FECACA; }
    .lx-stake-num { font-family: var(--font-roboto); font-size: 2.25rem; font-weight: 300; color: var(--lx-red); line-height: 1; margin-bottom: 0.4rem; }
    .lx-stake-desc { font-family: var(--font-inter); font-size: 0.8rem; color: #7F1D1D; line-height: 1.45; }

    /* Critical context callout */
    .lx-callout { background: var(--lx-ink); border-radius: 12px; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .lx-callout-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5EEAD4; margin-bottom: 0.5rem; }
    .lx-callout-text { font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 300; color: #F8FAFC; line-height: 1.65; margin: 0; }

    /* 4-module tabs visual */
    .lx-modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 2rem 0; }
    .lx-module { background: var(--surface); padding: 1.25rem 1rem; }
    .lx-module-tab { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; color: var(--lx-in); background: #F0FDFA; padding: 0.2rem 0.5rem; border-radius: 4px; display: inline-block; margin-bottom: 0.5rem; }
    .lx-module-title { font-family: var(--font-inter); font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.35rem; }
    .lx-module-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }

    /* Key decisions */
    .lx-decisions { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
    .lx-decision { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); align-items: start; }
    .lx-decision-n { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--lx-in); }
    .lx-decision-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; }
    .lx-decision-body { font-family: var(--font-inter); font-size: 0.83rem; color: var(--text-secondary); line-height: 1.6; }
    .lx-clinical-note { font-family: var(--font-inter); font-size: 0.78rem; color: var(--lx-in); margin-top: 0.5rem; font-style: italic; }

    /* Impact */
    .lx-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .lx-impact-lane { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; background: var(--surface); }
    .lx-impact-title { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-in); margin-bottom: 0.75rem; }
    .lx-impact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
    .lx-impact-list li { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); padding-left: 1rem; position: relative; line-height: 1.45; }
    .lx-impact-list li::before { content: "→"; position: absolute; left: 0; color: var(--lx-in); font-size: 0.7rem; top: 0.1rem; }

    /* Reflection */
    .lx-reflection { background: #F0FDFA; border-left: 4px solid var(--lx-in); border-radius: 0 10px 10px 0; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .lx-reflection-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lx-in); margin-bottom: 0.5rem; }
    .lx-reflection-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; color: var(--lx-ink); line-height: 1.7; margin: 0; }

    /* Placeholder */
    .lx-ph { border: 1.5px solid #A5F3FC; border-radius: 16px; box-shadow: 0 8px 32px rgba(14,116,144,0.12), 0 2px 8px rgba(14,116,144,0.06); background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin: 1.5rem 0; }
    .lx-ph-path { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--lx-in); background: #F0FDFA; padding: 0.2rem 0.6rem; border-radius: 4px; }
    .lx-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 320px; }

    .lx-nav { display: flex; justify-content: space-between; padding: 2.5rem 0; border-top: 1px solid var(--border); }
    .lx-nav a { font-family: var(--font-inter); font-size: 0.82rem; color: var(--lx-in); text-decoration: none; }
    .lx-nav a:hover { text-decoration: underline; }

    @media (max-width: 900px) {
      .lx-hero { grid-template-columns: 1fr; gap: 2rem; }
      .lx-hero-right { display: none; }
      .lx-stakes, .lx-modules, .lx-impact { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .lx-meta { grid-template-columns: 1fr 1fr; width: 100%; }
      .lx-meta-cell:nth-child(even) { border-right: none; }
      .lx-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
  
    /* ── Signature visual: stakes numbers — elevated ── */
    .lx-stakes {
      background: #FFF1F2;
      border: 1px solid #FECDD3;
      border-radius: 16px;
      padding: 1.75rem;
      margin: 2.5rem 0;
    }
  

/* ── cs-nurse.html ── */
/* ── Nurse Allocation · .nu- prefix ── */
    :root { --nu-in: #0F766E; --nu-ink: #0F172A; --nu-red: #DC2626; --nu-amber: #D97706; }

    /* Hero */
    .nu-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .nu-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: center; padding: 4.5rem 0 3.5rem; }
    .nu-h1 { font-family: var(--font-roboto); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin: 0 0 0.75rem; }
    .nu-sub { font-family: var(--font-roboto); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.25rem; }
    .nu-stats { display: flex; gap: 2.5rem; margin-bottom: 1.5rem; }
    .nu-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--nu-in); line-height: 1; }
    .nu-stat-label { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; max-width: 110px; margin-top: 0.2rem; }
    .nu-meta { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
    .nu-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
    .nu-meta-cell:last-child { border-right: none; }
    .nu-meta-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .nu-meta-val { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-primary); margin-top: 0.15rem; }
    .nu-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

    /* Section */
    .nu-section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
    .nu-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nu-in); margin-bottom: 0.5rem; }
    .nu-h2 { font-family: var(--font-roboto); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 300; color: var(--text-primary); margin: 0 0 0.75rem; }
    .nu-body { font-family: var(--font-inter); font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; max-width: 680px; margin-bottom: 1rem; }

    /* 3-scenario cards — time-aware styling */
    .nu-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
    .nu-scenario { border-radius: 10px; padding: 1.5rem 1.75rem; border: 1px solid var(--border); }
    .nu-scenario.evening { background: #1E1B4B; border-color: #312E81; }
    .nu-scenario.morning { background: #FFFBEB; border-color: #FDE68A; }
    .nu-scenario.day { background: #F0FDFA; border-color: #99F6E4; }
    .nu-s-time { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 0.5rem; }
    .nu-scenario.evening .nu-s-time { color: #818CF8; }
    .nu-scenario.morning .nu-s-time { color: var(--nu-amber); }
    .nu-scenario.day .nu-s-time { color: var(--nu-in); }
    .nu-s-title { font-family: var(--font-inter); font-size: 0.88rem; font-weight: 600; margin-bottom: 0.5rem; }
    .nu-scenario.evening .nu-s-title { color: #E0E7FF; }
    .nu-scenario.morning .nu-s-title, .nu-scenario.day .nu-s-title { color: var(--text-primary); }
    .nu-s-user { font-family: var(--font-inter); font-size: 0.72rem; margin-bottom: 0.6rem; }
    .nu-scenario.evening .nu-s-user { color: #A5B4FC; }
    .nu-scenario.morning .nu-s-user { color: var(--nu-amber); }
    .nu-scenario.day .nu-s-user { color: var(--nu-in); }
    .nu-s-body { font-family: var(--font-inter); font-size: 0.8rem; line-height: 1.55; }
    .nu-scenario.evening .nu-s-body { color: #C7D2FE; }
    .nu-scenario.morning .nu-s-body, .nu-scenario.day .nu-s-body { color: var(--text-secondary); }

    /* Constraint callout */
    .nu-callout { background: var(--nu-ink); border-radius: 12px; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .nu-callout-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5EEAD4; margin-bottom: 0.5rem; }
    .nu-callout-text { font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 300; color: #F8FAFC; line-height: 1.65; margin: 0; }

    /* Decision blocks */
    .nu-decisions { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
    .nu-decision { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); align-items: start; }
    .nu-decision-n { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--nu-in); }
    .nu-decision-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; }
    .nu-decision-body { font-family: var(--font-inter); font-size: 0.83rem; color: var(--text-secondary); line-height: 1.6; }
    .nu-consequence { font-family: var(--font-inter); font-size: 0.78rem; color: var(--nu-red); margin-top: 0.5rem; font-style: italic; }

    /* Impact */
    .nu-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
    .nu-impact-lane { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; background: var(--surface); }
    .nu-impact-title { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nu-in); margin-bottom: 0.75rem; }
    .nu-impact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
    .nu-impact-list li { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); padding-left: 1rem; position: relative; line-height: 1.45; }
    .nu-impact-list li::before { content: "→"; position: absolute; left: 0; color: var(--nu-in); font-size: 0.7rem; top: 0.1rem; }

    /* Reflection */
    .nu-reflection { background: #F0FDFA; border-left: 4px solid var(--nu-in); border-radius: 0 10px 10px 0; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .nu-reflection-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nu-in); margin-bottom: 0.5rem; }
    .nu-reflection-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; color: var(--nu-ink); line-height: 1.7; margin: 0; }

    /* Placeholder */
    .nu-ph { border: 1.5px solid #99F6E4; border-radius: 16px; box-shadow: 0 8px 32px rgba(15,118,110,0.12), 0 2px 8px rgba(15,118,110,0.06); background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin: 1.5rem 0; }
    .nu-ph-path { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--nu-in); background: #F0FDFA; padding: 0.2rem 0.6rem; border-radius: 4px; }
    .nu-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 320px; }

    /* Prev/next */
    .nu-nav { display: flex; justify-content: space-between; padding: 2.5rem 0; border-top: 1px solid var(--border); }
    .nu-nav a { font-family: var(--font-inter); font-size: 0.82rem; color: var(--nu-in); text-decoration: none; }
    .nu-nav a:hover { text-decoration: underline; }

    @media (max-width: 900px) {
      .nu-hero { grid-template-columns: 1fr; gap: 2rem; }
      .nu-hero-right { display: none; }
      .nu-scenarios, .nu-impact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .nu-meta { grid-template-columns: 1fr 1fr; width: 100%; }
      .nu-meta-cell:nth-child(even) { border-right: none; }
      .nu-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
  
    /* ── Signature visual: time-aware scenario band ── */
    .nu-scenarios {
      background: #F0FDFA;
      border: 1px solid #99F6E4;
      border-radius: 16px;
      padding: 1.75rem;
      margin: 2.5rem 0;
    }
  

/* ── cs-persistent.html ── */
/* ── AI Knowledge System · Persistent Systems · .ps- prefix ── */
    :root {
      --ps-in:   #1E40AF;
      --ps-mid:  #3B82F6;
      --ps-light:#EFF6FF;
      --ps-border:#BFDBFE;
      --ps-ink:  #0F172A;
      --ps-teal: #0D9488;
    }

    /* ── Hero ── */
    .ps-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .ps-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: center; padding-top: 4.5rem; padding-bottom: 3.5rem; }
    .ps-hero-left { display: flex; flex-direction: column; gap: 1.25rem; }
    .ps-h1 { font-family: var(--font-roboto); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 0.5rem; }
    .ps-subtitle { font-family: var(--font-roboto); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 300; line-height: 1.4; color: var(--text-secondary); font-style: italic; margin: 0 0 1rem; max-width: 500px; }
    .ps-summary { font-family: var(--font-inter); font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 1.5rem; max-width: 500px; }

    /* meta strip */
    .ps-meta-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 0.25rem; }
    .ps-meta-cell { padding-right: 1rem; border-right: 1px solid var(--border); }
    .ps-meta-cell:last-child { border-right: none; padding-right: 0; }
    .ps-meta-key { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ps-in); margin-bottom: 0.25rem; }
    .ps-meta-val { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-primary); }

    /* hero right */
    .ps-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

    /* ── Sections ── */
    .ps-section { padding-top: 4rem; padding-bottom: 4rem; border-bottom: 1px solid var(--border); }
    .ps-section:last-of-type { border-bottom: none; }
    .ps-section-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-in); margin-bottom: 0.75rem; }
    .ps-h2 { font-family: var(--font-roboto); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 300; color: var(--text-primary); margin: 0 0 1.25rem; line-height: 1.2; }
    .ps-body { font-family: var(--font-inter); font-size: 0.95rem; color: var(--text-secondary); line-height: 1.8; max-width: 720px; margin: 0 0 1rem; }
    .ps-body:last-child { margin-bottom: 0; }

    /* ── Tinted callout boxes ── */
    .ps-callout { border-radius: 12px; padding: 1.75rem 2rem; margin: 2rem 0; }
    .ps-callout.dark { background: var(--ps-ink); }
    .ps-callout.blue { background: var(--ps-light); border: 1px solid var(--ps-border); }
    .ps-callout.red  { background: #FEF2F2; border: 1px solid #FECACA; }
    .ps-callout.green{ background: #F0FDF4; border: 1px solid #BBF7D0; }
    .ps-callout.amber{ background: #FFFBEB; border: 1px solid #FDE68A; }

    .ps-callout-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 0.6rem; }
    .ps-callout.dark  .ps-callout-label { color: #93C5FD; }
    .ps-callout.blue  .ps-callout-label { color: var(--ps-in); }
    .ps-callout.red   .ps-callout-label { color: #DC2626; }
    .ps-callout.green .ps-callout-label { color: #15803D; }
    .ps-callout.amber .ps-callout-label { color: #B45309; }

    .ps-callout-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; line-height: 1.65; margin: 0; }
    .ps-callout.dark .ps-callout-text { color: #F8FAFC; }
    .ps-callout.blue .ps-callout-text,
    .ps-callout.red  .ps-callout-text,
    .ps-callout.green .ps-callout-text,
    .ps-callout.amber .ps-callout-text { color: var(--text-primary); }

    /* barrier list */
    .ps-barrier-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
    .ps-barrier-list li { font-family: var(--font-inter); font-size: 0.875rem; color: #991B1B; line-height: 1.5; padding-left: 1.25rem; position: relative; }
    .ps-barrier-list li::before { content: '×'; position: absolute; left: 0; color: #DC2626; font-weight: 700; }

    /* outcome list */
    .ps-outcome-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
    .ps-outcome-list li { font-family: var(--font-inter); font-size: 0.875rem; color: #166534; line-height: 1.5; padding-left: 1.25rem; position: relative; }
    .ps-outcome-list li::before { content: '✓'; position: absolute; left: 0; color: #16A34A; font-weight: 700; }

    /* ── 6 contribution cards ── */
    .ps-contrib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .ps-contrib { background: var(--ps-light); border: 1px solid var(--ps-border); border-radius: 12px; padding: 1.5rem 1.75rem; border-top: 3px solid var(--ps-in); }
    .ps-contrib-n { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--ps-in); line-height: 1; margin-bottom: 0.5rem; }
    .ps-contrib-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; line-height: 1.3; }
    .ps-contrib-body { font-family: var(--font-inter); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; }
    .ps-contrib-theme { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ps-in); margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ps-border); }

    /* ── Flow / mind map image placeholder ── */
    .ps-img-wrap { margin: 2.5rem 0; }
    .ps-img-title { font-family: var(--font-inter); font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; letter-spacing: 0.01em; }
    .ps-img-ph { border: 1.5px solid #BFDBFE; border-radius: 16px; box-shadow: 0 8px 32px rgba(30,64,175,0.12), 0 2px 8px rgba(30,64,175,0.06); background: var(--bg); padding: 3rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
    .ps-img-ph svg { opacity: 0.25; }
    .ps-img-ph-path { font-family: monospace; font-size: 0.72rem; font-weight: 500; color: var(--ps-in); background: var(--ps-light); padding: 0.2rem 0.6rem; border-radius: 4px; }
    .ps-img-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 360px; }

    /* ── Before / After ── */
    .ps-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2.5rem 0; background: #F8FAFC; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
    .ps-ba-col { padding: 2rem 2.25rem; }
    .ps-ba-col.before { background: #FEF2F2; border-right: 1px solid #FECACA; }
    .ps-ba-col.after  { background: var(--ps-light); }
    .ps-ba-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 0.75rem; }
    .ps-ba-col.before .ps-ba-label { color: #DC2626; }
    .ps-ba-col.after  .ps-ba-label { color: var(--ps-in); }
    .ps-ba-title { font-family: var(--font-roboto); font-size: 1.1rem; font-weight: 300; margin: 0 0 1rem; }
    .ps-ba-col.before .ps-ba-title { color: #7F1D1D; }
    .ps-ba-col.after  .ps-ba-title { color: var(--ps-in); }
    .ps-ba-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
    .ps-ba-list li { font-family: var(--font-inter); font-size: 0.82rem; line-height: 1.5; padding-left: 1.2rem; position: relative; }
    .ps-ba-col.before .ps-ba-list li { color: #991B1B; }
    .ps-ba-col.before .ps-ba-list li::before { content: '—'; position: absolute; left: 0; color: #DC2626; }
    .ps-ba-col.after  .ps-ba-list li { color: #1E3A8A; }
    .ps-ba-col.after  .ps-ba-list li::before { content: '→'; position: absolute; left: 0; color: var(--ps-in); }
    .ps-ba-img { margin-top: 1.5rem; }
    .ps-ba-img-ph { border: 1.5px dashed currentColor; border-radius: 8px; padding: 1.5rem 1rem; text-align: center; opacity: 0.4; }
    .ps-ba-col.before .ps-ba-img-ph { border-color: #DC2626; color: #DC2626; }
    .ps-ba-col.after  .ps-ba-img-ph { border-color: var(--ps-in); color: var(--ps-in); }
    .ps-ba-img-label { font-family: monospace; font-size: 0.68rem; }

    /* ── Pull quote / reflection ── */
    .ps-pull { border-left: 3px solid var(--ps-in); padding: 1rem 1.5rem; margin: 2rem 0; }
    .ps-pull-text { font-family: var(--font-roboto); font-size: 1.15rem; font-weight: 300; font-style: italic; color: var(--text-primary); line-height: 1.6; margin: 0; }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .ps-hero { grid-template-columns: 1fr; gap: 2rem; }
      .ps-hero-right { display: none; }
      .ps-contrib-grid { grid-template-columns: 1fr; }
      .ps-ba { grid-template-columns: 1fr; }
      .ps-ba-col.before { border-right: none; border-bottom: 1px solid #FECACA; }
      .ps-meta-strip { grid-template-columns: 1fr 1fr; }
      .ps-meta-cell:nth-child(even) { border-right: none; }
      .ps-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); padding-top: 0.75rem; }
    }

    /* ── Prev/Next ── */
    .ps-prev-next { display: flex; justify-content: space-between; align-items: flex-start;
      padding: 2rem 0; border-top: 1px solid var(--border); margin-top: 1rem; gap: 1rem; }
    .ps-prev-next a { font-family: var(--font-inter); font-size: 0.85rem; color: var(--text-secondary);
      text-decoration: none; display: flex; flex-direction: column; gap: 0.2rem; transition: color .15s; }
    .ps-prev-next a:hover { color: var(--text-primary); }
    .ps-prev-next .ps-nav-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .ps-prev-next .ps-nav-next { text-align: right; margin-left: auto; }

/* ── cs-pramati.html ── */
:root { --wm-in: #7C3AED; }

/* ============================================================
   Wavemaker — Leadership Case Study (page-scoped)
   ============================================================ */
.wm-hero-wrap { padding-top: var(--nav-height); }
.wm-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: start; padding-top: 4.5rem; padding-bottom: 3.5rem; }
.wm-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

.wm-title { font-family: var(--font-roboto); font-size: clamp(2.5rem,5vw,3.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 1rem; }
.wm-subtitle { font-family: var(--font-roboto); font-size: clamp(1.05rem,2vw,1.35rem); font-weight: 300; line-height: 1.4; color: var(--text-secondary); font-style: italic; margin: 0 0 1.5rem; max-width: 520px; }
.wm-summary { font-family: var(--font-inter); font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 2.25rem; max-width: 500px; }

.wm-before-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }
.wm-stat-item { background: var(--bg); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.wm-stat-pre { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #DC2626; }
.wm-stat-num { font-family: var(--font-roboto); font-size: 2rem; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: #DC2626; }
.wm-stat-label { font-family: var(--font-inter); font-size: 0.68rem; color: var(--text-tertiary); line-height: 1.4; }

.wm-meta-strip { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.wm-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
.wm-meta-cell:last-child { border-right: none; }
.wm-meta-key { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wm-in); margin-bottom: 0.25rem; }
.wm-meta-val { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-primary); line-height: 1.3; }

.img-ph { border: 1.5px solid #DDD6FE; border-radius: 16px; box-shadow: 0 8px 32px rgba(124,58,237,0.12), 0 2px 8px rgba(124,58,237,0.06); background: var(--bg); padding: 2rem; text-align: center; margin: 1.5rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.img-ph svg { color: var(--text-tertiary); opacity: 0.45; }
.img-ph-path { font-family: var(--font-mono); font-size: 0.78rem; color: var(--wm-in); background: var(--in-light); padding: 3px 10px; border-radius: 4px; }
.img-ph-desc { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-tertiary); }

.wm-section { padding-top: 4rem; padding-bottom: 4rem; border-top: 1px solid var(--border); }
.wm-section-label { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wm-in); margin-bottom: 0.75rem; }
.wm-section-h2 { font-family: var(--font-roboto); font-size: clamp(1.5rem,2.8vw,2rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 1.5rem; max-width: 640px; }
.wm-body { font-family: var(--font-inter); font-size: 0.95rem; line-height: 1.8; color: var(--text-secondary); max-width: 680px; margin: 0 0 1.1rem; }

.wm-insight { background: #0F172A; border-radius: 16px; padding: 3rem 3.5rem; margin: 2.5rem 0; }
.wm-insight-label { font-family: var(--font-inter); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 1.25rem; }
.wm-insight-text { font-family: var(--font-roboto); font-size: clamp(1.35rem,2.5vw,1.75rem); font-weight: 300; line-height: 1.45; color: #fff; margin: 0 0 1.25rem; }
.wm-insight-sub { font-family: var(--font-inter); font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.55); margin: 0; }

/* ── Research section ── */
.wm-research-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin: 2rem 0 2.5rem; }
.wm-research-card { border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; background: var(--bg); }
.wm-research-method { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wm-in); background: #F5F3FF; display: inline-block; padding: 0.2rem 0.65rem; border-radius: 4px; }
.wm-research-finding-label { font-family: var(--font-inter); font-size: 0.7rem; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.25rem; }
.wm-research-stats { display: flex; flex-direction: column; gap: 0.85rem; }
.wm-research-stat { display: flex; align-items: baseline; gap: 0.75rem; }
.wm-research-stat-num { font-family: var(--font-roboto); font-size: 2rem; font-weight: 300; color: var(--wm-in); line-height: 1; flex-shrink: 0; }
.wm-research-stat-desc { font-family: var(--font-inter); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }
.wm-research-findings { margin: 0; padding: 0 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.wm-research-findings li { font-family: var(--font-inter); font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; }
.wm-research-conclusion { font-family: var(--font-inter); font-size: 0.82rem; font-style: italic; color: var(--text-primary); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 0.85rem; margin-top: auto; }
@media (max-width: 860px) { .wm-research-grid { grid-template-columns: 1fr; } }

.wm-persona-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 2rem 0; }
.wm-persona-col { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wm-persona-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.wm-persona-role-tag { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wm-in); margin-bottom: 0.35rem; }
.wm-persona-name { font-family: var(--font-roboto); font-size: 1rem; font-weight: 400; color: var(--text-primary); }
.wm-persona-row { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border-light); }
.wm-persona-row:last-child { border-bottom: none; }
.wm-persona-row-label { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; }
.wm-persona-row-label--need { color: #059669; }
.wm-persona-row-label--gap  { color: #DC2626; }
.wm-persona-row-text { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; }

.wm-decision-list { display: flex; flex-direction: column; gap: 0; margin: 2rem 0; }
.wm-decision { padding: 2rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 52px 1fr; gap: 1.5rem; align-items: start; }
.wm-decision:last-child { border-bottom: none; }
.wm-decision-num { font-family: var(--font-roboto); font-size: 2rem; font-weight: 300; color: var(--text-tertiary); letter-spacing: -0.03em; line-height: 1; padding-top: 0.2rem; opacity: 0.3; }
.wm-decision-title { font-family: var(--font-inter); font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 0.6rem; }
.wm-decision-logic-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wm-in); margin-bottom: 0.4rem; }
.wm-decision-logic { font-family: var(--font-inter); font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary); max-width: 620px; }

.wm-ba { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; margin: 1.25rem 0 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-width: 480px; }
.wm-ba-before { padding: 1rem 1.25rem; background: #FEF2F2; }
.wm-ba-after  { padding: 1rem 1.25rem; background: #F0FDF4; }
.wm-ba-arrow  { display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); height: 100%; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.wm-ba-arrow svg { width: 16px; height: 16px; color: var(--text-tertiary); }
.wm-ba-label { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; }
.wm-ba-label--before { color: #B91C1C; }
.wm-ba-label--after  { color: #15803D; }
.wm-ba-num { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.wm-ba-num--before { color: #B91C1C; }
.wm-ba-num--after  { color: #15803D; }
.wm-ba-sub { font-family: var(--font-inter); font-size: 0.68rem; color: var(--text-tertiary); margin-top: 0.2rem; }

.wm-scope { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 2rem 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wm-scope-step { padding: 1.25rem 1.1rem; border-right: 1px solid var(--border); background: var(--bg); }
.wm-scope-step:last-child { border-right: none; }
.wm-scope-num { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--wm-in); opacity: 0.3; line-height: 1; margin-bottom: 0.4rem; }
.wm-scope-name { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); margin-bottom: 0.35rem; }
.wm-scope-desc { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-tertiary); line-height: 1.5; }

.wm-transform { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 2rem 0; }
.wm-transform-col { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wm-transform-surface { padding: 0.75rem 1.1rem; font-family: var(--font-inter); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wm-in); background: var(--in-light); border-bottom: 1px solid var(--in-border); }
.wm-transform-row { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border-light); }
.wm-transform-row:last-child { border-bottom: none; }
.wm-transform-row-label { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; }
.wm-transform-row-label--before { color: #DC2626; }
.wm-transform-row-label--after  { color: #059669; }
.wm-transform-row-text { font-family: var(--font-inter); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; }

.wm-impact-band { background: var(--wm-in); border-radius: 16px; padding: 2.5rem; margin: 2.5rem 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; }
.wm-impact-col-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 0.75rem; }
.wm-impact-item { font-family: var(--font-inter); font-size: 0.82rem; color: rgba(255,255,255,0.82); line-height: 1.6; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; gap: 0.5rem; align-items: flex-start; }
.wm-impact-item::before { content: '·'; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.wm-impact-item:last-child { border-bottom: none; }

.wm-priority { background: #0F172A; border-radius: 12px; padding: 1.75rem 2rem; margin: 2rem 0; display: flex; align-items: center; gap: 2rem; }
.wm-priority-num { font-family: var(--font-roboto); font-size: 4rem; font-weight: 300; color: #fff; letter-spacing: -0.04em; line-height: 1; flex-shrink: 0; }
.wm-priority-detail-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.4rem; }
.wm-priority-detail-text { font-family: var(--font-inter); font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.55; }

.wm-reflection-callout { border-left: 3px solid var(--wm-in); padding: 1.5rem 1.75rem; background: var(--in-light); border-radius: 0 10px 10px 0; margin: 2rem 0; }
.wm-reflection-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wm-in); margin-bottom: 0.6rem; }
.wm-reflection-callout p { font-family: var(--font-inter); font-size: 0.9rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 0.75rem; }
.wm-reflection-callout p:last-child { margin-bottom: 0; }


@media (max-width: 960px) {
  .wm-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .wm-hero-right { max-width: 480px; aspect-ratio: 16/9; }
  .wm-persona-grid { grid-template-columns: 1fr; }
  .wm-transform { grid-template-columns: 1fr; }
  .wm-impact-band { grid-template-columns: 1fr; }
  .wm-scope { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .wm-before-stats { grid-template-columns: 1fr; }
  .wm-meta-strip { grid-template-columns: 1fr 1fr; width: 100%; }
  .wm-meta-cell:nth-child(even) { border-right: none; }
  .wm-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
  .wm-scope { grid-template-columns: 1fr; }
  .wm-decision { grid-template-columns: 36px 1fr; gap: 1rem; }
  .wm-ba { grid-template-columns: 1fr; }
  .wm-ba-arrow { display: none; }
  .wm-priority { flex-direction: column; gap: 1rem; }
}

/* ── cs-proterra.html ── */
/* ── IoT Fleet Dashboard · .pt- prefix ── */
    :root { --pt-in: #0369A1; --pt-ink: #0F172A; --pt-teal: #0F766E; }

    .pt-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .pt-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: center; padding: 4.5rem 0 3.5rem; }
    .pt-h1 { font-family: var(--font-roboto); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin: 0 0 0.75rem; }
    .pt-sub { font-family: var(--font-roboto); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.25rem; }
    .pt-stats { display: flex; gap: 2.5rem; margin-bottom: 1.5rem; }
    .pt-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--pt-in); line-height: 1; }
    .pt-stat-label { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; max-width: 110px; margin-top: 0.2rem; }
    .pt-meta { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
    .pt-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
    .pt-meta-cell:last-child { border-right: none; }
    .pt-meta-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .pt-meta-val { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-primary); margin-top: 0.15rem; }
    .pt-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }

    .pt-section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
    .pt-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-in); margin-bottom: 0.5rem; }
    .pt-h2 { font-family: var(--font-roboto); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 300; color: var(--text-primary); margin: 0 0 0.75rem; }
    .pt-body { font-family: var(--font-inter); font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; max-width: 680px; margin-bottom: 1rem; }

    /* 4-layer challenge stack */
    .pt-layers { display: flex; flex-direction: column; gap: 0; margin: 2rem 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    .pt-layer { display: grid; grid-template-columns: 140px 1fr; border-bottom: 1px solid var(--border); }
    .pt-layer:last-child { border-bottom: none; }
    .pt-layer-tag { padding: 1.25rem 1.5rem; background: var(--pt-ink); display: flex; align-items: center; }
    .pt-layer-tag-text { font-family: var(--font-inter); font-size: 0.7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #93C5FD; }
    .pt-layer-body { padding: 1.25rem 1.5rem; background: var(--surface); }
    .pt-layer-title { font-family: var(--font-inter); font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; }
    .pt-layer-desc { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

    /* Dark callout */
    .pt-callout { background: var(--pt-ink); border-radius: 12px; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .pt-callout-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #93C5FD; margin-bottom: 0.5rem; }
    .pt-callout-text { font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 300; color: #F8FAFC; line-height: 1.65; margin: 0; }

    /* Key decisions */
    .pt-decisions { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
    .pt-decision { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); align-items: start; }
    .pt-decision-n { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--pt-in); }
    .pt-decision-title { font-family: var(--font-inter); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; }
    .pt-decision-sub { font-family: var(--font-inter); font-size: 0.75rem; color: var(--pt-in); font-weight: 500; margin-bottom: 0.5rem; }
    .pt-decision-body { font-family: var(--font-inter); font-size: 0.83rem; color: var(--text-secondary); line-height: 1.6; }

    /* Impact */
    .pt-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
    .pt-impact-lane { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; background: var(--surface); }
    .pt-impact-title { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-in); margin-bottom: 0.75rem; }
    .pt-impact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
    .pt-impact-list li { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); padding-left: 1rem; position: relative; line-height: 1.45; }
    .pt-impact-list li::before { content: "→"; position: absolute; left: 0; color: var(--pt-in); font-size: 0.7rem; top: 0.1rem; }

    /* Reflection */
    .pt-reflection { background: #EFF6FF; border-left: 4px solid var(--pt-in); border-radius: 0 10px 10px 0; padding: 1.75rem 2rem; margin: 1.5rem 0; }
    .pt-reflection-label { font-family: var(--font-inter); font-size: 0.62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-in); margin-bottom: 0.5rem; }
    .pt-reflection-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; color: var(--pt-ink); line-height: 1.7; margin: 0; }

    /* Placeholder */
    .pt-ph { border: 1.5px solid #BAE6FD; border-radius: 16px; box-shadow: 0 8px 32px rgba(3,105,161,0.12), 0 2px 8px rgba(3,105,161,0.06); background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin: 1.5rem 0; }
    .pt-ph-path { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--pt-in); background: #EFF6FF; padding: 0.2rem 0.6rem; border-radius: 4px; }
    .pt-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 320px; }

    .pt-nav { display: flex; justify-content: space-between; padding: 2.5rem 0; border-top: 1px solid var(--border); }
    .pt-nav a { font-family: var(--font-inter); font-size: 0.82rem; color: var(--pt-in); text-decoration: none; }
    .pt-nav a:hover { text-decoration: underline; }

    @media (max-width: 900px) {
      .pt-hero { grid-template-columns: 1fr; gap: 2rem; }
      .pt-hero-right { display: none; }
      .pt-layer { grid-template-columns: 1fr; }
      .pt-impact { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .pt-meta { grid-template-columns: 1fr 1fr; width: 100%; }
      .pt-meta-cell:nth-child(even) { border-right: none; }
      .pt-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
  
    /* ── Signature visual: challenge stack — elevated ── */
    .pt-layers {
      box-shadow: 0 4px 24px rgba(3,105,161,0.10);
      border-radius: 14px;
      margin: 2.5rem 0;
      border-color: #BAE6FD;
    }
  

/* ── cs-recruitment.html ── */
/* ── Recruitment Dashboard · .rd- prefix ── */
    :root { --rd-in: #DB2777; --rd-red: #DC2626; --rd-ink: #0F172A; }

    /* Hero */
    .rd-hero-wrap { padding-top: var(--nav-height); background: var(--surface); }
    .rd-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: start; padding: 4.5rem 0 3.5rem; }
    .rd-hero-left { display: flex; flex-direction: column; gap: 1.25rem; }
    .rd-hero-h1 { font-family: var(--font-roboto); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin: 0; }
    .rd-hero-sub { font-family: var(--font-roboto); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--text-secondary); line-height: 1.5; margin: 0; }
    .rd-stats { display: flex; gap: 2.5rem; margin-top: 0.5rem; }
    .rd-stat { display: flex; flex-direction: column; gap: 0.2rem; }
    .rd-stat-pre { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .rd-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--rd-red); line-height: 1; }
    .rd-stat-label { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; max-width: 120px; }
    .rd-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }
    .rd-meta { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
    .rd-meta-cell { padding: 0.6rem 1.1rem; border-right: 1px solid var(--border); }
    .rd-meta-cell:last-child { border-right: none; }
    .rd-meta-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
    .rd-meta-val { font-family: var(--font-inter); font-size: 0.85rem; color: var(--text-primary); margin-top: 0.2rem; }

    /* Image placeholder */
    .rd-img-ph { border: 1.5px solid #FBCFE8; border-radius: 16px; box-shadow: 0 8px 32px rgba(219,39,119,0.12), 0 2px 8px rgba(219,39,119,0.06); background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
    .rd-img-ph-icon { font-size: 1.75rem; opacity: 0.3; }
    .rd-img-ph-path { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 500; color: var(--rd-in); background: #EEF2FF; padding: 0.2rem 0.6rem; border-radius: 4px; }
    .rd-img-ph-desc { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-tertiary); max-width: 340px; }

    /* Section shared */
    .rd-section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
    .rd-section:last-of-type { border-bottom: none; }
    .rd-section-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-in); margin-bottom: 0.6rem; }
    .rd-section-h2 { font-family: var(--font-roboto); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 300; color: var(--text-primary); margin: 0 0 0.75rem; }
    .rd-section-lead { font-family: var(--font-inter); font-size: 1rem; color: var(--text-secondary); line-height: 1.7; max-width: 680px; margin-bottom: 2rem; }

    /* Context stats row */
    .rd-ctx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
    .rd-ctx-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; }
    .rd-ctx-stat-num { font-family: var(--font-roboto); font-size: 2.5rem; font-weight: 300; color: var(--rd-red); line-height: 1; }
    .rd-ctx-stat-desc { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.4rem; line-height: 1.45; }

    /* Insight callout */
    .rd-insight { background: var(--rd-ink); border-radius: 12px; padding: 1.75rem 2rem; margin: 2rem 0; }
    .rd-insight-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #818CF8; margin-bottom: 0.5rem; }
    .rd-insight-text { font-family: var(--font-roboto); font-size: 1.05rem; font-weight: 300; color: #F8FAFC; line-height: 1.65; margin: 0; }

    /* Time-lens grid */
    .rd-lens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
    .rd-lens-card { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; background: var(--surface); }
    .rd-lens-role { font-family: var(--font-inter); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-in); margin-bottom: 0.4rem; }
    .rd-lens-title { font-family: var(--font-roboto); font-size: 1rem; font-weight: 400; color: var(--text-primary); margin-bottom: 0.6rem; }
    .rd-lens-horizon { display: inline-block; font-family: var(--font-inter); font-size: 0.7rem; font-weight: 600; background: #EEF2FF; color: var(--rd-in); padding: 0.15rem 0.55rem; border-radius: 20px; margin-bottom: 0.75rem; }
    .rd-lens-pain { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
    .rd-lens-pain strong { color: var(--text-primary); font-weight: 500; }

    /* 4-gap problem blocks */
    .rd-gap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }
    .rd-gap-block { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.75rem; background: var(--surface); border-left: 3px solid var(--rd-red); }
    .rd-gap-num { font-family: var(--font-roboto); font-size: 1.75rem; font-weight: 300; color: var(--rd-red); margin-bottom: 0.25rem; }
    .rd-gap-title { font-family: var(--font-inter); font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
    .rd-gap-body { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }

    /* Design decision cards */
    .rd-decision-list { display: flex; flex-direction: column; gap: 1.5rem; margin: 2rem 0; }
    .rd-decision { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
    .rd-decision-head { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 1.75rem 1rem; }
    .rd-decision-n { font-family: var(--font-roboto); font-size: 1.5rem; font-weight: 300; color: var(--rd-in); min-width: 2rem; padding-top: 0.1rem; }
    .rd-decision-title { font-family: var(--font-inter); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
    .rd-decision-sub { font-family: var(--font-inter); font-size: 0.78rem; color: var(--rd-in); font-weight: 500; margin-top: 0.2rem; }
    .rd-decision-body { padding: 0 1.75rem 1.5rem 4rem; font-family: var(--font-inter); font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; }

    /* Before / After */
    .rd-ba-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
    .rd-ba-col { border-radius: 10px; padding: 1.75rem 2rem; }
    .rd-ba-col.before { background: #FEF2F2; border: 1px solid #FECACA; }
    .rd-ba-col.after { background: #F0FDF4; border: 1px solid #BBF7D0; }
    .rd-ba-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
    .rd-ba-col.before .rd-ba-label { color: #DC2626; }
    .rd-ba-col.after .rd-ba-label { color: #16A34A; }
    .rd-ba-metrics { display: flex; gap: 2rem; margin-bottom: 1rem; }
    .rd-ba-metric-num { font-family: var(--font-roboto); font-size: 2.25rem; font-weight: 300; line-height: 1; }
    .rd-ba-col.before .rd-ba-metric-num { color: #DC2626; }
    .rd-ba-col.after .rd-ba-metric-num { color: #16A34A; }
    .rd-ba-metric-desc { font-family: var(--font-inter); font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.35; }
    .rd-ba-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
    .rd-ba-list li { font-family: var(--font-inter); font-size: 0.82rem; color: var(--text-secondary); padding-left: 1rem; position: relative; line-height: 1.45; }
    .rd-ba-list li::before { content: "–"; position: absolute; left: 0; color: var(--text-tertiary); }

    /* Quote cards */
    .rd-quotes { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
    .rd-quote { border-left: 3px solid var(--rd-in); padding: 1.25rem 1.5rem; background: var(--surface); border-radius: 0 10px 10px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .rd-quote-text { font-family: var(--font-roboto); font-size: 1rem; font-style: italic; font-weight: 300; color: var(--text-primary); line-height: 1.65; margin-bottom: 0.75rem; }
    .rd-quote-attr { font-family: var(--font-inter); font-size: 0.75rem; color: var(--text-tertiary); }

    /* Impact band */
    .rd-impact-band { background: var(--rd-in); border-radius: 12px; padding: 2.5rem; margin: 2rem 0; }
    .rd-impact-band-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #C7D2FE; margin-bottom: 1.5rem; }
    .rd-impact-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .rd-impact-lane-title { font-family: var(--font-inter); font-size: 0.75rem; font-weight: 600; color: #E0E7FF; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 0.75rem; }
    .rd-impact-lane ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
    .rd-impact-lane ul li { font-family: var(--font-inter); font-size: 0.82rem; color: #EEF2FF; line-height: 1.45; padding-left: 0.9rem; position: relative; }
    .rd-impact-lane ul li::before { content: "→"; position: absolute; left: 0; color: #A5B4FC; font-size: 0.7rem; top: 0.1rem; }

    /* Reflection */
    .rd-reflection { background: #EEF2FF; border-radius: 12px; padding: 2rem 2.25rem; margin: 2rem 0; border-left: 4px solid var(--rd-in); }
    .rd-reflection-label { font-family: var(--font-inter); font-size: 0.65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-in); margin-bottom: 0.6rem; }
    .rd-reflection-text { font-family: var(--font-roboto); font-size: 1rem; font-weight: 300; color: var(--rd-ink); line-height: 1.7; margin: 0 0 1rem; }

    /* Prev/next nav */
    .rd-nav { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 0; border-top: 1px solid var(--border); margin-top: 1rem; }
    .rd-nav a { font-family: var(--font-inter); font-size: 0.82rem; color: var(--rd-in); text-decoration: none; }
    .rd-nav a:hover { text-decoration: underline; }

    /* Wide image zone */
    .rd-wide { padding: 3rem 0; border-bottom: 1px solid var(--border); }

    @media (max-width: 900px) {
      .rd-hero { grid-template-columns: 1fr; gap: 2rem; }
      .rd-hero-right { display: none; }
      .rd-lens-grid, .rd-ctx-stats, .rd-impact-lanes { grid-template-columns: 1fr; }
      .rd-gap-grid, .rd-ba-wrap { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .rd-meta { grid-template-columns: 1fr 1fr; width: 100%; }
      .rd-meta-cell:nth-child(even) { border-right: none; }
      .rd-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
  

/* ── cs-table.html ── */
:root { --tb-in: #059669; }

/* Split hero */
.tb-hero-wrap { padding-top: var(--nav-height); }
.tb-hero { display: grid; grid-template-columns: 58% 42%; gap: 5rem; align-items: start; padding-top: 4.5rem; padding-bottom: 3.5rem; }
.tb-hero-right img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; border-radius: 10px; }
.tb-title { font-family: var(--font-roboto); font-size: clamp(2.5rem,5vw,3.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 1rem; }
.tb-subtitle { font-family: var(--font-roboto); font-size: clamp(1.05rem,2vw,1.35rem); font-weight: 300; line-height: 1.4; color: var(--text-secondary); font-style: italic; margin: 0 0 1.5rem; max-width: 520px; }
.tb-summary { font-family: var(--font-inter); font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 2.25rem; max-width: 500px; }
.tb-hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }
.tb-stat-item { background: var(--bg); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.tb-stat-num { font-family: var(--font-roboto); font-size: 2rem; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--tb-in); }
.tb-stat-label { font-family: var(--font-inter); font-size: 0.68rem; color: var(--text-tertiary); line-height: 1.4; }
.tb-meta-strip { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tb-meta-cell { flex: 1; min-width: 110px; padding: 0.75rem 1rem; border-right: 1px solid var(--border); }
.tb-meta-cell:last-child { border-right: none; }
.tb-meta-key { font-family: var(--font-inter); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tb-in); margin-bottom: 0.25rem; }
.tb-meta-val { font-family: var(--font-inter); font-size: 0.78rem; color: var(--text-primary); line-height: 1.3; }

/* Image placeholder */
.img-ph { border: 1.5px solid #A7F3D0; border-radius: 16px; box-shadow: 0 8px 32px rgba(5,150,105,0.12), 0 2px 8px rgba(5,150,105,0.06); background: var(--bg); padding: 2rem; text-align: center; margin: 1.5rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.img-ph svg { color: var(--text-tertiary); opacity: 0.45; }
.img-ph-path { font-family: var(--font-mono); font-size: 0.78rem; color: var(--tb-in); background: var(--in-light); padding: 3px 10px; border-radius: 4px; }
.img-ph-desc { font-family: var(--font-inter); font-size: 0.72rem; color: var(--text-tertiary); }

/* ── Table spec image — layered viewer ── */
.tb-spec-wrap {
  position: relative;
  height: 360px;
  overflow: hidden;
  border-radius: 16px;
  border: 1.5px solid #A7F3D0;
  box-shadow: 0 8px 32px rgba(5,150,105,0.12), 0 2px 8px rgba(5,150,105,0.06);
  cursor: zoom-in;
  margin: 2rem 0;
}
.tb-spec-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.tb-spec-expand {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.92);
  border: 1px solid #A7F3D0;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #059669;
  box-shadow: 0 2px 8px rgba(5,150,105,0.15);
  transition: background 0.15s;
}
.tb-spec-expand:hover { background: #fff; }
.tb-spec-expand svg { display: block; }

/* Lightbox */
.tb-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
}
.tb-lightbox.is-open { display: flex; }
.tb-lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
.tb-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  transition: background 0.15s;
}
.tb-lightbox-close:hover { background: #f3f4f6; }

/* Component anatomy + before/after (existing) */
.anat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 2rem; }
.anat-cell { background: var(--surface-dark,#F7F7F8); border: 1px solid var(--border,#E5E5E5); border-radius: 10px; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.anat-cell-icon { width: 36px; height: 36px; background: var(--in,#4F46E5); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; }
.anat-cell-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.6; }
.anat-cell-title { font-family: var(--font-inter); font-size: 0.875rem; font-weight: 600; color: var(--text-primary,#111); letter-spacing: 0.01em; }
.anat-cell-desc { font-family: var(--font-inter); font-size: 0.825rem; color: var(--text-secondary,#555); line-height: 1.6; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.ba-cell { border-radius: 10px; padding: 1.5rem; border: 1px solid var(--border,#E5E5E5); }
.ba-cell--before { background: #FEF2F2; border-color: #FECACA; }
.ba-cell--after  { background: #F0FDF4; border-color: #BBF7D0; }
.ba-label { font-family: var(--font-inter); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem; }
.ba-cell--before .ba-label { color: #DC2626; }
.ba-cell--after  .ba-label { color: #16A34A; }
.ba-cell p { font-family: var(--font-inter); font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.edge-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.edge-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-family: var(--font-inter); font-size: 0.925rem; color: var(--text-secondary); line-height: 1.65; }
.edge-list li::before { content: '\2192'; color: var(--in,#4F46E5); font-weight: 600; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 960px) {
  .tb-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .tb-hero-right { max-width: 480px; aspect-ratio: 16/9; }
  .anat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .tb-hero-stats { grid-template-columns: 1fr; }
  .tb-meta-strip { grid-template-columns: 1fr 1fr; width: 100%; }
  .tb-meta-cell:nth-child(even) { border-right: none; }
  .tb-meta-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
  .before-after { grid-template-columns: 1fr; }
  .anat-grid { grid-template-columns: 1fr; }
}