:root{font-family:Arial,Helvetica,sans-serif;color:#17332c;background:#f8f1e6;--paper:#f8f1e6;--green:#0e5a46;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #a45139;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:0;left:0;z-index:30;transform:translateY(-150%);padding:18px;background:#0e5a46;color:#f8f1e6}.skip:focus{transform:none}header{position:absolute;z-index:5;left:5.25vw;right:5.25vw;top:33px;display:flex;align-items:center;justify-content:space-between}.brand{width:161px}.brand img{width:100%;height:auto;display:block;mix-blend-mode:multiply}.write{display:flex;align-items:center;justify-content:space-between;font-size:15.6px;min-width:133px;gap:28px;padding:8px 0 13px;border-bottom:1px solid #17332c55}.write span{font-size:32.4px}.hero{position:relative;height:100svh;min-height:760px;max-height:1150px;overflow:hidden}.stage{position:absolute;left:39%;right:0;top:13%;bottom:9%;overflow:hidden;isolation:isolate}.stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#f8f1e6 0,#f8f1e600 12%);z-index:2}.copy{position:absolute;left:5.25vw;top:29%;width:44%;z-index:3;pointer-events:none}.copy a{pointer-events:auto}.eyebrow{color:#0e5a46;text-transform:uppercase;letter-spacing:.17em;font-weight:700;font-size:12px;display:flex;align-items:center;gap:14px;line-height:1.6;margin:0 0 28px}.eyebrow:before{content:'';width:25px;height:1px;background:#a45139}.story{position:relative;height:clamp(240px,23vw,360px)}.beat{font-size:clamp(63.6px,6.36vw,106.8px);letter-spacing:-.062em;line-height:1.04;position:absolute;inset:0;margin:0;opacity:0;transform:translateY(12px);transition:opacity .8s,transform 1s cubic-bezier(.2,.6,.2,1)}.beat.active{opacity:1;transform:none}.beat.last{font-size:clamp(56.4px,5.46vw,92.4px);line-height:1.09}.beat span{color:#a45139}.beat em{font-style:normal;color:var(--green)}.proposition{font-size:15.6px;margin:22px 0 24px;line-height:1.6;max-width:280px}.hero[data-state="2"] .proposition{visibility:hidden}.cta{font-size:14.4px;display:inline-flex;align-items:center;gap:38px;min-height:44px;border-bottom:1px solid #17332c33;padding-bottom:12px}.cta span{font-size:28.8px}.bottom{position:absolute;z-index:5;left:5.25vw;right:5.25vw;bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.bottom>a{font-size:28.8px;min-height:44px;display:flex;align-items:center;gap:16px;color:#a45139}.bottom>a span{font-size:12px;color:#17332c}.bottom button{border:0;background:#f8f1e6;color:#0e5a46;font-size:14.4px;display:flex;gap:10px;align-items:center;min-height:44px;padding:10px 0 10px 16px}.bottom button span{font-size:12px}[hidden]{display:none!important}.hero[data-static] .beat,.hero[data-inspection] .beat{transition:none}.contact{border-top:1px solid #17332c22;padding:58px 5.25vw 80px;background:#eee7db}.contact-top{display:flex;align-items:center;justify-content:space-between}.contact-top .eyebrow{margin:0}.contact-top>a{font-size:30px;min-height:44px;min-width:44px;text-align:center}.contact h2{font-size:clamp(48px,5.52vw,91.2px);font-weight:400;letter-spacing:-.052em;line-height:1.08;margin:45px 0}.contact h2 em{font-style:normal;color:#0e5a46}.contact-row{display:flex;justify-content:space-between;align-items:flex-end;gap:35px}.contact-row>p{font-size:16.8px;line-height:1.8;margin:0}.contact-row strong{font-weight:400;color:#0e5a46}.email{display:flex;align-items:center;gap:35px;font-size:clamp(18px,1.8vw,28.8px);line-height:1.6;border-bottom:1px solid #17332c44;padding:15px 0;overflow-wrap:anywhere}.email span{font-size:32.4px}footer{padding:24px 5.25vw;font-size:12px;display:flex;justify-content:space-between;gap:20px;color:#4b6254}footer>a{text-decoration:underline;text-underline-offset:4px}.diagnostics{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;align-items:center;gap:15px;padding:13px 25px;background:#163d32;color:#f8f1e6;font-size:13.2px}.diagnostics input{flex:1;accent-color:#e2b49b}.diagnostics button{padding:8px 16px}.diagnostics output{min-width:60px}
@media(max-width:1000px) and (min-width:701px){.copy{width:47%}.beat{font-size:68.4px}.beat.last{font-size:57.6px}.stage{left:42%;top:22%;bottom:13%}.story{height:215px}.contact-row{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){header{left:24px;right:24px;top:23px}.brand{width:114px}.write{font-size:14.4px;min-width:109px;padding-bottom:9px}.write span{font-size:30px}.hero{height:max(870px,100svh);min-height:870px;max-height:none}.copy{left:24px;right:24px;top:150px;width:auto}.eyebrow{font-size:10.8px;margin-bottom:21px}.story{height:166px}.beat{font-size:clamp(51.6px,14.4vw,74.4px)}.beat.last{font-size:clamp(46.8px,12.84vw,68.4px)}.proposition{font-size:14.4px;margin:19px 0}.cta{position:absolute;top:590px;left:0;font-size:14.4px;gap:27px}.stage{left:0;right:0;top:414px;bottom:auto;height:320px}.stage:after{display:none}.bottom{left:24px;right:24px;bottom:22px}.bottom>a{gap:10px}.bottom>a span{font-size:10.8px}.bottom button span{font-size:10.8px}.bottom button{padding-left:0}.contact{padding:35px 24px 50px}.contact h2{font-size:49.2px;margin:35px 0}.contact-row{flex-direction:column;align-items:flex-start;gap:28px}.contact-row>p{font-size:15.6px}.email{font-size:20.4px;gap:18px;max-width:100%}footer{padding:24px;flex-wrap:wrap;font-size:10.8px;gap:14px}footer span:last-child{width:100%}.diagnostics{padding:10px 12px;gap:8px}.diagnostics>a,.diagnostics>label{display:none}.diagnostics button{padding:8px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.hero{height:100svh;min-height:390px}header{top:16px}.brand{width:100px}.write{font-size:14.4px;min-width:110px;padding-bottom:8px}.copy{top:118px;width:44%}.eyebrow{font-size:9.6px;margin-bottom:15px}.story{height:125px}.beat{font-size:48px}.beat.last{font-size:42px}.proposition{font-size:12px;margin:13px 0 7px}.cta{font-size:12px;min-height:33px;padding-bottom:7px;gap:23px}.cta span{font-size:21.6px}.stage{left:44%;right:0;top:80px;bottom:37px}.bottom{bottom:4px}.bottom>a span{font-size:10.8px}.bottom button span{font-size:10.8px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.stage{mask-image:linear-gradient(180deg,transparent,#000 5%,#000 93%,transparent)}

.hero[data-inspection] .stage canvas{transition:none}

.fallback{display:block}.fallback img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(min-width:701px) and (min-height:551px) and (max-height:760px){.hero{min-height:650px;height:100svh}.copy{top:28%}.story{height:240px}.beat{font-size:clamp(63.6px,6vw,90px)}.beat.last{font-size:clamp(55.2px,4.8vw,78px)}.proposition{margin:15px 0 19px}.bottom{bottom:16px}}
.fallback img{object-fit:contain;background:#f8f1e6}

@media(max-width:700px){.bottom button span{font-size:13.2px}.bottom>a span{font-size:12px}}

.stage{top:13%;bottom:9%;left:36%;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 4%,#000 95%,transparent)}.stage:after{display:none}.spatial{position:absolute;inset:0;overflow:hidden}.picture{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.picture img{position:absolute;left:-50%;top:-50%;width:100%;height:100%;object-fit:contain;display:block}.stadium{z-index:1}.fans{z-index:3}.origami{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;filter:drop-shadow(3px 7px 5px #473c2819)}.shade{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#f8f1e6,#f8f1e600 10%)}.copy{width:43%}.beat{font-weight:400}.hero[data-state="2"] .copy{width:43%}
@media(max-width:1000px) and (min-width:701px){.stage{left:40%;top:21%;bottom:12%}.copy{width:46%}.hero[data-state="2"] .copy{width:46%}}
@media(max-width:700px){.stage{left:0;right:0;top:400px;height:350px;bottom:auto;mask-image:linear-gradient(180deg,transparent,#000 3%,#000 96%,transparent)}.shade{display:none}.copy,.hero[data-state="2"] .copy{width:auto}.hero{min-height:880px;height:max(880px,100svh)}.cta{top:600px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.stage{left:43%;top:80px;bottom:38px}.copy,.hero[data-state="2"] .copy{width:44%}.hero{height:100svh;min-height:390px}}
html.no-js .stadium{display:none}html.no-js .origami{display:none}html.no-js .fans{width:100%!important;height:100%!important;left:50%;top:50%;transform:none!important}

.stadium{mask-image:linear-gradient(90deg,transparent,#000 9%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 87%,transparent);mask-composite:intersect}.poster{position:absolute;inset:0;display:block;z-index:5;background:#f8f1e6}.poster img{width:100%;height:100%;object-fit:cover;object-position:70% center;display:block}.stage[data-ready] .poster{display:none}.spatial{visibility:hidden}.stage[data-ready] .spatial{visibility:visible}

.picture img{left:0;top:0}

@media(prefers-reduced-motion:reduce){.poster img{object-fit:contain}}

.end-fade{position:absolute;inset:0;pointer-events:none;opacity:0}
.end-fade{z-index:5;background:#f8f1e6;opacity:var(--scene-fade,0);will-change:opacity}
.hero[data-static] .end-fade{transition:none}

.stage{left:34%;top:13%;bottom:9%}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .18s ease-out}.stage[data-ready] canvas{opacity:1}.stage[data-lost] canvas{display:none}.stage[data-lost] .poster{display:block;opacity:1;visibility:visible}.poster{z-index:3;opacity:1;visibility:visible;transition:opacity .18s ease-out,visibility 0s linear .19s}.stage[data-ready] .poster{display:block;opacity:0;visibility:hidden}.stage:not([data-ready]) .poster img{transform:none}.stage:after{display:block;content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#f8f1e6,#f8f1e600 9%)}.hero[data-inspection] .stage canvas,.hero[data-inspection] .poster{transition:none}
@media(max-width:1000px) and (min-width:701px){.stage{left:40%;top:21%;bottom:12%}}
@media(max-width:700px){.stage{left:0;top:400px;height:350px;bottom:auto}.stage:after{display:none}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.stage{left:43%;top:80px;bottom:38px}}

.poster img{object-fit:contain;object-position:center;background:#f8f1e6}

.diagnostics #quality{min-width:150px;font-size:12px}.rate-label{display:flex;align-items:center;gap:6px}.rate-label select{border:1px solid #f8f1e655;background:#17382d;color:#f8f1e6;padding:6px}.stage[data-lost] .poster{display:block}.stage[data-lost] canvas{display:none}@media(max-width:700px){.diagnostics #quality,.rate-label{display:none!important}}

.review-compact .bottom{bottom:62px}

/* Art inspection uses the same scene camera; page copy remains in the web view. */
.review-art .copy,.review-art .bottom,.review-art .stage:after{display:none!important}
.review-art .hero{height:100svh;min-height:620px;max-height:none}
.review-art .stage{inset:0!important;min-height:0!important;width:auto!important;height:auto!important}
.review-art header{top:22px;left:24px;right:24px}.review-art .brand{width:112px}.review-art .write{font-size:13.2px}

.review-art .stage{top:88px!important}

/* Clean animation player; site preview is a distinct mode. */
.review-art header,.review-art .skip,.review-art .contact,.review-art footer{display:none!important}
.review-art .hero{height:100svh;min-height:0;max-height:none}
.review-art .stage{inset:0!important;mask-image:none!important}
.review-art{overflow:hidden}

/* Typography review: +20% over Web37, including responsive font ranges. */
:root{font-size:19.2px}
input,select,textarea{font:inherit}
.story{height:clamp(288px,27.6vw,432px)}
@media(max-width:1000px) and (min-width:701px){.story{height:258px}}
@media(min-width:701px) and (min-height:551px) and (max-height:760px){.story{height:288px}}
@media(max-width:700px){.story{height:200px}.stage{top:440px}.hero{min-height:920px;height:max(920px,100svh)}.cta{top:640px}}
@media(max-width:360px){.story{height:258px}.stage{top:498px}.hero{min-height:980px;height:max(980px,100svh)}.cta{top:698px}.bottom{flex-wrap:wrap;gap:4px 18px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.story{height:150px}.copy{top:104px}}

/* Contact opens over the site; the email links prepare a draft in the visitor's mail app. */
.contact-open{overflow:hidden}
.contact-modal{width:min(960px,calc(100% - 48px));max-height:calc(100svh - 48px);margin:auto;border:1px solid #17332c22;border-radius:4px;padding:38px 44px 34px;color:#17332c;background:#f8f1e6;box-shadow:0 24px 100px #17332c24;overflow:auto;overscroll-behavior:contain}
.contact-modal::backdrop{background:#17332c50;backdrop-filter:blur(8px)}
.contact-modal .contact-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;padding:0;border:1px solid #17332c33;border-radius:50%;background:transparent;color:#17332c;font-size:30px;line-height:1}
.contact-modal h2{margin:28px 0 30px}
.contact-modal .contact-row{flex-direction:column;align-items:flex-start;gap:16px}
.contact-modal .email{max-width:100%;min-width:0;gap:20px;padding:10px 0}
.contact-write{color:#0e5a46;text-decoration:underline;text-underline-offset:4px}
.contact-hint{font-size:13.2px;line-height:1.6;color:#4b6254;margin:20px 0 0;max-width:540px}
.contact-fallback{padding:24px;font-size:15.6px;overflow-wrap:anywhere}
@media(max-width:700px){.contact-modal{width:calc(100% - 24px);max-height:calc(100svh - 24px);padding:20px 22px 24px}.contact-modal h2{margin:22px 0 24px}.contact-modal .email{font-size:20.4px;gap:12px}.contact-modal .contact-row>p br{display:none}.contact-hint{font-size:13.2px}}

/* The contact invitation is the primary action; direct email stays secondary. */
.cta{font-size:18px;font-weight:500;min-height:54px;padding:13px 20px;border:1px solid #0e5a46;background:#0e5a46;color:#f8f1e6;border-radius:3px;gap:26px;box-shadow:0 5px 16px #0e5a4612;transition:background .2s,box-shadow .2s}
.cta span{font-size:28.8px;line-height:1}
.cta:hover{background:#174c3c;box-shadow:0 7px 20px #0e5a4620}
@media(max-width:700px){.cta{font-size:18px;padding:13px 18px;gap:24px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.cta{font-size:15.6px;min-height:42px;padding:8px 14px;gap:18px}.cta span{font-size:24px}}

/* Keep the primary invitation above the artwork on the mobile landing. */
@media(max-width:700px){.cta{top:300px}.stage{top:520px}.hero{min-height:990px;height:max(990px,100svh)}}
@media(max-width:360px){.cta{top:358px}.stage{top:578px}.hero{min-height:1048px;height:max(1048px,100svh)}}

/* Editorial hierarchy requested for the landing copy. */
.eyebrow{font-size:24px;line-height:1.25}
.proposition{font-size:19.5px;max-width:430px}
.beat.last{font-size:clamp(70.5px,6.825vw,115.5px)}
.cta{font-size:28.8px;font-weight:400;min-height:58px;padding:8px 0 13px;border:0;border-bottom:1px solid #17332c55;border-radius:0;background:transparent;color:#0e5a46;gap:38px;box-shadow:none}
.cta:hover{background:transparent;box-shadow:none;border-bottom-color:#0e5a46}
.email-help{position:fixed;z-index:60;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;max-width:calc(100% - 32px);padding:12px 14px 12px 18px;border:1px solid #17332c33;border-radius:3px;background:#f8f1e6;color:#17332c;box-shadow:0 12px 40px #17332c22;font-size:14px}
.email-help[hidden]{display:none}
.email-help button{border:0;background:#0e5a46;color:#f8f1e6;padding:10px 12px;white-space:nowrap}
@media(max-width:700px){.eyebrow{font-size:21.6px}.beat.last{font-size:clamp(58.5px,16.05vw,85.5px)}.proposition{font-size:18px}.cta{font-size:28.8px;padding:8px 0 13px;gap:30px}.email-help{align-items:flex-start;flex-direction:column;gap:8px;width:calc(100% - 32px)}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.eyebrow{font-size:19.2px}.beat.last{font-size:52.5px}.proposition{font-size:15px}.cta{font-size:24px;min-height:42px;padding:4px 0 8px}}

/* The public review fills the actual browser viewport; review chrome stays out of the landing. */
@media(min-width:701px){html,body,main{height:100%;overflow:hidden}.hero{height:100dvh;min-height:0;max-height:none}}
@media(min-width:701px) and (min-height:551px) and (max-height:760px){header{top:20px}.brand{width:135px}.copy{top:24%}.eyebrow{font-size:19.2px;margin-bottom:18px}.story{height:clamp(205px,36vh,250px)}.beat{font-size:clamp(56px,5.5vw,78px)}.beat.last{font-size:clamp(51px,4.7vw,69px)}.proposition{font-size:14px;margin:10px 0 12px}.cta{font-size:23px;min-height:45px;padding:4px 0 8px}.stage{top:9%;bottom:5%}}

/* Candidate IONOS: clearer header hierarchy and a direct contact ending. */
.brand{width:214px}
.proposition{font-size:15px;line-height:1.55;max-width:360px}
.contact-modal{width:min(540px,calc(100% - 64px));margin:auto 32px auto auto;border-color:#f8f1e633;background:#0e5a46;color:#f8f1e6;box-shadow:0 26px 100px #17332c40;opacity:0;transform:translateX(36px);transition:opacity .42s ease,transform .58s cubic-bezier(.2,.72,.2,1),display .58s allow-discrete,overlay .58s allow-discrete}
.contact-modal[open]{opacity:1;transform:translateX(0)}
@starting-style{.contact-modal[open]{opacity:0;transform:translateX(36px)}}
.contact-modal::backdrop{background:#17332c38;backdrop-filter:blur(5px)}
.contact-modal .eyebrow{color:#f8f1e6;font-size:14px}
.contact-modal .eyebrow:before{background:#e2b49b}
.contact-modal .contact-close{border-color:#f8f1e655;color:#f8f1e6}
.contact-modal h2{font-size:clamp(42px,4vw,58px);line-height:1.03;margin:24px 0 26px}
.contact-modal h2 em,.contact-modal .contact-write{color:#e2b49b}
.contact-modal .email{border-bottom-color:#f8f1e666}
.contact-modal .contact-hint{color:#f8f1e6b8}
@media(min-width:701px) and (min-height:551px) and (max-height:760px){.brand{width:174px}.proposition{font-size:12.5px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.brand{width:138px}.proposition{font-size:11px}.contact-modal{width:min(510px,calc(100% - 40px));max-height:calc(100svh - 24px);margin:auto 12px auto auto;padding:24px 30px}}
@media(max-width:700px){
 html,body,main{height:100%;overflow:hidden}
 .brand{width:146px}
 .hero{height:100dvh;min-height:0;max-height:none}
 .copy{top:126px}
 .story{height:230px}
 .proposition{font-size:13.5px;line-height:1.45;margin:13px 0}
 .cta{top:330px}
 .stage{top:505px;height:calc(100dvh - 517px);min-height:0}
 .contact-modal{width:calc(100% - 24px);max-height:calc(100svh - 24px);margin:auto 12px auto auto;transform:translateX(24px)}
 .contact-modal[open]{transform:translateX(0)}
 @starting-style{.contact-modal[open]{transform:translateX(24px)}}
}

/* The automatic ending is editorial content on the paper, never a modal. */
.copy{opacity:var(--end-copy-opacity,1)}
.end-contact{position:absolute;z-index:4;right:5.25vw;top:52%;width:min(590px,43vw);color:#17332c;opacity:var(--end-contact-reveal,0);transform:translateY(-50%);pointer-events:none}
.hero[data-ended] .end-contact{pointer-events:auto}
.end-kicker{display:flex;align-items:center;gap:14px;margin:0 0 25px;color:#0e5a46;font-size:13px;font-weight:700;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}
.end-kicker:before{content:'';width:25px;height:1px;background:#a45139}
.end-contact h2{margin:0 0 28px;font-size:clamp(48px,4.7vw,74px);font-weight:400;letter-spacing:-.052em;line-height:1.03}
.end-contact h2 em{color:#a45139;font-style:normal}
.end-description{margin:0 0 20px;font-size:16px;line-height:1.7}
.end-description a{color:#0e5a46;text-decoration:underline;text-decoration-color:#a45139;text-underline-offset:5px}
.end-email{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:12px 0;border-bottom:1px solid #17332c55;color:#17332c;font-size:clamp(19px,1.8vw,28px);line-height:1.35;overflow-wrap:anywhere}
.end-email span{flex:0 0 auto;color:#0e5a46;font-size:31px}
@media(min-width:701px) and (min-height:551px) and (max-height:760px){.end-contact{top:54%;width:min(520px,42vw)}.end-kicker{margin-bottom:16px;font-size:11px}.end-contact h2{margin-bottom:18px;font-size:clamp(40px,4.2vw,54px)}.end-description{margin-bottom:12px;font-size:13px}.end-email{font-size:19px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){.end-contact{top:55%;width:min(500px,44vw)}.end-kicker{margin-bottom:10px;font-size:9px}.end-contact h2{margin-bottom:12px;font-size:36px}.end-description{margin-bottom:8px;font-size:11px}.end-email{padding:8px 0;font-size:16px}}
@media(max-width:700px){.end-contact{left:24px;right:24px;top:142px;width:auto;transform:none}.end-kicker{margin-bottom:20px;font-size:11px}.end-contact h2{margin-bottom:24px;font-size:clamp(42px,11.3vw,54px)}.end-description{font-size:14px}.end-description br{display:none}.end-email{font-size:clamp(18px,5.2vw,24px)}}

/* Final hierarchy: keep the left closing statement, without duplicated contact actions. */
.hero[data-state="2"] .beat.last{font-size:clamp(56px,5.15vw,82px);line-height:1.05}
.hero[data-state="2"] .cta{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:700px){.hero[data-state="2"] .beat.last{font-size:clamp(46px,12vw,58px)}}
@media(max-width:700px){
 .hero[data-state="2"] .copy{top:126px}
 .hero[data-state="2"] .story{height:150px}
 .hero[data-state="2"] .end-contact{top:306px}
 .hero[data-state="2"] .end-kicker{margin-bottom:14px}
 .hero[data-state="2"] .end-contact h2{margin-bottom:18px;font-size:clamp(37px,9.7vw,44px)}
 .hero[data-state="2"] .end-description{margin-bottom:14px;font-size:13px;line-height:1.55}
 .hero[data-state="2"] .end-email{font-size:clamp(17px,4.7vw,21px)}
}

/* Candidato de revisión Rafa 2026-10-28: cierre de papel verde centrado en el viewport. */
.end-contact{
 left:50%;
 right:auto;
 top:50%;
 width:min(650px,42vw);
 padding:clamp(32px,3.25vw,54px) clamp(30px,3.4vw,56px) clamp(30px,3vw,48px);
 color:var(--paper);
 background:
  linear-gradient(132deg,#ffffff16 0 16%,transparent 16.5% 100%),
  linear-gradient(315deg,#071f161f 0 19%,transparent 19.5% 100%),
  radial-gradient(circle at 18% 16%,#ffffff12 0 1px,transparent 1.4px) 0 0/8px 8px,
  linear-gradient(146deg,#12624d 0%,#0e5a46 52%,#0b493a 100%);
 border:1px solid #f8f1e638;
 border-radius:2px;
 box-shadow:0 28px 70px #17332c2e,0 8px 22px #17332c20,inset 0 1px 0 #ffffff24;
 transform:translate(-50%,-50%);
 isolation:isolate;
 overflow:hidden;
}
.end-contact:before{
 content:'';
 position:absolute;
 z-index:-1;
 inset:0;
 pointer-events:none;
 background:
  linear-gradient(90deg,transparent 0 49.8%,#f8f1e60c 50%,transparent 50.35%),
  linear-gradient(180deg,transparent 0 62%,#061e1619 62.4%,transparent 63%);
 mix-blend-mode:screen;
}
.end-contact:after{
 content:'';
 position:absolute;
 z-index:-1;
 right:-1px;
 bottom:-1px;
 width:58px;
 height:58px;
 background:linear-gradient(135deg,#0a403300 0 49%,#082f2670 50% 51%,#f1e7d6 52% 100%);
 filter:drop-shadow(-5px -5px 7px #082f2633);
}
.end-kicker{color:#f8f1e6}
.end-kicker:before{background:#d77b5f}
.end-contact h2 em{color:#e2b49b}
.end-description{color:#f8f1e6de}
.end-description a{color:#f8f1e6;text-decoration-color:#e2b49b}
.end-email{border-bottom-color:#f8f1e65c;color:#f8f1e6}
.end-email span{color:#e2b49b}
@media(min-width:701px) and (min-height:551px) and (max-height:760px){
 .end-contact{left:50%;top:50%;width:min(570px,43vw);padding:28px 36px 25px}
}
@media(orientation:landscape) and (max-height:550px) and (min-width:701px){
 .end-contact{left:50%;top:50%;width:min(540px,45vw);padding:20px 28px 18px}
}
@media(max-width:700px){
 .end-contact{left:50%;right:auto;top:286px;width:calc(100% - 32px);padding:25px 23px 23px;transform:translateX(-50%)}
 .end-contact:after{width:42px;height:42px}
 .hero[data-state="2"] .end-contact{top:286px}
 .hero[data-state="2"] .end-kicker{font-size:10px}
 .hero[data-state="2"] .end-contact h2{font-size:clamp(34px,9.1vw,41px)}
 .hero[data-state="2"] .end-description{font-size:12.5px}
 .hero[data-state="2"] .end-email{font-size:clamp(16px,4.35vw,19px)}
}

/* Responsive candidate 2026-10-28: the closing statement and contact never collide. */
@media(min-width:1101px) and (min-height:551px){
 .hero[data-state="2"] .copy{
  top:84%;
  left:50%;
  width:min(760px,74vw);
  min-width:0;
  transform:translateX(-50%);
  text-align:center;
 }
 .hero[data-state="2"] .story{height:clamp(88px,13vh,116px)}
 .hero[data-state="2"] .beat.last{font-size:clamp(36px,2.65vw,42px);line-height:1.05;white-space:nowrap}
}

/* Cierre: la tarjeta toma protagonismo y el mensaje de marca queda debajo. */
@media(min-width:1101px) and (min-height:551px){
 .end-contact{
  top:42%;
  width:min(760px,53vw);
  padding:clamp(42px,3.6vw,62px) clamp(46px,4vw,66px) clamp(38px,3.4vw,56px);
  transform-origin:50% 100%;
  transform:perspective(1200px) translate(-50%,calc(-50% + (1 - var(--end-contact-reveal,0))*220px)) scale(calc(.5 + var(--end-contact-reveal,0)*.5)) rotateX(calc((1 - var(--end-contact-reveal,0))*58deg)) rotateZ(calc((1 - var(--end-contact-reveal,0))*-2deg));
  filter:blur(calc((1 - var(--end-contact-reveal,0))*7px)) drop-shadow(0 calc(30px + (1 - var(--end-contact-reveal,0))*28px) calc(34px + (1 - var(--end-contact-reveal,0))*28px) #17332c35);
  clip-path:inset(calc((1 - var(--end-contact-reveal,0))*72%) calc((1 - var(--end-contact-reveal,0))*13%) 0 round 3px);
 }
 .end-contact h2{font-size:clamp(58px,5.35vw,86px);margin-bottom:32px}
 .end-description{font-size:17px;margin-bottom:24px}
 .end-email{font-size:clamp(21px,2vw,30px);padding-top:15px}
}

@media(max-width:700px){
 .hero[data-state="2"] .copy{top:76%;left:24px;right:24px;width:auto;transform:none;text-align:center}
 .hero[data-state="2"] .story{height:88px}
 .hero[data-state="2"] .beat.last{font-size:clamp(29px,8.1vw,38px)}
 .hero[data-state="2"] .end-contact{top:39%;width:calc(100% - 28px);padding:28px 25px 25px;transform:translateX(-50%) translateY(calc((1 - var(--end-contact-reveal,0))*34px)) scale(calc(.9 + var(--end-contact-reveal,0)*.1));filter:blur(calc((1 - var(--end-contact-reveal,0))*4px));clip-path:inset(calc((1 - var(--end-contact-reveal,0))*14%) round 3px)}
}

/* El mensaje de marca entra después de que la tarjeta haya terminado su aparición. */
.hero[data-state="2"] .beat.last{opacity:0;transform:translateY(18px);transition:opacity .55s ease .28s,transform .7s cubic-bezier(.18,.8,.2,1) .28s}
.hero[data-state="2"][data-ended] .beat.last{opacity:1;transform:none}
.hero[data-state="2"] .beat:not(.last){opacity:0!important;visibility:hidden}
.hero[data-state="2"] .beat.last{color:var(--green)}

/* Movimiento móvil: el campo conserva la salida cinematográfica. */
@media(max-width:700px){
 .stage{top:min(430px,46dvh);bottom:12px;height:auto}
 .hero[data-state="2"] .end-contact{
  transform-origin:50% 100%;
  transform:perspective(900px) translate(-50%,calc((1 - var(--end-contact-reveal,0))*145px)) scale(calc(.62 + var(--end-contact-reveal,0)*.38)) rotateX(calc((1 - var(--end-contact-reveal,0))*52deg)) rotateZ(calc((1 - var(--end-contact-reveal,0))*-2deg));
  filter:blur(calc((1 - var(--end-contact-reveal,0))*6px)) drop-shadow(0 calc(24px + (1 - var(--end-contact-reveal,0))*22px) calc(28px + (1 - var(--end-contact-reveal,0))*20px) #17332c32);
  clip-path:inset(calc((1 - var(--end-contact-reveal,0))*64%) calc((1 - var(--end-contact-reveal,0))*10%) 0 round 3px);
 }
}

@media(min-width:701px) and (max-width:1100px) and (min-height:551px){
 .hero[data-state="2"] .copy{
  left:clamp(32px,6vw,64px);
  right:clamp(32px,6vw,64px);
  top:clamp(104px,13vh,145px);
  width:auto;
 }
 .hero[data-state="2"] .story{height:clamp(118px,17vh,165px)}
 .hero[data-state="2"] .beat.last{font-size:clamp(34px,5.4vw,49px);line-height:1.05}
 .hero[data-state="2"] .end-contact{
  left:50%;
  top:52%;
  width:min(650px,calc(100% - 48px));
  padding:clamp(22px,3.2vh,34px) clamp(25px,4vw,42px);
  transform:translate(-50%,-50%);
 }
 .hero[data-state="2"] .end-kicker{margin-bottom:clamp(10px,1.8vh,18px);font-size:11px}
 .hero[data-state="2"] .end-contact h2{margin-bottom:clamp(12px,2vh,20px);font-size:clamp(36px,5.2vw,48px)}
 .hero[data-state="2"] .end-description{margin-bottom:clamp(10px,1.7vh,16px);font-size:13px;line-height:1.5}
 .hero[data-state="2"] .end-email{padding:9px 0;font-size:clamp(17px,2.6vw,22px)}
}

@media(max-width:700px){
 .stage{top:min(505px,55dvh);bottom:12px;height:auto}
 .hero[data-state="2"] .copy{left:20px;right:20px;top:112px;width:auto}
 .hero[data-state="2"] .story{height:142px}
 .hero[data-state="2"] .beat.last{font-size:clamp(34px,9.6vw,44px);line-height:1.04}
 .hero[data-state="2"] .end-contact{
  left:50%;
  right:auto;
  top:274px;
  width:calc(100% - 28px);
  padding:clamp(19px,3.1vh,25px) clamp(18px,5vw,24px);
  transform:translateX(-50%);
 }
 .hero[data-state="2"] .end-kicker{margin-bottom:12px}
 .hero[data-state="2"] .end-contact h2{margin-bottom:15px;font-size:clamp(31px,8.8vw,40px);line-height:1.02}
 .hero[data-state="2"] .end-description{margin-bottom:12px;font-size:clamp(11.5px,3.25vw,13px);line-height:1.45}
 .hero[data-state="2"] .end-email{gap:12px;padding:9px 0;font-size:clamp(14.5px,4.15vw,18px)}
 .hero[data-state="2"] .end-email span{font-size:24px}
}

@media(max-width:700px) and (max-height:740px){
 header{top:14px}
 .brand{width:112px}
 .stage{top:350px;bottom:10px;height:auto}
 .hero[data-state="2"] .copy{top:86px}
 .hero[data-state="2"] .story{height:100px}
 .hero[data-state="2"] .beat.last{font-size:clamp(29px,8.2vw,34px);line-height:1.02}
 .hero[data-state="2"] .end-contact{top:196px;width:calc(100% - 20px);padding:15px 16px 14px}
 .hero[data-state="2"] .end-kicker{gap:9px;margin-bottom:8px;font-size:8.5px}
 .hero[data-state="2"] .end-kicker:before{width:18px}
 .hero[data-state="2"] .end-contact h2{margin-bottom:9px;font-size:clamp(25px,7.3vw,30px);line-height:1}
 .hero[data-state="2"] .end-description{margin-bottom:7px;font-size:10.5px;line-height:1.35}
 .hero[data-state="2"] .end-email{gap:8px;padding:6px 0;font-size:clamp(12.5px,3.7vw,15px);line-height:1.2}
 .hero[data-state="2"] .end-email span{font-size:19px}
 .hero[data-state="2"] .end-contact:after{width:32px;height:32px}
}

@media(orientation:landscape) and (max-height:550px) and (min-width:701px){
 .hero[data-state="2"] .copy{
  left:clamp(24px,5.25vw,56px);
  right:auto;
  top:50%;
  width:calc(50vw - clamp(54px,8vw,92px));
  transform:translateY(-50%);
 }
 .hero[data-state="2"] .story{height:clamp(96px,31vh,138px)}
 .hero[data-state="2"] .beat.last{font-size:clamp(28px,3.35vw,39px);line-height:1.03}
 .hero[data-state="2"] .end-contact{
  left:auto;
  right:clamp(18px,3vw,34px);
  top:50%;
  width:46vw;
  padding:clamp(15px,4vh,22px) clamp(18px,2.8vw,30px);
  transform:translateY(-50%);
 }
 .hero[data-state="2"] .end-kicker{margin-bottom:7px;font-size:8px}
 .hero[data-state="2"] .end-contact h2{margin-bottom:8px;font-size:clamp(25px,3.25vw,35px);line-height:1}
 .hero[data-state="2"] .end-description{margin-bottom:6px;font-size:10px;line-height:1.3}
 .hero[data-state="2"] .end-email{gap:9px;padding:5px 0;font-size:clamp(13px,1.8vw,18px);line-height:1.2}
 .hero[data-state="2"] .end-email span{font-size:20px}
}

/* Intermediate landscape: laptops and tablets with little usable height. */
@media(min-width:701px) and (max-width:1100px) and (min-height:551px) and (max-height:700px){
 .hero[data-state="2"] .copy{
  left:clamp(24px,4vw,44px);
  right:auto;
  top:50%;
  width:calc(43vw - 54px);
  transform:translateY(-50%);
 }
 .hero[data-state="2"] .story{height:clamp(104px,22vh,132px)}
 .hero[data-state="2"] .beat.last{font-size:clamp(27px,3.8vw,38px);line-height:1.03}
 .hero[data-state="2"] .end-contact{
  left:auto;
  right:clamp(16px,2.5vw,28px);
  top:50%;
  width:54vw;
  padding:clamp(17px,3.2vh,23px) clamp(20px,3vw,30px);
  transform:translateY(-50%);
 }
 .hero[data-state="2"] .end-kicker{margin-bottom:9px;font-size:9px}
 .hero[data-state="2"] .end-contact h2{margin-bottom:10px;font-size:clamp(27px,3.8vw,36px);line-height:1.01}
 .hero[data-state="2"] .end-description{margin-bottom:8px;font-size:10.5px;line-height:1.35}
 .hero[data-state="2"] .end-email{gap:10px;padding:6px 0;font-size:clamp(13px,1.9vw,17px);line-height:1.2}
 .hero[data-state="2"] .end-email span{font-size:21px}
 .hero[data-state="2"] .end-contact:after{width:38px;height:38px}
}