.af-intro[hidden]{display:none!important}
.af-intro{position:fixed;inset:0;z-index:1000;background:#dce5eb;color:#fff;overflow:hidden;opacity:1;transition:opacity .85s ease;isolation:isolate}
.af-intro.is-leaving{opacity:0;pointer-events:none}
html.af-intro-open{overflow:hidden}
.af-intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.af-intro:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(7,25,47,.9),transparent 52%),linear-gradient(90deg,rgba(7,25,47,.3),transparent 65%)}
.af-intro-brand{position:absolute;left:clamp(24px,5vw,84px);top:clamp(24px,4vw,56px);z-index:2;display:flex;gap:14px;align-items:center;font:700 14px/1.4 Montserrat,Arial,sans-serif;letter-spacing:.04em;text-shadow:0 1px 8px #15324966}
.af-intro-brand .mark{background:#0b285e;color:#fff;border:1px solid #ffffff66;width:48px;height:48px;font-size:20px;box-shadow:0 5px 22px #0b285e22}
.af-intro-brand small{display:block;font-size:12px;font-weight:500;letter-spacing:.2em;margin-top:3px}
.af-intro-close{position:absolute;z-index:3;right:clamp(24px,5vw,84px);top:clamp(28px,4vw,60px);border:1px solid #fff9;border-radius:30px;background:#0b285e99;backdrop-filter:blur(10px);padding:12px 20px;color:#fff;cursor:pointer;font:500 14px Montserrat,Arial,sans-serif}
.af-intro-close:focus-visible,.af-replay:focus-visible{outline:3px solid #85d1b4;outline-offset:5px}
.af-intro-copy{position:absolute;left:clamp(24px,5vw,84px);bottom:clamp(65px,9vh,110px);z-index:2;max-width:680px;pointer-events:none}
.af-intro-copy p{font:500 14px/1.5 Montserrat,Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#b6e0d4;margin:0 0 20px}
.af-intro-copy h2{font:600 clamp(32px,4.4vw,68px)/1.12 Montserrat,Arial,sans-serif;letter-spacing:-.035em;margin:0;text-wrap:balance}
.af-intro-copy h2 span{display:block}
.af-intro-progress{position:absolute;z-index:2;bottom:32px;left:clamp(24px,5vw,84px);right:clamp(24px,5vw,84px);height:2px;background:#ffffff40}
.af-intro-progress i{display:block;width:100%;height:100%;background:#85d1b4;transform:scaleX(0);transform-origin:left}
.af-replay{display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;padding:16px 0 0;color:#0b285e;cursor:pointer;font:600 14px/1.5 Montserrat,Arial,sans-serif}
.af-replay svg{width:18px;height:18px;fill:currentColor}
@media(max-width:600px){.af-intro-brand{font-size:12px;left:20px;top:22px;gap:9px}.af-intro-brand .mark{width:36px;height:36px;font-size:16px}.af-intro-brand small{font-size:10px;letter-spacing:.12em}.af-intro-close{right:20px;top:auto;bottom:29px;padding:10px 16px;font-size:14px}.af-intro-copy{left:24px;right:24px;bottom:100px}.af-intro-copy p{font-size:12px;letter-spacing:.1em;margin-bottom:12px}.af-intro-copy h2{font-size:clamp(30px,8.2vw,44px)}.af-intro-progress{left:24px;right:180px;bottom:49px}}
@media(prefers-reduced-motion:reduce){.af-intro{transition:none}}

/* Cinematic construction sequence */
.af-intro{transition:opacity .45s ease;background:#f1bf8d}
.af-intro:after{background:linear-gradient(0deg,rgba(9,22,32,.94),transparent 38%),linear-gradient(180deg,rgba(9,22,32,.6),transparent 24%)}
.af-intro-copy{max-width:780px;bottom:70px}
.af-intro-copy p{font-size:12px;margin-bottom:14px;letter-spacing:.2em;color:#bfcfd5}
.af-stage{display:flex;gap:20px;align-items:center}
#af-stage-number{font:400 36px/1 Arial,sans-serif;color:#d7b777;border-right:1px solid #ffffff44;padding-right:20px}
.af-intro-copy h2{font-size:clamp(28px,3.5vw,50px);font-weight:500;letter-spacing:-.03em}
.af-stage-steps{display:flex;gap:22px;margin-top:22px;font:400 12px/1.5 Arial,sans-serif;color:#a1afb8}
.af-stage-steps span{padding-top:8px;border-top:2px solid #ffffff30}
.af-intro[data-stage="0"] .af-stage-steps span:nth-child(1),.af-intro[data-stage="1"] .af-stage-steps span:nth-child(2),.af-intro[data-stage="2"] .af-stage-steps span:nth-child(3),.af-intro[data-stage="3"] .af-stage-steps span:nth-child(4),.af-intro[data-stage="4"] .af-stage-steps span:nth-child(5),.af-intro[data-stage="5"] .af-stage-steps span:nth-child(6){color:#fff;border-color:#d7b777}
.af-intro-progress i{background:#f2b447}
@media(max-width:600px){.af-intro-copy{bottom:104px}.af-stage{gap:12px}#af-stage-number{font-size:28px;padding-right:12px}.af-intro-copy h2{font-size:28px}.af-stage-steps{gap:10px;flex-wrap:wrap;font-size:12px;margin-top:16px}.af-intro-copy p{font-size:12px}.af-intro-brand small{font-size:12px}.af-intro-brand{font-size:12px}}
