::-webkit-scrollbar{ display: none;}
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-500.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-800.ttf') format('truetype'); }
:root { color-scheme: dark; --red: #ed160e; --muted: #bdb6b6; --gutter: clamp(22px,4.86vw,90px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #040404; color: #fff; font-family: "Montserrat",sans-serif; }
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 12% 38%,rgba(128,0,0,.7),transparent 28%),linear-gradient(90deg,rgba(98,0,0,.8),rgba(30,0,0,.5) 22%,transparent 38%),#040404; z-index: -2; }
.mobile-ambient { display: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 7px; }
::selection { color: white; background: #a80d08; }
.Bold { font-weight: 800; } .accent { color: var(--red); } .quiet { color: var(--muted); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px; background: #040404; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.opening { min-height: 100vh; min-height: 100svh; position: relative; }
header { position: absolute; z-index: 20; padding: 28px 0 0 30px; }
header nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 15px 0 0 50px; padding: 0; }
header nav a { font-size: 1.05rem; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
header nav a:hover { color: #ef7772; }
header nav a { position: relative; transition: color .3s ease, transform .35s ease; }
header nav a::after { content: ''; position: absolute; inset: auto 0 4px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: center; transition: transform .35s ease; }
header nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { header nav a:hover { transform: translateY(-1px); } header nav a:hover::after { transform: scaleX(1); } }
.hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: calc(100vh - 120px); min-height: calc(100svh - 120px); padding: 0 var(--gutter) 80px; }
.textbox { max-width: 560px; min-width: 0; }
.text1 { margin: 0; font-size: clamp(4rem,7vw,9rem); line-height: .82; letter-spacing: -.08em; font-weight: 900; text-transform: uppercase; }
.text2 { margin: 16px 0 0; font-size: clamp(.9rem,1.3vw,1.4rem); line-height: 1.5; }
.Logo { width: 44%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
#logo { width: min(750px,48vw); height: auto; animation: pulse 3s ease infinite; }
.Faixas { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.Faixas > div { position: absolute; width: 220px; height: 150vh; border: 2px solid rgba(220,0,0,.38); transform: rotate(30deg); animation: faixaEntrance 1.2s ease-out both; }
#faixa1 { left: 4%; top: -40%; animation-delay: .1s; } #faixa2 { left: 18%; top: -30%; animation-delay: .25s; } #faixa3 { left: 32%; top: -20%; animation-delay: .4s; }
.blur { position: fixed; width: min(320px,70vw); height: 320px; background: rgba(255,0,0,.12); filter: blur(160px); border-radius: 50%; left: 18%; top: 42%; z-index: -1; pointer-events: none; }
.scroll { position: absolute; inset-inline: var(--gutter); bottom: max(18px,env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.scroll-btn { font-size: 1.05rem; font-weight: 500; padding: 12px 0; min-height: 44px; text-align: center; }
.scroll-btn:hover { color: #ef7772; }
.next-page { position: relative; background: #090404; border-top: 1px solid #35100d; }
.next-page-inner { position: relative; padding: 32px var(--gutter); max-width: 1800px; margin-inline: auto; }
.story-heading,.story-footer { display: none; }
.story-scenes { position: relative; }
.story-scene { position: relative; padding-block: clamp(64px,10vw,150px); }
.eyebrow { margin: 0 0 24px; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.story-scene h2 { font-size: clamp(2.2rem,5.7vw,6.4rem); line-height: 1; letter-spacing: -.065em; margin: 0 0 32px; font-weight: 800; }
.aboutTextBox,.scene-copy { max-width: 540px; font-size: clamp(.95rem,1.2vw,1.1rem); line-height: 1.75; }
.aboutTextBox p { margin: 0 0 14px; } .aboutTextBox strong { font-weight: 600; }
.scene-copy { margin: 0 0 18px; }
.line-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.08em; }
.line-mask > span { display: block; }
.story-question h2 { font-size: clamp(2rem,7.1vw,7.8rem); }
.story-mark { display: none; }
.pillar-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,3vw,48px); }
.pillar { min-width: 0; position: relative; }
.pillar-number { color: var(--muted); font-size: .65rem; letter-spacing: .14em; }
.pillar h3 { font-size: clamp(1.1rem,2.1vw,2.4rem); letter-spacing: -.045em; margin: 20px 0 16px; }
.pillar p { font-size: clamp(.88rem,1.15vw,1rem); line-height: 1.7; margin: 0; max-width: 340px; }
.pillar-track { height: 2px; background: #49201b; margin-top: 28px; }
.pillar-track span { display: block; height: 100%; background: var(--red); transform-origin: left; }
.pillar-conclusion { margin: 40px 0 0; font-size: clamp(.9rem,1.5vw,1.2rem); line-height: 1.6; color: var(--muted); }
.pillar-conclusion strong { color: white; }
.story-owners { display: inline-flex; align-items: center; align-self: flex-start; gap: 16px; min-height: 44px; margin-top: 16px; font-size: .9rem; font-weight: 600; border-bottom: 1px solid var(--red); }
.story-owners:hover { color: #ef7772; }
/* The default document exposes every message; animation is an enhancement. */
.is-presenting .next-page-inner { height: 100vh; height: 100svh; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }
.is-presenting .story-heading { display: flex; justify-content: space-between; gap: 20px; font-size: .65rem; letter-spacing: .16em; line-height: 1.6; color: var(--muted); }
.is-presenting .story-scenes { flex: 1; min-height: 0; margin-block: 35px; }
.is-presenting .story-scene { position: absolute; inset: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.is-presenting .story-scene:not(.aboutSec1):not(.story-question) { padding-right: 30%; }
.is-presenting .story-footer { display: flex; justify-content: space-between; position: relative; gap: 20px; padding-bottom: 12px; font-size: .6rem; color: var(--muted); letter-spacing: .08em; line-height: 1.6; }
.story-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #49201b; }
.story-progress span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.is-presenting .story-mark { display: flex; position: absolute; width: 30%; height: 45%; right: 5%; top: 27%; gap: 14px; opacity: .32; pointer-events: none; }
.story-mark i { display: block; flex: 1; border: 1px solid #ac231a; transform: skew(-27deg); transform-origin: bottom; }
.closing { position: relative; padding: clamp(70px,12vw,170px) var(--gutter); background: #090404; border-top: 1px solid #35100d; }
.closing-title { margin: 0 0 35px; font-size: clamp(2rem,4.5vw,5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.06em; }
.back-top { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; border-bottom: 1px solid #96312a; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .85; transform: scale(1.01); } }
@keyframes faixaEntrance { from { opacity: 0; transform: translateY(-120px) rotate(30deg); } to { opacity: 1; transform: rotate(30deg); } }
@media (max-width: 900px) {
body::before { background: #040404; }
.mobile-ambient { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.ambient-glow { position: absolute; display: block; width: max(120vw,70svh); height: max(120vw,70svh); border-radius: 50%; }
.ambient-glow-one { left: -42vw; top: -12svh; opacity: .85; background: radial-gradient(ellipse at center,rgba(237,22,14,.3) 0%,rgba(237,22,14,.15) 26%,rgba(237,22,14,.045) 47%,transparent 70%); }
.ambient-glow-two { right: -48vw; bottom: -20svh; opacity: .7; background: radial-gradient(ellipse at center,rgba(237,22,14,.23) 0%,rgba(237,22,14,.11) 28%,rgba(237,22,14,.035) 48%,transparent 70%); }
.Faixas, .blur { display: none; }
header { inset: 0 0 auto; padding: 20px var(--gutter) 0; }
header nav ul { margin: 0; justify-content: center; gap: clamp(14px,3.2vw,24px); }
header nav a { font-weight: 400; }
.hero { min-height: 0; padding: 76px clamp(16px,5vw,28px) 160px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; }
.textbox { width: 100%; max-width: 700px; margin-top: -80px; text-align: center; }
.text1 { font-size: clamp(2.2rem,11.8vw,4.4rem); max-width: none; line-height: 1.08; letter-spacing: -.045em; text-transform: none; }
.text2 { font-size: clamp(.72rem,2.8vw,.9rem); margin-top: 12px; max-width: none; }
.Logo { order: -1; align-self: center; width: min(calc(100vw - 12px),420px); margin: -64px 0 0; } #logo { width: 100%; }
.scroll { bottom: max(80px, min(25svh,200px)); }
.scroll-btn { font-size: .7rem; }
.scroll-btn::after { content: ''; display: block; width: 8px; height: 8px; border-right: 1px solid #8b8585; border-bottom: 1px solid #8b8585; transform: rotate(45deg); margin: 8px auto 0; }
.pillar-list { grid-template-columns: 1fr; gap: 26px; } .pillar { padding-left: 26px; }
.pillar h3 { margin: 7px 0 8px; font-size: clamp(1.3rem,4.5vw,2rem); }
.pillar p { max-width: 56ch; font-size: .9rem; line-height: 1.55; }
.pillar-track { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; height: auto; margin: 0; } .pillar-track span { transform-origin: top; }
.is-presenting .story-scene:not(.aboutSec1):not(.story-question) { padding-right: 0; }
.is-presenting .story-mark { width: 38%; height: 25%; top: auto; bottom: 15%; right: 9%; opacity: .14; }
.is-presenting .next-page-inner { min-height: 620px; padding-block: 24px; }
.story-scene h2 { font-size: clamp(2.3rem,7.8vw,4.8rem); } .story-question h2 { font-size: clamp(1.9rem,8.2vw,5rem); }
.pillar-conclusion { margin-top: 24px; max-width: 35ch; } .is-presenting .story-footer > span:first-child { max-width: 20ch; }
}
@media (max-width: 520px) {
header nav a { font-size: .9rem; }
.is-presenting .story-scenes { margin-block: 24px; }
.aboutSec1 h2 { font-size: clamp(1.8rem,8vw,2.7rem); margin-bottom: 24px; }
.pillar-list { gap: 20px; } .pillar p { font-size: .81rem; } .pillar-number { font-size: .58rem; }
.pillar-conclusion { font-size: .82rem; margin-top: 20px; } .eyebrow { font-size: .6rem; }
.story-owners { font-size: .8rem; margin-top: 10px; }
.is-presenting .story-heading { letter-spacing: .06em; }
}
@media (max-height: 620px) and (max-width: 900px) and (orientation: landscape) {
.hero { flex-direction: row; align-items: center; padding: 75px var(--gutter) 70px; gap: 24px; }
.textbox { width: 64%; margin-top: 0; } .text1 { font-size: clamp(2rem,6vw,3.6rem); }
.Logo { width: min(28%,170px); margin: 0; align-self: center; }
.scroll { bottom: max(18px,env(safe-area-inset-bottom)); }
}
@media (max-height: 760px) and (max-width: 900px) {
    .aboutSec1 .eyebrow { margin-bottom: 16px; }
    .aboutSec1 h2 { margin-bottom: 18px; }
    .pillar-list { gap: 16px; }
    .pillar-conclusion { margin-top: 16px; }
}
/* A single viewport backdrop avoids visible edges between the sections. */
main { position: relative; z-index: 1; }
.closing { z-index: 1; background: transparent; border-top: 0; }
.next-page { background: transparent; border-top: 0; }
.next-page-inner {
    max-width: none;
    padding-inline: max(var(--gutter), calc((100% - 1800px) / 2 + var(--gutter)));
    background: transparent;
}
.is-presenting .next-page-inner { overflow: visible; }
.is-presenting .story-mark { display: none; }
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(12, 2, 2, .4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: var(--page-veil, 0);
}
.scroll { flex-direction: column; align-items: center; }
/* The transition sits above the document, so it never changes the pinned layout. */
.page-transition { position: fixed; inset: 0; z-index: 90; background: rgba(4,4,4,.96); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; visibility: hidden; pointer-events: none; }
html[data-page-enter]::after { content: ''; position: fixed; inset: 0; z-index: 90; background: #040404; pointer-events: none; }
html[data-page-leaving] .page-transition { pointer-events: auto; }