:root {
    color-scheme: light;
    --paper: #e7e7e7;
    --paper-light: #f1f1f1;
    --ink: #151515;
    --muted: #66686b;
    --red: #f0190e;
}

html { background: var(--paper); }
body,
.home-page,
.founders-page {
    color: var(--ink);
    background: transparent;
}

body::after,
.mobile-ambient,
.Faixas,
.blur { display: none !important; }

body::before,
.home-page::before,
.founders-page::before {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 43%, #f3f3f3 0, #e4e4e4 55%, #d2d2d2 100%);
    pointer-events: none;
}

a { color: inherit; }
.accent,
.founder h3 span { color: var(--red); }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

header {
    left: 0;
    top: 0;
    width: auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 0 0 32px;
    color: #111;
}

.header-brand {
    display: grid;
    place-items: center;
    position: relative;
    width: 32px;
    height: 44px;
    flex: 0 0 auto;
    overflow: hidden;
}

.brand-mark {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
}

header nav ul {
    gap: 15px;
    margin: 0;
}

header nav a {
    min-height: 44px;
    color: #151515;
    font-size: clamp(.9rem, 1.35vw, 1rem);
    font-weight: 500;
}

header nav a:hover { color: var(--red); }
header nav a::after { bottom: 5px; }

.opening {
    min-height: 100svh;
    overflow: hidden;
    background: transparent;
}

.home-page .opening { min-height: 100svh; }

.home-page .hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    background: transparent;
}

.home-page .hero .Logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: grid !important;
    place-items: center;
    margin: 0;
    flex: none;
}

.home-page .hero #logo {
    width: clamp(265px, 32vw, 415px);
    max-width: 78vw;
    height: auto;
    animation: none;
    filter: drop-shadow(0 20px 24px rgba(222, 23, 15, .13));
}


.scroll {
    z-index: 5;
    bottom: max(15px, env(safe-area-inset-bottom));
}

.scroll-btn {
    color: #171717;
    font-size: clamp(.86rem, 1.4vw, 1rem);
    font-weight: 500;
}

.scroll-btn:hover { color: var(--red); }
.scroll-btn::after { display: none !important; }

.next-page,
.next-page-inner,
.closing,
.founders-main,
.founders-stage,
.founders-footer { background: transparent; color: var(--ink); }

.next-page-inner,
.founders-stage { isolation: isolate; }

.sequence-visual {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
    pointer-events: none;
}

.sequence-visual::before,
.sequence-visual::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: clamp(72px, 14vh, 160px);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sequence-visual::before {
    top: 0;
    -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
}

.sequence-visual::after {
    bottom: 0;
    -webkit-mask-image: linear-gradient(transparent, #000);
    mask-image: linear-gradient(transparent, #000);
}

.sequence-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .55;
    filter: brightness(1.2) saturate(.8);
}

.sequence-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(244,244,244,.72) 0%, rgba(239,239,239,.58) 36%, rgba(232,232,232,.08) 70%, transparent 100%),
        linear-gradient(180deg, rgba(232,232,232,.18), transparent 28%, transparent 72%, rgba(218,218,218,.22));
}

.story-heading,
.story-footer,
.founders-story-heading,
.founders-story-footer,
.eyebrow,
.quiet,
.scene-copy,
.aboutTextBox,
.pillar p,
.founder-role,
.founder-bio,
.founders-lead,
.founders-origin-copy,
.founders-purpose > p { color: var(--muted); }

.story-heading,
.founders-story-heading,
.story-footer,
.founders-story-footer { border-color: rgba(20,20,20,.14); }

.story-scene h2,
.closing-title,
.founders-scene h1,
.founders-scene h2,
.founder h3 { color: var(--ink); }

.scene-copy-group {
    max-width: 64ch;
    color: var(--muted);
    font-size: clamp(.88rem, 1.12vw, 1rem);
    line-height: 1.55;
}

.scene-copy-group p {
    margin: 0 0 .8em;
    text-wrap: pretty;
}

.scene-copy-group p:last-child { margin-bottom: 0; }

.is-presenting .has-long-copy h2 {
    margin-bottom: clamp(16px, 2.4vh, 28px);
    font-size: clamp(2.3rem, 5vw, 5.4rem);
}

.is-presenting .has-long-copy .eyebrow { margin-bottom: 14px; }

.pillar { border-color: rgba(20,20,20,.16); }
.pillar-track { background: rgba(20,20,20,.12); }
.pillar-track span,
.story-progress span,
.founders-progress span { background: var(--red); }

.story-mark { opacity: .06; }
.story-mark i { border-color: rgba(240,25,14,.55); }

.pillar-conclusion strong,
.founder-bio strong,
.founders-origin-copy strong { color: var(--ink); }

.story-owners,
.back-top,
.founders-link {
    color: var(--ink);
    border-color: rgba(20,20,20,.24);
}

.story-owners:hover,
.back-top:hover,
.founders-link:hover { color: var(--red); border-color: var(--red); }

.closing,
.founders-footer { border-color: rgba(20,20,20,.14); }
.founders-footer { border-top: 0; }

.page-transition {
    background: rgba(231,231,231,.86) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-page-enter]::after {
    background: rgba(231,231,231,.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.founders-page header {
    position: fixed;
    display: flex;
    right: auto;
    grid-template-columns: none;
    justify-content: flex-start;
    background: rgba(234,234,234,calc(var(--nav-veil, 0) * .82));
    backdrop-filter: blur(calc(var(--nav-veil, 0) * 12px));
    -webkit-backdrop-filter: blur(calc(var(--nav-veil, 0) * 12px));
}

.founders-page header::before { display: none; }

.founders-brand { order: 0; }
.founders-back { order: 2; margin-left: clamp(16px, 3vw, 42px); }
.founders-page header nav { order: 1; }
.founders-logo { display: none; }

@media (max-width: 900px) {
    header,
    .founders-page header {
        width: 100%;
        padding: max(9px, env(safe-area-inset-top)) 20px 0;
        gap: 15px;
    }

    .header-brand { width: 32px; }
    header nav { flex: 1; }
    header nav ul { justify-content: flex-start; gap: clamp(12px, 4vw, 20px); }

    .sequence-shade {
        background:
            linear-gradient(180deg, rgba(241,241,241,.3), rgba(238,238,238,.53) 36%, rgba(230,230,230,.62) 100%),
            linear-gradient(90deg, rgba(244,244,244,.5), rgba(225,225,225,.14));
    }

    .founders-back {
        order: 3;
        margin-left: auto;
        font-size: .72rem;
        white-space: nowrap;
    }

    .founders-page header nav ul { gap: 11px; }
    .founders-page header nav a { font-size: .78rem; }

    .scene-copy-group {
        max-width: 100%;
        font-size: .9rem;
        line-height: 1.5;
    }

    .scene-copy-group p { margin-bottom: .72em; }
    .is-presenting .has-long-copy h2 { font-size: clamp(2.1rem, 7.2vw, 3.5rem); }
}

@media (min-width: 481px) and (max-width: 900px) {
    header,
    .founders-page header { padding-inline: 32px; gap: 24px; }
}

.next-page:not(.is-presenting) .sequence-visual,
.founders-page:not(.founders-presenting) .sequence-visual {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    margin-left: calc(50% - 50vw);
    margin-bottom: -100vh;
    margin-bottom: -100svh;
}

@media (max-width: 480px) {
    header,
    .founders-page header { padding-inline: 17px; gap: 12px; }
    header nav ul { gap: 13px; }
    header nav a { font-size: .86rem; }
    .founders-back { font-size: 0; width: 34px; min-width: 34px; justify-content: center; }
    .founders-back span { font-size: 1rem; }
    .home-page .hero #logo { width: min(76vw, 340px); }
    .sequence-shade { background: rgba(236,236,236,.54); }
    .is-presenting .scene-copy-group { font-size: .84rem; line-height: 1.46; }
    .is-presenting .scene-copy-group p { margin-bottom: .65em; }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}