html {
    scroll-behavior: smooth;
}

.fsb-section {
    grid-column: 1 / span 4;
    margin-top: var(--spacing-xl);
}

.fsb-section-header {
    grid-column: 1 / span 4;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.fsb-section-label {
    font-family: 'Fira Mono', monospace;
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-regular);
    letter-spacing: var(--tracking-wide);
    color: var(--primary-text-color);
    white-space: nowrap;
}

.fsb-section-divider {
    width: 100%;
    height: 1.6px;
    background-color: #E1E2E7;
}

.fsb-section-body {
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-regular);
    line-height: var(--line-height-body);
    margin: 0;
    max-width: 70ch;
}

.fsb-section-body p {
    margin: 0 0 var(--spacing-md);
}

.fsb-section-body p:last-child {
    margin-bottom: 0;
}

.fsb-section-body--wide {
    max-width: none;
    width: 100%;
}

/* BACKRGOUND */
.fsb-bg-wrap {
    --fsb-bg-img-width: 320px;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--spacing-md);
}

.fsb-bg-wrap .fsb-bg-title {
    font-family: var(--font-sans);
    font-size: 2.25rem;
    font-weight: var(--font-medium);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--spacing-xl);
}

.fsb-bg-wrap .fsb-bg-top,
.fsb-bg-wrap .fsb-bg-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.fsb-bg-wrap .fsb-bg-bottom {
    margin-bottom: 0;
    align-items: center;
}

.fsb-bg-wrap .fsb-bg-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 56ch;
}

.fsb-bg-wrap .fsb-bg-text p {
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    margin: 0 0 var(--spacing-md);
    color: var(--primary-text-color);
}

.fsb-bg-wrap .fsb-bg-text p:last-child {
    margin-bottom: 0;
}

.fsb-bg-wrap .fsb-bg-quote {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 56ch;
}

.fsb-bg-wrap .fsb-bg-quote p {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    line-height: var(--line-height-body);
    font-weight: var(--font-medium);
    color: var(--logo-color-blue);
    margin: 0;
}

.fsb-bg-wrap .fsb-bg-img {
    flex: 0 0 auto;
    overflow: hidden;
}

.fsb-bg-wrap .fsb-bg-img img {
    width: var(--fsb-bg-img-width);
    height: auto;
    object-fit: cover;
    display: block;}

@media (max-width: 767px) {
    .fsb-bg-wrap .fsb-bg-top,
    .fsb-bg-wrap .fsb-bg-bottom {
        flex-direction: column;
        align-items: center;
    }

    .fsb-bg-wrap .fsb-bg-img img {
        width: 100%;
    }
}


/* RESEARCH */
.fsb-charts-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr 4rem auto;
    column-gap: 40px;
    row-gap: 0;
    margin-top: var(--spacing-xl);
    margin-bottom: calc(var(--spacing-xl) * 3);
    align-items: start;
}

.fsb-chart-block {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
}

@supports not (grid-template-rows: subgrid) {
    .fsb-charts-row  { align-items: stretch; }
    .fsb-chart-block { display: flex; flex-direction: column; }
    .fsb-chart-note  { margin-top: auto; }
}

.fsb-chart-title,
.fsb-chart-sub,
.fsb-chart-note {
    font-family: var(--font-sans);
    margin: 0;
    text-align: center;
}

.fsb-chart-title {
    font-size: 1rem;
    font-weight: var(--font-bold);
    margin-bottom: 0.25rem;
    align-self: end;
}

.fsb-chart-sub,
.fsb-chart-note {
    font-size: 0.8125rem;
    color: #6B6B70;
    line-height: var(--line-height-body);
}

.fsb-chart-sub  { margin-bottom: var(--spacing-md); align-self: start; }
.fsb-chart-note { align-self: start; margin-top: 0; }

/* Vertical bar chart */
.fsb-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 1.5rem 0 2rem;
    position: relative;
    align-self: stretch;
    box-sizing: border-box;
    height: 200px; /* ← fixes bottom alignment */
}

.fsb-bar-chart::after {
    content: '';
    position: absolute;
    bottom: 2rem; left: 0; right: 0;
    height: 1px;
    background: #E1E2E7;
}

.fsb-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    height: 100%;
}

.fsb-bar-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    height: 100%; /* ← ensures shared baseline */
}

.fsb-bar {
    width: 100%;
    height: 0;
    background: var(--logo-color-blue);
    border-radius: 2px 2px 0 0;
    transition: height 1.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
}

.fsb-bar--dim { background: #b8a6f0; }

.fsb-bar::before {
    content: attr(data-val);
    position: absolute;
    bottom: 100%;
    margin-bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fira Mono', monospace;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease 1.2s;
}

.fsb-bar.animated::before { opacity: 1; }

.fsb-bar-label {
    font-family: 'Fira Mono', monospace;
    font-size: 0.72rem;
    color: #6B6B70;
    flex-shrink: 0;
    text-align: center;
}

/* Donut chart */
.fsb-donut-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.fsb-donut-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.fsb-donut-svg  { width: 100%; height: 100%; transform: rotate(-90deg); }

.fsb-donut-fill {
    stroke-dasharray: 0 304;
    transition: stroke-dasharray 1.8s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.fsb-donut-fill.animated { stroke-dasharray: 289 304; }

.fsb-donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

.fsb-donut-pct {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--logo-color-blue);
    line-height: 1;
}

.fsb-donut-lbl {
    font-family: 'Fira Mono', monospace;
    font-size: 0.75rem;
    color: #6B6B70;
    line-height: 1;
}

.fsb-donut-legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.fsb-legend-item {
    font-family: 'Fira Mono', monospace;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fsb-legend-item::before {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
}

.fsb-legend-item--yes::before { background: var(--logo-color-blue); }
.fsb-legend-item--no::before  { background: #E1E2E7; }

/* Horizontal bar chart */
.fsb-hbar-chart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
    align-self: stretch;
}

.fsb-hbar-item {
    display: grid;
    grid-template-columns: 110px 1fr 42px;
    column-gap: var(--spacing-sm);
    align-items: center;
}

.fsb-hbar-label { font-family: var(--font-sans); font-size: 0.8125rem; color: #3a3a4a; }
.fsb-hbar-val   { font-family: 'Fira Mono', monospace; font-size: 0.75rem; color: var(--logo-color-blue); text-align: right; }

.fsb-hbar-track { height: 10px; background: #E1E2E7; border-radius: 5px; overflow: hidden; }

.fsb-hbar-fill {
    height: 100%; width: 0;
    background: var(--logo-color-blue);
    border-radius: 5px;
    transition: width 1.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.fsb-hbar-fill--dim { background: #b8a6f0; }

/* Quotes */
.fsb-quote-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    row-gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.fsb-quote { border-left: 2px solid var(--logo-color-blue); padding-left: var(--spacing-md); }

.fsb-quote-text {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: var(--font-regular);
    line-height: var(--line-height-body);
    font-style: italic;
    margin: 0 0 var(--spacing-sm);
}

.fsb-quote-attr {
    font-family: 'Fira Mono', monospace;
    font-size: 0.875rem;
    color: var(--logo-color-blue);
    margin: 0;
}







.fsb-intro-title {
    font-family: var(--font-sans);
    font-size: 2.25rem;
    font-weight: var(--font-medium);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--spacing-md);
}

.fsb-section-body .fsb-intro-title:not(:first-child) {
    margin-top: calc(var(--spacing-xl) * 1.5);
}

.fsb-section-body--wide.fsb-section-body--design .fsb-intro-title:not(:first-child) {
    margin-top: calc(var(--spacing-xl) * 2.5);
}


/* Opportunities list (01–04) */
.fsb-opps {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 75%;
}

.fsb-opps-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.fsb-opps-num {
    font-family: 'Fira Mono', monospace;
    font-size: 1.75rem;
    font-weight: var(--font-medium);
    color: var(--logo-color-blue);
    line-height: 1.1;
    min-width: 3ch;
}

.fsb-opps-main {
    flex: 1 1 auto;
    min-width: 0;
}

.fsb-opps-title {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: var(--font-bold);
    margin: 0;
}

.fsb-opps-body {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: var(--line-height-body);
    margin: 0;
}

@media (max-width: 767px) {
    .fsb-opps-row {
        align-items: flex-start;
    }
}

.fsb-dev-img {
    width: 100%;
    object-fit: cover;
    margin-top: var(--spacing-md);
}

/* Final design videos: no click-to-pause / no UI */
.fsb-final-row-media video.fsb-dev-img {
    pointer-events: none;
}

.fsb-dev-img--spread {
    margin-top: 8rem;
}

.fsb-final-rows {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-xl) * 2);
}

.fsb-final-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: center;
}


.fsb-final-row-media {
    grid-column: 1 / span 2;
}

.fsb-final-row-media img {
    width: 100%;
    height: auto;
    display: block;
}

.fsb-final-row-copy {
    grid-column: 3 / span 2;
}

.fsb-final-row:nth-child(even) .fsb-final-row-media {
    grid-column: 3 / span 2;
    grid-row: 1;
}

.fsb-final-row:nth-child(even) .fsb-final-row-copy {
    grid-column: 1 / span 2;
    grid-row: 1;
}


.fsb-final-row-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: var(--font-medium);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--spacing-sm);
}

.fsb-final-row-body {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: var(--font-regular);
    line-height: var(--line-height-body);
    margin: 0;
    max-width: 34ch;
}

@media (max-width: 991px) {
    .fsb-final-row {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-md);
    }

    .fsb-final-row-media,
    .fsb-final-row-copy {
        grid-column: 1 / -1;
    }
}

.levelup-main .project-detail-title {
    font-size: 4.5rem;
    margin-bottom: var(--spacing-sm);
}

.levelup-main .project-detail-subtitle {
    margin-top: 0;
    text-align: left;
}

.levelup-main .project-detail-meta-block {
    border-top: none;
    margin-bottom: var(--spacing-md);
}

.retro-intro-body {
    margin-top: var(--spacing-xl);
}

.retro-intro-row {
    grid-column: 1 / span 4;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 40px;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.retro-intro-icon {
    max-width: 100px;
}

.retro-intro-icon img {
    display: block;
    width: 120%;
    height: auto;
}

.retro-intro-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
}

.retro-intro-tagline {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: var(--font-medium);
    margin: 0;
    text-align: left;
}