/* Celebration PRO — only the RSVP and animated festive overlays are refined.
   Original approved image and mobile invitation typography remain untouched. */
:root{--pro-navy:#153864;--pro-gold:#bd822e;--pro-gold-dark:#8f5918;--pro-line:#e5cda8;--pro-paper:#fffcf7}
body{overflow-x:hidden}
.invitation-page{isolation:isolate}
.pixel-poster{overflow:visible}
.pixel-poster>img{position:relative;z-index:0}
.pixel-poster>.party-rail{z-index:1}
.party-rail{position:absolute;pointer-events:none;overflow:hidden;user-select:none;z-index:2;contain:layout style paint}
.party-rail--poster-left{left:0;top:1%;width:14%;height:52%;-webkit-mask-image:linear-gradient(to right,#000 54%,transparent);mask-image:linear-gradient(to right,#000 54%,transparent)}
.party-rail--poster-right{right:0;top:0;width:12%;height:52%;-webkit-mask-image:linear-gradient(to left,#000 55%,transparent);mask-image:linear-gradient(to left,#000 55%,transparent)}
.outer-rail{top:15px;bottom:auto;width:125px;height:900px;z-index:-1;opacity:.96}
.outer-rail--left{left:-131px}
.outer-rail--right{right:-131px}
.party-rail--mobile-left,.party-rail--mobile-right{display:none}
.party-particle{position:absolute;top:-15%;left:var(--particle-x);display:block;--size:28px;width:var(--size);height:var(--size);opacity:.85;filter:drop-shadow(0 2px 3px rgba(28,70,98,.16));animation:float-party var(--duration) linear var(--delay) infinite;will-change:transform}
.party-particle svg,.party-particle img{width:100%;height:100%;display:block}
.party-particle--confetti{border-radius:3px;width:var(--size);height:calc(var(--size)*1.6);background:var(--confetti-color);filter:none;opacity:.88}
.party-particle--star{font:800 var(--size)/1 Georgia,serif;color:var(--confetti-color);filter:drop-shadow(0 1px 3px #d49c4680)}
@keyframes float-party{0%{transform:translate3d(0,-120px,0) rotate(0deg);opacity:0}7%{opacity:.88}88%{opacity:.91}100%{transform:translate3d(var(--drift),950px,0) rotate(var(--rotation));opacity:0}}
.party-firework{position:absolute;top:var(--fy);left:var(--fx);width:1px;height:1px;opacity:.85;transform:translateZ(0)}
.party-firework>span{position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--spark-color);box-shadow:0 0 7px var(--spark-color);animation:firework-spark var(--cycle) ease-out var(--spark-delay) infinite;transform:rotate(var(--angle)) translateY(0);will-change:transform,opacity}
.party-firework:before{content:'✦';position:absolute;left:-10px;top:-13px;color:#f8dca1;text-shadow:0 0 9px #fad27b;animation:firework-core var(--cycle) ease-out var(--spark-delay) infinite;font-size:20px}
@keyframes firework-spark{0%,7%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.1)}14%{opacity:1}34%{opacity:.95;transform:rotate(var(--angle)) translateY(calc(var(--reach)*-1)) scale(1)}59%,100%{opacity:0;transform:rotate(var(--angle)) translateY(calc(var(--reach)*-1.4)) scale(.35)}}
@keyframes firework-core{0%,8%,50%,100%{opacity:0;transform:scale(.1)}19%{opacity:1;transform:scale(1)}38%{opacity:.1;transform:scale(1.6)}}
@media(max-width:1300px){.outer-rail{display:none}}
@media(min-width:1301px){.party-rail--poster-left,.party-rail--poster-right{opacity:.6}}
/* HTML form as a premium floating card, placed exactly where the illustrated popup was. */
.rsvp-dialog{position:absolute;z-index:9;top:calc(min(100vw,1055px)*.351);left:calc(50% - min(100vw,1055px)/2 + min(100vw,1055px)*.504);width:calc(min(100vw,1055px)*.443);height:auto;pointer-events:auto;container-type:inline-size}
.dialog-panel{position:relative;width:100%;height:auto;pointer-events:auto;isolation:isolate;padding:6.5% 7% 4.6%;border:2px solid #cf9b47;border-radius:8% / 5.2%;background:radial-gradient(circle at 15% 0%,#fff 0%,#fffaf0 55%,#fff5e4 100%);box-shadow:0 17px 32px rgba(49,52,66,.25),0 4px 0 #e8b767,inset 0 0 0 5px #fffdf8,inset 0 0 0 7px #f1dbb1;color:var(--pro-navy)}
.dialog-panel:before{content:'';position:absolute;top:8px;bottom:8px;left:8px;right:8px;border:1px solid rgba(217,169,85,.44);border-radius:inherit;pointer-events:none}
.rsvp-dialog .close-rsvp{display:grid;place-items:center;position:absolute;top:-14px;right:-12px;width:clamp(34px,9.1cqw,49px);height:clamp(34px,9.1cqw,49px);aspect-ratio:1;padding:10px;border:2px solid #c68b37;border-radius:50%;background:linear-gradient(125deg,#fff8e7,#f5d8a7);color:#9e691c;box-shadow:0 3px 12px rgba(102,72,23,.22),inset 0 0 0 3px #fffdf1;transition:transform .2s,background .2s}
.rsvp-dialog .close-rsvp svg{width:100%;height:100%}
.close-rsvp:hover{transform:rotate(90deg);background:#fff3d1}
.rsvp-dialog :focus-visible{outline:3px solid #2267ba;outline-offset:3px}
.form-ornament{display:flex;align-items:center;justify-content:center;gap:13px;font:700 clamp(15px,5.2cqw,24px) Georgia,serif;color:#c99549;line-height:1;pointer-events:none;margin:0 0 2.3%}
.form-ornament>span:nth-child(2){font-size:1.45em}
.form-header,.form-mobile-title{display:block;position:static;text-align:center;padding:0;margin:0 0 5%;pointer-events:none}
.form-eyebrow{font:600 clamp(9px,2.5cqw,11px)/1.2 system-ui,sans-serif;letter-spacing:.21em;color:#9b7a4d;margin:0 0 1.9%}
.form-header h2{font:600 clamp(26px,8.2cqw,39px)/.99 'Cormorant Garamond',Georgia,serif;letter-spacing:-.03em;margin:0 0 3%;color:#103865}
.form-header h2 em{display:block;font:400 clamp(27px,8cqw,40px)/1 'Marck Script','Bad Script',cursive;letter-spacing:-.015em;color:#184d82;margin-top:1%}
.form-header p:not(.form-eyebrow){font:500 clamp(14px,3.65cqw,18px)/1.17 'Cormorant Garamond',Georgia,serif;color:#284266;margin:0 auto;max-width:32ch}
.form-screen,.rsvp-form{position:static;inset:auto;display:block;pointer-events:auto}
.rsvp-form{display:flex;flex-direction:column;gap:clamp(6px,1.5cqw,11px)}
.form-field{display:block;min-width:0}
.form-field>label{display:block;font:700 clamp(12px,3.3cqw,16px)/1.2 'Cormorant Garamond',Georgia,serif;letter-spacing:.012em;color:#1b3a62;margin-bottom:1.3%;padding-left:1%}
.form-field>label span{color:#bf8734}
.input-shell{display:flex;align-items:center;gap:3%;min-height:clamp(46px,11.5cqw,54px);border:1.5px solid #e1c9a6;border-radius:clamp(10px,3.4cqw,16px);background:linear-gradient(180deg,#fff,#fffcf9);box-shadow:0 2px 7px rgba(101,87,63,.07);padding:0 3.5%;transition:border-color .18s,box-shadow .18s,transform .18s}
.input-shell:focus-within{border-color:#ba8638;box-shadow:0 0 0 3px #f4dfb8,0 3px 10px rgba(114,92,47,.09)}
.input-icon{flex:none;width:clamp(19px,5.3cqw,25px);height:clamp(19px,5.3cqw,25px);color:#ba8b4f}
.input-shell input:not([type=checkbox]){border:0;outline:0;min-width:0;flex:1;width:100%;height:45px;background:transparent;color:#193d63;font:500 clamp(14px,3.8cqw,18px)/1.2 'Cormorant Garamond',Georgia,serif;padding:0;box-shadow:none;appearance:textfield;-moz-appearance:textfield}
.input-shell input[type=number]::-webkit-inner-spin-button,.input-shell input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.input-shell input::placeholder{color:#8b8b98;opacity:1}
.stepper{display:flex;flex:none;gap:4px}
.stepper-button{width:clamp(27px,7.4cqw,34px);height:clamp(27px,7.4cqw,34px);border:1px solid #e7d4b8;border-radius:9px;display:grid;place-items:center;color:#98651f;background:#fff9ed;font:600 clamp(16px,4.4cqw,20px) system-ui,sans-serif;line-height:1;transition:background .16s,transform .16s}
.stepper-button:hover{background:#f8e4bd;transform:translateY(-1px)}
.field-hint{font:500 clamp(11px,2.65cqw,13px)/1.3 'Cormorant Garamond',Georgia,serif;color:#66788a;margin:3px 4px 0}
.field-error{font:500 clamp(12px,2.7cqw,13px)/1.3 system-ui,sans-serif;color:#a82632;margin:4px 3px 0;min-height:0}
.field-error:empty{display:none}
.form-field.is-invalid .input-shell{border-color:#c94851;box-shadow:0 0 0 2px #fce7e7}
.rsvp-form .kids-checkbox{display:flex;align-items:center;position:relative;top:auto;left:auto;width:100%;height:auto;min-height:clamp(44px,10cqw,50px);padding:3% 3.3%;gap:3%;border:1px solid #d7e8f2;border-radius:clamp(11px,3.4cqw,16px);background:#f0f8fc;box-shadow:none;color:#234368;cursor:pointer;font:600 clamp(14px,3.5cqw,17px)/1.05 'Cormorant Garamond',Georgia,serif;white-space:normal;pointer-events:auto}
.rsvp-form .kids-checkbox:focus-within{outline:2px solid #2b6ab0;outline-offset:2px}
.kids-checkbox input{position:absolute;width:1px;height:1px;opacity:0}
.check-art{width:clamp(22px,5.5cqw,27px);height:clamp(22px,5.5cqw,27px);aspect-ratio:1;flex:none;border:1.7px solid #be945d;border-radius:7px;background:#fffefa;display:grid;place-items:center;box-shadow:0 1px 3px #6f5c3b15}
.check-art svg{height:17px;width:17px;opacity:0;transform:scale(.5);color:#fff;transition:opacity .15s,transform .15s}
.kids-checkbox input:checked+.check-art{background:#bd8737;border-color:#bd8737}
.kids-checkbox input:checked+.check-art::after{content:none}
.kids-checkbox input:checked+.check-art svg{opacity:1;transform:scale(1)}
.check-heart{margin-left:auto;width:clamp(20px,5.2cqw,25px);height:clamp(20px,5.2cqw,25px);color:#84b7d6}
.children-count-row{position:static;top:auto;left:auto;width:100%;display:grid;grid-template-columns:1fr 90px;align-items:center;gap:8px;background:#f6f9fb;border:1px solid #cce1ee;border-radius:12px;padding:9px 12px;box-shadow:none;font:600 clamp(13px,3.3cqw,15px)/1.1 'Cormorant Garamond',Georgia,serif}
.children-count-row input{height:38px;width:100%;border:1px solid #d9c3a4;border-radius:8px;background:white;color:#13355d;text-align:center;font:600 18px Georgia,serif}
.children-count-row .field-error{grid-column:1/-1}
.spam-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form-feedback{margin:2px 0;padding:9px 12px;border-radius:10px;background:#fff1ed;border:1px solid #e8b0a3;color:#872b25;font:600 clamp(11px,3.3cqw,15px)/1.3 'Cormorant Garamond',Georgia,serif}
.rsvp-form .confirm-button{position:relative;top:auto;left:auto;display:flex;align-items:center;justify-content:center;gap:4%;width:100%;height:auto;min-height:clamp(48px,12cqw,58px);margin-top:2%;border:1.5px solid #b77f31;border-radius:100px;background:linear-gradient(180deg,#f8d993 0%,#dfab54 36%,#bf832e 100%);box-shadow:inset 0 0 0 2px #fff1cc,0 3px 0 #9e6a29,0 8px 17px #9d75374d;color:white;font:600 clamp(22px,5.5cqw,27px)/1 'Cormorant Garamond',Georgia,serif;text-shadow:0 1px 2px #8e5a29;transition:transform .17s,filter .17s,box-shadow .17s;pointer-events:auto}
.rsvp-form .confirm-button:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 0 0 2px #fff1cc,0 4px 0 #9e6a29,0 11px 21px #9d753755}
.rsvp-form .confirm-button:active{transform:translateY(1px)}
.submit-heart{width:clamp(21px,5.5cqw,27px);height:clamp(21px,5.5cqw,27px);font-size:inherit;filter:drop-shadow(0 1px 2px #9c6116)}
.submit-arrow{position:absolute;right:6%;font:500 clamp(19px,5.5cqw,26px) Georgia,serif}
.contact-note{display:flex;align-items:center;justify-content:center;gap:9px;margin:clamp(12px,3.6cqw,18px) 0 0;text-align:center;font:600 clamp(12px,3.2cqw,15px)/1.18 'Cormorant Garamond',Georgia,serif;color:#284b74}
.contact-note svg{width:18px;height:18px;flex:none;color:#bf8530}
.rsvp-dialog .success-screen{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:220px;border-radius:15px;padding:24px 10px;background:radial-gradient(#fffefd,#f9eede);box-shadow:none;pointer-events:auto}
.big-success-heart{font-size:clamp(40px,11cqw,54px);line-height:1;color:#c9913c}
.success-screen h2{font:600 clamp(26px,8cqw,38px) 'Cormorant Garamond',Georgia,serif;margin:8px 0}
.success-screen p{font:500 clamp(16px,4cqw,21px)/1.2 'Cormorant Garamond',Georgia,serif}
.done-button{background:linear-gradient(#f4d389,#bf862f);border:1px solid #b28236;color:white;border-radius:40px;padding:10px 25px;font:600 18px 'Cormorant Garamond',Georgia,serif}
.poster-open-rsvp{position:absolute;top:44%;right:6%;font:600 2.7cqw 'Cormorant Garamond',Georgia,serif;z-index:6}
.form-status{display:none!important}
@media(min-width:1056px){.rsvp-dialog{top:370.3px;top:calc(1055px*.351);left:calc(50% - 527.5px + 531.7px);width:467.4px;height:auto}.rsvp-form .kids-checkbox{font-size:17px}.rsvp-form .confirm-button{font-size:27px}}
/* Smaller desktop screens: switch to a proper centered modal so inputs never shrink. */
@media(max-width:900px){
 .rsvp-dialog:not(.is-open){display:none}
 .rsvp-dialog{position:fixed;inset:0;width:100%;height:100%;padding:18px;display:grid;place-items:center;z-index:30;background:rgba(13,37,64,.65);backdrop-filter:blur(8px);overflow-y:auto;container-type:normal}
 .dialog-panel{width:min(100%,460px);max-height:min(94dvh,950px);overflow-y:auto;border-radius:27px;padding:27px 25px 22px;container-type:inline-size}
 .rsvp-dialog .close-rsvp{top:8px;right:9px}
 .form-header h2{font-size:clamp(29px,8cqw,39px)}.form-header h2 em{font-size:clamp(28px,8.4cqw,39px)}
 .input-shell input:not([type=checkbox]){font-size:17px}
 .rsvp-dialog .confirm-button{font-size:26px}
 .form-eyebrow{font-size:11px}
 .rsvp-dialog .kids-checkbox{font-size:17px}
 .contact-note{font-size:14px}
 .form-field>label{font-size:16px}.field-hint{font-size:13px}
 .children-count-row{font-size:15px}
 .rsvp-dialog .close-rsvp{width:37px;height:37px}
 .mobile-modal-open{overflow:hidden}
}
@media(max-width:740px){
 .party-rail--poster-left,.party-rail--poster-right{display:none}
 .party-rail--mobile-left,.party-rail--mobile-right{display:block;top:0;height:100%;width:22%;z-index:3;opacity:.86}
 .party-rail--mobile-left{left:0;-webkit-mask-image:linear-gradient(90deg,#000 43%,transparent);mask-image:linear-gradient(90deg,#000 43%,transparent)}
 .party-rail--mobile-right{right:0;-webkit-mask-image:linear-gradient(-90deg,#000 43%,transparent);mask-image:linear-gradient(-90deg,#000 43%,transparent)}
 .mobile-hero img{z-index:1}.mobile-hero .party-rail{z-index:2}
 .rsvp-dialog{padding:12px}
 .dialog-panel{width:min(100%,450px);padding:32px 24px 22px;border-radius:29px}
 .form-header,.form-mobile-title{margin:0 0 18px;padding:0}
 .form-ornament{margin-bottom:10px}
 .form-header h2{margin-bottom:13px}
 .form-header h2 em{margin-top:3px}
 .form-header p:not(.form-eyebrow){font-size:19px;line-height:1.13}
 .rsvp-form{gap:12px}
 .form-field>label{margin-bottom:5px}
 .rsvp-form .kids-checkbox{min-height:48px;padding:10px 12px}
 .children-count-row{padding:10px 12px}
 .contact-note{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.party-particle,.party-firework>span,.party-firework:before{animation:none!important;opacity:.2}.close-rsvp:hover{transform:none}}
/* Desktop art-directed placement: preserve the visible title and subtitle above the RSVP. */
@media(min-width:901px){
 .rsvp-dialog{top:calc(min(100vw,1055px)*.523)}
 .dialog-panel{padding-top:4.5%;padding-bottom:3.3%}
 .form-ornament{margin-bottom:1.5%;font-size:19px}
 .form-header{margin-bottom:3.5%}
 .form-header h2{font-size:35px;margin-bottom:2.1%}
 .form-header h2 em{font-size:35px}
 .form-eyebrow{font-size:10px;margin-bottom:1.5%}
 .form-header p:not(.form-eyebrow){font-size:17px;line-height:1.12}
 .rsvp-form{gap:7px}
 .form-field>label{font-size:15px;margin-bottom:.8%}
 .input-shell{min-height:49px}
 .input-shell input:not([type=checkbox]){height:42px}
 .rsvp-form .kids-checkbox{min-height:44px;padding:2.2% 3%}
 .rsvp-form .confirm-button{min-height:53px;margin-top:1%}
 .contact-note{margin-top:11px}
}
@media(min-width:1056px){.rsvp-dialog{top:551.8px}}
/* Tiny expanding halo makes each side firework read as a burst, not a stationary star. */
.party-firework:after{content:'';position:absolute;left:-36px;top:-36px;width:72px;height:72px;border:2px dotted var(--spark-color);border-radius:50%;opacity:0;filter:drop-shadow(0 0 4px var(--spark-color));animation:firework-halo var(--cycle) ease-out var(--spark-delay) infinite}
@keyframes firework-halo{0%,10%{opacity:0;transform:scale(.1)}19%{opacity:.75;transform:scale(.45)}40%{opacity:.48;transform:scale(1)}59%,100%{opacity:0;transform:scale(1.27)}}
@media(prefers-reduced-motion:reduce){.party-firework:after{animation:none!important;display:none}}