/* ══════════════════════════════════════════════════════════
   KTK Case Study — Base structural CSS
   Extracted from casestudy1.css with the following changes:
   · text-align: center → text-align: left (on content containers)
   · align-items: center → align-items: flex-start (on content containers)
   · justify-content: center → justify-content: flex-start (on content containers)
   · Hardcoded green/tinted colors → CSS variable equivalents
   · Green-tinted rgba values → neutral rgba values
   ══════════════════════════════════════════════════════════ */

/* Override body background so no seam shows between pinned/scrolling sections */
body {
    background-color: var(--bg);
    transition: background-color 0.4s ease, color 0.3s ease;
    min-height: 100vh;
}
[data-theme="dark"] body { background-color: var(--bg); }

/* Back button — pill style (matches game page) */
.cs__back {
    position: fixed;
    top: 5vh;
    left: 5vw;
    z-index: 100000;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--text-primary);
    border: 1px solid rgba(0,0,0,0.35);
    border-radius: 999px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 1.1em 0 0.8em;
    background: transparent;
    opacity: 0;
    transition: color 0.3s ease, border-color 0.3s ease;
    cursor: none;
}
[data-theme="dark"] .cs__back {
    border-color: rgba(255,255,255,0.45);
}
@media (hover: hover) and (pointer: fine) {
    .cs__back:hover {
        color: var(--ktk);
        border-color: var(--ktk);
    }
    .cs__back:hover .material-symbols-outlined {
        transform: translateX(-3px);
    }
}
.cs__back .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* ── Shared section label ─────────────────────────────── */
.cs-section-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ktk);
    margin: 0;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-section-label {
    color: var(--ktk);
}

/* ── Theme transition helpers ──────────────────────────── */
#cs-hero,
#cs-team,
#cs-broken,
#cs-users,
#cs-strategy,
#cs-decision1,
#cs-decision2,
#cs-decision3,
#cs-decision4,
#cs-devbridge,
#cs-results,
#cs-screens,
#cs-craft,
#cs-reflection {
    transition: background-color 0.4s ease;
}

.cs-section-label,
.cs-decision__title,
.cs-decision__narrative,
.cs-decision__footnote,
.cs-decision__footnote p,
.cs-decision__nudge-label,
.cs-decision__nudge-text,
.cs-decision__nudge-note,
#cs-hero__title,
.cs-hero__ribbon-num,
.cs-hero__ribbon-label,
.cs-hero__ribbon-item::after,
#cs-broken__title,
#cs-broken__subtitle,
#cs-broken__donut-num,
#cs-broken__donut-label,
#cs-broken__bench-title,
.cs-broken__bar-label,
.cs-broken__bar-score,
.cs-broken__bar-row--highlight .cs-broken__bar-label,
.cs-broken__bar-row--highlight .cs-broken__bar-score,
.cs-broken__legend-text,
.cs-broken__legend-text strong,
#cs-broken__callout-text,
#cs-broken__callout-source,
#cs-broken__bench-axis span,
#cs-broken__bench-scale,
#cs-users__title,
#cs-users__preamble,
#cs-users__persona-label,
#cs-users__findings-label,
.cs-persona__title,
.cs-persona__desc,
.cs-research__title,
.cs-research__body,
.cs-research__num,
.cs-research__pct,
.cs-research__stat-label,
#cs-strategy__label,
#cs-strategy__desc,
.cs-strategy__step-num,
.cs-strategy__step-title,
.cs-strategy__step-desc,
.cs-design__num,
.cs-design__unit,
.cs-design__subtitle,
.cs-design__arrow .material-symbols-outlined,
.cs-ia__side-label,
.cs-ia__group-title,
.cs-ia__divider .material-symbols-outlined,
.cs-devbridge__point-text h4,
.cs-devbridge__point-text p,
#cs-results__title,
.cs-results__num,
.cs-results__pct,
.cs-results__label,
#cs-results__note,
#cs-screens__title,
.cs-screens__label,
#cs-craft__title,
#cs-craft__intro,
.cs-craft__sub-title,
.cs-colour-card__name,
.cs-colour-card__label,
.cs-colour-card__hex,
.cs-colour-chip__name,
.cs-colour-chip__hex,
.cs-colours__group-label,
.cs-icons__group-label,
.cs-tradeoff__icon,
.cs-tradeoff__text h4,
.cs-tradeoff__text p,
#cs-artifacts__label,
.cs-artifact__caption,
#cs-reflection__title,
.cs-reflection__lesson-num,
.cs-reflection__lesson-title,
.cs-reflection__lesson-text,
#cs-reflection__closing,
.cs-next-study__label,
.cs-decision__evidence-arrow .material-symbols-outlined {
    transition: color 0.3s ease;
}

.cs-persona,
.cs-persona__icon,
.cs-persona__badge,
.cs-design__stat,
.cs-devbridge__point,
.cs-devbridge__point-icon,
.cs-results__stat,
.cs-decision__nudge-card,
.cs-strategy__slide,
.cs-broken__callout,
.cs-broken__bar-track,
.cs-broken__bar-fill,
.cs-broken__legend-dot--tactical,
.cs-broken__legend-dot--strategic,
.cs-research__finding,
.cs-research__person-bg,
.cs-research__person-fill,
.cs-icons__grid i,
.cs-ia__group,
.cs-ia__scattered,
.cs-ia__pill,
.cs-ia__item,
.cs-screens__frame,
.cs-colour-chip__wcag--aaa,
.cs-colour-chip__wcag--aa,
.cs-colour-chip__wcag--aa-lg {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cs-broken__ring-bg,
.cs-broken__ring--tactical,
.cs-broken__ring--strategic {
    transition: stroke 0.3s ease;
}

#cs-phone__frame {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#cs-coin__shadow {
    transition: fill 0.3s ease;
}

.cs-section-divider {
    transition: border-color 0.3s ease;
}

/* Catch-all: smooth theme fade for any element not covered above.
   * has the lowest specificity so any class/ID rule wins. */
* {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, stroke 0.3s ease;
}

/* ── Hero ───────────────────────────────────────────────── */
#cs-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0 5vw;
    box-sizing: border-box;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-hero {
    background-color: var(--bg);
}

/* ── Hero content ───────────────────────────────────────── */
#cs-hero__content {
    text-align: left;
    padding-top: clamp(14vh, 18vh, 22vh);
    max-width: 800px;
    opacity: 0;
}

#cs-hero__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 4.5vw, 4.2rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-hero__title {
    color: var(--text-primary);
}

/* Stats ribbon */
#cs-hero__ribbon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    margin-top: 2rem;
}

.cs-hero__ribbon-item {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
}

/* Middot separator between items (except last) */
.cs-hero__ribbon-item:not(:last-child)::after {
    content: '\00B7';
    margin-left: 2rem;
    font-size: 1.4rem;
    color: var(--ktk);
    opacity: 0.5;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-hero__ribbon-item:not(:last-child)::after {
    color: var(--ktk);
}

.cs-hero__ribbon-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ktk);
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-hero__ribbon-num {
    color: var(--ktk);
}

.cs-hero__ribbon-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-hero__ribbon-label {
    color: var(--text-muted);
}

/* ── Pinned stage ───────────────────────────────────────── */
#cs-stage {
    position: relative;
    overflow: hidden;
    overflow: clip;
}

/* ── Coin — Lottie animation ───────────────────────────── */
#cs-coin {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 65%;
    pointer-events: none;
    will-change: transform;
}

#cs-coin__bob {
    will-change: transform;
}

#cs-coin__lottie {
    width: clamp(220px, min(30vw, 40vh), 380px);
    aspect-ratio: 1;
}

/* Shadow beneath the coin */
#cs-coin__shadow {
    width: clamp(140px, 18vw, 240px);
    height: 20px;
    margin: 1rem auto 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.12) 0%, transparent 70%);
    filter: blur(6px);
    will-change: transform, opacity;
}

[data-theme="dark"] #cs-coin__shadow {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
}

/* ── Phone mockup ───────────────────────────────────────── */
#cs-phone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
}

#cs-phone__frame {
    position: relative;
    width: clamp(260px, 22vw, 320px);
    max-height: 80dvh;
    aspect-ratio: 393 / 852;
    background: #1a1a1a;
    border-radius: clamp(36px, 3.2vw, 48px);
    padding: clamp(8px, 0.7vw, 12px);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 40px 80px -20px rgba(0,0,0,0.35),
        0 0 0 1px rgba(0,0,0,0.15);
    will-change: transform, filter;
}

[data-theme="dark"] #cs-phone__frame {
    background: #111;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 40px 80px -20px rgba(0,0,0,0.6),
        0 0 0 1px rgba(0,0,0,0.4);
}

/* Dynamic Island */
#cs-phone__notch {
    position: absolute;
    top: clamp(14px, 1.3vw, 20px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(72px, 6.5vw, 96px);
    height: clamp(22px, 2vw, 28px);
    background: #000;
    border-radius: 100px;
    z-index: 5;
}

/* Screen area */
#cs-phone__screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: clamp(28px, 2.5vw, 38px);
    overflow: hidden;
    background: #ffffff;
}

#cs-phone__ui {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* ══════════════════════════════════════════════════════════
   1b. TEAM & MY ROLE — Team Cards
   ══════════════════════════════════════════════════════════ */
#cs-team {
    position: relative;
    width: 100%;
    background-color: var(--bg);
    padding: 10vh 0 12vh;
    box-sizing: border-box;
}

[data-theme="dark"] #cs-team {
    background-color: var(--bg);
}

#cs-team__header {
    text-align: left;
    margin-bottom: 5vh;
    padding: 0 5vw;
}

#cs-team__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0.8rem 0 0;
}

[data-theme="dark"] #cs-team__title {
    color: var(--text-primary);
}

/* ── Team Cards ──────────────────────────────────────── */
#cs-team__cards-wrap {
    padding: 0 5vw;
    overflow: hidden;
}
#cs-team__cards {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
}
#cs-team__cards::-webkit-scrollbar {
    display: none;
}

.cs-team__card {
    flex: 0 0 160px;
    padding: 1.4rem 1.2rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.6rem;
    opacity: 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .cs-team__card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.cs-team__card-icon {
    font-size: 1.2rem;
    color: var(--text-primary);
}

[data-theme="dark"] .cs-team__card-icon {
    color: var(--text-primary);
}

.cs-team__card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-team__card-title {
    color: var(--text-primary);
}

.cs-team__card-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-team__card-tag {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   2. THE BROKEN EXPERIENCE
   ══════════════════════════════════════════════════════════ */
#cs-broken {
    position: relative;
    width: 100%;
    background-color: var(--bg);
    padding: 12vh 5vw;
    box-sizing: border-box;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-broken {
    background-color: var(--bg);
}

#cs-broken__inner {
    max-width: 100%;
}

#cs-broken__header {
    text-align: left;
    margin-bottom: 6vh;
}

#cs-broken__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0.8rem 0 1rem;
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-broken__title {
    color: var(--text-primary);
}

#cs-broken__subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    max-width: 600px;
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-broken__subtitle {
    color: var(--text-secondary);
}

/* Grid: donut left, bars right */
#cs-broken__grid {
    display: flex;
    gap: 5vw;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 5vh;
}

/* ── Donut chart ───────────────────────────────────────── */
#cs-broken__audit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    flex: 0 0 auto;
}

#cs-broken__donut-wrap {
    position: relative;
    width: 220px;
    height: 220px;
}

#cs-broken__donut {
    width: 100%;
    height: 100%;
}

.cs-broken__ring-bg {
    stroke: rgba(0, 0, 0, 0.08);
    fill: none;
    transition: stroke 0.3s ease;
}

[data-theme="dark"] .cs-broken__ring-bg {
    stroke: rgba(255, 255, 255, 0.08);
}

.cs-broken__ring {
    fill: none;
    stroke-linecap: round;
}

.cs-broken__ring--tactical {
    stroke: var(--ktk);
    transition: stroke 0.3s ease;
}

[data-theme="dark"] .cs-broken__ring--tactical {
    stroke: var(--ktk);
}

.cs-broken__ring--strategic {
    stroke: var(--ktk);
    transition: stroke 0.3s ease;
}

[data-theme="dark"] .cs-broken__ring--strategic {
    stroke: var(--ktk);
}

/* Center number */
#cs-broken__donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cs-broken__donut-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-broken__donut-num {
    color: var(--text-primary);
}

#cs-broken__donut-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

[data-theme="dark"] #cs-broken__donut-label {
    color: var(--text-muted);
}

/* Legend */
#cs-broken__audit-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-broken__legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-broken__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cs-broken__legend-dot--tactical {
    background: var(--ktk);
}

[data-theme="dark"] .cs-broken__legend-dot--tactical {
    background: var(--ktk);
}

.cs-broken__legend-dot--strategic {
    background: var(--ktk);
}

[data-theme="dark"] .cs-broken__legend-dot--strategic {
    background: var(--ktk);
}

.cs-broken__legend-dot--critical {
    background: var(--ktk);
}

.cs-broken__legend-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-secondary);
}

[data-theme="dark"] .cs-broken__legend-text {
    color: var(--text-secondary);
}

.cs-broken__legend-text strong {
    font-weight: 600;
    color: var(--text-primary);
}

[data-theme="dark"] .cs-broken__legend-text strong {
    color: var(--text-primary);
}

/* ── Bar chart ─────────────────────────────────────────── */
#cs-broken__bench {
    flex: 1;
    max-width: 420px;
}

#cs-broken__bench-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1.2rem;
}

[data-theme="dark"] #cs-broken__bench-title {
    color: var(--text-muted);
}

#cs-broken__bars {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cs-broken__bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 36px;
    gap: 0.8rem;
    align-items: center;
}

.cs-broken__bar-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: right;
}

[data-theme="dark"] .cs-broken__bar-label {
    color: var(--text-secondary);
}

.cs-broken__bar-row--highlight .cs-broken__bar-label {
    font-weight: 600;
    color: var(--text-primary);
}

[data-theme="dark"] .cs-broken__bar-row--highlight .cs-broken__bar-label {
    color: var(--text-primary);
}

.cs-broken__bar-track {
    position: relative;
    height: 20px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

/* Reference gridlines inside bar track */
.cs-broken__bar-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to right,
        transparent,
        transparent calc(20% - 0.5px),
        rgba(0, 0, 0, 0.08) calc(20% - 0.5px),
        rgba(0, 0, 0, 0.08) 20%
    );
    z-index: 1;
    pointer-events: none;
}

[data-theme="dark"] .cs-broken__bar-track {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .cs-broken__bar-track::before {
    background: repeating-linear-gradient(
        to right,
        transparent,
        transparent calc(20% - 0.5px),
        rgba(255, 255, 255, 0.08) calc(20% - 0.5px),
        rgba(255, 255, 255, 0.08) 20%
    );
}

.cs-broken__bar-fill {
    height: 100%;
    background: var(--ktk);
    border-radius: 4px;
    width: 0;
}

[data-theme="dark"] .cs-broken__bar-fill {
    background: var(--ktk);
}

.cs-broken__bar-fill--kb {
    background: var(--ktk);
}

[data-theme="dark"] .cs-broken__bar-fill--kb {
    background: var(--ktk);
}

.cs-broken__bar-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
}

[data-theme="dark"] .cs-broken__bar-score {
    color: var(--text-secondary);
}

.cs-broken__bar-row--highlight .cs-broken__bar-score {
    color: var(--ktk);
    font-weight: 600;
}

[data-theme="dark"] .cs-broken__bar-row--highlight .cs-broken__bar-score {
    color: var(--ktk);
}

/* Axis labels below bars */
#cs-broken__bench-axis {
    display: flex;
    padding-left: calc(100px + 0.8rem);
    padding-right: calc(36px + 0.8rem);
    margin-top: 0.2rem;
}

#cs-broken__bench-axis span {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    color: var(--text-muted);
}

#cs-broken__bench-axis span:last-child {
    flex: 0;
    text-align: right;
}

[data-theme="dark"] #cs-broken__bench-axis span {
    color: var(--text-muted);
}

#cs-broken__bench-scale {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-muted);
    text-align: left;
    margin: 1rem 0 0;
    font-style: italic;
}

[data-theme="dark"] #cs-broken__bench-scale {
    color: var(--text-muted);
}

/* ── Callout ───────────────────────────────────────────── */
#cs-broken__callout {
    border-left: 3px solid var(--ktk);
    padding: 1.5rem 2rem;
    background-color: var(--ktk-dim);
    border-radius: 0 8px 8px 0;
    max-width: 700px;
    margin: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] #cs-broken__callout {
    background-color: var(--ktk-dim);
    border-left-color: var(--ktk);
}

#cs-broken__callout-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    font-style: italic;
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-broken__callout-text {
    color: var(--text-primary);
}

#cs-broken__callout-source {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-broken__callout-source {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   3. UNDERSTANDING THE USERS
   ══════════════════════════════════════════════════════════ */
#cs-users {
    position: relative;
    width: 100%;
    background-color: var(--bg);
    padding: 10vh 5vw 6vh;
    box-sizing: border-box;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-users {
    background-color: var(--bg);
}

#cs-users__inner {
    max-width: 100%;
}

#cs-users__header {
    text-align: left;
    margin-bottom: 5vh;
}

#cs-users__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0.8rem 0 1rem;
}

[data-theme="dark"] #cs-users__title {
    color: var(--text-primary);
}

#cs-users__preamble {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    max-width: 560px;
}

[data-theme="dark"] #cs-users__preamble {
    color: var(--text-secondary);
}

/* Persona section label */
#cs-users__persona-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    text-align: left;
}

[data-theme="dark"] #cs-users__persona-label {
    color: var(--text-muted);
}

/* ── Persona cards ─────────────────────────────────────── */
#cs-users__personas {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    margin-bottom: 5vh;
}

.cs-persona {
    flex: 1;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.8rem 1.2rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    position: relative;
}

[data-theme="dark"] .cs-persona {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-persona__icon {
    font-size: 1.3rem;
    color: var(--ktk);
    margin-bottom: 0.2rem;
}

[data-theme="dark"] .cs-persona__icon {
    color: var(--ktk);
}

.cs-persona__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

[data-theme="dark"] .cs-persona__title {
    color: var(--text-primary);
}

.cs-persona__desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

[data-theme="dark"] .cs-persona__desc {
    color: var(--text-secondary);
}

/* Locked persona (HNI) */
.cs-persona--locked {
    opacity: 0.65;
}

.cs-persona__badge {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.2em 0.6em;
    border-radius: 4px;
}

[data-theme="dark"] .cs-persona__badge {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}

/* Findings header */
#cs-users__findings-header {
    text-align: left;
    margin-bottom: 3vh;
}

#cs-users__findings-label {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0;
}

[data-theme="dark"] #cs-users__findings-label {
    color: var(--text-secondary);
}

/* ── Research findings — Isotype pictograph rows ── */
#cs-research__findings {
    display: flex;
    flex-direction: column;
}

.cs-research__finding {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cs-research__finding:last-child {
    border-bottom: none;
}

[data-theme="dark"] .cs-research__finding {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.cs-research__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 0.6rem 0;
}

[data-theme="dark"] .cs-research__title {
    color: var(--text-primary);
}

.cs-research__body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 440px;
}

[data-theme="dark"] .cs-research__body {
    color: var(--text-secondary);
}

.cs-research__viz {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
}

.cs-research__pictograph {
    display: flex;
    gap: 4px;
}

.cs-research__person {
    position: relative;
    width: 18px;
    height: 32px;
    flex-shrink: 0;
}

.cs-research__person-bg,
.cs-research__person-fill {
    position: absolute;
    inset: 0;
}

.cs-research__person-bg svg,
.cs-research__person-fill svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cs-research__person-bg {
    color: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .cs-research__person-bg {
    color: rgba(255, 255, 255, 0.08);
}

.cs-research__person-fill {
    color: var(--ktk);
    clip-path: inset(0 100% 0 0);
}

[data-theme="dark"] .cs-research__person-fill {
    color: var(--ktk);
}

.cs-research__stat {
    text-align: right;
    line-height: 1.2;
    margin: 0;
}

.cs-research__num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--ktk);
}

[data-theme="dark"] .cs-research__num {
    color: var(--ktk);
}

.cs-research__pct {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 300;
    color: var(--ktk);
}

[data-theme="dark"] .cs-research__pct {
    color: var(--ktk);
}

.cs-research__stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ktk);
    opacity: 0.7;
}

[data-theme="dark"] .cs-research__stat-label {
    color: var(--ktk);
}

/* ══════════════════════════════════════════════════════════
   4. THE PRINCIPLES — Strategy (3 side-by-side cards)
   ══════════════════════════════════════════════════════════ */
#cs-strategy {
    position: relative;
    width: 100%;
    padding: 10vh 5vw;
    background-color: var(--bg);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-strategy {
    background-color: var(--bg);
}

#cs-strategy__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5vh;
    width: 100%;
    max-width: 100%;
}

#cs-strategy__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    align-items: flex-start;
}

#cs-strategy__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ktk);
    margin: 0;
}

[data-theme="dark"] #cs-strategy__label {
    color: var(--ktk);
}

#cs-strategy__desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
    max-width: 520px;
}

[data-theme="dark"] #cs-strategy__desc {
    color: var(--text-primary);
}

#cs-strategy__stage {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: flex-start;
}

.cs-strategy__slide {
    flex: 1;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 2rem 1.5rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

[data-theme="dark"] .cs-strategy__slide {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-strategy__step-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--ktk);
}

[data-theme="dark"] .cs-strategy__step-num {
    color: var(--ktk);
}

.cs-strategy__step-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

[data-theme="dark"] .cs-strategy__step-title {
    color: var(--text-primary);
}

.cs-strategy__step-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.82rem, 1vw, 0.92rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

[data-theme="dark"] .cs-strategy__step-desc {
    color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════
   5–8. DECISION SECTIONS (shared styles)
   ══════════════════════════════════════════════════════════ */
#cs-decision1,
#cs-decision2,
#cs-decision3,
#cs-decision4,
#cs-devbridge {
    position: relative;
    width: 100%;
    padding: 10vh 5vw;
    background-color: var(--bg);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-decision1,
[data-theme="dark"] #cs-decision2,
[data-theme="dark"] #cs-decision3,
[data-theme="dark"] #cs-decision4,
[data-theme="dark"] #cs-devbridge {
    background-color: var(--bg);
}

#cs-decision1__inner,
#cs-decision2__inner,
#cs-decision3__inner,
#cs-decision4__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4rem;
    width: 100%;
    max-width: 100%;
}
#cs-devbridge__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5vh;
    width: 100%;
    max-width: 100%;
}

/* Decision split: text left, images right */
.cs-decision__header {
    flex: 1 1 45%;
    min-width: 0;
}
.cs-decision__evidence,
.cs-decision__evidence--pair,
.cs-decision__evidence--triple {
    flex: 1 1 50%;
    min-width: 0;
}

/* Tradeoffs and other extras below the split */
#cs-tradeoffs,
.cs-decision__nudge,
.cs-decision__footnote,
#cs-design__stats,
#cs-ia__comparison,
.ktk-slider {
    flex-basis: 100%;
}

@media (max-width: 768px) {
    #cs-decision1__inner,
    #cs-decision2__inner,
    #cs-decision3__inner,
    #cs-decision4__inner {
        flex-direction: column;
    }
}

/* Decision header */
.cs-decision__header {
    text-align: left;
}

.cs-decision__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0.8rem 0 1.2rem;
}

[data-theme="dark"] .cs-decision__title {
    color: var(--text-primary);
}

.cs-decision__narrative {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    max-width: 620px;
}

[data-theme="dark"] .cs-decision__narrative {
    color: var(--text-secondary);
}

.cs-decision__narrative:last-child {
    margin-bottom: 0;
}

/* Footnote callout */
.cs-decision__footnote {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    max-width: 600px;
}

[data-theme="dark"] .cs-decision__footnote {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-decision__footnote p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
    text-align: left;
    font-style: italic;
}

[data-theme="dark"] .cs-decision__footnote p {
    color: var(--text-secondary);
}

/* ── Design stats (moved into Decision 1) ──────────────── */
#cs-design__stats {
    display: flex;
    gap: 3vw;
    width: 100%;
    justify-content: flex-start;
}

.cs-design__stat {
    flex: 1;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .cs-design__stat {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-design__before,
.cs-design__after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 80px;
}

.cs-design__num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(10px);
}

[data-theme="dark"] .cs-design__num {
    color: var(--text-muted);
}

.cs-design__after .cs-design__num {
    color: var(--ktk);
}

[data-theme="dark"] .cs-design__after .cs-design__num {
    color: var(--ktk);
}

.cs-design__num--text {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    letter-spacing: -0.02em;
}

.cs-design__unit {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    text-align: left;
    opacity: 0;
}

[data-theme="dark"] .cs-design__unit {
    color: var(--text-muted);
}

.cs-design__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.cs-design__arrow .material-symbols-outlined {
    font-size: 1.4rem;
    color: var(--ktk);
}

[data-theme="dark"] .cs-design__arrow .material-symbols-outlined {
    color: var(--ktk);
}

.cs-design__subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    text-align: left;
    margin: 0;
    opacity: 0;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .cs-design__subtitle {
    color: var(--text-muted);
}

/* ── Before/After IA comparison ───────────────────────── */
#cs-ia__comparison {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: 800px;
}

.cs-ia__side {
    flex: 1;
}

.cs-ia__side-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
    text-align: left;
}

[data-theme="dark"] .cs-ia__side-label {
    color: var(--text-muted);
}

/* Before: scattered pills */
.cs-ia__scattered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 1.2rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed rgba(0, 0, 0, 0.12);
    justify-content: flex-start;
}

[data-theme="dark"] .cs-ia__scattered {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.cs-ia__pill {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 0.25em 0.5em;
    white-space: nowrap;
    line-height: 1.4;
}

.cs-ia__pill:nth-child(3n+1) { transform: rotate(-2deg); }
.cs-ia__pill:nth-child(3n+2) { transform: rotate(1.5deg); }
.cs-ia__pill:nth-child(5n)   { transform: rotate(-3deg); margin-top: 2px; }
.cs-ia__pill:nth-child(7n)   { transform: rotate(2.5deg); margin-bottom: 3px; }

[data-theme="dark"] .cs-ia__pill {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Divider arrow */
.cs-ia__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4rem;
    flex-shrink: 0;
}

.cs-ia__divider .material-symbols-outlined {
    font-size: 1.6rem;
    color: var(--ktk);
}

[data-theme="dark"] .cs-ia__divider .material-symbols-outlined {
    color: var(--ktk);
}

/* After: organized groups */
.cs-ia__organized {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.cs-ia__group {
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .cs-ia__group {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-ia__group-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ktk);
    margin: 0 0 0.4rem;
}

[data-theme="dark"] .cs-ia__group-title {
    color: var(--ktk);
}

.cs-ia__group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.cs-ia__item {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 0.2em 0.45em;
    white-space: nowrap;
    line-height: 1.4;
}

[data-theme="dark"] .cs-ia__item {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

/* ── Decision evidence: phone mockups ──────────────────── */
.cs-decision__evidence {
    display: flex;
    justify-content: flex-start;
}

.cs-decision__evidence--pair {
    gap: clamp(1.5rem, 3vw, 3rem);
}

/* ── Nudge section (Decision 4) ────────────────────────── */
.cs-decision__nudge {
    max-width: 620px;
    text-align: left;
}

.cs-decision__nudge-label {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 1.2rem;
}

[data-theme="dark"] .cs-decision__nudge-label {
    color: var(--text-primary);
}

.cs-decision__nudge-examples {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.cs-decision__nudge-card {
    flex: 1;
    max-width: 280px;
    padding: 2rem 1.5rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .cs-decision__nudge-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-decision__nudge-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

[data-theme="dark"] .cs-decision__nudge-text {
    color: var(--text-secondary);
}

.cs-decision__nudge-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
}

[data-theme="dark"] .cs-decision__nudge-note {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   9. BRIDGING DESIGN TO DEV
   ══════════════════════════════════════════════════════════ */
#cs-devbridge__points {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: flex-start;
}

.cs-devbridge__point {
    flex: 1;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.8rem 1.2rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

[data-theme="dark"] .cs-devbridge__point {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-devbridge__point-icon {
    font-size: 1.3rem;
    color: var(--ktk);
}

[data-theme="dark"] .cs-devbridge__point-icon {
    color: var(--ktk);
}

.cs-devbridge__point-text h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
}

[data-theme="dark"] .cs-devbridge__point-text h4 {
    color: var(--text-primary);
}

.cs-devbridge__point-text p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

[data-theme="dark"] .cs-devbridge__point-text p {
    color: var(--text-secondary);
}

/* ── Dev Bridge image ─────────────────────────────────── */
.cs-devbridge__image {
    width: 100%;
    max-width: 700px;
    text-align: left;
}

.cs-devbridge__img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: block;
    transition: border-color 0.3s ease;
}

[data-theme="dark"] .cs-devbridge__img {
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-devbridge__img-caption {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.8rem;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-devbridge__img-caption {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   10. THE RESULTS
   ══════════════════════════════════════════════════════════ */
#cs-results {
    position: relative;
    width: 100%;
    padding: 12vh 5vw;
    background-color: var(--bg);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-results {
    background-color: var(--bg);
}

#cs-results__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5vh;
    width: 100%;
    max-width: 100%;
}

#cs-results__header {
    text-align: left;
}

#cs-results__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0.8rem 0 0;
}

[data-theme="dark"] #cs-results__title {
    color: var(--text-primary);
}

/* Results stats row */
#cs-results__stats {
    display: flex;
    gap: 3vw;
    width: 100%;
    justify-content: flex-start;
}

.cs-results__stat {
    flex: 1;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1.5rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

[data-theme="dark"] .cs-results__stat {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-results__num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 5vw, 4.2rem);
    font-weight: 600;
    line-height: 1;
    color: var(--ktk);
}

[data-theme="dark"] .cs-results__num {
    color: var(--ktk);
}

.cs-results__pct {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 400;
    color: var(--ktk);
}

[data-theme="dark"] .cs-results__pct {
    color: var(--ktk);
}

.cs-results__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary);
}

[data-theme="dark"] .cs-results__label {
    color: var(--text-secondary);
}

#cs-results__note {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
    text-align: left;
    font-style: italic;
}

[data-theme="dark"] #cs-results__note {
    color: var(--text-muted);
}

/* ── Section divider ───────────────────────────────────── */
.cs-section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.1) 80%, transparent);
    margin: 0;
}

[data-theme="dark"] .cs-section-divider {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent);
}

/* ══════════════════════════════════════════════════════════
   11. THE CRAFT — Design system gallery
   ══════════════════════════════════════════════════════════ */
#cs-craft {
    position: relative;
    width: 100%;
    padding: 10vh 5vw 12vh;
    background-color: var(--bg);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-craft {
    background-color: var(--bg);
}

#cs-craft__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6vh;
    width: 100%;
    max-width: 100%;
}

#cs-craft__header {
    text-align: left;
}

#cs-craft__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0.8rem 0 0;
}

[data-theme="dark"] #cs-craft__title {
    color: var(--text-primary);
}

/* Craft intro paragraph */
#cs-craft__intro {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 1rem auto 0;
    max-width: 620px;
    text-align: left;
}

[data-theme="dark"] #cs-craft__intro {
    color: var(--text-secondary);
}

/* Sub-section titles */
.cs-craft__sub-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 2rem;
    text-align: left;
}

[data-theme="dark"] .cs-craft__sub-title {
    color: var(--text-muted);
}

#cs-craft__colours,
#cs-craft__icons {
    width: 100%;
}

/* ── Colours palette ───────────────────────────────────── */
#cs-colours__grid {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    justify-content: flex-start;
}

#cs-colours__main {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.cs-colour-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cs-colour-card__stack {
    position: relative;
    width: 220px;
    height: 150px;
}

.cs-colour-card__swatch {
    position: absolute;
    width: 140px;
    height: 100px;
    border-radius: 14px;
    top: 0;
}

.cs-colour-card__swatch:nth-child(1) { left: 0; }
.cs-colour-card__swatch:nth-child(2) { left: 22px; top: 8px; }
.cs-colour-card__swatch:nth-child(3) { left: 44px; top: 16px; }
.cs-colour-card__swatch:nth-child(4) { left: 66px; top: 24px; }

.cs-colour-card__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

[data-theme="dark"] .cs-colour-card__label {
    color: var(--text-muted);
}

.cs-colour-card__name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
}

[data-theme="dark"] .cs-colour-card__name {
    color: var(--text-primary);
}

.cs-colour-card__hex {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

[data-theme="dark"] .cs-colour-card__hex {
    color: var(--text-muted);
}

#cs-colours__secondary {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.cs-colours__group-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.8rem;
}

[data-theme="dark"] .cs-colours__group-label {
    color: var(--text-muted);
}

.cs-colours__row {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.cs-colour-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.cs-colour-chip__swatch {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

.cs-colour-chip__name {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-primary);
}

[data-theme="dark"] .cs-colour-chip__name {
    color: var(--text-primary);
}

.cs-colour-chip__hex {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

[data-theme="dark"] .cs-colour-chip__hex {
    color: var(--text-muted);
}

/* WCAG contrast badge */
.cs-colour-chip__wcag {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    line-height: 1.3;
}

.cs-colour-chip__wcag--aaa {
    color: #00745D;
    background: rgba(0, 116, 93, 0.12);
}

[data-theme="dark"] .cs-colour-chip__wcag--aaa {
    color: var(--ktk);
    background: rgba(255, 255, 255, 0.08);
}

.cs-colour-chip__wcag--aa {
    color: var(--ktk);
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .cs-colour-chip__wcag--aa {
    color: var(--ktk);
    background: rgba(255, 255, 255, 0.06);
}

.cs-colour-chip__wcag--aa-lg {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .cs-colour-chip__wcag--aa-lg {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
}

/* ── Icons grid ────────────────────────────────────────── */
#cs-icons__groups {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
}

.cs-icons__group-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

[data-theme="dark"] .cs-icons__group-label {
    color: var(--text-muted);
}

.cs-icons__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.8rem;
}

.cs-icons__grid i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .cs-icons__grid i {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.cs-icons__grid--block i {
    color: var(--text-primary);
}

[data-theme="dark"] .cs-icons__grid--block i {
    color: var(--text-primary);
}

/* Outline effect: stroke + paint-order for cross-browser support */
.cs-icons__grid--outline i {
    color: transparent;
    -webkit-text-stroke: 1.2px var(--text-muted);
    paint-order: stroke fill;
}

/* Firefox fallback: use low-opacity fill since -webkit-text-stroke is not supported */
@supports not (-webkit-text-stroke: 1px black) {
    .cs-icons__grid--outline i {
        color: var(--text-muted);
        opacity: 0.35;
    }
    [data-theme="dark"] .cs-icons__grid--outline i {
        color: var(--text-muted);
        opacity: 0.4;
    }
}

[data-theme="dark"] .cs-icons__grid--outline i {
    -webkit-text-stroke-color: var(--text-muted);
}

/* ── Screens — Phone frame pattern (reused across decisions) ── */
.cs-screens__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.cs-screens__frame {
    position: relative;
    width: clamp(180px, 18vw, 240px);
    aspect-ratio: 393 / 852;
    background: #1a1a1a;
    border-radius: clamp(24px, 2.4vw, 36px);
    padding: clamp(6px, 0.5vw, 9px);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 30px 60px -15px rgba(0,0,0,0.25),
        0 0 0 1px rgba(0,0,0,0.12);
}

[data-theme="dark"] .cs-screens__frame {
    background: #111;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 30px 60px -15px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0,0,0,0.35);
}

.cs-screens__notch {
    position: absolute;
    top: clamp(10px, 1vw, 15px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(50px, 5vw, 72px);
    height: clamp(16px, 1.5vw, 22px);
    background: #000;
    border-radius: 100px;
    z-index: 5;
}

.cs-screens__display {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: clamp(18px, 1.9vw, 28px);
    overflow: hidden;
    background: #fff;
}

.cs-screens__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.cs-screens__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ktk);
    margin: 0;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .cs-screens__label {
    color: var(--ktk);
}

/* ══════════════════════════════════════════════════════════
   11. SCREENS — Final design gallery (horizontal scroll)
   ══════════════════════════════════════════════════════════ */
#cs-screens {
    position: relative;
    width: 100%;
    padding: 10vh 0 10vh;
    background-color: var(--bg);
    box-sizing: border-box;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-screens {
    background-color: var(--bg);
}

#cs-screens__inner {
    display: flex;
    flex-direction: column;
    gap: 5vh;
    width: 100%;
}

#cs-screens__header {
    text-align: left;
    padding: 0 5vw;
}

#cs-screens__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0.8rem 0 0;
}

[data-theme="dark"] #cs-screens__title {
    color: var(--text-primary);
}

#cs-screens__carousel-wrap {
    position: relative;
}

#cs-screens__carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none;
    padding: 3rem 5vw 4rem 5vw;
    margin: 0;
    scrollbar-width: none;
}

#cs-screens__carousel::-webkit-scrollbar {
    display: none;
}

#cs-screens__carousel .cs-screens__phone {
    flex-shrink: 0;
}

/* ── Carousel navigation arrows ─────────────────── */
.cs-screens__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    padding: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.cs-screens__arrow.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cs-screens__arrow i {
    font-size: 14px;
    color: var(--ktk);
    transition: color 0.3s ease;
}

.cs-screens__arrow--left {
    left: max(2vw, 12px);
}

.cs-screens__arrow--right {
    right: max(2vw, 12px);
}

[data-theme="dark"] .cs-screens__arrow {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .cs-screens__arrow i {
    color: var(--ktk);
}

@media (hover: hover) and (pointer: fine) {
    .cs-screens__arrow:hover {
        border-color: var(--ktk);
    }
    [data-theme="dark"] .cs-screens__arrow:hover {
        border-color: var(--ktk);
    }
}

/* ── Image protection ──────────────────────────── */
.cs-screens__img,
#cs-phone__ui {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.cs-screens__display::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ══════════════════════════════════════════════════════════
   STEP 2: Constraints & Tradeoffs (Decision 3)
   ══════════════════════════════════════════════════════════ */
#cs-tradeoffs {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: flex-start;
}

.cs-tradeoff {
    flex: 1;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.8rem 1.2rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .cs-tradeoff {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.cs-tradeoff__icon {
    font-size: 1.3rem;
    color: var(--ktk);
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-tradeoff__icon {
    color: var(--ktk);
}

.cs-tradeoff__text h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-tradeoff__text h4 {
    color: var(--text-primary);
}

.cs-tradeoff__text p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-tradeoff__text p {
    color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════
   STEP 3: Process Artifacts Gallery
   ══════════════════════════════════════════════════════════ */
#cs-artifacts {
    margin-bottom: 5vh;
}

#cs-artifacts__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-align: left;
    margin: 0.5rem 0 1.5rem;
    transition: color 0.3s ease;
}

/* Artifacts carousel */
#cs-artifacts__carousel-wrap {
    position: relative;
}
#cs-artifacts__carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0;
}
#cs-artifacts__carousel::-webkit-scrollbar {
    display: none;
}

.cs-artifact {
    margin: 0;
    flex: 0 0 600px;
}

.cs-artifact__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    display: block;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

[data-theme="dark"] .cs-artifact__img {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.cs-artifact__caption {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.6rem;
    text-align: left;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-artifact__caption {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   STEP 4: Before/After Phone Comparisons
   ══════════════════════════════════════════════════════════ */

/* Decision 1: label above phone */
#cs-d1__phones .cs-screens__label {
    margin-bottom: 0.6rem;
}

/* Decision 4: triple layout with arrow divider */
.cs-decision__evidence--triple {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.cs-decision__evidence-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cs-decision__evidence-arrow .material-symbols-outlined {
    font-size: 1.6rem;
    color: var(--ktk);
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-decision__evidence-arrow .material-symbols-outlined {
    color: var(--ktk);
}

/* Decision 4: mobile-only "After" label — hidden on desktop */
.cs-d4__after-label-mobile {
    display: none;
}

/* Decision 4: after group — two phones with one centered label */
.cs-d4__after-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.cs-d4__after-phones {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
}

/* D4 after label — desktop version (hidden on mobile) */
.cs-d4__after-label-desktop {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   STEP 5: Reflection / Conclusion
   ══════════════════════════════════════════════════════════ */
#cs-reflection {
    position: relative;
    width: 100%;
    padding: 10vh 5vw 12vh;
    background-color: var(--bg);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transition: background-color 0.4s ease;
}

[data-theme="dark"] #cs-reflection {
    background-color: var(--bg);
}

#cs-reflection__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5vh;
    width: 100%;
    max-width: 100%;
}

#cs-reflection__header {
    text-align: left;
}

#cs-reflection__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0.8rem 0 0;
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-reflection__title {
    color: var(--text-primary);
}

#cs-reflection__lessons {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
}

.cs-reflection__lesson {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .cs-reflection__lesson {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.cs-reflection__lesson-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ktk);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    padding-top: 0.15rem;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-reflection__lesson-num {
    color: var(--ktk);
}

.cs-reflection__lesson-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cs-reflection__lesson-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-reflection__lesson-title {
    color: var(--text-primary);
}

.cs-reflection__lesson-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 0.95rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}

[data-theme="dark"] .cs-reflection__lesson-text {
    color: var(--text-secondary);
}

#cs-reflection__closing {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 400;
    color: var(--ktk);
    text-align: left;
    margin: 1rem 0 0;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

[data-theme="dark"] #cs-reflection__closing {
    color: var(--ktk);
}

/* Next Case Study card */
.cs-next-study-card {
    margin-top: 6vh;
    max-width: 700px;
    align-self: center;
    width: 100%;
}
.cs-next-study-card__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1.2rem;
    transition: color 0.3s ease;
}
.cs-next-study-card .work__visual--trust {
    background: linear-gradient(135deg, #071209 0%, #0e2016 40%, #153020 100%);
}
[data-theme="light"] .cs-next-study-card .work__visual--trust {
    background: linear-gradient(135deg, #f0f8f2 0%, #e0f0e4 40%, #d0e8d4 100%);
}
.cs-next-study-card .work__cover-illus {
    height: 60%;
    right: 12%;
}
.cs-next-study-card .work__meta {
    transform: none;
    opacity: 1;
}

/* ── Iris wipe transition overlay ───────────────────────── */
#cs-iris-wipe {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;
    pointer-events: all;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (601px – 1024px)
   ══════════════════════════════════════════════════════════ */
@media only screen and (min-width: 601px) and (max-width: 1024px) {

    #cs-hero__ribbon {
        gap: 0.8rem 1.2rem;
    }
    .cs-hero__ribbon-item:not(:last-child)::after {
        margin-left: 1.2rem;
    }
    #cs-broken__grid {
        gap: 3vw;
    }
    #cs-broken__donut-wrap {
        width: 180px;
        height: 180px;
    }
    .cs-broken__bar-row {
        grid-template-columns: 90px 1fr 32px;
    }
    #cs-strategy {
        padding: 8vh 5vw;
    }
    #cs-strategy__stage {
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: flex-start;
    }
    .cs-strategy__slide {
        max-width: 260px;
    }
    #cs-design__stats {
        gap: 2vw;
    }
    .cs-design__stat {
        padding: 2rem 1rem;
    }
    .cs-design__num {
        font-size: clamp(2rem, 3.5vw, 2.8rem);
    }
    .cs-decision__evidence--pair {
        gap: 2rem;
    }
    .cs-screens__frame {
        width: clamp(160px, 20vw, 200px);
    }
    #cs-devbridge__points {
        gap: 1rem;
    }
    #cs-results__stats {
        gap: 2vw;
    }
    .cs-results__stat {
        padding: 2.5rem 1rem;
    }
    #cs-colours__grid {
        flex-direction: column;
        align-items: flex-start;
    }
    #cs-colours__main {
        flex-direction: row;
        gap: 2.5rem;
    }
    #cs-colours__secondary {
        align-items: flex-start;
    }
    .cs-colours__row {
        justify-content: flex-start;
    }
    #cs-tradeoffs {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: flex-start;
    }
    .cs-tradeoff {
        max-width: 220px;
    }
    .cs-decision__evidence--triple {
        gap: 1.5rem;
    }
    .cs-decision__evidence--triple .cs-screens__frame {
        width: clamp(140px, 16vw, 180px);
    }
    .cs-icons__grid {
        grid-template-columns: repeat(8, 1fr);
    }

}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤600px)
   ══════════════════════════════════════════════════════════ */
@media only screen and (max-width: 600px) {

    #cs-hero {
        padding: 0 6vw;
    }
    #cs-hero__content {
        padding-top: 14vh;
    }
    #cs-hero__title {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }
    #cs-hero__title br {
        display: none;
    }
    #cs-coin__lottie {
        width: min(70vw, 300px);
    }
    #cs-phone__frame {
        width: clamp(185px, 48vw, 220px);
        max-height: 70dvh;
        border-radius: clamp(26px, 6.5vw, 34px);
        padding: clamp(6px, 1.5vw, 8px);
    }
    #cs-phone__notch {
        width: clamp(52px, 13vw, 68px);
        height: clamp(16px, 4vw, 20px);
        top: clamp(10px, 2.5vw, 14px);
    }
    #cs-phone__screen {
        border-radius: clamp(20px, 5.5vw, 28px);
    }
    .cs__back {
        top: 5vh;
        left: 5vw;
        font-size: 0.75rem;
        height: 36px;
        padding: 0 0.85em 0 0.65em;
    }
    #cs-hero__ribbon {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.6rem;
        margin-top: 1.5rem;
    }
    .cs-hero__ribbon-item {
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
    }
    .cs-hero__ribbon-item:not(:last-child)::after {
        display: none;
    }
    .cs-hero__ribbon-num {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .cs-hero__ribbon-label {
        font-size: 0.6rem;
        text-align: left;
        line-height: 1.3;
    }
    #cs-broken {
        padding: 8vh 6vw;
    }
    #cs-broken__grid {
        flex-direction: column;
        align-items: center;
        gap: 4vh;
    }
    #cs-broken__donut-wrap {
        width: 180px;
        height: 180px;
    }
    #cs-broken__donut-num {
        font-size: 2.2rem;
    }
    #cs-broken__bench {
        max-width: 100%;
        width: 100%;
    }
    .cs-broken__bar-row {
        grid-template-columns: 80px 1fr 30px;
        gap: 0.5rem;
    }
    .cs-broken__bar-label {
        font-size: 0.7rem;
    }
    .cs-broken__bar-score {
        font-size: 0.75rem;
    }
    #cs-broken__bench-axis {
        padding-left: calc(80px + 0.5rem);
        padding-right: calc(30px + 0.5rem);
    }
    #cs-broken__bench-axis span {
        font-size: 0.5rem;
    }
    #cs-broken__callout {
        padding: 1.2rem 1.4rem;
    }
    #cs-broken__callout-text {
        font-size: 0.92rem;
    }
    #cs-users {
        padding: 8vh 6vw 6vh;
    }
    #cs-users__personas {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .cs-persona {
        max-width: 100%;
        width: calc(100% - 2rem);
        padding: 1.4rem 1rem;
    }
    .cs-research__finding {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .cs-research__viz {
        align-items: flex-start;
    }
    .cs-research__person {
        width: 22px;
        height: 38px;
    }
    .cs-research__pictograph {
        gap: 5px;
    }
    .cs-research__stat {
        text-align: left;
    }
    #cs-strategy {
        padding: 8vh 6vw;
    }
    #cs-strategy__stage {
        flex-direction: column;
        gap: 1rem;
    }
    .cs-strategy__slide {
        max-width: 100%;
    }
    .cs-strategy__step-title {
        font-size: 1.3rem;
    }
    .cs-strategy__step-desc {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    #cs-strategy__desc {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
    }
    #cs-decision1,
    #cs-decision2,
    #cs-decision3,
    #cs-decision4,
    #cs-devbridge {
        padding: 8vh 6vw;
    }
    #cs-decision1__inner,
    #cs-decision2__inner,
    #cs-decision3__inner,
    #cs-decision4__inner,
    #cs-devbridge__inner {
        gap: 3vh;
    }
    .cs-decision__title {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
    }
    .cs-decision__narrative {
        font-size: 0.88rem;
        line-height: 1.65;
    }
    #cs-ia__comparison {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    .cs-ia__side {
        width: 100%;
    }
    .cs-ia__divider {
        padding-top: 0;
        transform: rotate(90deg);
    }
    #cs-design__stats {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }
    .cs-design__stat {
        max-width: 100%;
        width: calc(100% - 2rem);
        padding: 1.8rem 1.2rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.8rem;
    }
    .cs-design__before,
    .cs-design__after {
        min-width: 80px;
    }
    .cs-design__subtitle {
        width: 100%;
    }
    .cs-design__num {
        font-size: 2rem;
    }
    .cs-design__num--text {
        font-size: 1.8rem;
    }
    .cs-decision__evidence--pair {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding: 3rem 0 4rem;
        margin: -3rem 0 -4rem;
    }
    .cs-decision__evidence--pair .cs-screens__phone {
        flex-shrink: 0;
        scroll-snap-align: center;
    }
    .cs-screens__frame {
        width: 200px;
        border-radius: 28px;
        padding: 6px;
    }
    .cs-screens__notch {
        width: 52px;
        height: 18px;
        top: 11px;
    }
    .cs-screens__display {
        border-radius: 22px;
    }
    .cs-screens__label {
        font-size: 0.75rem;
    }
    .cs-decision__nudge-examples {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    .cs-decision__nudge-card {
        max-width: 100%;
        width: 100%;
    }
    #cs-devbridge__points {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .cs-devbridge__point {
        max-width: 100%;
        width: calc(100% - 2rem);
    }
    #cs-results {
        padding: 8vh 6vw;
    }
    #cs-results__stats {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }
    .cs-results__stat {
        max-width: 100%;
        width: calc(100% - 2rem);
        padding: 2rem 1.2rem;
    }
    .cs-results__num {
        font-size: clamp(2.4rem, 12vw, 3.2rem);
    }
    .cs-results__pct {
        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }
    #cs-screens {
        padding: 6vh 0;
    }
    #cs-screens__carousel .cs-screens__phone {
        min-width: 160px;
    }
    #cs-screens__carousel .cs-screens__frame {
        width: 160px;
    }
    #cs-screens__carousel {
        padding: 2rem 5vw 3rem 6vw;
        margin: 0;
        justify-content: flex-start;
    }
    .cs-screens__arrow {
        width: 36px;
        height: 36px;
    }
    .cs-screens__arrow .material-symbols-outlined {
        font-size: 18px;
    }
    #cs-craft {
        padding: 8vh 6vw 10vh;
    }
    #cs-craft__inner {
        gap: 4vh;
    }
    #cs-colours__grid {
        flex-direction: column;
        gap: 3rem;
    }
    #cs-colours__main {
        flex-direction: row;
        gap: 1.2rem;
        justify-content: flex-start;
    }
    .cs-colour-card__stack {
        width: 130px;
        height: 95px;
    }
    .cs-colour-card__swatch {
        width: 80px;
        height: 60px;
        border-radius: 10px;
    }
    .cs-colour-card__swatch:nth-child(2) { left: 14px; top: 5px; }
    .cs-colour-card__swatch:nth-child(3) { left: 28px; top: 10px; }
    .cs-colour-card__swatch:nth-child(4) { left: 42px; top: 15px; }
    .cs-colour-card__label {
        font-size: 0.55rem;
    }
    .cs-colour-card__name {
        font-size: 0.85rem;
    }
    .cs-colour-card__hex {
        font-size: 0.65rem;
    }
    .cs-colour-chip__swatch {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    .cs-colours__row {
        gap: 0.8rem;
    }
    #cs-tradeoffs {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .cs-tradeoff {
        max-width: 100%;
        width: calc(100% - 2rem);
    }
    .cs-artifact {
        flex: 0 0 300px;
    }
    #cs-d1__phones {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.8rem;
    }
    #cs-d1__phones .cs-screens__phone {
        flex-shrink: 1;
    }
    #cs-d1__phones .cs-screens__frame {
        width: clamp(130px, 38vw, 170px);
    }
    .cs-decision__evidence--triple {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.8rem;
    }
    .cs-decision__evidence--triple .cs-decision__evidence-arrow {
        display: none;
    }
    .cs-decision__evidence--triple > .cs-screens__phone {
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .cs-decision__evidence--triple > .cs-screens__phone .cs-screens__frame {
        width: clamp(130px, 38vw, 170px);
    }
    .cs-decision__evidence--triple > .cs-screens__phone .cs-screens__label {
        order: -1;
        margin-bottom: 0.6rem;
    }
    .cs-d4__after-group {
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        overflow: visible;
    }
    .cs-d4__after-label-mobile {
        display: block;
        margin-bottom: 0.6rem;
    }
    .cs-d4__extra-phone {
        display: none;
    }
    .cs-d4__after-label-desktop {
        display: none;
    }
    .cs-d4__after-phones {
        gap: 0;
    }
    .cs-d4__after-phones .cs-screens__frame {
        width: clamp(130px, 38vw, 170px);
    }
    #cs-reflection {
        padding: 8vh 6vw 10vh;
    }
    #cs-reflection__inner {
        gap: 3vh;
    }
    #cs-reflection__lessons {
        flex-direction: column;
    }
    .cs-reflection__lesson {
        padding: 1.4rem 1.2rem;
        gap: 1rem;
    }
    .cs-reflection__lesson-title {
        font-size: 0.92rem;
    }
    .cs-reflection__lesson-text {
        font-size: 0.86rem;
        line-height: 1.65;
    }
    #cs-reflection__closing {
        font-size: 0.95rem;
    }
    .cs-next-study {
        font-size: 0.75rem;
    }
    .cs-icons__grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.6rem;
    }
    .cs-icons__grid i {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    #cs-team {
        padding: 6vh 0;
    }
    #cs-team__header {
        padding: 0 6vw;
        margin-bottom: 3vh;
    }
    #cs-team__cards {
        scroll-snap-type: none;
        justify-content: flex-start;
        gap: 0.8rem;
    }
    .cs-team__card {
        flex: 0 0 130px;
    }
    .cs-team__card:first-child {
        margin-left: 0;
    }

}

/* ── Safe-area-inset for notched / rounded-corner devices ── */
@supports (padding: env(safe-area-inset-top)) {

    .cs__back {
        top: calc(5vh + env(safe-area-inset-top));
        left: calc(5vw + env(safe-area-inset-left));
    }

    footer {
        padding-bottom: calc(4vh + env(safe-area-inset-bottom));
    }

    @media only screen and (max-width: 600px) {
        footer {
            padding-bottom: calc(4vh + env(safe-area-inset-bottom));
        }
    }

}

/* ══════════════════════════════════════════════════════════
   KTK-SPECIFIC ADDITIONS
   ══════════════════════════════════════════════════════════ */

/* ── Accent tokens ── */
:root {
    --ktk: #92278E;
    --ktk-dim: rgba(146, 39, 142, 0.06);
    --ktk-border: rgba(146, 39, 142, 0.15);
    --ktk-card: rgba(146, 39, 142, 0.04);
}
[data-theme="dark"] {
    --ktk: #FFB861;
    --ktk-dim: rgba(255, 184, 97, 0.06);
    --ktk-border: rgba(255, 184, 97, 0.15);
    --ktk-card: rgba(255, 184, 97, 0.04);
}

/* ── Cinematic background orbs ── */
.ktk-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.ktk-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    will-change: transform;
}
.ktk-bg__orb--1 {
    width: 600px; height: 600px;
    background: var(--ktk);
    top: -10%; right: -5%;
    animation: ktk-drift1 25s ease-in-out infinite alternate;
}
.ktk-bg__orb--2 {
    width: 500px; height: 500px;
    background: #C7246F;
    bottom: 20%; left: -10%;
    animation: ktk-drift2 30s ease-in-out infinite alternate;
}
.ktk-bg__orb--3 {
    width: 400px; height: 400px;
    background: var(--ktk);
    top: 50%; right: 20%;
    opacity: 0.06;
    animation: ktk-drift3 20s ease-in-out infinite alternate;
}
[data-theme="dark"] .ktk-bg__orb { opacity: 0.08; }

@keyframes ktk-drift1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-80px,60px) scale(1.15); } }
@keyframes ktk-drift2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px,-50px) scale(1.1); } }
@keyframes ktk-drift3 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px,-30px) scale(0.9); } }

/* ── Scroll progress bar ── */
.ktk-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: var(--ktk);
    z-index: 100001;
    width: 0%;
    transform-origin: left;
}

/* ── All sections transparent + above orbs ── */
#cs-stage, #cs-team, #cs-broken, #cs-users, #ktk-personas,
#cs-strategy, #cs-decision1, #cs-decision2, #cs-decision3, #cs-decision4,
#cs-devbridge, #cs-results, #cs-screens, #cs-craft, #cs-reflection, footer {
    position: relative;
    z-index: 1;
}

/* ── Split hero layout ── */
#cs-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding: 0 5vw !important;
}
#cs-hero__split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 8vw, 10rem);
    width: 100%;
    box-sizing: border-box;
}
#cs-hero__content {
    text-align: left;
    max-width: 800px;
    flex: 1 1 60%;
    padding-top: 0 !important;
    opacity: 0;
}
#cs-hero__title {
    font-size: clamp(2.8rem, 5.5vw, 5rem) !important;
}
#cs-hero__ribbon {
    justify-content: flex-start !important;
    align-items: center !important;
}
.cs-hero__ribbon-item {
    align-items: center !important;
}
#cs-hero__phone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#cs-hero__phone #cs-coin {
    position: absolute;
    left: 50%;
    top: 22.5%;
    z-index: 20;
    pointer-events: none;
}
#cs-hero__phone #cs-coin__lottie {
    width: clamp(136px, 18.7vw, 238px);
}
#cs-hero__phone #cs-coin__shadow {
    display: none;
}
#cs-hero__phone-img {
    width: auto;
    height: clamp(400px, 55vh, 600px);
    border-radius: 32px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08);
    object-fit: contain;
}
[data-theme="dark"] #cs-hero__phone-img {
    box-shadow: 0 24px 80px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    #cs-hero__split {
        flex-direction: column;
        gap: 3rem;
        padding: clamp(14vh, 18vh, 22vh) 0 6vh;
    }
    #cs-hero__content {
        text-align: center !important;
        max-width: 100%;
    }
    #cs-hero__ribbon {
        justify-content: center !important;
        flex-wrap: wrap;
    }
    #cs-hero__phone-img {
        height: clamp(220px, 35vh, 320px);
        border-radius: 20px;
    }
    #cs-hero__phone #cs-coin__lottie {
        width: clamp(116px, 16vw, 203px);
    }
    #cs-hero__ribbon {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
    }
    .cs-hero__ribbon-item:not(:last-child)::after {
        display: inline !important;
        margin-left: 1.5rem !important;
    }
    .cs-hero__ribbon-item {
        flex-direction: row !important;
        align-items: center !important;
    }
    #cs-hero__ribbon {
        display: flex !important;
    }
}

/* ── Team section ── */
#cs-team { padding-top: 0 !important; }
#cs-team__cards-wrap {
    position: relative;
}
.ktk-team__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}
.ktk-team__arrow i {
    font-size: 14px;
    color: var(--ktk);
}
.ktk-team__arrow--left { left: 1vw; }
.ktk-team__arrow--right { right: 1vw; }
[data-theme="light"] .ktk-team__arrow {
    border-color: rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.85);
}
.cs-team__card-icon { color: var(--ktk) !important; }
[data-theme="dark"] .cs-team__card-icon { color: var(--ktk) !important; }
.ktk-lead {
    border: 1px solid var(--ktk-border) !important;
    background: var(--ktk-card) !important;
}

/* ── Challenge section accent overrides ── */
.cs-section-label { color: var(--ktk) !important; }
.cs-hero__ribbon-num { color: var(--ktk) !important; }
[data-theme="dark"] .cs-hero__ribbon-num { color: var(--ktk) !important; }
.cs-hero__ribbon-item:not(:last-child)::after { color: var(--text-muted) !important; }

/* Phone frame neutral */
.cs-screens__frame, #cs-phone__frame { background: #1a1a1a !important; }

/* ── Issue stacked horizontal bars ── */
#ktk-issues {
    margin-bottom: 5vh;
}
#ktk-issues__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}
#ktk-issues__bars {
    display: flex;
    gap: 3rem;
    margin-bottom: 3rem;
}
.ktk-hbar { flex: 1; }
.ktk-hbar__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.ktk-hbar__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ktk);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ktk-hbar__total {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--text-primary);
    font-weight: 500;
}
.ktk-hbar__pct {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.3rem;
}
.ktk-hbar__track {
    display: flex;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    gap: 2px;
}
.ktk-hbar__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
}
.ktk-hbar__seg--crit { background: var(--ktk); }
.ktk-hbar__seg--med  { background: #3B82F6; }
.ktk-hbar__seg--low  { background: var(--text-muted); }
.ktk-hbar__seg-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
}
[data-theme="dark"] .ktk-hbar__seg--crit .ktk-hbar__seg-num {
    color: #1a1a1a;
}
.ktk-hbar__legend {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.6rem;
}
.ktk-hbar__legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.ktk-hbar__dot {
    width: 8px; height: 8px;
    border-radius: 2px;
    display: inline-block;
}
.ktk-hbar__dot--crit { background: var(--ktk); }
.ktk-hbar__dot--med  { background: #3B82F6; }
.ktk-hbar__dot--low  { background: var(--text-muted); }

@media (max-width: 768px) {
    #ktk-issues__bars { flex-direction: column; }
}

/* ── Dot matrix comparison table ── */
#ktk-bench { width: 100%; }
#ktk-bench__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}
#ktk-bench__outer {
    position: relative;
}
#ktk-bench__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#ktk-bench__table-wrap::-webkit-scrollbar {
    display: none;
}
.ktk-bench__arrow {
    display: none;
}
@media (max-width: 768px) {
    .ktk-bench__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.15);
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }
    .ktk-bench__arrow i {
        font-size: 14px;
        color: var(--ktk);
    }
    .ktk-bench__arrow--left { left: max(2vw, 12px); }
    .ktk-bench__arrow--right { right: max(2vw, 12px); }
    [data-theme="light"] .ktk-bench__arrow {
        border-color: rgba(0,0,0,0.15);
        background: rgba(255,255,255,0.85);
    }
}
#ktk-bench__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
}
#ktk-bench__table thead th {
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ktk-border);
    white-space: nowrap;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#ktk-bench__table thead th.ktk-bench__cat-col {
    text-align: left;
    width: 180px;
}
#ktk-bench__table thead th.ktk-bench__highlight-col { color: var(--ktk); }
#ktk-bench__table tbody td {
    padding: 0.7rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--ktk-border);
    color: var(--text-secondary);
    vertical-align: middle;
}
#ktk-bench__table tbody td.ktk-bench__cat-col {
    text-align: left;
    color: var(--text-primary);
    font-size: 0.82rem;
}
.ktk-bench__row--overall td {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 0.95rem !important;
    color: var(--text-primary) !important;
    padding: 1rem 1rem !important;
}
.ktk-bench__row--overall td.ktk-bench__highlight-col { color: var(--ktk) !important; }
td.ktk-bench__highlight-col { background: var(--ktk-card); }
.ktk-bench__blur {
    filter: blur(5px);
    user-select: none;
    display: inline-block;
}
#ktk-bench__scale {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-muted);
    margin: 1rem 0 0;
}

/* ── Personas section (process-style grid) ── */
#ktk-personas {
    position: relative;
    z-index: 1;
    padding: 12vh 0;
    background-color: var(--bg) !important;
}
#ktk-personas__inner {
    display: flex;
    flex-direction: column;
    gap: 8vh;
}
#ktk-personas__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 5vw;
}
#ktk-personas__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.03em;
}
#ktk-personas__tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
#ktk-personas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
}
.ktk-persona {
    position: relative;
    padding: 2.4rem 5vw 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.ktk-persona:first-child { padding-left: 5vw; }
.ktk-persona:last-child { padding-right: 5vw; }
.ktk-persona__rule {
    display: block;
    width: 100%; height: 1px;
    background: var(--text-primary);
    opacity: 0.15;
    margin-bottom: 0.4rem;
}
.ktk-persona__num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.ktk-persona__name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 300;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1;
}
.ktk-persona__desc {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 320px;
}
.ktk-persona__badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ktk);
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--ktk-border);
    border-radius: 4px;
    align-self: flex-start;
}
#ktk-personas #cs-artifacts {
    padding: 0 5vw;
    overflow: visible;
}
#cs-artifacts__carousel-wrap {
    margin: 0 -5vw;
    padding: 0;
}
#cs-artifacts__carousel {
    padding-left: 5vw;
    padding-right: 5vw;
}

/* Artifact carousel arrows */
.ktk-artifacts__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}
.ktk-artifacts__arrow i {
    font-size: 14px;
    color: var(--ktk);
}
.ktk-artifacts__arrow--left { left: max(2vw, 12px); }
.ktk-artifacts__arrow--right { right: max(2vw, 12px); }
[data-theme="light"] .ktk-artifacts__arrow {
    border-color: rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
    #ktk-personas__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .ktk-persona { padding: 0 5vw !important; }
}

/* ── Strategy section — bigger, process-style ── */
#cs-strategy {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 12vh 0 !important;
}
#cs-strategy__header {
    align-items: flex-start !important;
    padding: 0 5vw !important;
    margin-bottom: 6vh !important;
}
#cs-strategy__label { color: var(--ktk) !important; }
#cs-strategy__desc {
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    max-width: 700px !important;
}
#cs-strategy__stage {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
}
.cs-strategy__slide {
    max-width: none !important;
    padding: 2.4rem 5vw 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}
.cs-strategy__slide::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--text-primary);
    opacity: 0.15;
    margin-bottom: 1.2rem;
}
[data-theme="dark"] .cs-strategy__slide {
    border: none !important;
}
.cs-strategy__step-num { color: var(--text-muted) !important; }
.cs-strategy__step-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.03em !important;
}
.cs-strategy__step-desc {
    font-size: clamp(0.88rem, 1.1vw, 1rem) !important;
    font-weight: 300 !important;
    max-width: 320px;
}

@media (max-width: 768px) {
    #cs-strategy__stage {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
}

/* ── Impact section — statement style ── */
#cs-results {
    padding: 12vh 5vw !important;
}
.ktk-results__statement {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    max-width: 900px;
    margin: 1rem 0 1.5rem;
}
.ktk-results__highlight {
    color: var(--ktk);
    font-weight: 500;
}
.ktk-results__note {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   DECISION SECTIONS — Sticky phone layout
   ══════════════════════════════════════════════════════════ */

.ktk-decision {
    padding: 12vh 5vw !important;
    position: relative !important;
}
.ktk-decision__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 4rem !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Left column — stretches to edge, text stays readable */
.ktk-decision__left {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Right column — sticky, centered in its half */
.ktk-decision__right {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* Phone frame */
.ktk-decision__phone {
    width: 280px;
}
.ktk-decision__phone-frame {
    background: #1e2a27;
    border-radius: 38px;
    padding: 10px;
    position: relative;
    overflow: hidden;
}
.ktk-decision__phone-notch {
    width: 72px;
    height: 22px;
    background: #1e2a27;
    border-radius: 20px;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.ktk-decision__phone-img {
    display: block;
    width: 100%;
    border-radius: 28px;
}
.ktk-decision__phone-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0;
    text-align: center;
}

/* Tradeoffs inside left column */
.ktk-decision__tradeoffs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ktk-decision__tradeoffs .cs-tradeoff {
    max-width: 100%;
    padding: 1rem 1.2rem;
}

/* Decision cards — horizontal row, vertical layout per card */
.ktk-decision__cards {
    display: flex;
    gap: 0.75rem;
}
.ktk-decision__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .ktk-decision__card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}
.ktk-decision__card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ktk-decision__card-icon {
    color: var(--ktk);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.ktk-decision__card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}
.ktk-decision__card-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .ktk-decision__cards {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .ktk-decision__inner {
        flex-direction: column !important;
    }
    .ktk-decision__right {
        align-self: center;
    }
    .ktk-decision__phone {
        width: 180px;
    }
    .ktk-decision__phone-frame {
        border-radius: 24px;
        padding: 6px;
    }
    .ktk-decision__phone-notch {
        width: 50px;
        height: 14px;
        top: 12px;
        border-radius: 10px;
    }
    .ktk-decision__phone-img {
        border-radius: 24px;
    }
    .ktk-decision__right .ktk-slider__container {
        border-radius: 24px;
    }
}

/* D1 specific */
.ktk-d1__left {
    gap: 2rem;
}

/* Segmented control */
.ktk-d1__toggle {
    display: inline-flex;
    border: 1px solid var(--ktk-border);
    border-radius: 8px;
    overflow: hidden;
    align-self: flex-start;
}
.ktk-d1__tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ktk-d1__tab--active {
    background: var(--ktk);
    color: #fff;
}
[data-theme="dark"] .ktk-d1__tab--active {
    color: #1a1a1a;
}

/* Views wrapper — grid stacks both in same cell */
.ktk-d1__views {
    display: grid;
}

/* Both views in same grid cell, cross-fade */
.ktk-d1__view {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.ktk-d1__view--active {
    opacity: 1;
    pointer-events: auto;
}

/* Before: scattered pills */
.ktk-d1__scattered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ktk-d1__pill {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    white-space: nowrap;
}
[data-theme="light"] .ktk-d1__pill {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}

/* After: organized groups */
.ktk-d1__group {
    margin-bottom: 1rem;
}
.ktk-d1__group-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ktk);
    margin: 0 0 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ktk-d1__group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.ktk-d1__item {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--ktk-dim);
    border: 1px solid var(--ktk-border);
    color: var(--text-primary);
    white-space: nowrap;
}

/* Compact stats row */
.ktk-d1__stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
.ktk-d1__stat {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    flex: 1;
}
[data-theme="light"] .ktk-d1__stat {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}
.ktk-d1__stat-before {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}
.ktk-d1__stat-arrow {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ktk-d1__stat-after {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ktk);
}
.ktk-d1__stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    color: var(--text-muted);
    flex-basis: 100%;
    margin-top: 0.15rem;
}

/* Phone sliders inside decision sections */
.ktk-decision__right .ktk-slider {
    max-width: 100%;
    margin: 0;
}
.ktk-decision__right .ktk-slider__container {
    border-radius: 28px;
    aspect-ratio: 393 / 852;
}

@media (max-width: 768px) {
    .ktk-d1__stats {
        flex-direction: column;
    }
}

/* ── Before/after slider ── */
.ktk-slider { max-width: 400px; margin: 3rem auto; }
.ktk-slider__container {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    aspect-ratio: 393 / 852;
}
.ktk-slider__after, .ktk-slider__before {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ktk-slider__before {
    position: absolute;
    top: 0; left: 0;
    clip-path: inset(0 50% 0 0);
}
.ktk-slider__handle {
    position: absolute;
    top: 0; left: 50%;
    width: 3px; height: 100%;
    background: var(--ktk);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 8px var(--ktk-border);
}
.ktk-slider__thumb {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ktk);
    box-shadow: 0 2px 12px var(--ktk-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ktk-slider__thumb i {
    font-size: 8px;
    color: #fff;
}
[data-theme="dark"] .ktk-slider__thumb i {
    color: #1a1a1a;
}
.ktk-slider__thumb {
    gap: 6px;
}
.ktk-slider__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Draggable carousel ── */
#cs-screens__carousel { cursor: grab; }
#cs-screens__carousel:active { cursor: grabbing; }

/* ── Full-bleed pull quote ── */
#cs-broken__callout {
    max-width: 100% !important;
    background: var(--ktk-dim) !important;
    border-top: 1px solid var(--ktk-border) !important;
    border-bottom: 1px solid var(--ktk-border) !important;
    border-left: none !important;
    padding: 6vh 5vw !important;
    margin: 0 !important;
    text-align: left !important;
}
#cs-broken__callout-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(1.2rem, 2.5vw, 1.75rem) !important;
    font-weight: 300 !important;
    max-width: 800px !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.5 !important;
}
#cs-broken__callout-source { color: var(--text-muted) !important; }

/* ── Larger pain point percentages ── */
.cs-research__num {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.03em;
    color: var(--ktk) !important;
}
.cs-research__pct { color: var(--ktk) !important; }

/* ── Craft section — compact colour strip + icon grid ── */

/* Craft 2x2 grid */
.ktk-craft__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 8rem;
}
.ktk-craft__row > div {
    min-width: 0;
}
@media (max-width: 768px) {
    .ktk-craft__row {
        grid-template-columns: 1fr;
    }
}

.ktk-craft__sub-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.ktk-craft__sub-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

/* Colours header */
.ktk-craft__colours-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.ktk-craft__colours-header .ktk-craft__sub-title {
    margin: 0;
}

/* Colour segmented control */
.ktk-colours__toggle {
    display: inline-flex;
    border: 1px solid var(--ktk-border);
    border-radius: 8px;
    overflow: hidden;
}
.ktk-colours__tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ktk-colours__tab--active {
    background: var(--ktk);
    color: #fff;
}
[data-theme="dark"] .ktk-colours__tab--active {
    color: #1a1a1a;
}

/* Colour views cross-fade */
.ktk-colours__views {
    display: grid;
}
.ktk-colours__view {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.ktk-colours__view--active {
    opacity: 1;
    pointer-events: auto;
}

/* Colour row */
.ktk-colours__row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Swatch */
.ktk-craft__swatch {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
}
.ktk-craft__swatch-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.55rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
}
.ktk-craft__swatch-hex {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.7);
}

/* Icons header — title + segmented control inline */
.ktk-craft__icons-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.ktk-craft__icons-header .ktk-craft__sub-title {
    margin: 0;
}

/* Icon segmented control */
.ktk-icons__toggle {
    display: inline-flex;
    border: 1px solid var(--ktk-border);
    border-radius: 8px;
    overflow: hidden;
}
.ktk-icons__tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ktk-icons__tab--active {
    background: var(--ktk);
    color: #fff;
}
[data-theme="dark"] .ktk-icons__tab--active {
    color: #1a1a1a;
}

/* Icon views — grid cross-fade */
.ktk-icons__views {
    display: grid;
}
.ktk-icons__view {
    grid-area: 1 / 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.ktk-icons__view--active {
    opacity: 1;
    pointer-events: auto;
}
.ktk-icons__view i {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.ktk-icons__view--block i {
    color: var(--text-primary);
}
.ktk-icons__view--outline i {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .ktk-colours__row {
        flex-wrap: wrap;
    }
}

/* Typography */
#ktk-craft__fonts {
}
.ktk-craft__fonts-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.ktk-craft__fonts-header .ktk-craft__sub-title {
    margin: 0;
}
.ktk-fonts__toggle {
    display: inline-flex;
    border: 1px solid var(--ktk-border);
    border-radius: 8px;
    overflow: hidden;
}
.ktk-fonts__tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ktk-fonts__tab--active {
    background: var(--ktk);
    color: #fff;
}
[data-theme="dark"] .ktk-fonts__tab--active {
    color: #1a1a1a;
}
.ktk-fonts__name-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}
.ktk-fonts__font-name {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--text-primary);
}
.ktk-fonts__link {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    color: var(--ktk);
    text-decoration: none;
}
.ktk-fonts__link:hover {
    text-decoration: underline;
}
.ktk-fonts__specimen {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    transition: font-weight 0.3s ease;
}
.ktk-fonts__alpha {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--text-primary);
    margin: 0 0 0.4rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.ktk-fonts__nums {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

/* Toaster component */
#ktk-craft__toaster {
}
.ktk-craft__toaster-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.ktk-craft__toaster-header .ktk-craft__sub-title {
    margin: 0;
}
.ktk-toaster__toggle {
    display: inline-flex;
    border: 1px solid var(--ktk-border);
    border-radius: 8px;
    overflow: hidden;
}
.ktk-toaster__tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ktk-toaster__tab--active {
    background: var(--ktk);
    color: #fff;
}
[data-theme="dark"] .ktk-toaster__tab--active {
    color: #1a1a1a;
}
.ktk-toaster__views {
    display: grid;
}
.ktk-toaster__view {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ktk-toaster__view--active {
    opacity: 1;
    pointer-events: auto;
}

/* Toast bar */
.ktk-toast--bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
}
.ktk-toast--bar span {
    flex: 1;
}
.ktk-toast__close {
    opacity: 0.7;
    cursor: pointer;
}

/* Toast expanded */
.ktk-toast--expanded {
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid;
}
.ktk-toast__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    color: var(--text-primary);
}
.ktk-toast__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}
.ktk-toast__link {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

/* ── Dev bridge — full-width photo background ── */
.ktk-devbridge {
    position: relative !important;
    overflow: hidden;
    padding: 16vh 5vw !important;
    min-height: 60vh;
    display: flex !important;
    align-items: center !important;
}
.ktk-devbridge__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}
.ktk-devbridge__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(1.5px) brightness(0.25);
}
.ktk-devbridge__content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.ktk-devbridge__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    line-height: 1.2;
    color: #fff;
    margin: 0.5rem 0 1.5rem;
}
.ktk-devbridge__narrative {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255,255,255,0.75);
    margin: 0 0 0.75rem;
}
.ktk-devbridge .cs-section-label {
    color: var(--ktk) !important;
}
.ktk-devbridge__points {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
}
.ktk-devbridge .ktk-decision__card {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.ktk-devbridge .ktk-decision__card-title {
    color: #fff;
}
.ktk-devbridge .ktk-decision__card-desc {
    color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
    .ktk-devbridge__points {
        flex-direction: column;
    }
}

/* ── Responsive orbs ── */
@media (max-width: 600px) {
    .ktk-bg__orb--1 { width: 300px; height: 300px; }
    .ktk-bg__orb--2 { width: 250px; height: 250px; }
    .ktk-bg__orb--3 { display: none; }
}