/* ==========================================================================
   BURTON — CURRENT STANDARD PASS
   Logo-led 3D cover, evidence-led audit, live website concept,
   readable fluid type and tablet/phone reflow.
   ========================================================================== */

:root {
  --std-body: clamp(16px, min(1.18vw, 2.02vh), 21px);
  --std-body-sm: clamp(14.5px, min(1.02vw, 1.78vh), 17px);
  --std-label: clamp(12px, .84vw, 14px);
  --std-head: clamp(32px, min(3.05vw, 5.35vh), 54px);
  --std-head-sm: clamp(28px, min(2.5vw, 4.6vh), 44px);
}

/* ------------------------------------------------------------------ shared */
.header-meta { font-size: var(--std-label); }
.header-wordmark b { font-size: clamp(17px, 1.12vw, 20px); }
.header-wordmark small { font-size: clamp(11px, .84vw, 13px); }
.slide-foot { font-size: clamp(11.5px, .78vw, 13px); }
.page { font-size: clamp(12px, .82vw, 13.5px); }
.eyebrow, .kicker { font-size: var(--std-label); }
h2 { font-size: var(--std-head); line-height: 1.04; }
h3 { font-size: clamp(18px, 1.34vw, 25px); line-height: 1.16; }
.lead { font-size: var(--std-body); line-height: 1.5; max-width: 62ch; }
.num-chip { font-size: clamp(13px, .92vw, 15px); }

/* ------------------------------------------------------------------ 01 COVER */
.slide.cover.logo-cover {
  display: none;
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #070b12;
}
.slide.cover.logo-cover.active { display: block; }

.logo-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 72% 43%, #1a3052 0%, #0d1728 36%, #070b12 72%),
    linear-gradient(90deg, #070b12 0 38%, transparent 62%);
}
#logo-scene {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .55s ease;
}
.logo-stage.scene-ready #logo-scene { opacity: 1; }
.logo-stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(126, 164, 224, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 164, 224, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent 35%, #000 70%);
  pointer-events: none;
}
.logo-stage-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 15, .88) 0%, rgba(5, 8, 15, .52) 34%, transparent 58%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(4, 7, 13, .58) 100%);
  pointer-events: none;
}

.logo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8vh 3.4vw 10vh 42%;
  transition: opacity .45s ease;
}
.logo-stage.scene-ready .logo-fallback { opacity: 0; pointer-events: none; }
.logo-fallback-plaque {
  position: relative;
  width: min(100%, 630px);
  aspect-ratio: 1.55;
  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, #29384f 0%, #131d2d 36%, #0a111d 72%, #223149 100%);
  border: 1px solid rgba(240, 180, 86, .28);
  box-shadow:
    0 38px 80px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 0 80px rgba(30, 77, 155, .22);
}
.logo-fallback-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 5% 7% 4%;
  border-radius: 5px;
  background-color: #f4efe4;
  background-image:
    linear-gradient(rgba(30, 77, 155, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 77, 155, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  box-shadow: 0 0 0 1px rgba(8, 14, 24, .2) inset;
}
.logo-fallback-face img { width: 88%; height: auto; object-fit: contain; }
.logo-fallback-meta {
  display: flex;
  justify-content: space-between;
  width: 88%;
  margin-top: 4%;
  padding-top: 2.2%;
  border-top: 1px solid rgba(19, 52, 110, .28);
  font-family: var(--font-mono);
  font-size: clamp(8px, .7vw, 11px);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--burton-navy);
}
.fb-bolt {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9b879, #80602e 56%, #3b2a12);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45);
}
.fb-bolt.tl { left: 7px; top: 7px; }
.fb-bolt.tr { right: 7px; top: 7px; }
.fb-bolt.bl { left: 7px; bottom: 7px; }
.fb-bolt.br { right: 7px; bottom: 7px; }

.cover-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  height: 100%;
  padding: clamp(24px, 3.4vh, 40px) clamp(28px, 3.4vw, 54px) clamp(20px, 2.7vh, 32px);
  pointer-events: none;
}
.cover-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.2vh, 13px);
  max-width: 720px;
  padding-bottom: clamp(34px, 5vh, 48px);
  pointer-events: auto;
}
.cover-collab { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-bottom: 2px; }
.brandcore-collab-logo { width: auto; height: clamp(22px, 2.2vh, 27px); }
.collab-sep { color: var(--accent-bright); font-size: 17px; }
.collab-label { font: 600 clamp(10px, .76vw, 12px) var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #dfe8f6; }
.cover-copy h1 {
  font-size: clamp(36px, 3.7vw, 70px);
  line-height: 1.04;
  letter-spacing: -.038em;
  max-width: none;
}
.cover-copy .lead {
  max-width: 38ch;
  margin-top: 2px;
  font-size: clamp(16px, 1.18vw, 21px);
  line-height: 1.5;
  color: #dfe8f6;
}
.cover-copy .fact-pills { margin-top: 4px; }
.cover-copy .fact-pills li { font-size: clamp(12.5px, .9vw, 14px); padding: 7px 10px; }
.cover-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.prepared-by { display: flex; align-items: center; gap: 10px; font-size: clamp(12px, .86vw, 14px); color: #dfe8f6; }
.prepared-by img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.cover-side { position: relative; pointer-events: none; }
.cover-stage-label {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  font-family: var(--font-mono);
}
.cover-stage-label span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); }
.cover-stage-label b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 14px; letter-spacing: .02em; color: #fff; }
.cover-stage-label small { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .08em; color: #aebdd2; }
.cover-service-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  pointer-events: auto;
}
.cover-service-strip button {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 10px 12px;
  text-align: left;
  color: #fff;
  background: rgba(9, 15, 25, .76);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 9px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.cover-service-strip button:hover,
.cover-service-strip button:focus-visible { border-color: var(--accent-bright); background: rgba(19, 31, 50, .9); }
.cover-service-strip span { font-family: var(--font-mono); font-size: 10px; color: var(--accent-bright); }
.cover-service-strip b { font-family: var(--font-display); font-size: clamp(12px, .92vw, 15px); line-height: 1.2; }
.cover-service-strip i { font-style: normal; color: var(--accent-bright); }
.mobile-plaque { display: none; }
.mobile-cover-foot { display: none; }

/* ------------------------------------------------------------------ 02 AUDIT */
.audit-body {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(22px, 2.6vw, 40px);
  align-items: center;
}
.audit-copy h2 { font-size: clamp(32px, 2.7vw, 48px); line-height: 1.0; max-width: 18ch; }
.audit-copy .lead { margin-top: 7px; font-size: clamp(16px, 1.08vw, 18.5px); line-height: 1.42; color: var(--ink-2); }
.audit-findings { display: grid; gap: 2px; margin: 9px 0 6px; padding: 0; list-style: none; }
.audit-findings li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.audit-findings li > span { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent-bright); padding-top: 2px; }
.audit-findings b { display: block; font-family: var(--font-display); font-size: clamp(15px, 1.02vw, 17.5px); line-height: 1.25; color: #fff; }
.audit-findings p { margin-top: 3px; font-size: clamp(13px, .95vw, 15.5px); line-height: 1.42; color: #c9d5e5; }
.audit-findings code { font-family: var(--font-mono); font-size: .92em; color: var(--accent-bright); }
.source-card { padding: 5px 9px; border-radius: 7px; background: rgba(200, 50, 47, .09); border: 1px solid rgba(200, 50, 47, .35); }
.source-card > span { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #ff9b96; }
.source-card code { display: block; margin-top: 3px; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: clamp(11px, .76vw, 12.5px); line-height: 1.35; color: #ffd2cf; }
.audit-visual { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.audit-shot-frame { overflow: hidden; border-radius: 10px; background: #0d1523; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 28px 58px rgba(0, 0, 0, .48); }
.audit-browser { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; background: #131c2b; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.audit-browser .browser-dots { display: inline-flex; gap: 5px; }
.audit-browser .browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.audit-browser .browser-dots i:nth-child(2) { background: #febc2e; }
.audit-browser .browser-dots i:nth-child(3) { background: #28c840; }
.audit-url { margin-left: 4px; font-family: var(--font-mono); font-size: 10px; color: #ced9e8; }
.audit-browser strong { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: var(--accent-bright); }
.audit-shot { position: relative; overflow: hidden; background: #fff; }
.audit-shot img { display: block; width: 100%; height: auto; }
.audit-anno { position: absolute; padding: 4px 7px; border-radius: 4px; background: #c8322f; color: #fff; font-family: var(--font-mono); font-size: clamp(8.5px, .62vw, 10px); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.audit-anno.anno-one { top: 9px; left: 9px; }
.audit-anno.anno-two { right: 9px; bottom: 9px; }
.audit-shot-frame figcaption { padding: 8px 11px; background: #0d1523; font-family: var(--font-mono); font-size: clamp(9px, .68vw, 11px); letter-spacing: .05em; color: #9fb0c6; }
.audit-meta-card { display: grid; gap: 7px; padding: 11px 13px; border-radius: 8px; background: #0d1523; border: 1px solid rgba(255, 255, 255, .12); }
.audit-meta-card > div > span { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); }
.audit-meta-card b { display: block; margin-top: 2px; font-size: clamp(12px, .84vw, 14px); color: #fff; }
.audit-meta-card p { margin-top: 2px; font-size: clamp(11px, .78vw, 13px); line-height: 1.4; color: #c9d5e5; }
.audit-meta-stats { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
.audit-meta-stats span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; color: #9fb0c6; }
.audit-meta-stats b { display: inline; margin-right: 3px; font-size: 13px; color: var(--accent-bright); }

/* ------------------------------------------------------------------ 03 FOUNDATION */
.foundation .narrative-col h2 { font-size: clamp(30px, 2.45vw, 42px); }
.foundation .narrative-col .lead { font-size: clamp(16px, 1.1vw, 18.5px); line-height: 1.46; }
.foundation .narrative-pillars { gap: 8px; margin-top: 10px; }
.foundation .pillar-card { padding: clamp(9px, 1.2vh, 13px) 12px; gap: 10px; }
.foundation .pillar-card h3 { font-size: clamp(16px, 1.15vw, 19.5px); line-height: 1.18; }
.foundation .pillar-card p { font-size: clamp(14.5px, 1.02vw, 17px); line-height: 1.4; }
.foundation .profile-band { font-size: clamp(9.5px, .68vw, 11px); }
.foundation .profile-name b { font-size: clamp(18px, 1.35vw, 22px); }
.foundation .profile-name span { font-size: clamp(12.5px, .88vw, 14.5px); }
.foundation .profile-dl-grid dt { font-size: clamp(9.5px, .68vw, 11px); }
.foundation .profile-dl-grid dd { font-size: clamp(12.5px, .9vw, 14.5px); line-height: 1.42; }

/* ------------------------------------------------------------------ 04 JOURNEY */
.journey-head h2 { font-size: clamp(32px, 2.75vw, 46px); }
.journey-head .lead { font-size: clamp(15.5px, 1.06vw, 18px); }
.diagnostic-grid { gap: clamp(14px, 1.5vw, 20px); }
.diagnostic-card { padding: clamp(12px, 1.6vh, 18px); }
.diagnostic-card h3 { font-size: clamp(18px, 1.26vw, 22.5px); line-height: 1.18; margin-top: 9px; }
.diagnostic-card p { font-size: clamp(14.5px, 1.06vw, 17.5px); line-height: 1.42; margin-top: 5px; }
.journey-module { min-height: clamp(118px, 17vh, 150px); padding: 10px 11px; }
.module-label { font-size: clamp(9.5px, .68vw, 11px); }
.journey-module strong { font-size: clamp(19px, 1.45vw, 25px); }
.journey-module button { font-size: clamp(12px, .86vw, 14px); }
.journey-module li { font-size: clamp(12.5px, .88vw, 14.5px); }
.contact-module a { font-size: clamp(12.5px, .9vw, 15px); }
.diag-tag { font-size: clamp(10px, .72vw, 12px); }
.diag-meta-pill { padding: 8px 10px; font-size: clamp(10.5px, .75vw, 12.5px); }
.diag-meta-pill span { font-size: 9.5px; }

/* ------------------------------------------------------------------ 05 WEBSITE LIVE */
.website-live-body { display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.5vh, 16px); }
.website-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(18px, 2.4vw, 36px); align-items: end; }
.website-head h2 { font-size: clamp(30px, 2.55vw, 44px); max-width: 30ch; }
.website-head .lead { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.46; max-width: 44ch; }
.browser-shell { display: flex; flex-direction: column; height: clamp(420px, 54vh, 580px); overflow: hidden; border-radius: 12px; background: #0d1523; border: 1px solid #2a394f; box-shadow: 0 26px 58px rgba(11, 16, 27, .28); }
.browser-bar { display: flex; align-items: center; gap: 12px; flex: none; height: 38px; padding: 0 12px; background: #131d2d; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.browser-url { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 5px; background: #0b1320; overflow: hidden; font-family: var(--font-mono); font-size: 10.5px; color: #d6e1ef; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.browser-view-toggle { display: flex; gap: 3px; }
.browser-hint { flex: none; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .08em; color: var(--accent-bright); white-space: nowrap; }
.browser-view-toggle button { min-height: 26px; padding: 3px 7px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #aebdd2; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.browser-view-toggle button.active { background: var(--accent-bright); color: #0b101b; border-color: var(--accent-bright); }
.browser-viewport { flex: 1; min-height: 0; overflow: auto; padding: 18px; background: #dfe5ec; scrollbar-color: #9aa8b8 transparent; }
.browser-viewport:focus-visible { outline: 2px solid var(--burton-blue); outline-offset: -2px; }
.mini-site { width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 6px; background: #faf8f3; color: #14213a; font-family: var(--font-body); }
.browser-shell.phone-preview .browser-viewport { padding: 14px; }
.browser-shell.phone-preview .mini-site { width: 390px; max-width: 100%; height: 100%; max-height: 100%; overflow-y: auto; border-radius: 22px; border: 6px solid #1a2433; box-shadow: 0 18px 38px rgba(0, 0, 0, .3); }
.browser-shell.phone-preview .mini-nav { display: none; }
.browser-shell.phone-preview .mini-header-cta { margin-left: auto; }
.browser-shell.phone-preview .mini-hero { grid-template-columns: 1fr; }
.browser-shell.phone-preview .mini-hero-photo { min-height: 200px; }
.browser-shell.phone-preview .mini-process { grid-template-columns: 1fr; }
.browser-shell.phone-preview .mini-process figure { min-height: 190px; }
.browser-shell.phone-preview .mini-service-tabs { grid-template-columns: 1fr; }
.browser-shell.phone-preview .mini-service-tabs button { flex-direction: row; align-items: center; justify-content: space-between; }
.browser-shell.phone-preview .mini-service-detail { grid-template-columns: 1fr; }
.mini-header { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e4dfd4; }
.mini-brand img { display: block; width: clamp(104px, 9vw, 154px); height: auto; }
.mini-nav { display: flex; gap: clamp(6px, .9vw, 14px); margin-left: auto; }
.mini-nav button, .mini-header-cta, .mini-actions button, .mini-service-tabs button, .mini-process-copy button { border: 0; background: none; cursor: pointer; font: inherit; }
.mini-nav button { padding: 5px 2px; color: #3b4a61; font-family: var(--font-mono); font-size: clamp(10.5px, .74vw, 12px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mini-nav button:hover { color: var(--burton-blue); }
.mini-header-cta { padding: 8px 12px; border-radius: 4px; background: var(--burton-blue); color: #fff; font-size: clamp(10.5px, .74vw, 12px); font-weight: 700; }
.mini-hero { display: grid; grid-template-columns: 1fr 1.06fr; min-height: 284px; background: #f4efe4; }
.mini-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 2.6vh, 30px); }
.mini-eyebrow { font-family: var(--font-mono); font-size: clamp(9.5px, .68vw, 11px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--burton-blue); }
.mini-hero h3 { margin-top: 9px; font-family: var(--font-display); font-size: clamp(26px, 2.3vw, 38px); line-height: 1.02; letter-spacing: -.03em; color: #101b2e; }
.mini-hero p { margin-top: 8px; font-size: clamp(13.5px, .96vw, 16px); line-height: 1.45; color: #4b586c; }
.mini-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.mini-actions button:first-child { padding: 9px 12px; border-radius: 4px; background: var(--burton-blue); color: #fff; font-size: clamp(11.5px, .8vw, 13px); font-weight: 700; }
.mini-actions button:last-child { padding: 4px 0; border-bottom: 1px solid var(--burton-blue); color: var(--burton-blue); font-size: clamp(11.5px, .8vw, 13px); font-weight: 700; }
.mini-hero-photo { position: relative; min-height: 230px; margin: 0; overflow: hidden; }
.mini-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini-hero-photo figcaption { position: absolute; left: 10px; bottom: 8px; padding: 3px 6px; background: rgba(10, 16, 26, .62); color: #fff; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .05em; }
.mini-services { padding: clamp(18px, 2.4vh, 26px); background: #f7f4ed; }
.mini-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.mini-section-head span { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-gold-deep); }
.mini-section-head h4 { margin-top: 4px; font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 27px); line-height: 1.08; color: #101b2e; }
.mini-section-head p { max-width: 34ch; font-size: clamp(11.5px, .82vw, 13.5px); line-height: 1.4; color: #4b586c; }
.mini-service-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.mini-service-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 10px; text-align: left; border: 1px solid #cfc8ba; background: #fbfaf6; color: #22304a; border-radius: 4px; }
.mini-service-tabs button span { font-family: var(--font-mono); font-size: 8px; color: var(--burton-blue); }
.mini-service-tabs button b { font-family: var(--font-display); font-size: clamp(13px, .96vw, 16px); }
.mini-service-tabs button.active { background: var(--burton-blue); border-color: var(--burton-blue); color: #fff; }
.mini-service-tabs button.active span { color: #dce8ff; }
.mini-service-detail { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 10px; padding: 13px 14px; background: #fff; border: 1px solid #e1dccf; border-radius: 4px; }
.mini-service-detail > div > span { font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-gold-deep); }
.mini-service-detail h4 { margin-top: 3px; font-family: var(--font-display); font-size: clamp(17px, 1.3vw, 22px); color: #101b2e; }
.mini-service-detail p { margin-top: 4px; font-size: clamp(12px, .86vw, 14px); line-height: 1.45; color: #46556a; }
.mini-service-detail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; align-content: center; }
.mini-service-detail li { padding-left: 12px; position: relative; font-size: clamp(11.5px, .82vw, 13.5px); line-height: 1.35; color: #34445c; }
.mini-service-detail li::before { content: '—'; position: absolute; left: 0; color: var(--burton-blue); }
.mini-process { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 9px; padding: 18px; background: #101b2e; color: #fff; }
.mini-process-copy { padding: 4px 8px 4px 0; }
.mini-process-copy > span { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); }
.mini-process-copy h4 { margin-top: 5px; font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 27px); }
.mini-process-copy p { margin-top: 6px; font-size: clamp(11.5px, .82vw, 13.5px); line-height: 1.45; color: #d3deec; }
.mini-process-copy button { margin-top: 10px; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 10px; font-weight: 700; }
.mini-process figure { margin: 0; min-height: 150px; overflow: hidden; border-radius: 3px; }
.mini-process img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini-process figcaption { display: none; }
.mini-inquiry { padding: 20px; background: #f4efe4; border-top: 1px solid #ddd6c7; }
.mini-inquiry[hidden] { display: none; }
.mini-inquiry-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.mini-inquiry-head span { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-gold-deep); }
.mini-inquiry-head h4 { margin-top: 4px; font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 27px); color: #101b2e; }
.mini-inquiry-head > button { width: 28px; height: 28px; border: 1px solid #b9b1a2; border-radius: 50%; background: #fff; color: #101b2e; font-size: 18px; line-height: 1; cursor: pointer; }
.mini-choice-group { margin-top: 12px; }
.mini-choice-group > span { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4b586c; }
.mini-choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-choice-row button { padding: 7px 9px; border: 1px solid #c8c0b0; border-radius: 4px; background: #fff; color: #25344d; font-size: 10.5px; cursor: pointer; }
.mini-choice-row button.active { background: var(--burton-blue); border-color: var(--burton-blue); color: #fff; }
.mini-inquiry-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 9px 11px; border: 1px solid #cfc6b5; background: #fff; }
.mini-inquiry-summary span { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6a5a3c; }
.mini-inquiry-summary b { font-size: 12px; color: var(--burton-blue); }
.mini-inquiry-note { margin-top: 8px; font-size: 10.5px; line-height: 1.4; color: #5c6676; }

/* ------------------------------------------------------------------ 06 PROOF */
.proof-head h2 { font-size: clamp(32px, 2.7vw, 46px); }
.proof-head .lead { font-size: clamp(15.5px, 1.05vw, 18px); }
.case-url { font-size: clamp(10.5px, .74vw, 12px); }
.case-tag { font-size: clamp(9.5px, .68vw, 11px); }
.case-frame figcaption { font-size: clamp(12.5px, .9vw, 15px); }
.case-frame figcaption span { font-size: clamp(9.5px, .68vw, 11px); }

/* ------------------------------------------------------------------ 07 ROADMAP */
.execution-slide .exec-head h2 { font-size: clamp(32px, 2.7vw, 46px); }
.execution-slide .exec-head .lead { font-size: clamp(16px, 1.04vw, 18px); }
.exec-phase-card { padding: clamp(13px, 1.7vh, 18px); }
.exec-phase-card h3 { font-size: clamp(17px, 1.2vw, 21px); line-height: 1.16; }
.exec-phase-card > p { font-size: clamp(14.5px, 1.05vw, 17.5px); line-height: 1.42; }
.exec-deliverables li { font-size: clamp(13.5px, .98vw, 16px); line-height: 1.38; }
.exec-duration-pill { font-size: clamp(9.5px, .68vw, 11px); }
.exec-footer-bar { font-size: clamp(10.5px, .72vw, 12px); }

/* ------------------------------------------------------------------ 08 ENGAGEMENT */
.engagement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 20px); }
.engagement-card { position: relative; display: flex; flex-direction: column; padding: clamp(16px, 2.2vh, 22px); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(11, 16, 27, .14); box-shadow: 0 12px 28px rgba(11, 16, 27, .06); }
.engagement-card.featured { background: #101b2e; color: #fff; border-color: #101b2e; box-shadow: 0 20px 40px rgba(11, 16, 27, .22); }
.engagement-card.featured h3 { color: #fff; }
.engagement-recommended { position: absolute; top: 0; right: 0; padding: 5px 9px; border-radius: 0 var(--radius-lg) 0 8px; background: var(--accent-bright); color: #0b101b; font-family: var(--font-mono); font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.engagement-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.engagement-tag { font-family: var(--font-mono); font-size: clamp(10px, .72vw, 12px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--burton-blue); }
.featured .engagement-tag { color: var(--accent-bright); }
.engagement-card h3 { margin-top: 12px; font-size: clamp(19px, 1.35vw, 24px); line-height: 1.12; }
.engagement-card > p { margin-top: 7px; font-size: clamp(14.5px, 1.05vw, 17.5px); line-height: 1.45; color: #3c4b61; }
.featured > p { color: #d3deec; }
.engagement-card ul { display: grid; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.engagement-card li { position: relative; padding-left: 13px; font-size: clamp(13.5px, .98vw, 16px); line-height: 1.35; color: #2e3d53; }
.engagement-card li::before { content: '—'; position: absolute; left: 0; color: var(--burton-blue); }
.featured li { color: #e5edf8; }
.featured li::before { color: var(--accent-bright); }
.engagement-fit { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(11, 16, 27, .12); }
.featured .engagement-fit { border-top-color: rgba(255, 255, 255, .18); }
.engagement-fit span { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-gold-deep); }
.featured .engagement-fit span { color: var(--accent-bright); }
.engagement-fit b { font-size: clamp(12px, .85vw, 14px); color: #1c2b41; }
.featured .engagement-fit b { color: #fff; }
.engagement-foot { display: flex; justify-content: space-between; gap: 18px; padding: 10px 14px; border: 1px solid rgba(11, 16, 27, .14); background: #fff; font-family: var(--font-mono); font-size: clamp(10px, .72vw, 12px); letter-spacing: .05em; color: #4b586c; }
.engagement-foot span:last-child { text-align: right; }

/* ------------------------------------------------------------------ 09 CLOSE */
.close-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.close-grid .narrative-col h2 { font-size: clamp(30px, 2.4vw, 42px); }
.close-grid .narrative-col .lead { font-size: clamp(16px, 1.06vw, 18.5px); }
.partner-name-heading { font-size: clamp(28px, 2.1vw, 36px); }
.partner-role-sub { font-size: clamp(14px, .98vw, 16px); }
.partner-quote { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.48; }
.partner-meta-kicker { font-size: clamp(10.5px, .74vw, 12px); }
.partner-pill { font-size: clamp(12px, .86vw, 14px); min-height: 42px; }
.partner-brand-address { font-size: clamp(10.5px, .74vw, 12px); letter-spacing: .05em; }
.partner-avatar-wrap { width: clamp(140px, 17vh, 178px); height: clamp(140px, 17vh, 178px); }
.request .kicker { font-size: var(--std-label); }
.request h3 { font-size: clamp(26px, 2vw, 34px); }
.request > p { font-size: clamp(14.5px, 1vw, 17px); line-height: 1.45; }
.suggestions button { font-size: clamp(11px, .78vw, 13px); }
.picker-col label { font-size: clamp(9.5px, .68vw, 11px); }
.date-control input { font-size: clamp(12px, .86vw, 14px); }
#contact { font-size: clamp(12.5px, .86vw, 14px); }
.request small { font-size: clamp(10.5px, .74vw, 12px); line-height: 1.45; }
.print-contact { display: none; }

/* ------------------------------------------------------------------ responsive: tablet + phone */
@media (max-width: 900px) {
  html, body { height: 100dvh; min-height: 0; overflow: hidden; }
  .deck, #deck { width: 100%; height: calc(100dvh - 76px); min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; }
  .slide { position: relative; inset: auto; display: none; width: 100%; height: auto; min-height: 100%; padding: 24px 22px 104px; overflow: visible; }
  .slide.active { display: flex; flex-direction: column; gap: 20px; }
  .slide.cover.logo-cover { padding: 0; min-height: 100%; }
  .slide.cover.logo-cover.active { display: block; }
  .logo-stage, .logo-fallback { display: none; }
  .cover-content { display: flex; flex-direction: column; gap: 18px; height: auto; padding: 24px 22px 104px; }
  .cover-copy { max-width: none; padding-bottom: 0; gap: 12px; }
  .cover-copy h1 { font-size: clamp(34px, 9vw, 56px); max-width: 11ch; }
  .cover-copy .lead { font-size: clamp(16px, 2.2vw, 20px); max-width: 44ch; }
  .cover-foot { position: static; margin-top: 14px; }
  .cover-side { position: static; }
  .cover-stage-label { display: none; }
  .cover-service-strip { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cover-service-strip button { min-height: 58px; }
  .mobile-plaque { display: block; width: 100%; max-width: 470px; }
  .mobile-plaque .logo-fallback-plaque { width: 100%; }
  .slide-body.two, .slide-body.close-grid, .audit-body, .diagnostic-grid, .exec-cards-grid, .comparison, .engagement-grid, .website-head, .journey-head, .proof-head, .exec-head { display: flex; flex-direction: column; gap: 18px; width: 100%; align-items: stretch; }
  .website-head > div, .website-head > p, .journey-head > div, .journey-head > p, .proof-head > div, .proof-head > p, .exec-head > div, .exec-head > p { width: 100%; max-width: none; }
  .cover-copy .cover-foot { display: none; }
  .mobile-cover-foot { display: flex; position: static; margin-top: 14px; }
  .logo-fallback-meta { flex-direction: column; align-items: center; gap: 2px; font-size: 8px; text-align: center; }
  .slide-body { flex: none; min-height: auto; }
  .slide-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .header-brand { width: 100%; }
  .header-meta { font-size: 12px; }
  .header-logo-pill { width: 142px; height: 66px; }
  .header-wordmark b { font-size: 16px; }
  .header-wordmark small { font-size: 10px; }
  .audit-copy, .audit-visual, .narrative-col, .showcase-col, .concierge-col, .mockup-col { width: 100%; }
  .audit-copy h2, .foundation .narrative-col h2, .journey-head h2, .website-head h2, .proof-head h2, .execution-slide .exec-head h2, .engagement-head h2, .close-grid .narrative-col h2 { font-size: clamp(30px, 5vw, 42px); max-width: 22ch; }
  .lead { font-size: 16px; }
  .profile-card, .partner-card, .request { width: 100%; }
  .case-frame { width: 100%; max-width: 100%; }
  .comparison { gap: 18px; }
  .browser-shell { height: 480px; }
  .website-head .lead { max-width: 52ch; }
  .mini-site { max-width: 100%; }
  .mini-nav { display: none; }
  .mini-hero { grid-template-columns: 1fr; }
  .mini-hero-photo { min-height: 220px; }
  .mini-process { grid-template-columns: 1fr 1fr; }
  .mini-process-copy { grid-column: 1 / -1; }
  .engagement-card { width: 100%; }
  .engagement-foot { flex-direction: column; gap: 6px; }
  .engagement-foot span:last-child { text-align: left; }
  .exec-footer-bar { display: flex; flex-direction: column; }
  .exec-footer-bar span + span { border-left: 0; border-top: 1px solid rgba(11, 16, 27, .12); }
  .slide-foot { margin-top: 12px; gap: 14px; font-size: 11px; }
  .controls { bottom: 8px; gap: 1px; padding: 4px; height: 60px; max-width: calc(100vw - 12px); }
  .controls button, .controls > a { min-height: 44px; padding: 7px 9px; }
  #prev, #next { min-width: 44px; }
  #counter { min-width: 38px; font-size: 11px; }
  #play { font-size: 11px; letter-spacing: .04em; padding-left: 8px; }
}

@media (max-width: 700px) {
  .cover-service-strip { grid-template-columns: 1fr; }
  .cover-service-strip button { min-height: 52px; }
  .mini-process { grid-template-columns: 1fr; }
  .mini-process figure { min-height: 190px; }
  .browser-view-toggle { display: none; }
  .mini-service-tabs { grid-template-columns: 1fr; }
  .mini-service-tabs button { flex-direction: row; align-items: center; justify-content: space-between; }
  .mini-service-detail { grid-template-columns: 1fr; }
  .browser-shell { height: 520px; }
  .website-head { gap: 12px; }
  .audit-findings b { font-size: 15.5px; }
  .audit-findings p { font-size: 13.5px; }
  .partner-card { grid-template-columns: 1fr; }
  .partner-avatar-wrap { width: 148px; height: 148px; }
  .partner-contact-pills { flex-direction: column; }
  .partner-pill { width: 100%; justify-content: flex-start; }
  .partner-brand-signoff { flex-direction: column; align-items: flex-start; }
  .partner-brand-address { text-align: left; }
  .close-grid .narrative-col h2 { font-size: 30px; }
}

/* ------------------------------------------------------------------ transition overlays */
.logo-stage { transition: opacity .22s ease; }
.cover.is-broken .logo-stage { opacity: 0; }
.boom-canvas { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.boom-cutline { display: none; }
.is-booming #deck { animation: cover-shake .48s cubic-bezier(.36,.07,.19,.97); }
@keyframes cover-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(-7px, 4px) rotate(-.25deg); }
  24% { transform: translate(6px, -5px) rotate(.2deg); }
  38% { transform: translate(-5px, 3px) rotate(-.16deg); }
  52% { transform: translate(4px, -2px) rotate(.12deg); }
  70% { transform: translate(-2px, 1px) rotate(-.06deg); }
}
.seam-sweep { position: fixed; top: 0; bottom: 0; left: -30vw; width: 24vw; z-index: 94; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(30,77,155,.22) 38%, rgba(240,180,86,.82) 52%, transparent 72%); filter: blur(.4px); }
.seam-sweep[data-dir="-1"] { left: auto; right: -30vw; }
.seam-sweep.is-running { animation: seam-sweep .55s cubic-bezier(.5,0,.2,1) forwards; }
.seam-sweep[data-dir="-1"].is-running { animation-name: seam-sweep-back; }
@keyframes seam-sweep { 0% { transform: translateX(0); opacity: 0; } 14% { opacity: .9; } 100% { transform: translateX(165vw); opacity: 0; } }
@keyframes seam-sweep-back { 0% { transform: translateX(0); opacity: 0; } 14% { opacity: .9; } 100% { transform: translateX(-165vw); opacity: 0; } }

.cover.is-broken .logo-stage { opacity: 0; transition: opacity .06s linear; }

/* ==========================================================================
   COMPLETION PASS — System slide, drag before/after, index overlay, progress
   ========================================================================== */

/* inline-SVG arrows replace the Unicode glyphs */
.cover-service-strip i .ico { font-size: 15px; }
.journey-module button .btn-arrow { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.browser-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
.mini-inquiry-head > button { display: inline-flex; align-items: center; justify-content: center; }
.mini-inquiry-head > button .ico { font-size: 15px; }

/* ------------------------------------------------------------------ 06 SYSTEM */
.system-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 2.8vw, 40px); align-items: end; }
.system-head h2 { font-size: clamp(32px, 2.75vw, 46px); }
.system-head .lead { font-size: clamp(16px, 1.08vw, 18.5px); line-height: 1.45; }
.system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.system-card {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  padding: clamp(14px, 2vh, 20px) clamp(14px, 1.3vw, 20px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-bright);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}
.system-card.featured { background: #13213a; border-top-color: #fff; }
.system-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.system-seen {
  font-family: var(--font-mono); font-size: clamp(12px, .82vw, 13.5px); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #ffb4af; text-align: right; line-height: 1.25;
}
.system-card.featured .system-seen { color: var(--accent-bright); }
.system-card h3 { font-size: clamp(20px, 1.5vw, 27px); line-height: 1.14; color: #fff; }
.system-card p { font-size: clamp(15.5px, 1.1vw, 19px); line-height: 1.42; color: #d3deec; max-width: 40ch; }

/* ------------------------------------------------------------------ 07 PROOF: drag before / after */
.ba-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .45fr); gap: clamp(16px, 2vw, 30px); align-items: stretch; justify-content: stretch; }
.ba-frame { display: flex; flex-direction: column; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--carbon-0); border: 1px solid rgba(240, 180, 86, .5); box-shadow: 0 30px 64px rgba(0, 0, 0, .5); min-width: 0; }
.ba-frame .case-bar { grid-template-columns: auto 1fr auto; }
.ba-frame .case-url { text-align: center; }
.ba-stage { position: relative; width: 100%; height: clamp(250px, 40vh, 440px); overflow: hidden; background: #fff; --ba: 50%; touch-action: pan-y; user-select: none; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; pointer-events: none; }
.ba-before-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-label { position: absolute; top: 12px; padding: 4px 9px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.ba-label-before { left: 12px; background: #2A3447; color: #fff; }
.ba-label-after { right: 12px; background: var(--accent-bright); color: #0B101B; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 3px; margin-left: -1.5px; background: var(--accent-bright); box-shadow: 0 0 18px rgba(240, 180, 86, .7); pointer-events: none; }
.ba-grip { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; gap: 2px; padding: 9px 8px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--accent-bright); color: #0B101B; font-size: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-range:focus-visible + .ba-handle .ba-grip { outline: 3px solid #fff; outline-offset: 3px; }
.ba-notes { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.ba-note { padding: 12px 14px; border-radius: var(--radius-sm); background: #131B2E; border: 1px solid rgba(255, 255, 255, .15); }
.ba-note.after { border-color: rgba(240, 180, 86, .55); }
.ba-note span { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); }
.ba-note p { margin-top: 5px; font-size: clamp(15px, 1.06vw, 18px); line-height: 1.4; color: #e5edf8; }
.ba-source { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; line-height: 1.4; color: #b4c2d6; }

/* ------------------------------------------------------------------ chrome: progress line, index */
.deck-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 96; background: rgba(255, 255, 255, .08); pointer-events: none; }
.deck-progress i { display: block; height: 100%; width: 10%; background: linear-gradient(90deg, #1E4D9B, #F0B456); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
#index-toggle { gap: 7px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); border-radius: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #E6ECF5; white-space: nowrap; cursor: pointer; }
#index-toggle .ico { font-size: 15px; }
.index-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 8, 15, .9); backdrop-filter: blur(8px); }
.index-overlay[hidden] { display: none; }
.index-panel { width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; background: #0d1523; border: 1px solid rgba(255, 255, 255, .18); overflow: hidden; }
.index-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); }
.index-head button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.index-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 2px 2px; list-style: none; overflow-y: auto; }
.index-list button { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; width: 100%; min-height: 104px; padding: 12px; text-align: left; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; color: #fff; background-color: #131d2d; background-size: cover; background-position: center; cursor: pointer; position: relative; overflow: hidden; }
.index-list button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 18, .25), rgba(7, 11, 18, .92)); }
.index-list button > * { position: relative; }
.index-list button:hover, .index-list button:focus-visible, .index-list button.current { border-color: var(--accent-bright); }
.index-list .ix-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--accent-bright); }
.index-list .ix-t { font-family: var(--font-display); font-size: 15px; line-height: 1.2; font-weight: 600; }

@media (max-width: 900px) {
  .system-head, .ba-layout { display: flex; flex-direction: column; gap: 16px; }
  .system-grid { display: flex; flex-direction: column; gap: 12px; }
  .system-card p { max-width: none; }
  .ba-stage { height: clamp(220px, 46vw, 360px); }
  .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #index-toggle span { display: none; }
  #index-toggle { padding-left: 9px; }
}
@media (max-width: 700px) {
  .system-top { flex-direction: column; align-items: flex-start; }
  .system-seen { text-align: left; }
  .index-overlay { padding: 12px; }
}

/* ------------------------------------------------------------------ later Next cuts: weld-spark seam + steel edge */
.seam-sweep::after { content: ""; position: absolute; top: 0; bottom: 0; left: 51%; width: 3px; background: linear-gradient(180deg, transparent, #fff3d6 18%, #f0b456 50%, #fff3d6 82%, transparent); box-shadow: 0 0 22px 4px rgba(240, 180, 86, .6), -14px 0 0 0 rgba(13, 21, 35, .55); }
.seam-sweep > i { position: absolute; left: 52%; top: var(--y, 50%); width: 3px; height: 3px; border-radius: 50%; background: #ffd37a; box-shadow: 0 0 9px 2px #ff8a3c; opacity: 0; animation: seam-spark .5s ease-out forwards; }
.seam-sweep[data-dir="-1"]::after { left: auto; right: 51%; }
.seam-sweep[data-dir="-1"] > i { left: auto; right: 52%; }
@keyframes seam-spark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 80px)); } }
@media (prefers-reduced-motion: reduce) { .seam-sweep, .boom-canvas { display: none; } .deck-progress i { transition: none; } }

/* ------------------------------------------------------------------ readability floors (labels that carry meaning)
   Bounded fluid tokens: 12px at 1366, ~13.8px at 1600, 14px cap. Layout spacing, not type, absorbs the change. */
.cover-stage-label span, .cover-stage-label small, .cover-service-strip span { font-size: var(--std-label); letter-spacing: .1em; }
.cover-stage-label b { font-size: clamp(15px, 1.05vw, 18px); }
.cover-service-strip b { font-size: clamp(14px, 1vw, 17px); }
.collab-label { font-size: clamp(11.5px, .82vw, 13.5px); }

.source-card > span, .audit-meta-card > div > span, .audit-meta-stats span, .audit-browser strong { font-size: var(--std-label); }
.audit-url, .audit-shot-frame figcaption { font-size: clamp(11.5px, .8vw, 13px); }
.audit-anno { font-size: clamp(11px, .78vw, 12.5px); }
.audit-meta-card b { font-size: clamp(13.5px, .92vw, 15.5px); }
.audit-meta-card p { font-size: clamp(13px, .88vw, 14.5px); }
.audit-meta-stats b { font-size: clamp(14px, 1vw, 16px); }
.audit-findings > li > span { font-size: var(--std-label); }
.source-card code { font-size: clamp(12px, .82vw, 13.5px); }

.foundation .profile-band, .foundation .profile-dl-grid dt { font-size: var(--std-label); }
.foundation .profile-dl-grid dd { font-size: clamp(13.5px, .94vw, 15.5px); }

.module-label, .diag-tag, .diag-meta-pill span { font-size: var(--std-label); }
.diag-meta-pill { font-size: clamp(12.5px, .88vw, 14.5px); }
.journey-module li, .journey-module button, .contact-module a { font-size: clamp(13.5px, .94vw, 15.5px); }

.browser-url { font-size: clamp(11.5px, .8vw, 13px); }
.browser-hint, .browser-view-toggle button { font-size: 11px; }
.browser-view-toggle button { min-height: 30px; padding: 4px 10px; }
.mini-eyebrow, .mini-section-head span, .mini-service-tabs button span, .mini-service-detail > div > span,
.mini-process-copy > span, .mini-inquiry-head span, .mini-choice-group > span, .mini-inquiry-summary span { font-size: 11.5px; }
.mini-hero-photo figcaption { font-size: 11px; }
.mini-section-head p, .mini-process-copy p { font-size: clamp(13px, .9vw, 14.5px); }
.mini-service-detail p { font-size: clamp(13.5px, .94vw, 15px); }
.mini-service-detail li { font-size: clamp(13px, .9vw, 14.5px); }
.mini-process-copy button, .mini-choice-row button { font-size: 12.5px; min-height: 34px; }
.mini-inquiry-note { font-size: 12.5px; }
.mini-inquiry-summary b { font-size: 14px; }
.mini-nav button, .mini-header-cta { font-size: clamp(11.5px, .8vw, 13px); }
.mini-actions button:first-child, .mini-actions button:last-child { font-size: clamp(12.5px, .88vw, 14px); }

.exec-duration-pill, .engagement-recommended, .engagement-fit span { font-size: var(--std-label); }
.exec-footer-bar, .engagement-foot { font-size: clamp(12px, .84vw, 13.5px); }
.engagement-fit b { font-size: clamp(13.5px, .94vw, 15.5px); }

.partner-meta-kicker, .partner-brand-address, .picker-col label, .request small { font-size: clamp(12px, .84vw, 13.5px); }
.suggestions button { font-size: clamp(12.5px, .88vw, 14px); }
.partner-pill, #contact { font-size: clamp(13px, .9vw, 15px); }
.date-control input { font-size: clamp(13px, .9vw, 15px); }

.slide-foot, .page { font-size: clamp(12px, .82vw, 13.5px); }