/* ───────────────────────────────────────────────────
   mobile.css — Linear / Notion mobile shell
   Loaded site-wide; only takes effect at <= 768px.
   ─────────────────────────────────────────────────── */

/* Hard-hide the JS-injected hamburger when the viewport is >768px
   (covers the case where the user rotates / resizes from mobile to desktop
    and mobile.js had already injected the .m-menu-btn into .topnav-inner) */
@media (min-width: 769px) {
  .m-menu-btn { display: none !important; }
  .m-sheet, .m-sheet-backdrop { display: none !important; }
}

@media (max-width: 768px) {

  :root {
    --m-bar-h: 52px;
    --m-pad: clamp(18px, 5vw, 24px);
    --m-radius: 14px;
    --m-tap: 44px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
    /* v4: every page ends with a dark footer; matching the html bg prevents
       iOS from showing a cream gap when the address bar collapses or on overscroll. */
    background: #1B2A1B;
  }
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
    /* allow page bg to still show through where it's set on body */
    background-color: var(--bg, #F2EBDA);
  }

  /* ── App bar (replaces topnav layout, keeps element) ── */
  .topnav {
    position: sticky; top: 0; z-index: 200;
    background: rgba(242,235,218,0.88);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid rgba(31,42,31,0.08);
  }
  .topnav-inner {
    /* v4: single-row grid — brand | nav links | hamburger inline */
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto !important;
    padding: 10px var(--m-pad) !important;
    align-items: center;
    gap: 12px !important;
  }
  .topnav-brand { font-size: 11px !important; grid-row: 1; grid-column: 1; }
  /* v4: nav-pill (A/Work, B/Creator) hidden on mobile — palette signal is a
     desktop affordance; on mobile the tight topnav doesn't have room and
     the pill adds clutter without payoff. */
  .topnav-brand .nav-pill { display: none !important; }
  /* Hamburger (injected by mobile.js) sits inline at the right */
  .m-menu-btn { grid-row: 1; grid-column: 3; }
  /* Nav links sit inline between brand and hamburger */
  .topnav-links {
    display: flex !important;
    grid-row: 1; grid-column: 2;
    align-items: center; justify-content: center;
    gap: 14px !important;
    padding-top: 0;
    border-top: none;
  }
  .topnav-link {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9.5px !important; font-weight: 600 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: rgba(31,42,31,0.55) !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
  }
  .topnav-link.is-active {
    color: var(--ms-ink, #1B2A1B) !important;
    border-bottom: 1.5px solid var(--ms-accent, #C76F3D);
  }
  /* Hide the Contact pill on mobile — it's redundant with the sheet menu and was wrapping to a 3rd row */
  .topnav-cta { display: none !important; }

  /* Hide separate subnav when present (Linear/Notion: no chrome) */
  .subnav { display: none !important; }

  /* Inject hamburger button (added by JS) */
  .m-menu-btn {
    width: var(--m-tap); height: var(--m-tap);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(31,42,31,0.12);
    border-radius: 999px;
    color: var(--ink, #1F2A1F);
    margin-left: 8px;
    transition: background 0.15s, border-color 0.15s;
  }
  .m-menu-btn:active { background: rgba(31,42,31,0.06); }
  .m-menu-btn svg { width: 18px; height: 18px; }

  /* ── Sheet (Notion-style slide-up modal) ── */
  .m-sheet-backdrop {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(31,42,31,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .m-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 310;
    background: #FAF6EA;
    border-radius: 18px 18px 0 0;
    padding: 14px var(--m-pad) calc(28px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(31,42,31,0.18);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(.2,.7,.2,1);
    max-height: 78vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-sheet.is-open { transform: translateY(0); }
  .m-sheet-handle {
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(31,42,31,0.18);
    margin: 0 auto 18px;
  }
  .m-sheet-title {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(31,42,31,0.5);
    margin-bottom: 14px;
  }
  .m-sheet a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 4px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px; font-weight: 500; letter-spacing: -0.01em;
    color: #1F2A1F;
    border-bottom: 1px solid rgba(31,42,31,0.08);
    text-decoration: none;
  }
  .m-sheet a:last-child { border-bottom: none; }
  .m-sheet a::after {
    content: '→';
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 16px; color: rgba(31,42,31,0.35);
  }
  .m-sheet a:active { background: rgba(31,42,31,0.04); }

  /* lock body scroll when sheet open */
  body.m-sheet-open { overflow: hidden; touch-action: none; }

  /* ── Hero tightening ── */
  .hero, .cs-hero, .resume-header { padding-top: 32px !important; }
  .hero-name, .hero-name-italic { font-size: clamp(56px, 14vw, 80px) !important; }
  .cs-hero-title { font-size: clamp(40px, 10vw, 64px) !important; }

  /* ── Cards: rounded corners + press states (mobile-app feel) ── */
  .cs01-card, .cs02-card, .cs03-card, .cs04-card, .cs05-card,
  .ps-card, .content-card, .metric-tile, .stat-cell,
  .edu-banner, .cert-tile {
    border-radius: var(--m-radius);
  }
  .cs-link { -webkit-tap-highlight-color: transparent; }
  .cs-link:active { transform: scale(0.985); transition: transform 0.08s; }

  /* CS03 v2 redesign (handoff §12): both adoption label and +193% WAU
     pill are HTML overlays so they stay aligned. Adoption label sits
     above the pill, both inside the shaded region. */
  .cs03-peak-callout {
    top: 8px !important;
    right: 6% !important;
    font-size: 7.5px !important;
    padding: 3px 6px !important;
    letter-spacing: 0.16em !important;
  }
  .cs03-adopt-label {
    top: -10px !important;
    left: 64% !important;
    font-size: 8px !important;
    letter-spacing: 0.16em !important;
  }
  /* Mobile-only break in the cs03 head row */
  .cs03-mb-br { display: inline !important; }

  /* CS05 GTM funnel: on desktop the rows use margin-top:auto + translateY
     to anchor at card bottom. On mobile the card grows tall and that
     pushes the funnel into a sea of empty space. Anchor it up under the
     tag instead. */
  .cs05-rows {
    margin-top: 24px !important;
    transform: none !important;
  }

  /* Stat bars — full-width single column reads as iOS list */
  .stats-inner { border-radius: var(--m-radius); overflow: hidden; }

  /* Section spacing breathes a bit more on mobile */
  .work, .experience, .credentials, .skills, .creator, .contact,
  .cs-section { padding: 56px 0 !important; }

  /* Section header row stacks */
  .section-header-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
  }
  .section-meta { display: none; }

  /* Hide the page subnav on mobile — sheet replaces it */
  .nav-stack { position: sticky; top: 0; z-index: 200; }

  /* Footer compact */
  .footer-inner, .cs-footer-inner, .foot {
    flex-direction: column; gap: 10px; text-align: center;
  }

  /* Skill chips wrap nicely; tap targets bumped */
  .skill-chip { padding: 8px 14px; font-size: 11px; }

  /* Buttons → fuller width on mobile */
  .creator-kit-btn, .contact-cta, .download-btn, .cta-btn,
  .crumb-back {
    width: 100%; justify-content: center; padding: 14px 18px;
    border-radius: 999px;
  }
  .contact-ctas { flex-direction: column; }

  /* Smooth scroll snap on horizontal swipe lists (if present) */
  .stats-inner { scroll-snap-type: x mandatory; }

  /* Subtle card lift instead of hover (no hover on touch) */
  .door:active { transform: scale(0.98) !important; transition: transform 0.1s; }

  /* Crumb bar tighter */
  .crumb-inner { padding: 10px var(--m-pad) !important; }
  .crumb-back { width: auto; padding: 7px 12px; }

  /* Sheet swipe-down hint: drag-to-dismiss visual */
  .m-sheet-handle { cursor: grab; }
  .m-sheet-handle:active { cursor: grabbing; }

  /* ── Deck-specific mobile polish ── */
  .mobile-banner { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; }
  .mobile-jumper { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-slide [class*="text-[clamp"] { word-wrap: break-word; overflow-wrap: break-word; }

  /* ── Dashboard mobile tightening ── */
  body > div .max-w-\[1400px\] { padding-left: var(--m-pad) !important; padding-right: var(--m-pad) !important; padding-top: 20px !important; }

  /* ── Cards lift on tap (iOS feel) ── */
  .cs-link, .door, .ps-card, .cs02-card, .cs03-card, .cs04-card, .cs05-card, .cs-chart-card, .topnav-cta, .subnav-back {
    -webkit-tap-highlight-color: transparent;
  }
  .cs-chart-card { border-radius: var(--m-radius); }

  /* Larger hit targets on chart legend / interactive bars */
  .recharts-wrapper text, .recharts-cartesian-axis-tick text { font-size: 11px !important; }

  /* Smooth iOS-style momentum on horizontal scrollers */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }

  /* Foot nav (case study pages) — make tap targets full width */
  .foot-nav { grid-template-columns: 1fr !important; }
  .foot-nav-cell { padding: 18px 20px !important; }

  /* Cs hero stat strip stays compact */
  .cs-stats-inner { padding: 12px !important; gap: 12px !important; }
  .cs-stat-num { font-size: clamp(28px, 8vw, 38px) !important; }

  /* ───────────────────────────────────────────────────
     v4 mobile additions — sticky page titlebar, deck shell,
     shared mobile palette tokens, app-feel polish
     ─────────────────────────────────────────────────── */

  :root {
    --ms-bg: #F2EBDA;
    --ms-card: #FAF6EA;
    --ms-ink: #1B2A1B;
    --ms-mute: #7A8A7A;
    --ms-line: rgba(27,42,27,0.10);
    --ms-accent: #C76F3D;
    --ms-olive: #5E7030;
    --ms-pop: #D9B65A;
  }

  /* Page titlebar (used on case-study & dashboard pages between topnav and content) */
  .page-titlebar {
    position: sticky; top: var(--m-bar-h); z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px var(--m-pad);
    background: rgba(250,246,234,0.94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ms-line);
  }
  .page-titlebar .back {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
    color: var(--ms-ink); text-decoration: none;
    padding: 8px 12px; border-radius: 999px;
    background: rgba(27,42,27,0.04);
    -webkit-tap-highlight-color: transparent;
  }
  .page-titlebar .back:active { background: rgba(27,42,27,0.10); }
  .page-titlebar .meta {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ms-mute);
  }

  /* Deck shell (mobile) — runs on body[data-deck="true"] */
  body[data-deck="true"] { overflow: hidden; background: var(--ms-bg); }
  body[data-deck="true"] #root { height: 100dvh; }
  .deck-mobile-root {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    background: var(--ms-bg);
    overflow: hidden;
  }
  .deck-mobile-root .topnav { flex-shrink: 0; }
  .deck-track {
    flex: 1; min-height: 0;
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .deck-track::-webkit-scrollbar { display: none; }
  .deck-card {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 16px var(--m-pad) calc(80px + env(safe-area-inset-bottom));
    background: var(--ms-bg);
  }
  .deck-card-inner {
    max-width: 560px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 16px;
  }
  .deck-card .kicker {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ms-accent); font-weight: 600;
  }
  .deck-card h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(28px, 8.5vw, 40px);
    font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
    color: var(--ms-ink); margin: 0;
  }
  .deck-card h1 em {
    font-style: italic; font-family: 'Instrument Serif', Georgia, serif;
    color: var(--ms-olive); font-weight: 400;
  }
  .deck-card .lede {
    font-size: 14.5px; line-height: 1.5; color: #3A4A3A;
  }
  .deck-card .stat-strip {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .deck-card .stat-tile {
    background: var(--ms-card); border: 1px solid var(--ms-line);
    border-radius: 14px; padding: 14px;
  }
  .deck-card .stat-tile .num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(24px, 7vw, 32px); font-weight: 600;
    color: var(--ms-ink); line-height: 1; letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
  }
  .deck-card .stat-tile .lab {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ms-mute); margin-top: 6px;
  }
  .deck-card .chip-row {
    display: flex; gap: 8px; overflow-x: auto;
    margin-left: calc(-1 * var(--m-pad)); margin-right: calc(-1 * var(--m-pad));
    padding: 0 var(--m-pad);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .deck-card .chip-row::-webkit-scrollbar { display: none; }
  .deck-card .chip {
    flex: 0 0 auto;
    background: var(--ms-card); border: 1px solid var(--ms-line);
    border-radius: 999px; padding: 8px 14px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ms-ink); white-space: nowrap;
    scroll-snap-align: start;
  }
  .deck-card .chip.is-accent { background: var(--ms-accent); color: #fff; border-color: var(--ms-accent); }
  .deck-card .photo-full {
    width: 100%; aspect-ratio: 4/5; border-radius: 18px;
    overflow: hidden; background: #1B2A1B;
  }
  .deck-card .photo-full img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .deck-card .swipe-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ms-mute);
  }

  /* Detail reveal */
  .detail-reveal {
    border: 1px solid var(--ms-line); border-radius: 14px;
    background: var(--ms-card); overflow: hidden;
  }
  .detail-reveal-toggle {
    appearance: none; -webkit-appearance: none; border: none;
    width: 100%; padding: 14px 16px; text-align: left;
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
    color: var(--ms-ink);
    -webkit-tap-highlight-color: transparent;
  }
  .detail-reveal-toggle:active { background: rgba(27,42,27,0.04); }
  .detail-reveal-toggle .chev { transition: transform 0.25s; }
  .detail-reveal[data-open="true"] .detail-reveal-toggle .chev { transform: rotate(180deg); }
  .detail-reveal-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.32s cubic-bezier(.2,.7,.2,1);
  }
  .detail-reveal[data-open="true"] .detail-reveal-body { max-height: 1200px; }
  .detail-reveal-body-inner { padding: 0 16px 16px; }

  /* Bottom rail (deck) */
  .deck-rail {
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 200;
    display: flex; align-items: center; gap: 4px;
    padding: 6px;
    background: rgba(27,42,27,0.95);
    border-radius: 999px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px rgba(27,42,27,0.32);
  }
  .deck-rail-btn {
    appearance: none; -webkit-appearance: none; border: none; background: transparent;
    width: 36px; height: 36px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(242,235,218,0.85); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.12s;
  }
  .deck-rail-btn:active { transform: scale(0.92); background: rgba(242,235,218,0.10); }
  .deck-rail-btn svg { width: 16px; height: 16px; }
  .deck-rail-divider {
    width: 1px; height: 18px; background: rgba(242,235,218,0.18); margin: 0 2px;
  }
  .deck-dots { display: flex; align-items: center; gap: 5px; padding: 0 6px; }
  .deck-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: rgba(242,235,218,0.32);
    transition: background 0.18s, width 0.18s;
    cursor: pointer; border: none; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .deck-dot.is-active { background: var(--ms-accent); width: 22px; }

  /* Toast */
  .deck-toast {
    position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 250;
    background: rgba(27,42,27,0.95); color: #FAF6EA;
    padding: 10px 18px; border-radius: 999px;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    box-shadow: 0 8px 24px rgba(27,42,27,0.32);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .deck-toast.is-on { opacity: 1; }

  /* Solo back */
  .deck-solo-back {
    position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 250; padding: 10px 18px; border-radius: 999px;
    background: var(--ms-ink); color: var(--ms-bg);
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }

  /* TOC sheet (deck-only) */
  .deck-toc-backdrop {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(27,42,27,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .deck-toc-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .deck-toc-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 310;
    background: var(--ms-card);
    border-radius: 22px 22px 0 0;
    padding: 12px 18px calc(28px + env(safe-area-inset-bottom));
    box-shadow: 0 -16px 48px rgba(27,42,27,0.28);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(.2,.7,.2,1);
    max-height: 82vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .deck-toc-sheet.is-open { transform: translateY(0); }
  .deck-toc-handle {
    width: 44px; height: 4px; border-radius: 2px;
    background: rgba(27,42,27,0.18);
    margin: 0 auto 16px;
  }
  .deck-toc-title {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(27,42,27,0.55);
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--ms-line);
    margin-bottom: 6px;
  }
  .deck-toc-list { list-style: none; padding: 0; margin: 0; }
  .deck-toc-list li { border-bottom: 1px solid rgba(27,42,27,0.06); }
  .deck-toc-list li:last-child { border-bottom: none; }
  .deck-toc-item {
    appearance: none; -webkit-appearance: none;
    width: 100%; background: none; border: none; text-align: left;
    display: grid; grid-template-columns: 28px 1fr auto;
    align-items: center; gap: 14px;
    padding: 16px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .deck-toc-item:active { background: rgba(27,42,27,0.04); }
  .deck-toc-item.is-current { background: rgba(199,111,61,0.06); }
  .deck-toc-num {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    color: rgba(27,42,27,0.4); letter-spacing: 0.06em;
  }
  .deck-toc-item.is-current .deck-toc-num { color: var(--ms-accent); }
  .deck-toc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .deck-toc-kicker {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ms-mute); font-weight: 600;
  }
  .deck-toc-label {
    font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 500;
    color: var(--ms-ink); letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .deck-toc-item.is-current .deck-toc-label { color: var(--ms-accent); font-weight: 600; }
  .deck-toc-current { font-size: 10px; color: var(--ms-accent); }
  .deck-toc-close {
    appearance: none; -webkit-appearance: none;
    display: block; width: 100%;
    margin-top: 16px; padding: 14px 16px;
    background: var(--ms-ink); color: var(--ms-card);
    border: none; border-radius: 999px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .deck-toc-close:active { background: var(--ms-olive); }

  /* Per-page mobile patches */

  /* index.html (Door) */
  .cards-area { padding: 18px !important; gap: 22px !important; }
  /* v4: taller mobile photo frame so faces fit fully (was 60vw → cropped chin) */
  .door-wrap { height: 95vw; min-height: 360px; }
  .door-wrap--pro::before { transform: translate(8px, 8px); }
  .door-wrap--creator::before { transform: translate(-8px, 8px); }
  /* v4: re-center face crops for mobile frame aspect — show full face top-to-chin */
  .door--pro .door-photo img { object-position: center 35% !important; }
  .door--creator .door-photo img { object-position: center 10% !important; }
  .site-footer { grid-template-columns: 1fr !important; gap: 8px !important; text-align: center; justify-items: center !important; }
  .footer-email, .footer-location { text-align: center !important; }
  /* v4: footer LinkedIn pill is inline-flex; force-center inside the grid cell */
  .footer-linkedin { justify-self: center !important; }

  /* portfolio.html — Credentials section mobile redesign (matches screenshot) */
  .credentials .section-header-row { display: block !important; margin-bottom: 18px !important; }
  .credentials .section-eyebrow {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: var(--muted, #7A8A7A) !important;
    display: block !important; margin-bottom: 14px !important;
  }
  .credentials .section-heading {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 0.95 !important; letter-spacing: -0.025em !important;
    margin: 0 0 10px !important; color: var(--ink, #1B2A1B);
  }
  .credentials .section-heading em {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-style: italic; color: var(--ink, #1B2A1B);
  }
  .credentials .section-meta {
    display: block !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important; letter-spacing: 0.22em !important;
    text-transform: uppercase !important; color: var(--muted, #7A8A7A) !important;
    margin: 0 0 24px !important;
  }
  /* Dark forest Education hero card */
  .credentials .edu-banner {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "main right" "main badge" !important;
    background: #2D4A2B !important; color: #FAF6EA !important;
    border: 1px solid #2D4A2B !important;
    padding: 24px 20px !important;
    margin-bottom: 18px !important;
    position: relative;
    gap: 8px 16px !important;
  }
  .credentials .edu-banner > div:first-child { grid-area: main; }
  .credentials .edu-banner .edu-right {
    grid-area: right; display: flex !important; flex-direction: column;
    align-items: flex-end; justify-self: end;
  }
  .credentials .edu-year {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 26px !important; font-weight: 500 !important;
    letter-spacing: -0.02em !important; line-height: 1 !important;
    color: #FAF6EA !important;
  }
  .credentials .edu-year-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important; letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(250,246,234,0.6) !important; margin-top: 4px !important;
  }
  .credentials .edu-badge {
    grid-area: badge; justify-self: end; align-self: end;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important; letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(250,246,234,0.45) !important;
    border: 1px solid rgba(250,246,234,0.18) !important;
    padding: 4px 8px !important; border-radius: 0 !important;
    background: transparent !important;
    position: static !important;
  }
  .credentials .edu-eyebrow {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important; letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(250,246,234,0.65) !important;
    margin: 0 0 18px !important;
  }
  .credentials .edu-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 30px !important; font-weight: 500 !important;
    letter-spacing: -0.02em !important; line-height: 1.05 !important;
    color: #FAF6EA !important; margin: 0 0 10px !important;
  }
  .credentials .edu-name em {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-style: italic; color: #FAF6EA !important; font-weight: 400 !important;
  }
  .credentials .edu-sub {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important; letter-spacing: 0.06em !important;
    color: rgba(250,246,234,0.78) !important;
    margin: 0 !important; text-transform: none !important;
  }
  /* Cert tiles: 2×2 grid with green check icon */
  .credentials .cert-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    background: rgba(27,42,27,0.10);
    border: 1px solid rgba(27,42,27,0.10);
  }
  .credentials .cert-tile {
    background: var(--bg, #F2EBDA) !important;
    border: none !important;
    padding: 22px 18px !important;
    display: flex !important; flex-direction: column;
    gap: 0 !important;
  }
  /* 5 tiles → make the 5th span both columns so the row isn't lopsided */
  .credentials .cert-tile:nth-child(5):nth-last-child(1) { grid-column: 1 / -1; }
  /* 3 tiles (after credentials reorg) → 3rd tile spans full width as a
     bottom rectangular row instead of sitting alone in column 1. */
  .credentials .cert-grid--primary .cert-tile:nth-child(3):nth-last-child(1) { grid-column: 1 / -1; }
  .credentials .cert-icon {
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    background: #2D4A2B !important;
    color: #FAF6EA !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 16px !important; font-weight: 700 !important;
    margin-bottom: 22px !important;
  }
  .credentials .cert-icon--pending { background: #5E7030 !important; }
  .credentials .cert-issuer {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important; letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--muted, #7A8A7A) !important;
    margin-bottom: 12px !important;
  }
  .credentials .cert-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 22px !important; font-weight: 500 !important;
    letter-spacing: -0.015em !important; line-height: 1.1 !important;
    color: var(--ink, #1B2A1B) !important;
  }

  /* portfolio.html */
  .hero-photo { transform: rotate(0deg) !important; }
  .hero-photo-shadow { inset: 12px -12px -12px 12px !important; }
  .hero-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cs-caption-row { flex-wrap: wrap; gap: 8px !important; }
  /* v4 (revised): hide the hero portrait on mobile portfolio entirely — text-only hero feels tighter.
     Photo still shows on home (.door-photo img) and in case-study cards (.cs04-card picture). */
  .hero-photo-wrap { display: none !important; }
  /* Hide the desktop hero block, show the mobile hero block */
  .hero-desktop-only { display: none !important; }
  .hero-mobile-only { display: block !important; }
  .hero-mobile-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ms-ink, #1B2A1B);
    margin: 0 0 8px;
  }
  /* v4: italic role byline below the availability eyebrow (mirrors desktop pattern) */
  .hero-mobile-byline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 16px; line-height: 1.3;
    color: var(--ms-muted, #5B6A55);
    margin: 0 0 24px;
  }
  .hero-mobile-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(64px, 18vw, 92px);
    font-weight: 500; letter-spacing: -0.035em;
    line-height: 0.95;
    color: var(--ms-ink, #1B2A1B);
    margin: 0 0 28px;
  }
  .hero-mobile-title em {
    font-style: italic;
    font-family: 'Instrument Serif', 'Fraunces', Georgia, serif;
    font-weight: 400;
    background-image: linear-gradient(transparent 60%, rgba(94,112,48,0.32) 60%, rgba(94,112,48,0.32) 92%, transparent 92%);
    background-repeat: no-repeat;
    padding: 0 0.06em;
  }
  .hero-mobile-sub {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 19px; line-height: 1.42;
    color: var(--ms-ink, #1B2A1B);
    margin: 0 0 28px;
  }
  .hero-mobile-meta {
    display: flex; flex-direction: column; gap: 4px;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .hero-mobile-meta > div {
    display: flex; align-items: baseline; gap: 8px;
  }
  .hero-mobile-meta dt {
    font-weight: 600; color: var(--ms-ink, #1B2A1B); flex: 0 0 auto;
  }
  .hero-mobile-meta dt::after { content: ' ·'; color: var(--ms-mute, #7A8A7A); }
  .hero-mobile-meta dd {
    margin: 0; color: var(--ms-mute, #7A8A7A);
  }
  .hero-mobile-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 24px;
    padding: 14px 22px; border-radius: 999px;
    background: var(--ms-ink, #1B2A1B); color: var(--ms-bg, #F2EBDA);
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(27,42,27,0.18);
    -webkit-tap-highlight-color: transparent;
  }
  .hero-mobile-cta:active { background: var(--ms-olive, #5E7030); }

  /* cs0X long-form pages */
  .cs-stats-inner { grid-template-columns: 1fr 1fr !important; gap: 1px !important; background: var(--line) !important; }
  .cs-stat-cell { padding: 18px 16px !important; background: var(--bg); }
  .foot-nav { grid-template-columns: 1fr !important; }

  /* cs03-dashboard.html */
  .dash-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .dash-hero { padding: 22px !important; }
  .dash-hero .num { font-size: clamp(48px, 13vw, 64px) !important; }
  .dash-chart { height: 220px !important; }
  .recharts-cartesian-axis-tick text { font-size: 9.5px !important; }
  .dash-filters {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 0 var(--m-pad);
    margin-left: calc(-1 * var(--m-pad)); margin-right: calc(-1 * var(--m-pad));
    scrollbar-width: none;
  }
  .dash-filters::-webkit-scrollbar { display: none; }

  /* media-kit.html — legacy mobile (not used when data-creator is set) */
  .platform-grid {
    display: flex !important; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 var(--m-pad);
    margin-left: calc(-1 * var(--m-pad)); margin-right: calc(-1 * var(--m-pad));
    scrollbar-width: none;
  }
  .platform-grid::-webkit-scrollbar { display: none; }
  .platform-card { flex: 0 0 50%; aspect-ratio: 4/5; scroll-snap-align: start; }
  .pillars { grid-template-columns: 1fr !important; }
  .pillar { grid-template-columns: 110px 1fr !important; padding: 14px !important; }

  /* ── media-kit.html · data-creator="true" mobile rebuild ── */
  /* Creator palette (warm) — overrides for this page only */
  body[data-creator="true"] {
    --kc-bg:      #F4ECDD;
    --kc-bg2:     #EAD9BD;
    --kc-paper:   #FBF5E8;
    --kc-ink:     #2A1A12;
    --kc-ink2:    #4A2E20;
    --kc-muted:   #6B5648;
    --kc-line:    rgba(42,26,18,0.16);
    --kc-accent:  #C25A2E;
    --kc-accent2: #E8985A;
    --kc-pop:     #D9B65A;
    background: var(--kc-bg);
  }
  body[data-creator="true"] .desktop-view { display: none !important; }
  body[data-creator="true"] .creator-mobile-only { display: block !important; }
  /* hide the shared topnav/subnav since we render our own km-topbar */
  body[data-creator="true"] .topnav, body[data-creator="true"] .subnav { display: none !important; }

  /* topbar */
  body[data-creator="true"] .km-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; height: 56px;
    background: rgba(244,236,221,0.94);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--kc-line);
  }
  body[data-creator="true"] .km-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--kc-ink); font-weight: 500; text-decoration: none;
  }
  body[data-creator="true"] .km-brand-soft { color: var(--kc-muted); }
  /* km-dot intentionally hidden — user removed the accent dot next to N · F */
  body[data-creator="true"] .km-dot { display: none !important; }
  body[data-creator="true"] .km-topbar-right { display: inline-flex; align-items: center; gap: 8px; }
  body[data-creator="true"] .km-inquire {
    padding: 8px 14px; background: var(--kc-ink); color: var(--kc-bg);
    border-radius: 999px; font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; text-decoration: none;
  }
  body[data-creator="true"] .km-back {
    width: 38px; height: 38px; border-radius: 999px;
    border: 1px solid var(--kc-line); display: inline-flex;
    align-items: center; justify-content: center; color: var(--kc-ink);
  }

  /* subnav pill bar */
  body[data-creator="true"] .km-subnav {
    position: sticky; top: 56px; z-index: 49;
    display: flex; gap: 6px;
    padding: 8px 18px; overflow-x: auto;
    background: rgba(244,236,221,0.85);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(42,26,18,0.08);
    scrollbar-width: none;
  }
  body[data-creator="true"] .km-subnav::-webkit-scrollbar { display: none; }
  body[data-creator="true"] .km-pill {
    flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--kc-line); background: transparent;
    color: var(--kc-ink); text-decoration: none;
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
    white-space: nowrap;
  }
  body[data-creator="true"] .km-pill.is-active { background: var(--kc-ink); color: var(--kc-bg); border-color: var(--kc-ink); }

  /* hero */
  body[data-creator="true"] .km-hero {
    position: relative; padding: 36px 22px;
    background: var(--kc-paper); border-bottom: 1px solid var(--kc-line);
    overflow: hidden;
  }
  body[data-creator="true"] .km-hero-stripe {
    position: absolute; top: 0; left: 0; right: 0; height: 4;
    height: 4px;
    background: linear-gradient(90deg, var(--kc-accent), var(--kc-accent2), var(--kc-pop));
  }
  body[data-creator="true"] .km-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--kc-accent); font-weight: 600; margin-bottom: 14px;
    flex-wrap: wrap;
  }
  /* v4: "Last updated" chip pinned to the right of the eyebrow row */
  body[data-creator="true"] .km-hero-updated {
    margin-left: auto;
    padding: 4px 8px;
    background: rgba(199,111,61,0.10);
    border: 1px solid var(--kc-accent);
    color: var(--kc-accent);
    font-size: 8.5px; letter-spacing: 0.16em;
  }
  body[data-creator="true"] .km-hero-title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600;
    font-size: clamp(60px, 17vw, 86px); line-height: 0.88;
    letter-spacing: -0.045em; color: var(--kc-ink); margin: 0;
  }
  body[data-creator="true"] .km-hero-title em {
    font-style: italic; font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; color: var(--kc-accent);
    background-image: linear-gradient(transparent 68%, rgba(232,152,90,0.5) 68%, rgba(232,152,90,0.5) 92%, transparent 92%);
    background-repeat: no-repeat; padding: 0 0.06em;
  }
  body[data-creator="true"] .km-hero-tagline {
    margin-top: 22px; font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic; font-size: 17px; line-height: 1.4;
    color: var(--kc-ink2); max-width: 32ch;
  }
  body[data-creator="true"] .km-hero-pills { display: flex; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
  body[data-creator="true"] .km-pill-tag {
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--kc-line); background: transparent; color: var(--kc-ink);
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  }
  body[data-creator="true"] .km-pill-tag.is-solid { background: var(--kc-ink); color: var(--kc-bg); border-color: var(--kc-ink); }

  /* v4: download CTA below tagline */
  body[data-creator="true"] .km-hero-download {
    display: inline-block; margin-top: 14px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--kc-ink); text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--kc-ink);
  }
  body[data-creator="true"] .km-hero-download:active { opacity: 0.7; }

  /* hero stat composition — photo left, 3 colored stat tiles stacked right */
  body[data-creator="true"] .km-hero-stats {
    margin-top: 28px;
    display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr 1fr;
    gap: 8px; min-height: 360px;
  }
  body[data-creator="true"] .km-stat-big {
    grid-row: 1 / 4; grid-column: 1 / 2;
    position: relative; overflow: hidden;
    background: var(--kc-bg2);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
  }
  body[data-creator="true"] .km-stat-big img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* v4: panned up to show more hair / less chest (lower Y % focal point) */
    object-fit: cover; object-position: 50% 8%;
    filter: grayscale(0.2) contrast(1.05);
    opacity: 1;
  }
  body[data-creator="true"] .km-stat-big::before { content: none; }
  /* v4: tap (and any hover-capable device) — lift + offset block (mirrors desktop) */
  body[data-creator="true"] .km-stat-big:active,
  body[data-creator="true"] .km-stat-big:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--kc-accent);
  }
  body[data-creator="true"] .km-stat-mid,
  body[data-creator="true"] .km-stat-pop,
  body[data-creator="true"] .km-stat-forest {
    position: relative; padding: 14px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    -webkit-tap-highlight-color: transparent;
  }
  body[data-creator="true"] .km-stat-mid { background: var(--kc-accent); color: #fff; }
  body[data-creator="true"] .km-stat-pop { background: var(--kc-pop); color: var(--kc-ink); }
  body[data-creator="true"] .km-stat-forest { background: #5E7030; color: #fff; }
  /* v4: stat tile press animation — per-tile offset color matches desktop triadic pattern */
  body[data-creator="true"] .km-stat-mid:active,
  body[data-creator="true"] .km-stat-mid:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 #5E7030;
  }
  body[data-creator="true"] .km-stat-pop:active,
  body[data-creator="true"] .km-stat-pop:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--kc-accent);
  }
  body[data-creator="true"] .km-stat-forest:active,
  body[data-creator="true"] .km-stat-forest:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--kc-pop);
  }
  body[data-creator="true"] .km-stat-lab {
    font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
  }
  body[data-creator="true"] .km-stat-mid .km-stat-lab { color: rgba(255,255,255,0.78); }
  body[data-creator="true"] .km-stat-pop .km-stat-lab { color: rgba(42,26,18,0.65); }
  body[data-creator="true"] .km-stat-forest .km-stat-lab { color: rgba(255,255,255,0.78); }
  body[data-creator="true"] .km-stat-num {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600;
    font-size: clamp(30px, 9vw, 40px); line-height: 0.95;
    letter-spacing: -0.035em;
  }
  body[data-creator="true"] .km-stat-num em {
    font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
    font-weight: 400; margin-left: 1px;
  }
  body[data-creator="true"] .km-stat-mid .km-stat-num em { color: rgba(255,255,255,0.85); }
  body[data-creator="true"] .km-stat-pop .km-stat-num em { color: var(--kc-accent); }
  body[data-creator="true"] .km-stat-forest .km-stat-num em { color: rgba(255,255,255,0.85); }
  body[data-creator="true"] .km-stat-sub {
    margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
    font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  }
  body[data-creator="true"] .km-stat-mid .km-stat-sub { color: rgba(255,255,255,0.78); }
  body[data-creator="true"] .km-stat-pop .km-stat-sub { color: rgba(42,26,18,0.6); }
  body[data-creator="true"] .km-stat-forest .km-stat-sub { color: rgba(255,255,255,0.6); }

  /* sections */
  body[data-creator="true"] .km-section {
    padding: 40px 22px;
    border-top: 1px solid var(--kc-line);
  }
  body[data-creator="true"] .km-section-head {
    display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: baseline;
    margin-bottom: 24px;
  }
  body[data-creator="true"] .km-num {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--kc-muted);
  }
  body[data-creator="true"] .km-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--kc-accent);
    margin-bottom: 10px;
  }
  body[data-creator="true"] .km-kicker::before { content:''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  body[data-creator="true"] .km-h {
    font-family: 'Fraunces', Georgia, serif; font-weight: 400;
    font-size: clamp(28px, 7.4vw, 34px); line-height: 1.02;
    letter-spacing: -0.025em; margin: 0; color: var(--kc-ink);
  }
  body[data-creator="true"] .km-h em {
    font-style: italic; font-family: 'Instrument Serif', Georgia, serif; color: var(--kc-accent);
  }

  /* pillar carousel */
  body[data-creator="true"] .km-carousel {
    display: flex; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -22px; padding: 4px 22px;
    scrollbar-width: none;
  }
  body[data-creator="true"] .km-carousel::-webkit-scrollbar { display: none; }
  /* v4: pagination dots — auto-injected by mobile.js for any [data-carousel-dots] track */
  .carousel-dots {
    display: flex; justify-content: center; gap: 6px;
    margin: 14px auto 0;
  }
  .carousel-dots__dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: rgba(42,26,18,0.22);
    transition: width 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
  }
  .carousel-dots__dot.is-active {
    width: 22px; background: var(--kc-accent, #C25A2E);
  }
  body[data-creator="true"] .km-pcard {
    scroll-snap-align: start; flex: 0 0 64%;
    position: relative; aspect-ratio: 4/5;
    overflow: hidden; border: 2px solid var(--kc-ink);
    background: var(--kc-bg2);
  }
  /* Alternating shadow tones — terracotta vs olive — give each card a
     distinct contrasting pop instead of two warm-on-warm options. */
  body[data-creator="true"] .km-pcard:nth-child(odd) { box-shadow: 5px 5px 0 var(--kc-accent); }
  body[data-creator="true"] .km-pcard:nth-child(even) { box-shadow: 5px 5px 0 #5E7030; }
  /* v4 (site-consistency-v1): tap/hover border animation — lift + grow shadow */
  body[data-creator="true"] .km-pcard {
    transition: transform 0.28s ease, box-shadow 0.28s ease;
  }
  body[data-creator="true"] .km-pcard:active,
  body[data-creator="true"] .km-pcard:hover { transform: translate(-4px, -4px); }
  body[data-creator="true"] .km-pcard:nth-child(odd):active,
  body[data-creator="true"] .km-pcard:nth-child(odd):hover  { box-shadow: 9px 9px 0 var(--kc-accent); }
  body[data-creator="true"] .km-pcard:nth-child(even):active,
  body[data-creator="true"] .km-pcard:nth-child(even):hover { box-shadow: 9px 9px 0 #5E7030; }
  body[data-creator="true"] .km-pcard img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  body[data-creator="true"] .km-pcard::after {
    content:''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,12,8,0.86) 0%, rgba(20,12,8,0.08) 45%, transparent 100%);
    pointer-events: none;
  }
  body[data-creator="true"] .km-pstat {
    position: absolute; top: 10px; right: 12px; z-index: 1;
    padding: 4px 8px; background: rgba(244,236,221,0.92);
    font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--kc-ink);
  }
  body[data-creator="true"] .km-plabel {
    position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; z-index: 1;
  }
  body[data-creator="true"] .km-pnum {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(255,255,255,0.78); margin-bottom: 4px;
  }
  body[data-creator="true"] .km-pname {
    font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 500;
    letter-spacing: -0.015em; line-height: 1; text-transform: uppercase;
  }

  /* platforms */
  body[data-creator="true"] .km-platforms { list-style: none; padding: 0; margin: 0; }
  body[data-creator="true"] .km-platforms li {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "name count" "meta meta" "bar bar";
    column-gap: 12px; row-gap: 6px;
    padding: 14px 0; border-bottom: 1px solid var(--kc-line);
  }
  body[data-creator="true"] .km-platforms li:last-child { border-bottom: none; }
  /* v4: anchor wraps the grid contents so each row is a tappable link to the social channel */
  body[data-creator="true"] .km-plat-link {
    display: contents; color: inherit; text-decoration: none;
    -webkit-tap-highlight-color: rgba(199,111,61,0.18);
  }
  body[data-creator="true"] .km-platforms li { cursor: pointer; transition: background 0.15s; }
  body[data-creator="true"] .km-platforms li:hover { background: rgba(199,111,61,0.04); }
  body[data-creator="true"] .km-platforms li:hover .km-plat-name { color: var(--kc-accent, #C76F3D); }
  body[data-creator="true"] .km-plat-name {
    grid-area: name; font-family: 'Fraunces', Georgia, serif; font-size: 18px;
    font-weight: 500; letter-spacing: -0.015em; color: var(--kc-ink);
  }
  body[data-creator="true"] .km-plat-count {
    grid-area: count; font-family: 'Fraunces', Georgia, serif; font-size: 18px;
    font-weight: 500; color: var(--kc-ink); font-variant-numeric: tabular-nums;
  }
  body[data-creator="true"] .km-plat-meta {
    grid-area: meta; font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--kc-muted); font-weight: 600;
  }
  body[data-creator="true"] .km-plat-bar {
    grid-area: bar; display: block; height: 4px; border-radius: 0;
    width: var(--w, 0%); margin-top: 4px;
  }

  /* ── 02 · REACH — v4 brand-color tile stack (replaces .km-platforms) ── */
  body[data-creator="true"] .reach-tiles {
    display: flex; flex-direction: column; gap: 6px;
  }
  body[data-creator="true"] .reach-tile {
    position: relative;
    background: var(--brand);
    color: var(--fg);
    padding: 14px 16px;
    text-decoration: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  body[data-creator="true"] .reach-tile--hero { padding: 20px 16px; column-gap: 16px; }
  /* v4: platform logo on the LEFT of text, spanning both rows */
  body[data-creator="true"] .reach-tile__logo {
    position: static;
    grid-column: 1; grid-row: 1 / 3;
    width: 22px; height: 22px;
    color: var(--fg); opacity: 0.85;
    pointer-events: none;
    align-self: center;
  }
  body[data-creator="true"] .reach-tile--hero .reach-tile__logo {
    width: 30px; height: 30px;
  }
  body[data-creator="true"] .reach-tile__head { grid-column: 2; grid-row: 1; }
  body[data-creator="true"] .reach-tile__meta { grid-column: 2; grid-row: 2; }
  /* v4 (site-consistency-v1): tap/hover border animation — translate + offset
     ink block reveal (mirrors hero photo + stat tile pattern). Replaces the
     old scale(0.985) press feedback. */
  body[data-creator="true"] .reach-tile {
    transition: transform 0.28s ease, box-shadow 0.28s ease;
  }
  /* Each .reach-tile carries its own --shadow inline (mustard for
     TikTok/YouTube, cream for IG, ink for Snap, terracotta for FB)
     so the hover shadow contrasts with the brand color of the tile
     instead of getting absorbed by it. Falls back to ink if --shadow
     is missing. */
  body[data-creator="true"] .reach-tile:active,
  body[data-creator="true"] .reach-tile:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--shadow, var(--kc-ink));
  }
  body[data-creator="true"] .reach-tile__head {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 10px;
  }
  body[data-creator="true"] .reach-tile__name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; font-size: 18px; line-height: 1;
    letter-spacing: -0.015em;
  }
  body[data-creator="true"] .reach-tile--hero .reach-tile__name { font-size: 26px; }
  body[data-creator="true"] .reach-tile__count {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; font-size: 28px; line-height: 1;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  }
  body[data-creator="true"] .reach-tile--hero .reach-tile__count { font-size: 44px; }
  body[data-creator="true"] .reach-tile__meta {
    display: block; margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600; font-size: 8.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
    opacity: 0.7;
  }
  body[data-creator="true"] .reach-tile--hero .reach-tile__meta {
    margin-top: 8px; font-size: 9.5px;
  }

  /* ── 03 · AUDIENCE — v4 split-bar + chip grid (replaces .km-audience-table) ── */
  body[data-creator="true"] .aud-gender { margin-bottom: 14px; }
  body[data-creator="true"] .aud-gender__head {
    display: flex; justify-content: space-between; margin-bottom: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600; font-size: 9px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--kc-muted);
  }
  body[data-creator="true"] .aud-gender__bar {
    display: flex; height: 44px;
    border: 1.5px solid var(--kc-ink);
    overflow: hidden;
  }
  body[data-creator="true"] .aud-gender__f,
  body[data-creator="true"] .aud-gender__m {
    display: flex; align-items: center; justify-content: space-between;
  }
  body[data-creator="true"] .aud-gender__f {
    width: 68%; background: var(--kc-accent); color: #fff; padding: 0 14px;
  }
  body[data-creator="true"] .aud-gender__m {
    width: 32%; background: var(--kc-bg2); color: var(--kc-ink); padding: 0 12px;
  }
  body[data-creator="true"] .aud-gender__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600; font-size: 9px;
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  body[data-creator="true"] .aud-gender__pct {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  body[data-creator="true"] .aud-gender__f .aud-gender__pct { font-size: 20px; }
  body[data-creator="true"] .aud-gender__m .aud-gender__pct { font-size: 18px; }
  body[data-creator="true"] .aud-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  body[data-creator="true"] .aud-chip {
    background: var(--kc-bg2);
    border: 1px solid var(--kc-line);
    padding: 16px 14px;
  }
  body[data-creator="true"] .aud-chip--dark {
    background: var(--kc-ink); color: var(--kc-bg); border: none;
  }
  body[data-creator="true"] .aud-chip--wide { grid-column: 1 / 3; padding: 14px 16px; }
  body[data-creator="true"] .aud-chip__lab {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600; font-size: 8.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--kc-muted);
    margin-bottom: 6px;
  }
  body[data-creator="true"] .aud-chip--dark .aud-chip__lab { color: var(--kc-pop); }
  body[data-creator="true"] .aud-chip--wide .aud-chip__lab { margin-bottom: 8px; }
  body[data-creator="true"] .aud-chip__val {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; letter-spacing: -0.025em;
    font-size: 28px; line-height: 1;
  }
  body[data-creator="true"] .aud-chip--dark .aud-chip__val {
    font-size: 22px; letter-spacing: -0.015em; line-height: 1.05;
  }
  body[data-creator="true"] .aud-chip__sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px; letter-spacing: 0.06em;
    color: var(--kc-muted); margin-top: 4px;
  }
  body[data-creator="true"] .aud-chip--dark .aud-chip__sub {
    color: rgba(244,236,221,0.6);
  }
  body[data-creator="true"] .aud-chip__pills {
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  body[data-creator="true"] .aud-chip__pills span {
    padding: 6px 12px;
    background: var(--kc-paper);
    border: 1px solid var(--kc-line);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600; font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--kc-ink);
  }

  /* ── 03 · AUDIENCE — bordered card with 4 hairline-separated rows ── */
  body[data-creator="true"] .km-audience-table {
    margin: 0; border: 1px solid var(--kc-line);
    background: var(--kc-bg2);
  }
  body[data-creator="true"] .km-audrow {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 16px; align-items: center;
    padding: 18px 18px;
    border-bottom: 1px solid var(--kc-line);
  }
  body[data-creator="true"] .km-audrow:last-child { border-bottom: none; }
  body[data-creator="true"] .km-audrow dt {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--kc-muted);
  }
  body[data-creator="true"] .km-audrow dd {
    margin: 0; display: flex; flex-direction: column; gap: 4px;
  }
  body[data-creator="true"] .km-audrow dd strong {
    font-family: 'Fraunces', Georgia, serif; font-weight: 500;
    font-size: 22px; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--kc-ink);
  }
  body[data-creator="true"] .km-audrow dd span {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; color: var(--kc-muted);
    text-transform: none;
  }

  /* ── 04 · BRANDS — V3: photo on top + colored caption strip below
     (matches desktop design + design reference in CS03+Brands V3 mockup) */
  body[data-creator="true"] .km-brand-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  body[data-creator="true"] .km-bcard {
    position: relative; overflow: hidden;
    background: var(--kc-bg-2);
    display: flex; flex-direction: column;
    /* v4 (site-consistency-v1): tap/hover border animation */
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    -webkit-tap-highlight-color: transparent;
  }
  /* Default (national) bcard hover: olive shadow contrasts with the
     terracotta caption strip instead of matching it. Forest green flows
     with the creator palette. */
  body[data-creator="true"] .km-bcard:active,
  body[data-creator="true"] .km-bcard:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 #5E7030;
  }
  body[data-creator="true"] .km-bcard img {
    width: 100%; aspect-ratio: 1/1;
    object-fit: cover; object-position: center;
    display: block;
  }
  /* Overlay is intentionally removed in the V3 design — caption strip
     carries the brand info, photo stays untouched. */
  body[data-creator="true"] .km-bcard-overlay { display: none !important; }
  body[data-creator="true"] .km-bcard-text {
    padding: 12px 14px 14px;
    display: flex; flex-direction: column; gap: 2px;
  }
  body[data-creator="true"] .km-bcard-num {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.78);
  }
  body[data-creator="true"] .km-bcard-name {
    font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 500;
    letter-spacing: -0.015em; color: #fff; line-height: 1.15;
  }
  body[data-creator="true"] .km-bcard-stat {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.04em; color: rgba(255,255,255,0.78);
    margin-top: 2px;
  }
  /* Tier-tinted caption strips — terracotta for national, peach for local */
  body[data-creator="true"] .km-bcard--national .km-bcard-text { background: var(--kc-accent); }
  body[data-creator="true"] .km-bcard--local    .km-bcard-text { background: var(--kc-accent2); }

  /* Tier labels above each brand grid block (handoff §11) */
  body[data-creator="true"] .km-brand-tier-lab {
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--kc-muted);
    margin: 18px 0 10px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  body[data-creator="true"] .km-brand-tier-lab:first-of-type { margin-top: 0; }
  body[data-creator="true"] .km-brand-tier-lab::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
  }
  body[data-creator="true"] .km-brand-tier-lab--national::before { background: var(--kc-accent); }
  body[data-creator="true"] .km-brand-tier-lab--local::before    { background: var(--kc-accent2); }

  /* Local bcard hover: ink-brown shadow contrasts with the peach caption
     strip and reads as deeper/grounding next to the warm tile. */
  body[data-creator="true"] .km-bcard--local:active,
  body[data-creator="true"] .km-bcard--local:hover    { box-shadow: 8px 8px 0 var(--kc-ink); }

  /* ── 05 · OFFER — clean numbered list with right-aligned tag ── */
  body[data-creator="true"] .km-offer-list {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--kc-line);
    border-bottom: 1px solid var(--kc-line);
  }
  body[data-creator="true"] .km-offer-list li {
    display: grid; grid-template-columns: 28px 1fr auto;
    gap: 14px; align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid var(--kc-line);
  }
  body[data-creator="true"] .km-offer-list li:last-child { border-bottom: none; }
  body[data-creator="true"] .km-olnum {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    font-weight: 600; letter-spacing: 0.22em; color: var(--kc-muted);
    padding-top: 4px;
  }
  body[data-creator="true"] .km-olbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  body[data-creator="true"] .km-olt {
    font-family: 'Fraunces', Georgia, serif; font-size: 19px;
    font-weight: 500; letter-spacing: -0.015em; color: var(--kc-ink); line-height: 1.15;
  }
  body[data-creator="true"] .km-old {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13.5px; line-height: 1.45; color: var(--kc-ink2);
  }
  body[data-creator="true"] .km-oltag {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--kc-accent); padding-top: 6px;
    white-space: nowrap;
  }

  /* ── 06 · CONTACT — dark forest block ── */
  body[data-creator="true"] .km-contact {
    background: var(--kc-ink); color: var(--kc-bg);
    padding: 40px 22px 0;
    border-top: 1px solid var(--kc-line);
  }
  /* v4 (site-consistency-v1): cross-page CTA pair inside dark km-contact —
     add hairline cream borders so the dark CTA cards stand out from the
     dark parent background. */
  body[data-creator="true"] .km-cta-pair {
    margin-top: 28px;
    grid-template-columns: 1fr;  /* stack vertically on phones */
  }
  body[data-creator="true"] .km-cta-pair .cta-card {
    border: 1px solid rgba(244,236,221,0.18);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
  }
  /* Second CTA (Open the deck / Case Studies) reads right-aligned on
     mobile so the visual rhythm goes Back ← / → Forward */
  body[data-creator="true"] .km-cta-pair .cta-card--creator {
    text-align: right;
    align-items: flex-end;
  }
  /* Pro card (forest bg) gets a mustard shadow (warm pop on dark green);
     creator card (cream bg) gets a terracotta shadow (warm pop on light). */
  body[data-creator="true"] .km-cta-pair .cta-card--pro:active,
  body[data-creator="true"] .km-cta-pair .cta-card--pro:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--kc-pop);
  }
  body[data-creator="true"] .km-cta-pair .cta-card--creator:active,
  body[data-creator="true"] .km-cta-pair .cta-card--creator:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--kc-accent);
  }
  body[data-creator="true"] .km-contact-eyebrow,
  body[data-creator="true"] .km-socials-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--kc-pop);
    margin-bottom: 16px;
  }
  body[data-creator="true"] .km-cdot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--kc-pop);
    display: inline-block;
  }
  body[data-creator="true"] .km-contact-h {
    margin: 0 0 14px; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
    font-size: clamp(56px, 16vw, 80px); line-height: 0.92;
    letter-spacing: -0.04em; color: var(--kc-bg);
  }
  body[data-creator="true"] .km-contact-tagline {
    margin: 0 0 28px; font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 14.5px; line-height: 1.45;
    color: rgba(244,236,221,0.78);
  }
  body[data-creator="true"] .km-contact-h em {
    font-style: italic; font-family: 'Instrument Serif', Georgia, serif;
    color: var(--kc-pop); font-weight: 400;
  }
  /* Bordered 2-row table */
  body[data-creator="true"] .km-contact-table {
    margin: 0 0 32px; border: 1px solid rgba(244,236,221,0.18);
  }
  body[data-creator="true"] .km-contact-table > div {
    display: grid; grid-template-columns: 100px 1fr;
    gap: 16px; align-items: center;
    padding: 18px 18px;
    border-bottom: 1px solid rgba(244,236,221,0.18);
  }
  body[data-creator="true"] .km-contact-table > div:last-child { border-bottom: none; }
  body[data-creator="true"] .km-contact-table dt {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(244,236,221,0.55); margin: 0;
  }
  body[data-creator="true"] .km-contact-table dd {
    margin: 0; font-family: 'Fraunces', Georgia, serif;
    font-size: 17px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--kc-bg); word-break: break-word;
  }
  body[data-creator="true"] .km-contact-table dd a { color: inherit; text-decoration: none; }
  /* Socials grid */
  body[data-creator="true"] .km-socials {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 36px;
  }
  body[data-creator="true"] .km-social {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 18px 16px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    /* v4 (site-consistency-v1): tap/hover border animation */
    transition: transform 0.28s ease, box-shadow 0.28s ease;
  }
  body[data-creator="true"] .km-social:active,
  body[data-creator="true"] .km-social:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--kc-ink);
  }
  /* v4: platform logo on the LEFT side of each grid tile */
  body[data-creator="true"] .km-soc-logo {
    grid-row: 1 / 4;
    grid-column: 1;
    width: 22px; height: 22px;
    color: currentColor; opacity: 0.85;
    align-self: center;
  }
  body[data-creator="true"] .km-socials--grid .km-social .km-soc-name,
  body[data-creator="true"] .km-socials--grid .km-social .km-soc-count,
  body[data-creator="true"] .km-socials--grid .km-social .km-soc-handle {
    grid-column: 2;
  }
  /* IG tile takes the same gradient as the reach tile */
  body[data-creator="true"] .km-social--ig {
    background: linear-gradient(135deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5) !important;
  }
  /* v4: shrink the 2x2 grid tiles (IG/Snap/YT/FB) by ~50% — TikTok hero row stays large */
  body[data-creator="true"] .km-socials--grid .km-social {
    padding: 10px 14px;
  }
  body[data-creator="true"] .km-socials--grid .km-soc-logo {
    width: 18px; height: 18px;
  }
  body[data-creator="true"] .km-socials--grid .km-soc-count {
    font-size: 22px; margin-top: 2px;
  }
  body[data-creator="true"] .km-socials--grid .km-soc-handle {
    margin-top: 6px; font-size: 9.5px;
  }
  body[data-creator="true"] .km-social--tiktok    { background: #000; color: #fff; }
  body[data-creator="true"] .km-social--ig        { background: #E1306C; color: #fff; }
  body[data-creator="true"] .km-social--snap      { background: #FFFC00; color: var(--kc-ink); }
  body[data-creator="true"] .km-social--yt        { background: #FF0000; color: #fff; }
  body[data-creator="true"] .km-social--fb        { background: #1877F2; color: #fff; }
  /* v4: TikTok promoted to a hero-style full-width row above the 2x2 grid */
  body[data-creator="true"] .km-social--wide {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: baseline;
    gap: 14px; padding: 22px 18px; margin-bottom: 8px;
  }
  body[data-creator="true"] .km-social--wide .km-soc-logo {
    grid-row: auto; grid-column: 1;
    width: 28px; height: 28px;
    align-self: center;
  }
  body[data-creator="true"] .km-social--wide .km-soc-name { grid-column: 2; }
  body[data-creator="true"] .km-social--wide .km-soc-count {
    grid-column: 3; margin: 0; font-size: 38px;
  }
  body[data-creator="true"] .km-social--wide .km-soc-handle {
    grid-column: 4; margin: 0; opacity: 0.75;
  }
  body[data-creator="true"] .km-soc-name {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    opacity: 0.85;
  }
  body[data-creator="true"] .km-soc-count {
    font-family: 'Fraunces', Georgia, serif; font-size: 30px;
    font-weight: 600; letter-spacing: -0.025em; line-height: 1;
    margin-top: 4px;
  }
  body[data-creator="true"] .km-soc-handle {
    margin-top: 14px;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.06em; opacity: 0.85;
  }

  /* Footer (dark, inside contact section) */
  body[data-creator="true"] .km-foot {
    border-top: 1px solid rgba(244,236,221,0.18);
    padding: 22px 0 calc(28px + env(safe-area-inset-bottom));
    background: transparent !important;
    color: rgba(244,236,221,0.55) !important;
    display: flex !important; flex-direction: column; gap: 8px;
  }
  body[data-creator="true"] .km-foot-row {
    display: flex; justify-content: space-between; align-items: baseline;
  }
  body[data-creator="true"] .km-foot-brand {
    font-family: 'Fraunces', Georgia, serif; font-size: 22px;
    font-weight: 600; color: var(--kc-bg);
    letter-spacing: -0.015em; text-transform: none;
  }
  body[data-creator="true"] .km-foot-brand em {
    font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
    color: var(--kc-accent); font-weight: 400;
  }
  body[data-creator="true"] .km-foot-year {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(244,236,221,0.45);
  }
  body[data-creator="true"] .km-foot-email {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.06em; color: rgba(244,236,221,0.55);
    text-transform: lowercase;
    margin-top: 4px;
  }
  body[data-creator="true"] .km-foot-loc {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(244,236,221,0.45);
    margin-top: 4px;
  }

  /* experience.html — timeline rail (legacy) */
  .role { padding-left: 56px !important; position: relative; }
  .role::before {
    content: ''; position: absolute; left: 32px; top: 0; bottom: 0;
    width: 1px; background: var(--line);
  }
  .role::after {
    content: ''; position: absolute; left: 26px; top: 28px;
    width: 13px; height: 13px; border-radius: 50%;
    background: #C76F3D;
    border: 3px solid var(--bg, #F2EBDA);
    box-shadow: 0 0 0 1px var(--line);
  }
  .role:last-child::before { display: none; }
  .skill-chips { gap: 8px !important; }

  /* ── experience.html · data-experience="true" mobile rebuild ── */
  body[data-experience="true"] .resume-header { padding: 24px 0 8px !important; border-bottom: none !important; }
  body[data-experience="true"] .resume-header h1,
  body[data-experience="true"] .resume-name {
    font-size: clamp(50px, 13vw, 64px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.035em !important;
  }
  /* hide desktop-only resume contact list + actions in favor of the mobile hero block */
  body[data-experience="true"] .resume-contact,
  body[data-experience="true"] .resume-actions { display: none !important; }
  /* show the mobile-only block on phones */
  body[data-experience="true"] .resume-mobile-only { display: block !important; }
  body[data-experience="true"] .resume-desktop-only { display: none !important; }
  body[data-experience="true"] .resume-mobile-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: #C76F3D; margin: 0 0 12px;
  }
  body[data-experience="true"] .resume-mobile-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(50px, 13vw, 64px);
    font-weight: 500; letter-spacing: -0.035em; line-height: 0.92;
    color: var(--ink, #1B2A1B);
    margin: 0 0 18px;
  }
  body[data-experience="true"] .resume-mobile-title em.emphasis {
    font-style: italic;
    font-family: 'Instrument Serif', Georgia, serif;
    color: var(--ink, #1B2A1B);
    font-weight: 400;
    background-image: linear-gradient(transparent 66%, rgba(94,112,48,0.32) 66%, rgba(94,112,48,0.32) 92%, transparent 92%);
    background-repeat: no-repeat; padding: 0 0.06em;
  }
  body[data-experience="true"] .resume-mobile-tagline {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 16px; line-height: 1.45;
    color: var(--ink-2, #3A4A3A);
    margin: 0 0 22px; max-width: 32ch;
  }
  /* v4: re-show the summary download CTA on mobile (desktop-hidden via experience.html inline styles) */
  body[data-experience="true"] .summary-resume-btn { display: inline-flex !important; }
  body[data-experience="true"] .resume-btn,
  body[data-experience="true"] .download-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px !important;
    border: 1.5px solid var(--ink, #1B2A1B) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--ink, #1B2A1B) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
    width: auto !important; text-decoration: none;
  }
  /* skill chips */
  body[data-experience="true"] .skill-chip {
    padding: 8px 14px !important;
    background: #E8E0CC !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.06em; color: var(--ink, #1B2A1B); font-weight: 500;
  }
  /* TIMELINE — vertical rail + role-specific accent dots */
  body[data-experience="true"] .role { padding: 24px 22px 24px 56px !important; border-bottom: 1px solid var(--line); margin: 0 !important; }
  body[data-experience="true"] .role:last-child { border-bottom: none; }
  body[data-experience="true"] .role::before {
    content: ''; position: absolute; left: 32px; top: 0; bottom: 0;
    width: 1px; background: var(--line);
  }
  body[data-experience="true"] .role::after {
    content: ''; position: absolute; left: 26px; top: 28px;
    width: 13px; height: 13px; border-radius: 50%;
    background: #C76F3D;
    border: 3px solid var(--bg, #F2EBDA);
    box-shadow: 0 0 0 1px var(--line);
  }
  body[data-experience="true"] .role[data-accent="olive"]::after  { background: #5E7030; }
  body[data-experience="true"] .role[data-accent="forest"]::after { background: #2D4A2B; }
  body[data-experience="true"] .role[data-accent="muted"]::after  { background: #7A8A7A; }
  body[data-experience="true"] .role:last-child::before { bottom: 50%; }
  /* role text */
  body[data-experience="true"] .role-dates {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #C76F3D; font-weight: 600; margin-top: 0 !important;
  }
  body[data-experience="true"] .role-company {
    margin-top: 6px !important;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted, #7A8A7A); font-weight: 600;
    display: block !important; gap: 0 !important;
  }
  body[data-experience="true"] .role-company em {
    display: block !important; margin-top: 4px;
    font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-style: italic;
    font-size: 22px !important; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--ink, #1B2A1B); text-transform: none;
  }
  body[data-experience="true"] .role-bullets { margin-top: 12px !important; padding: 0 !important; list-style: none; }
  body[data-experience="true"] .role-bullets li {
    position: relative; padding-left: 16px !important;
    margin-bottom: 6px !important;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13.5px !important; line-height: 1.45 !important;
    color: var(--ink, #1B2A1B);
  }
  body[data-experience="true"] .role-bullets li::before {
    content: ''; position: absolute;
    left: 0 !important; top: 8px !important;
    width: 5px !important; height: 5px !important;
    border-radius: 50%; background: #C76F3D !important;
  }
  /* CONTACT CTA / CTA STRIP — forest block with mustard pill */
  body[data-experience="true"] .contact-cta,
  body[data-experience="true"] .cta-strip {
    margin: 40px 22px 0;
    padding: 26px !important;
    background: #2D4A2B; color: var(--bg, #F2EBDA);
    border-radius: 0 !important;
  }
  body[data-experience="true"] .cta-strip-inner {
    display: flex !important; flex-direction: column;
    align-items: flex-start !important; gap: 18px !important;
    max-width: none !important;
  }
  body[data-experience="true"] .contact-cta h2,
  body[data-experience="true"] .cta-strip h2 {
    font-family: 'Fraunces', Georgia, serif; font-weight: 400;
    font-size: 28px; line-height: 1.05; letter-spacing: -0.025em;
    margin: 0;
    color: var(--bg, #F2EBDA) !important;
  }
  body[data-experience="true"] .contact-cta h2 em,
  body[data-experience="true"] .cta-strip h2 em {
    font-style: italic; font-family: 'Instrument Serif', Georgia, serif;
    color: #D9B65A !important;
  }
  body[data-experience="true"] .contact-cta p,
  body[data-experience="true"] .cta-strip .cta-strip-meta {
    margin: 8px 0 0 !important;
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 13.5px !important; line-height: 1.45;
    color: rgba(242,235,218,0.78) !important;
    text-transform: none !important; letter-spacing: 0 !important;
  }
  body[data-experience="true"] .contact-cta .cta-btn,
  body[data-experience="true"] .cta-strip .cta-btn {
    display: inline-block; margin-top: 8px !important;
    padding: 14px 22px !important;
    background: #D9B65A !important; color: var(--ink, #1B2A1B) !important;
    font-family: 'JetBrains Mono', monospace; font-size: 10px !important;
    letter-spacing: 0.22em !important; text-transform: uppercase; font-weight: 600;
    text-decoration: none; border-radius: 999px;
    width: auto !important;
    border: none !important;
  }
}

/* Tablet polish */
@media (min-width: 769px) and (max-width: 1024px) {
  .topnav-inner { padding-left: 32px; padding-right: 32px; }
  .cs-grid-2 { grid-template-columns: 1fr 1fr; gap: 18px; }
  .perf-strip { padding: 24px !important; }
}