:root{
  --ivory:#f5f0e8;
  --paper:#fffdf9;
  --paper-2:#eee6da;
  --champagne:#c9b083;
  --gold:#aa8d60;
  --gold-deep:#826b49;
  --charcoal:#292724;
  --ink:#38332e;
  --stone:#81786f;
  --sage:#777c70;
  --black:#0f0f0e;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;
  --ease:cubic-bezier(.22,.75,.18,1);
  --hairline:rgba(47,42,36,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ivory)}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:400;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:white}

.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");background-size:180px 180px;mix-blend-mode:multiply}

/* short editorial prelude */
.prelude{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;background:#11110f;color:#f7f2ea;transition:opacity .55s ease,visibility .55s ease}
.prelude.done{opacity:0;visibility:hidden;pointer-events:none}
.prelude-inner{width:min(360px,74vw);display:grid;grid-template-columns:1fr 90px 1fr;grid-template-rows:auto auto;align-items:center;text-align:center}
.prelude-initial{font:500 clamp(3rem,8vw,5.6rem)/1 var(--serif);opacity:0;animation:preludeLetter .65s var(--ease) forwards}
.prelude-left{transform:translateX(-18px)}.prelude-right{transform:translateX(18px);animation-delay:.08s}
.prelude-line{height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:center;animation:preludeLine .65s .18s var(--ease) forwards}
.prelude small{grid-column:1/-1;margin-top:1.05rem;font-size:.66rem;letter-spacing:.34em;opacity:0;animation:preludeDate .4s .38s ease forwards}
@keyframes preludeLetter{to{opacity:1;transform:none}}@keyframes preludeLine{to{transform:scaleX(1)}}@keyframes preludeDate{to{opacity:.72}}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:11000;width:8px;height:8px;border:1px solid rgba(255,255,255,.76);background:rgba(255,255,255,.18);border-radius:50%;pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0);transition:width .28s var(--ease),height .28s var(--ease),border-color .28s ease,background .28s ease,opacity .18s ease;display:grid;place-items:center;backdrop-filter:none}
.cursor span{font-size:.46rem;letter-spacing:.14em;color:#fff;white-space:nowrap;opacity:0;transition:opacity .18s ease}.cursor.active{opacity:.9}.cursor.has-label{width:66px;height:66px;background:rgba(18,17,15,.78);border-color:rgba(255,255,255,.24)}.cursor.has-label span{opacity:1}

/* opening gate */
.gate{position:fixed;inset:0;z-index:10000;background:#efe8dd;display:grid;grid-template-rows:1fr auto 1fr;place-items:center;overflow:hidden;transition:opacity .85s var(--ease),visibility .85s ease}
.gate::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 18%,rgba(255,255,255,.8),transparent 32%),linear-gradient(115deg,rgba(255,255,255,.4),transparent 42%);pointer-events:none}
.gate-light{position:absolute;width:50vw;height:120vh;right:-7vw;top:-18vh;transform:rotate(13deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);filter:blur(18px);opacity:.55}
.gate-botanical{position:absolute;width:min(320px,32vw);opacity:.12;filter:sepia(1) saturate(.35)}
.gate-botanical-left{left:-5%;bottom:-7%;transform:rotate(-18deg)}.gate-botanical-right{right:-4%;top:-6%;transform:rotate(165deg)}
.gate-copy{position:relative;z-index:4;text-align:center;align-self:end;margin-bottom:clamp(24px,4vh,46px);opacity:0;transform:translateY(10px);transition:.7s .12s var(--ease)}
.gate.ready .gate-copy{opacity:1;transform:none}
.gate-copy>span{display:block;font-size:.62rem;letter-spacing:.38em;text-transform:uppercase;color:#72695f;margin-bottom:.55rem}
.gate-copy strong{display:block;font:500 clamp(2rem,4.4vw,4rem)/1 var(--serif);letter-spacing:.02em}.gate-copy small{display:block;margin-top:.75rem;font-size:.58rem;letter-spacing:.32em;color:#8c8176}
.envelope-stage{position:relative;z-index:5;width:min(520px,84vw);height:min(330px,52vw);max-height:330px;border:0;background:none;padding:0;cursor:pointer;perspective:1200px;opacity:0;transform:translateY(18px) scale(.98);transition:.8s .2s var(--ease)}
.gate.ready .envelope-stage{opacity:1;transform:none}.envelope-shadow{position:absolute;left:10%;right:10%;bottom:3%;height:15%;border-radius:50%;background:rgba(37,31,25,.22);filter:blur(22px);transform:scaleX(.92)}
.envelope{position:absolute;inset:7% 3% 9%;transform-style:preserve-3d}
.env-back,.env-front,.env-flap,.env-letter{position:absolute;inset:0}
.env-back{background:#d8c5ab;box-shadow:inset 0 0 0 1px rgba(97,75,49,.16)}
.env-letter{left:7%;right:7%;top:5%;bottom:4%;z-index:2;background:#fffdf8;padding:11% 8% 9%;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 15px 55px rgba(55,41,25,.12);transform:translateY(12%);transition:transform 1.05s .45s var(--ease),box-shadow .8s ease}
.env-letter span{font-size:.47rem;letter-spacing:.3em;text-transform:uppercase}.env-letter strong{font:500 clamp(1.6rem,4.4vw,3.2rem)/.95 var(--serif);margin:1rem 0 .8rem}.env-letter strong em{font-weight:400}.env-letter small{font-size:.5rem;letter-spacing:.28em}.letter-rule{width:52px;height:1px;background:#b69b73;margin:0 auto 1.05rem}
.env-front{z-index:4;pointer-events:none}.env-front-left{clip-path:polygon(0 0,52% 58%,0 100%);background:#e3d3bd}.env-front-right{clip-path:polygon(100% 0,48% 58%,100% 100%);background:#d9c6ab}.env-front-bottom{clip-path:polygon(0 100%,50% 51%,100% 100%);background:#e7d8c4}
.env-flap{z-index:5;background:#cfb99b;clip-path:polygon(0 0,100% 0,50% 63%);transform-origin:top center;transition:transform .85s .08s var(--ease);backface-visibility:hidden}
.wax-seal{position:absolute;z-index:7;left:50%;top:54%;width:78px;height:78px;transform:translate(-50%,-50%);border-radius:48% 52% 46% 54%;display:grid;place-items:center;background:radial-gradient(circle at 32% 27%,#b99364,#7d5d39 68%);box-shadow:0 7px 16px rgba(65,40,20,.32),inset 0 0 0 2px rgba(255,255,255,.18);color:#f6e9d2;font:500 1.05rem var(--serif);letter-spacing:.08em;transition:opacity .35s ease,transform .55s var(--ease)}
.wax-seal i{position:absolute;inset:10px;border:1px solid rgba(255,244,224,.38);border-radius:50%}
.gate-action{position:relative;z-index:6;align-self:start;margin-top:clamp(18px,3vh,34px);border:0;background:none;display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;color:#5f554b;text-transform:uppercase;letter-spacing:.26em;font-size:.58rem;cursor:pointer;opacity:0;transition:.7s .45s ease}.gate.ready .gate-action{opacity:1}.gate-action b{font-weight:400;font-size:.9rem}.gate-brand{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:.5rem;letter-spacing:.24em;color:#86796d}.gate-brand span{opacity:.55}
.gate.opening .env-flap{transform:rotateX(178deg);z-index:1}.gate.opening .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.76)}.gate.opening .env-letter{transform:translateY(-35%) scale(1.08);box-shadow:0 25px 80px rgba(55,41,25,.18)}.gate.opening .gate-copy,.gate.opening .gate-action,.gate.opening .gate-brand{opacity:0;transition-duration:.35s}.gate.leaving{opacity:0;visibility:hidden;pointer-events:none}

/* nav */
.topbar{position:fixed;z-index:500;top:0;left:0;right:0;height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(20px,4vw,64px);color:#fff;mix-blend-mode:difference;transition:opacity .3s ease}
.brand-mark{font:500 1rem var(--serif);letter-spacing:.12em}.nav-links{display:flex;gap:2rem}.nav-links a{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;position:relative}.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .35s var(--ease)}.nav-links a:hover::after{right:0}
.menu-btn{display:none;justify-self:end;width:38px;height:38px;border:0;background:none;padding:10px;cursor:pointer}.menu-btn span{display:block;height:1px;background:currentColor;margin:5px 0}
.mobile-menu{position:fixed;z-index:900;inset:0;background:#171715;color:#f5efe5;padding:28px;display:flex;flex-direction:column;transform:translateY(-102%);visibility:hidden;transition:transform .65s var(--ease),visibility .65s}.mobile-menu.open{transform:none;visibility:visible}.mobile-menu-head{display:flex;justify-content:space-between;align-items:center}.mobile-menu-head span{font:500 1.2rem var(--serif);letter-spacing:.1em}.mobile-menu-head button{border:0;background:none;color:inherit;font-size:2rem;font-weight:200}.mobile-menu nav{margin:auto 0;display:flex;flex-direction:column}.mobile-menu nav a{font:400 clamp(2.8rem,12vw,5rem)/1 var(--serif);padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.12)}.mobile-menu nav a span{display:inline-block;width:42px;font:400 .55rem var(--sans);letter-spacing:.18em;vertical-align:middle}.mobile-menu>p{font-size:.55rem;letter-spacing:.3em}

/* shared controls */
.text-link,.creator-link{display:inline-flex;align-items:center;gap:.8rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding:.35rem 0 .55rem}.text-link b,.creator-link b{font-weight:400;font-size:.9rem}
.toast{position:fixed;z-index:6000;right:24px;bottom:24px;width:min(330px,calc(100vw - 48px));padding:18px 20px;background:#1d1c1a;color:#fff;transform:translateY(30px);opacity:0;visibility:hidden;transition:.4s var(--ease)}.toast.show{transform:none;opacity:1;visibility:visible}.toast strong{display:block;font:500 1.25rem var(--serif);margin-bottom:.25rem}.toast span{font-size:.68rem;opacity:.72}

/* creator */
.creator{min-height:88vh;padding:clamp(90px,12vw,180px) clamp(24px,6vw,96px) 34px;background:#121210;color:#f5efe5;display:flex;flex-direction:column;justify-content:space-between}.creator-kicker{font-size:.55rem;letter-spacing:.3em;color:#cbb58f}.creator-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;align-items:end}.creator h2{margin:0;font:500 clamp(4rem,8vw,9rem)/.78 var(--serif);letter-spacing:-.055em}.creator h2 em{font-weight:400;color:#c8ad80}.creator-grid>div{max-width:430px}.creator p{font-size:.86rem;line-height:1.9;color:rgba(255,255,255,.66);margin:0 0 2rem}.creator-link{color:#fff}.creator-footer{display:flex;justify-content:space-between;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);font-size:.52rem;letter-spacing:.22em}.creator-footer a{opacity:.6}

/* modal */
.gallery-modal{position:fixed;z-index:7000;inset:0;background:rgba(13,13,12,.96);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.45s ease}.gallery-modal.open{opacity:1;visibility:visible}.gallery-modal img{max-width:min(88vw,1200px);max-height:82vh;object-fit:contain}.gallery-modal button{position:absolute;top:24px;right:26px;border:0;background:none;color:#fff;font:300 2.5rem/1 var(--sans);cursor:pointer}.gallery-modal span{position:absolute;bottom:26px;color:#fff;font-size:.55rem;letter-spacing:.25em;text-transform:uppercase}

@media (hover:none),(pointer:coarse){.cursor{display:none!important}}
@media(max-width:680px){.grain{display:none!important}}
:where(a,button,input,textarea,select):focus-visible{outline:1px solid var(--gold);outline-offset:4px}
@media(max-width:900px){.nav-links{display:none}.topbar{grid-template-columns:1fr auto;gap:18px;height:64px;padding:0 20px}.menu-btn{display:block}.creator-grid{grid-template-columns:1fr;align-items:start}.creator h2{font-size:clamp(3.8rem,16vw,6.8rem)}.creator-grid>div{max-width:520px}.gate-botanical{width:48vw}}
@media(max-width:560px){.gate-copy{margin-bottom:24px}.gate-copy>span{letter-spacing:.27em}.envelope-stage{width:94vw;height:62vw}.wax-seal{width:62px;height:62px}.env-letter{padding-top:9%}.env-letter strong{font-size:1.7rem}.creator{min-height:100svh}.creator-footer{font-size:.45rem;letter-spacing:.12em}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.cursor,.grain{display:none!important}}

/* V8 gate choreography: the physical invitation grows toward the screen before revealing the film. */
.env-letter{transform-origin:center center}
.gate.leaving .env-letter{transform:translateY(-8%) scale(2.15);opacity:.18;transition:transform .9s var(--ease),opacity .55s ease}
.gate.leaving .envelope-shadow{opacity:0;transition:opacity .3s ease}

/* V11 viewport containment: internal swipe galleries may be wider than the
   screen, but the document itself never acquires sideways scroll/bounce. */
html,body{max-width:100%;overflow-x:hidden}
@supports(overflow:clip){html,body{overflow-x:clip}}


/* ============================================================
   V11.4 — READABILITY + INPUT RELIABILITY
   Clearer typography, larger functional text, no accidental scroll traps.
   ============================================================ */
body{font-weight:400;line-height:1.6;overscroll-behavior-y:auto}
html,body{scrollbar-gutter:stable}

/* Small editorial labels remain refined, but are now actually readable. */
.prelude small{font-size:.74rem;letter-spacing:.26em}
.gate-copy>span{font-size:.72rem;letter-spacing:.28em}
.gate-copy small{font-size:.68rem;letter-spacing:.24em}
.env-letter span{font-size:.64rem;letter-spacing:.22em}
.env-letter small{font-size:.65rem;letter-spacing:.20em}
.gate-action{font-size:.68rem;letter-spacing:.20em;font-weight:500}
.gate-brand{font-size:.62rem;letter-spacing:.18em}
.nav-links a{font-size:.68rem;letter-spacing:.15em;font-weight:500}
.mobile-menu nav a span{font-size:.66rem}
.mobile-menu>p{font-size:.68rem}
.toast span{font-size:.76rem;line-height:1.55}
.creator-kicker{font-size:.68rem;letter-spacing:.22em}
.creator p{font-size:1rem;line-height:1.8}
.creator-footer{font-size:.66rem;letter-spacing:.15em}
.gallery-modal span{font-size:.68rem;letter-spacing:.18em}

@media(max-width:680px){
  .topbar{height:66px;padding:0 18px}
  .brand-mark{font-size:1.08rem}
  .gate-copy>span{font-size:.68rem}
  .gate-copy small{font-size:.64rem}
  .gate-action{font-size:.66rem}
  .gate-brand{font-size:.58rem;white-space:nowrap}
  .mobile-menu{padding:24px}
}


/* V11.5 interface legibility */
.nav-links a{font-size:.78rem!important;letter-spacing:.12em!important;font-weight:600!important}
.brand-mark{font-size:1.08rem!important;letter-spacing:.10em!important}


/* ============================================================
   V11.7 — WEBXCODE END-CREDIT REVEAL
   webXCode live brand palette: #0A0A0A / #E8000D / #FFFFFF
   ============================================================ */
.creator.creator-webx{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;padding:clamp(30px,4.5vw,72px) clamp(24px,5vw,84px) clamp(28px,3.5vw,54px);
  background:#0A0A0A;color:#fff;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(28px,5vh,70px)
}
.creator.creator-webx::before{
  content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);opacity:.55
}
.creator.creator-webx::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#E8000D 24%,#E8000D 76%,transparent);opacity:.72
}
.creator-x-outline{
  position:absolute;z-index:-3;right:-.02em;top:50%;transform:translate3d(12%,-51%,0) rotate(-4deg);
  font:700 min(68vw,860px)/.68 var(--sans);letter-spacing:-.12em;color:transparent;
  -webkit-text-stroke:1px rgba(232,0,13,.17);opacity:.85;pointer-events:none;will-change:transform,opacity
}
.creator-red-glow{
  position:absolute;z-index:-2;right:-18vw;top:14%;width:min(64vw,980px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,0,13,.16),rgba(232,0,13,.05) 28%,transparent 67%);filter:blur(12px);opacity:.72
}
.creator-topline{display:flex;align-items:center;gap:16px;font:600 .68rem/1 var(--sans);letter-spacing:.24em;color:rgba(255,255,255,.62);text-transform:uppercase}
.creator-topline>span:first-child{color:#fff}.creator-topline i{width:48px;height:1px;background:#E8000D;transform-origin:left;transform:scaleX(.35)}
.creator-brand-stage{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(320px,.62fr);gap:clamp(42px,7vw,120px);align-items:center;min-height:62vh}
.webx-brand-lockup{align-self:center;min-width:0}
.webx-wordmark{display:flex;align-items:baseline;white-space:nowrap;font:600 clamp(6rem,12.7vw,14.5rem)/.72 var(--sans);letter-spacing:-.085em;color:#fff;text-shadow:0 0 34px rgba(255,255,255,.025)}
.webx-wordmark span{display:inline-block}.webx-wordmark b{display:inline-block;color:#E8000D;font-weight:500;font-size:1.04em;line-height:.72;letter-spacing:-.08em;text-shadow:0 0 18px rgba(232,0,13,.26),0 0 52px rgba(232,0,13,.11)}
.webx-brand-lockup small{display:block;margin-top:clamp(20px,3vh,34px);font:500 clamp(.62rem,.8vw,.82rem)/1 var(--sans);letter-spacing:.47em;color:rgba(255,255,255,.64);padding-left:.35em}
.creator-message{width:min(100%,520px);justify-self:end;padding-top:clamp(10px,2vh,24px)}
.creator-eyebrow{display:flex;align-items:center;gap:12px;color:#E8000D;font:650 .69rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.creator-eyebrow::before{content:"";width:36px;height:1px;background:currentColor}
.creator-message h2{margin:1.2rem 0 1.35rem;font:500 clamp(3.2rem,4.8vw,6.1rem)/.86 var(--serif);letter-spacing:-.045em;color:#fff}
.creator-message h2 em{font-weight:400;color:#fff;font-style:italic}
.creator-message p{margin:0 0 2rem;max-width:500px;font:400 clamp(.96rem,1.15vw,1.12rem)/1.8 var(--sans);color:rgba(255,255,255,.65)}
.creator-actions{display:flex;gap:12px;flex-wrap:wrap}
.creator-primary,.creator-secondary{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;padding:0 18px 0 20px;text-transform:uppercase;font:650 .67rem/1 var(--sans);letter-spacing:.14em;transition:transform .3s var(--ease),background .3s ease,border-color .3s ease,color .3s ease}
.creator-primary{background:#E8000D;color:#fff;border:1px solid #E8000D;min-width:225px;box-shadow:0 12px 44px rgba(232,0,13,.12)}
.creator-primary:hover{background:#ff1020;border-color:#ff1020;transform:translateY(-2px)}
.creator-secondary{color:#fff;border:1px solid rgba(255,255,255,.24);min-width:190px}.creator-secondary:hover{border-color:#fff;transform:translateY(-2px)}
.creator-primary b,.creator-secondary b{font-weight:400;font-size:1rem}
.creator-bottomline{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10);font:500 .62rem/1 var(--sans);letter-spacing:.18em;color:rgba(255,255,255,.45)}
.creator-capabilities{display:flex;gap:28px;flex-wrap:wrap}.creator-capabilities span{position:relative}.creator-capabilities span+span::before{content:"";position:absolute;left:-15px;top:50%;width:3px;height:3px;border-radius:50%;background:#E8000D;transform:translateY(-50%)}

/* Reveal is subtle: the brand, not the animation, is the hero. */
.creator-webx .creator-topline,.creator-webx .webx-brand-lockup,.creator-webx .creator-message,.creator-webx .creator-bottomline{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s ease,transform .9s var(--ease)}
.creator-webx .webx-wordmark b{transform:scale(.82);opacity:.15;transition:transform 1s .18s var(--ease),opacity .7s .18s ease}
.creator-webx.creator-in .creator-topline{opacity:1;transform:none;transition-delay:.05s}.creator-webx.creator-in .webx-brand-lockup{opacity:1;transform:none;transition-delay:.13s}.creator-webx.creator-in .webx-wordmark b{transform:scale(1);opacity:1}.creator-webx.creator-in .creator-message{opacity:1;transform:none;transition-delay:.24s}.creator-webx.creator-in .creator-bottomline{opacity:1;transform:none;transition-delay:.34s}
.creator-webx.creator-in .creator-x-outline{animation:webxOutlineDrift 7s ease-in-out infinite alternate}
@keyframes webxOutlineDrift{from{transform:translate3d(12%,-51%,0) rotate(-4deg)}to{transform:translate3d(8%,-49%,0) rotate(-2deg)}}

@media(max-width:1050px){
  .creator-brand-stage{grid-template-columns:1fr;gap:7vh;align-content:center}.creator-message{justify-self:start;width:min(100%,650px)}
  .webx-wordmark{font-size:clamp(5.8rem,16vw,11.5rem)}.creator-x-outline{font-size:86vw;right:-12vw;top:42%}
}
@media(max-width:680px){
  .creator.creator-webx{min-height:100svh;padding:26px 20px 24px;gap:24px}
  .creator-topline{font-size:.58rem;letter-spacing:.16em;gap:10px}.creator-topline i{width:22px}.creator-topline span:last-child{opacity:.55}
  .creator-brand-stage{min-height:0;align-content:center;gap:6vh}.webx-wordmark{font-size:clamp(4.25rem,20.5vw,7rem);letter-spacing:-.095em}.webx-brand-lockup small{font-size:.54rem;letter-spacing:.30em;margin-top:18px}
  .creator-message h2{font-size:clamp(3rem,13.5vw,5rem);margin-top:1rem}.creator-message p{font-size:.94rem;line-height:1.72}.creator-eyebrow{font-size:.61rem;letter-spacing:.17em}
  .creator-actions{display:grid;grid-template-columns:1fr}.creator-primary,.creator-secondary{width:100%;min-width:0}
  .creator-bottomline{align-items:flex-start;flex-direction:column-reverse;font-size:.56rem;letter-spacing:.13em}.creator-capabilities{gap:18px}.creator-capabilities span+span::before{left:-10px}
  .creator-x-outline{font-size:118vw;right:-28vw;top:30%;opacity:.58}.creator-red-glow{width:110vw;right:-60vw;top:15%}
}
@media(prefers-reduced-motion:reduce){.creator-webx .creator-topline,.creator-webx .webx-brand-lockup,.creator-webx .creator-message,.creator-webx .creator-bottomline{opacity:1!important;transform:none!important}.creator-webx .webx-wordmark b{opacity:1!important;transform:none!important}.creator-x-outline{animation:none!important}}


/* 11.7.1 — use supplied webXCode logo image in end credits */
.webx-brand-image{display:flex;align-items:center;justify-content:flex-start;min-width:0}
.webx-brand-image img{display:block;width:min(100%,980px);height:auto;filter:drop-shadow(0 10px 42px rgba(232,0,13,.16))}
.creator-brand-stage{grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr);gap:clamp(34px,5vw,84px)}
.creator-message{width:min(100%,540px)}
@media (max-width:1200px){.webx-brand-image img{width:min(100%,820px)}}
@media (max-width:900px){.creator-brand-stage{grid-template-columns:1fr;gap:28px}.webx-brand-image{justify-content:center}.webx-brand-image img{width:min(100%,760px)}}
@media (max-width:560px){.webx-brand-image img{width:100%;max-width:100%}.creator-topline{gap:10px;font-size:.58rem}.creator-message h2{font-size:clamp(2.5rem,12vw,4rem)}}


/* ============================================================
   V12.2 CINEMATIC STATIONERY OPENING
   ============================================================ */
.gate.gate-cinematic{
  background:#141310;color:#f8f2e8;display:grid;grid-template-rows:auto 1fr auto;
  place-items:center;isolation:isolate;perspective:1800px;
}
.gate.gate-cinematic::before{
  content:"";position:absolute;inset:0;z-index:-5;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(218,190,150,.16),transparent 33%),
    radial-gradient(circle at 72% 12%,rgba(255,244,221,.09),transparent 24%),
    linear-gradient(130deg,#0e0e0d 0%,#1b1916 48%,#11110f 100%);
}
.gate.gate-cinematic::after{
  content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 18%,transparent 78%,rgba(0,0,0,.28));
}
.gate-room-light{position:absolute;z-index:-3;left:50%;top:50%;width:min(1000px,76vw);height:min(680px,68vh);transform:translate(-50%,-48%) rotate(-4deg);background:radial-gradient(ellipse at center,rgba(255,237,207,.18),rgba(255,237,207,.07) 42%,transparent 72%);filter:blur(18px);opacity:.9;animation:roomLightBreath 7s ease-in-out infinite alternate;will-change:transform,opacity}
.gate-room-vignette{position:absolute;inset:0;z-index:10;pointer-events:none;box-shadow:inset 0 0 18vw rgba(0,0,0,.46)}
.gate-shadow-leaf{position:absolute;z-index:-1;width:42vw;height:58vh;opacity:.11;filter:blur(2px);background-image:url("assets/botanical.svg");background-size:contain;background-repeat:no-repeat;background-position:center;filter:invert(91%) sepia(12%) saturate(364%) hue-rotate(348deg) brightness(78%) contrast(88%) blur(.5px)}
.gate-shadow-leaf-a{left:-12vw;bottom:-19vh;transform:rotate(-28deg) scale(1.25);animation:leafShadowA 12s ease-in-out infinite alternate}
.gate-shadow-leaf-b{right:-12vw;top:-18vh;transform:rotate(150deg) scale(1.18);animation:leafShadowB 13s ease-in-out infinite alternate}
.gate-topline{position:absolute;z-index:25;top:max(28px,calc(env(safe-area-inset-top) + 22px));left:clamp(24px,4vw,68px);right:clamp(24px,4vw,68px);display:flex;align-items:center;gap:16px;font:600 .62rem/1 var(--sans);letter-spacing:.26em;color:rgba(246,236,221,.54);opacity:0;transform:translateY(-8px);transition:opacity .8s .16s ease,transform .8s .16s var(--ease)}
.gate-topline i{height:1px;flex:1;background:linear-gradient(90deg,rgba(205,172,126,.65),rgba(205,172,126,.05))}
.gate.ready .gate-topline{opacity:1;transform:none}
.gate-copy{position:absolute;z-index:25;left:50%;top:clamp(88px,12vh,140px);transform:translate(-50%,12px);align-self:auto;margin:0;text-align:center;opacity:0;transition:opacity .8s .24s ease,transform .9s .24s var(--ease);width:min(92vw,900px)}
.gate.ready .gate-copy{opacity:1;transform:translate(-50%,0)}
.gate-copy>span{font:600 .66rem/1 var(--sans);letter-spacing:.38em;color:#c7a875;margin-bottom:.75rem}
.gate-copy strong{font:500 clamp(3rem,5.2vw,5.4rem)/.92 var(--serif);letter-spacing:-.025em;color:#fffaf1;text-shadow:0 2px 36px rgba(0,0,0,.18)}
.gate-copy small{font:500 .62rem/1 var(--sans);letter-spacing:.34em;color:rgba(246,236,221,.55);margin-top:1rem}
.suite-stage{--gate-tilt-x:0deg;--gate-tilt-y:0deg;--gate-shift-x:0px;--gate-shift-y:0px;position:absolute;z-index:30;left:50%;top:57%;width:min(700px,78vw);height:min(440px,49vw);max-height:none;transform:translate(-50%,-50%) translateY(70px) rotateZ(-5deg) rotateX(8deg) scale(.92);opacity:0;perspective:1800px;transition:opacity .9s .3s ease,transform 1.25s .3s cubic-bezier(.18,.78,.16,1);transform-style:preserve-3d}
.gate.ready .suite-stage{opacity:1;transform:translate(-50%,-50%) translateY(0) rotateZ(-3.2deg) rotateX(var(--gate-tilt-x)) rotateY(var(--gate-tilt-y)) scale(1)}
.suite-ground-shadow{position:absolute;left:5%;right:4%;bottom:1%;height:14%;background:radial-gradient(ellipse,rgba(0,0,0,.53),rgba(0,0,0,0) 72%);filter:blur(25px);transform:translateY(24px) scaleX(.96);opacity:.9;transition:transform .7s var(--ease),opacity .5s ease}
.suite-card{position:absolute;border-radius:2px;background:#eee1cd;box-shadow:0 18px 56px rgba(0,0,0,.29),inset 0 0 0 1px rgba(126,95,57,.09);pointer-events:none;transition:transform 1s var(--ease),opacity .5s ease}
.suite-card-back{left:5%;right:8%;top:9%;bottom:2%;transform:translate3d(-34px,20px,-35px) rotate(-4deg);background:linear-gradient(145deg,#c5ad8d,#efe3d1);display:flex;align-items:flex-end;justify-content:flex-start;padding:22px;color:rgba(62,48,32,.46);font:500 1.1rem var(--serif);letter-spacing:.12em}
.suite-card-mid{left:7%;right:5%;top:5%;bottom:6%;transform:translate3d(34px,-14px,-18px) rotate(2.4deg);background:linear-gradient(135deg,#f4eadc,#d6b993)}
.suite-card-mid i{position:absolute;inset:17px;border:1px solid rgba(112,83,49,.16)}
.suite-stage .envelope{position:absolute;left:5%;right:5%;top:7%;bottom:7%;inset:7% 5%;transform-style:preserve-3d;transform:translate3d(var(--gate-shift-x),var(--gate-shift-y),30px);animation:none;transition:transform .45s var(--ease)}
.suite-stage .env-back{background:linear-gradient(165deg,#e7d8c2 0%,#cdb18d 100%);box-shadow:inset 0 0 0 1px rgba(84,62,38,.18),inset 0 -40px 60px rgba(255,255,255,.08)}
.suite-stage .env-letter{left:8%;right:8%;top:5%;bottom:5%;z-index:2;background:linear-gradient(180deg,#fffdf8 0%,#f7efe4 100%);padding:8% 8% 7%;box-shadow:0 22px 70px rgba(0,0,0,.22);transform:translateY(13%);transition:transform 1.05s .42s cubic-bezier(.18,.82,.18,1),box-shadow .8s ease;overflow:hidden;color:#392f26}
.suite-stage .env-letter::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.72),transparent 28%,rgba(183,144,91,.035) 62%,transparent);pointer-events:none}
.suite-stage .env-letter::after{content:"";position:absolute;inset:12px;border:1px solid rgba(157,121,74,.16);pointer-events:none}
.letter-monogram{font:500 clamp(1rem,1.5vw,1.3rem)/1 var(--serif);letter-spacing:.2em;color:#9a7a50;margin-bottom:1.25rem}.letter-monogram em{font-style:italic;font-weight:400}
.suite-stage .env-letter span{font:600 .54rem/1 var(--sans);letter-spacing:.32em;color:#927a59}.suite-stage .env-letter strong{font:500 clamp(2.1rem,4vw,3.8rem)/.88 var(--serif);letter-spacing:-.04em;margin:1.25rem 0 1rem}.suite-stage .env-letter small{font:600 .55rem/1 var(--sans);letter-spacing:.3em;color:#806c54}.letter-footer{margin-top:auto;padding-top:1.2rem;font:500 .48rem/1 var(--sans);letter-spacing:.27em;color:#9b8b78}.suite-stage .letter-rule{width:72px;background:linear-gradient(90deg,transparent,#b99a6e,transparent)}
.suite-stage .env-front-left{background:linear-gradient(140deg,#efe4d3,#d3b895)}.suite-stage .env-front-right{background:linear-gradient(220deg,#eadcc8,#cbaa83)}.suite-stage .env-front-bottom{background:linear-gradient(180deg,#f3e9db,#dbc4a8)}
.suite-stage .env-flap{background:linear-gradient(180deg,#dbc19e,#c7a67d);clip-path:polygon(0 0,100% 0,50% 64%);box-shadow:inset 0 2px rgba(255,255,255,.22);transition:transform .95s .12s cubic-bezier(.16,.86,.14,1)}
.suite-stage .env-flap i{position:absolute;left:8%;right:8%;top:10%;height:1px;background:rgba(255,255,255,.14)}
.suite-band{position:absolute;z-index:6;top:43%;height:18%;width:50.4%;background:linear-gradient(180deg,rgba(51,44,37,.94),rgba(27,25,22,.98));box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07);transition:transform .75s cubic-bezier(.2,.78,.16,1),opacity .4s ease;will-change:transform,opacity}
.suite-band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.055),transparent 48%);opacity:.75}
.suite-band-left{left:0}.suite-band-right{right:0}
.suite-stage .wax-seal{z-index:8;top:52%;width:94px;height:94px;background:radial-gradient(circle at 30% 25%,#d2aa73 0%,#9b7041 42%,#68431f 79%);box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.13),inset 0 -14px 24px rgba(74,39,14,.28);color:#fff0d8;font-size:1.18rem;animation:sealGlow 3.5s ease-in-out infinite;transition:transform .55s cubic-bezier(.18,.8,.18,1),opacity .4s ease,filter .4s ease}
.suite-stage .wax-seal::before{content:"";position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.17),transparent 43%)}
.suite-stage .wax-seal i{inset:12px;border-color:rgba(255,242,219,.35)}
.suite-stage .wax-seal b{position:absolute;left:48%;top:15%;width:1px;height:70%;background:rgba(77,38,13,.0);transform:rotate(23deg);transition:background .15s ease,box-shadow .15s ease}
.gate-action{position:absolute;z-index:35;left:50%;bottom:clamp(70px,8vh,100px);transform:translateX(-50%);margin:0;color:#eadfce;display:grid;grid-template-columns:auto 54px auto;align-items:center;gap:15px;padding:.75rem 1rem;opacity:0;transition:opacity .8s .6s ease,transform .8s .6s var(--ease);font-size:.64rem;letter-spacing:.24em}
.gate.ready .gate-action{opacity:1;transform:translateX(-50%)}.gate-action i{display:block;width:54px;height:1px;background:#b99a6e;transform-origin:left;transition:transform .35s var(--ease)}.gate-action:hover i{transform:scaleX(.68)}.gate-action small{font:500 .52rem/1 var(--sans);letter-spacing:.22em;color:rgba(238,225,207,.5)}.gate-action b{display:none}
.gate-instruction{position:absolute;z-index:30;right:clamp(24px,4vw,68px);bottom:32px;font:600 .48rem/1 var(--sans);letter-spacing:.24em;color:rgba(238,225,207,.28);writing-mode:vertical-rl;transform:rotate(180deg)}
.gate-brand{left:clamp(24px,4vw,68px);bottom:30px;transform:none;font-size:.52rem;letter-spacing:.2em;color:rgba(238,225,207,.4)}.gate-brand span{opacity:.65}
.gate.seal-breaking .wax-seal b{background:rgba(69,33,9,.58);box-shadow:2px 0 rgba(255,210,157,.13)}
.gate.seal-breaking .wax-seal{transform:translate(-50%,-50%) scale(1.14) rotate(-5deg);filter:brightness(1.09)}
.gate.opening .suite-stage{transform:translate(-50%,-50%) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1.025);transition:transform .8s cubic-bezier(.18,.82,.18,1)}
.gate.opening .suite-card-back{transform:translate3d(-50px,28px,-35px) rotate(-7deg)}.gate.opening .suite-card-mid{transform:translate3d(48px,-22px,-18px) rotate(4deg)}
.gate.opening .suite-band-left{transform:translateX(-118%);opacity:.78}.gate.opening .suite-band-right{transform:translateX(118%);opacity:.78}
.gate.opening .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(24deg);filter:blur(1px)}
.gate.opening .env-flap{transform:rotateX(181deg);z-index:1}
.gate.card-rising .env-letter{transform:translateY(-51%) scale(1.08);box-shadow:0 36px 100px rgba(0,0,0,.26)}
.gate.card-rising .suite-card-back,.gate.card-rising .suite-card-mid{opacity:.35}
.gate.opening .gate-copy,.gate.opening .gate-action,.gate.opening .gate-topline,.gate.opening .gate-instruction,.gate.opening .gate-brand{opacity:0;transition:opacity .32s ease}
.gate.leaving{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .75s ease,visibility .75s ease}
@keyframes sealGlow{0%,100%{box-shadow:0 14px 30px rgba(0,0,0,.35),0 0 0 rgba(190,139,78,0),inset 0 0 0 2px rgba(255,255,255,.13)}50%{box-shadow:0 16px 34px rgba(0,0,0,.38),0 0 30px rgba(190,139,78,.16),inset 0 0 0 2px rgba(255,255,255,.15)}}
@keyframes roomLightBreath{0%{opacity:.72;transform:translate(-50%,-48%) rotate(-4deg) scale(.98)}100%{opacity:1;transform:translate(-50%,-48%) rotate(-3deg) scale(1.035)}}
@keyframes leafShadowA{0%{transform:rotate(-28deg) scale(1.25) translateY(0)}100%{transform:rotate(-25deg) scale(1.29) translateY(-10px)}}
@keyframes leafShadowB{0%{transform:rotate(150deg) scale(1.18) translateY(0)}100%{transform:rotate(153deg) scale(1.22) translateY(12px)}}
@media(max-width:780px){
  .gate-topline{top:max(22px,calc(env(safe-area-inset-top) + 14px));font-size:.52rem;letter-spacing:.18em}.gate-topline i{display:none}.gate-topline span:last-child{margin-left:auto}
  .gate-copy{top:11.5vh}.gate-copy>span{font-size:.58rem;letter-spacing:.26em}.gate-copy strong{font-size:clamp(2.35rem,9vw,3.5rem)}.gate-copy small{font-size:.56rem;letter-spacing:.25em}
  .suite-stage{top:55%;width:94vw;height:61vw;max-height:440px;transform:translate(-50%,-50%) translateY(50px) rotateZ(-4deg) scale(.92)}
  .gate.ready .suite-stage{transform:translate(-50%,-50%) rotateZ(-2.4deg) scale(1)}
  .suite-stage .wax-seal{width:72px;height:72px;font-size:.98rem}.suite-band{height:17%}.letter-monogram{margin-bottom:.7rem}.suite-stage .env-letter strong{font-size:clamp(1.5rem,6vw,2.4rem);margin:.8rem 0 .65rem}.suite-stage .env-letter span{font-size:.42rem}.suite-stage .env-letter small{font-size:.46rem}.letter-footer{display:none}
  .gate-action{bottom:9vh;grid-template-columns:auto 38px;gap:11px;font-size:.58rem;white-space:nowrap}.gate-action small{display:none}.gate-action i{width:38px}
  .gate-instruction{display:none}.gate-brand{left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap;font-size:.48rem}
  .gate-shadow-leaf{width:58vw;opacity:.07}.gate-shadow-leaf-a{left:-22vw}.gate-shadow-leaf-b{right:-22vw}
}
@media(max-width:430px){
  .gate-copy{top:10.5vh}.gate-copy strong{font-size:10vw}.suite-stage{top:54.5%;width:96vw;height:64vw}.suite-card-back{transform:translate3d(-18px,14px,-35px) rotate(-3.5deg)}.suite-card-mid{transform:translate3d(20px,-10px,-18px) rotate(2deg)}
  .suite-stage .env-letter{padding:8% 8%}.letter-monogram{font-size:.82rem}.suite-stage .env-letter strong{font-size:6vw}.suite-stage .wax-seal{width:64px;height:64px}.gate-action{bottom:10vh}.gate-room-vignette{box-shadow:inset 0 0 28vw rgba(0,0,0,.48)}
}
@media(prefers-reduced-motion:reduce){.gate-room-light,.gate-shadow-leaf,.wax-seal{animation:none!important}.suite-stage,.suite-band,.env-letter,.env-flap,.wax-seal,.suite-card{transition-duration:.01ms!important}}


/* ============================================================
   12.2.1 — REALISTIC STATIONERY MATERIAL PASS
   Keeps the cinematic choreography, replaces graphic-looking materials.
   ============================================================ */
.gate.gate-cinematic{
  background:
    radial-gradient(ellipse at 50% 46%,rgba(72,55,39,.18),transparent 36%),
    radial-gradient(circle at 50% 18%,rgba(255,239,214,.09),transparent 26%),
    linear-gradient(180deg,#181613 0%,#11100e 62%,#0d0c0b 100%);
}
.gate.gate-cinematic::before{
  background:
    linear-gradient(112deg,transparent 0 28%,rgba(244,221,187,.035) 37%,transparent 49%),
    radial-gradient(ellipse at 50% 58%,rgba(218,181,130,.05),transparent 44%);
}
.gate-room-light{opacity:.66;filter:blur(26px);background:radial-gradient(ellipse at center,rgba(255,228,185,.14),rgba(255,228,185,.055) 40%,transparent 72%)}
.gate-room-vignette{box-shadow:inset 0 0 20vw rgba(0,0,0,.62)}
.gate-shadow-leaf{opacity:.065;filter:invert(91%) sepia(12%) saturate(280%) hue-rotate(348deg) brightness(72%) contrast(88%) blur(1px)}
.gate-copy>span{color:#c9ab7e}.gate-copy strong{color:#f7f1e7;text-shadow:0 3px 28px rgba(0,0,0,.26)}.gate-copy small{color:rgba(244,232,214,.58)}
.gate-topline{color:rgba(246,236,221,.44)}

.suite-stage{
  width:min(690px,77vw);height:min(455px,50vw);
  transform:translate(-50%,-50%) translateY(56px) rotateZ(-2.2deg) rotateX(4deg) scale(.94);
  perspective:2100px;
}
.gate.ready .suite-stage{transform:translate(-50%,-50%) rotateZ(-1.15deg) rotateX(var(--gate-tilt-x)) rotateY(var(--gate-tilt-y)) scale(1)}
.suite-ground-shadow{left:8%;right:7%;bottom:-1%;height:16%;background:radial-gradient(ellipse,rgba(0,0,0,.58),rgba(0,0,0,0) 72%);filter:blur(32px);transform:translateY(30px) scaleX(.92)}

.suite-card{
  background-color:#e9dfd1;
  background-image:url("assets/paper-fibre.png"),linear-gradient(145deg,#ece1d2,#d9c8b2);
  background-blend-mode:multiply,normal;
  box-shadow:0 20px 62px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.46) inset,0 -1px 0 rgba(93,68,43,.08) inset;
}
.suite-card-back{transform:translate3d(-24px,17px,-35px) rotate(-2.1deg);background-image:url("assets/paper-fibre.png"),linear-gradient(145deg,#cdbca6,#eadfce)}
.suite-card-mid{transform:translate3d(27px,-10px,-18px) rotate(1.25deg);background-image:url("assets/paper-fibre.png"),linear-gradient(135deg,#f0e7db,#dcc8ac)}
.suite-card-mid i{inset:18px;border-color:rgba(100,75,46,.12)}

.suite-stage .envelope{inset:7% 5.5%;transform:translate3d(var(--gate-shift-x),var(--gate-shift-y),28px)}
.suite-stage .env-back,
.suite-stage .env-front,
.suite-stage .env-flap{
  background-color:#ded0bd;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,rgba(255,255,255,.07),rgba(91,65,37,.035));
  background-blend-mode:multiply,normal;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.suite-stage .env-back{
  background-image:url("assets/paper-fibre.png"),linear-gradient(165deg,#e8ddcd 0%,#d5c2a9 58%,#c9b291 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.46) inset,0 -1px 0 rgba(85,61,35,.09) inset,0 14px 30px rgba(0,0,0,.08);
}
.env-back-edge{position:absolute;left:1.1%;right:1.1%;top:1.2%;height:1px;background:rgba(255,255,255,.44);box-shadow:0 1px rgba(104,77,46,.06);pointer-events:none}
.suite-stage .env-back::before{content:"";position:absolute;inset:2px;background:linear-gradient(110deg,rgba(255,255,255,.08),transparent 22%,transparent 70%,rgba(86,61,37,.035));pointer-events:none}

.suite-stage .env-front-left{
  background-image:url("assets/paper-fibre.png"),linear-gradient(141deg,#eee5d9 2%,#dfd0bd 58%,#cbb294 100%);
  box-shadow:1px 0 0 rgba(113,81,47,.045) inset;
}
.suite-stage .env-front-right{
  background-image:url("assets/paper-fibre.png"),linear-gradient(219deg,#eae0d3 2%,#d9c8b3 58%,#c5aa87 100%);
  box-shadow:-1px 0 0 rgba(113,81,47,.045) inset;
}
.suite-stage .env-front-bottom{
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#eee4d7 0%,#ddcbb6 58%,#cfb494 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.28) inset,0 1px 0 rgba(112,80,44,.045);
}
.env-fold-crease{position:absolute;left:8%;right:8%;bottom:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(112,82,48,.16),transparent);filter:blur(.2px);opacity:.55;pointer-events:none}
.suite-stage .env-front::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.12),transparent 30%),linear-gradient(115deg,transparent 0 44%,rgba(111,77,42,.022) 50%,transparent 56%);pointer-events:none}

.suite-stage .env-flap{
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#e4d5c1 0%,#d6c0a2 66%,#c7aa86 100%);
  clip-path:polygon(0 0,100% 0,52% 63.5%,50% 64.4%,48% 63.5%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -1px 0 rgba(88,62,35,.07) inset;
}
.suite-stage .env-flap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 24%,rgba(90,61,30,.035));pointer-events:none}
.suite-stage .env-flap i{left:7%;right:7%;top:8%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);opacity:.7}

.suite-stage .env-letter{
  background-color:#fbf7ef;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fffdfa 0%,#f5eee4 100%);
  background-blend-mode:multiply,normal;
  box-shadow:0 22px 66px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.65) inset;
  color:#3a3026;
}
.suite-stage .env-letter::before{background:linear-gradient(118deg,rgba(255,255,255,.42),transparent 27%,rgba(163,128,82,.026) 62%,transparent 76%)}
.suite-stage .env-letter::after{inset:13px;border-color:rgba(135,101,61,.12)}
.letter-monogram{color:#92754d}.suite-stage .env-letter span{color:#8e7656}.suite-stage .env-letter small{color:#75634f}.letter-footer{color:#958676}

/* Vellum belly band — translucent rather than black graphic strip. */
.suite-band{
  top:42.5%;height:19%;
  background-color:rgba(229,219,204,.72);
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,rgba(255,255,255,.18),rgba(129,106,79,.045));
  background-blend-mode:soft-light,normal;
  border-top:1px solid rgba(255,255,255,.26);border-bottom:1px solid rgba(110,84,54,.10);
  box-shadow:0 7px 18px rgba(0,0,0,.11),inset 0 1px rgba(255,255,255,.2);
}
.suite-band::after{background:linear-gradient(100deg,transparent 6%,rgba(255,255,255,.15) 30%,transparent 53%);opacity:.65}

/* Soft, irregular wax — more pressed wax, less glossy coin. */
.suite-stage .wax-seal{
  top:52%;width:92px;height:92px;
  border-radius:47% 53% 50% 46% / 52% 47% 55% 48%;
  background:
    radial-gradient(circle at 33% 27%,rgba(255,218,173,.23),transparent 24%),
    radial-gradient(circle at 69% 73%,rgba(59,25,8,.21),transparent 34%),
    radial-gradient(circle at 48% 44%,#a97743 0%,#8f5f32 54%,#75451f 82%,#633714 100%);
  box-shadow:0 11px 20px rgba(0,0,0,.29),0 3px 5px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,226,192,.12),inset 0 -9px 15px rgba(63,29,10,.18);
  color:#ead9c2;font-size:1.08rem;text-shadow:0 1px rgba(68,34,13,.35);
  animation:sealNaturalBreath 4.8s ease-in-out infinite;
}
.suite-stage .wax-seal::before{inset:5px;border-radius:inherit;background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.10),transparent 41%);opacity:.85}
.suite-stage .wax-seal::after{content:"";position:absolute;inset:14px;border:1px solid rgba(238,216,188,.23);border-radius:50%;box-shadow:0 1px 0 rgba(72,32,11,.13) inset}
.suite-stage .wax-seal i{inset:18px;border-color:rgba(239,218,191,.18);box-shadow:0 1px 1px rgba(61,27,8,.12) inset}
.suite-stage .wax-seal b{display:none}

/* Natural movement: less floating/tilting, more camera-like depth. */
.gate.seal-breaking .wax-seal{transform:translate(-50%,-50%) scale(.965) rotate(1.2deg);filter:brightness(.96);box-shadow:0 5px 11px rgba(0,0,0,.25),inset 0 -9px 15px rgba(63,29,10,.2)}
.gate.opening .suite-stage{transform:translate(-50%,-50%) rotateZ(-.2deg) rotateX(0deg) rotateY(0deg) scale(1.012);transition:transform .9s cubic-bezier(.18,.82,.18,1)}
.gate.opening .suite-card-back{transform:translate3d(-34px,24px,-35px) rotate(-2.9deg)}
.gate.opening .suite-card-mid{transform:translate3d(36px,-18px,-18px) rotate(1.8deg)}
.gate.opening .suite-band-left{transform:translateX(-110%);opacity:.28}.gate.opening .suite-band-right{transform:translateX(110%);opacity:.28}
.gate.opening .wax-seal{opacity:0;transform:translate(-50%,-55%) scale(.72) rotate(4deg);filter:blur(.3px);transition:transform .52s cubic-bezier(.2,.72,.18,1),opacity .38s ease,filter .38s ease}
.gate.opening .env-flap{transform:rotateX(178deg) translateZ(2px);transition-duration:1.04s}
.gate.card-rising .env-letter{transform:translateY(-46%) scale(1.045);box-shadow:0 38px 90px rgba(0,0,0,.23)}

@keyframes sealNaturalBreath{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.012)}}

@media(max-width:780px){
  .suite-stage{width:94vw;height:62vw;transform:translate(-50%,-50%) translateY(40px) rotateZ(-1.4deg) scale(.94)}
  .gate.ready .suite-stage{transform:translate(-50%,-50%) rotateZ(-.8deg) scale(1)}
  .suite-stage .wax-seal{width:70px;height:70px;font-size:.92rem}
  .suite-band{height:18%}
}
@media(max-width:430px){
  .suite-stage{height:65vw}.suite-stage .wax-seal{width:62px;height:62px}.suite-stage .wax-seal::after{inset:11px}.suite-stage .wax-seal i{inset:15px}
}


/* ============================================================
   12.2.2 — REALISTIC ENVELOPE REBUILD
   Keeps choreography, upgrades materials/composition to feel less graphic.
   ============================================================ */
.gate.gate-cinematic::before{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(232,211,177,.16),transparent 30%),
    radial-gradient(circle at 50% 9%,rgba(255,241,219,.10),transparent 22%),
    linear-gradient(135deg,#0d0d0b 0%,#151411 46%,#0b0b09 100%);
}
.gate-room-light{width:min(900px,72vw);height:min(600px,60vh);transform:translate(-50%,-49%) rotate(-2deg);filter:blur(20px);opacity:.82}
.gate-shadow-leaf{opacity:.045;filter:invert(91%) sepia(12%) saturate(364%) hue-rotate(348deg) brightness(78%) contrast(88%) blur(1.1px)}
.gate-copy strong{text-shadow:0 4px 40px rgba(0,0,0,.28)}

.suite-stage{width:min(640px,70vw);height:min(405px,43vw);transform:translate(-50%,-50%) translateY(66px) rotateZ(-2.4deg) rotateX(6deg) scale(.93)}
.gate.ready .suite-stage{transform:translate(-50%,-50%) translateY(0) rotateZ(-1.15deg) rotateX(calc(var(--gate-tilt-x) * .7)) rotateY(calc(var(--gate-tilt-y) * .7)) scale(1)}
.suite-ground-shadow{left:10%;right:9%;bottom:-2%;height:14%;background:radial-gradient(ellipse,rgba(0,0,0,.65),rgba(0,0,0,0) 72%);filter:blur(34px);transform:translateY(26px) scaleX(.84)}

.suite-card{border-radius:1px;box-shadow:0 20px 54px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.58) inset,0 -1px 0 rgba(90,68,46,.08) inset;overflow:hidden}
.suite-card::before{content:"";position:absolute;inset:0;background-image:url("assets/paper-fibre.png"),linear-gradient(115deg,rgba(255,255,255,.18),transparent 24%,transparent 72%,rgba(106,84,58,.03));background-blend-mode:multiply,normal;opacity:.92;pointer-events:none}
.suite-card-back{left:7%;right:11%;top:11%;bottom:5%;transform:translate3d(-18px,12px,-48px) rotate(-2deg);background:linear-gradient(152deg,#f7f1e8,#ded0bc);padding:18px 20px;color:rgba(82,66,48,.32);font-size:.92rem}
.suite-card-back::after{content:"";position:absolute;left:18px;right:18px;top:18px;bottom:18px;border:1px solid rgba(128,100,67,.09)}
.suite-card-mid{left:10%;right:7%;top:8%;bottom:8%;transform:translate3d(16px,-9px,-28px) rotate(1.1deg);background:linear-gradient(135deg,#fdf9f3,#e8d7bd)}
.suite-card-mid i{inset:16px;border-color:rgba(126,97,64,.11)}

.suite-stage .envelope{left:8%;right:8%;top:11%;bottom:10%;inset:11% 8% 10%;transform:translate3d(var(--gate-shift-x),var(--gate-shift-y),34px);filter:drop-shadow(0 18px 22px rgba(0,0,0,.17))}
.suite-stage .envelope::before{content:"";position:absolute;inset:-1px -1px 0;z-index:-1;background:linear-gradient(180deg,#d6c2a5,#c8b08e);border-radius:2px;transform:translateY(4px);box-shadow:0 10px 18px rgba(0,0,0,.14)}
.suite-stage .envelope::after{content:"";position:absolute;left:2%;right:2%;bottom:-2%;height:10px;background:radial-gradient(ellipse at center,rgba(74,54,30,.18),rgba(74,54,30,0) 72%);filter:blur(7px);pointer-events:none}

.suite-stage .env-back,
.suite-stage .env-front,
.suite-stage .env-flap{background-color:#e9dece;background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,rgba(255,255,255,.1),rgba(102,77,49,.03));background-blend-mode:multiply,normal}
.suite-stage .env-back{background-image:url("assets/paper-fibre.png"),linear-gradient(170deg,#f0e7da 0%,#e0cfb7 62%,#d5bea0 100%);box-shadow:inset 0 0 0 1px rgba(104,77,48,.14),inset 0 -28px 36px rgba(143,112,75,.04),0 1px 0 rgba(255,255,255,.42)}
.suite-stage .env-back::before{content:"";position:absolute;inset:2px;background:linear-gradient(112deg,rgba(255,255,255,.2),transparent 24%,transparent 78%,rgba(119,87,50,.04));pointer-events:none}
.env-back-edge{left:1.4%;right:1.4%;top:1.1%;height:1px;background:rgba(255,255,255,.42);box-shadow:0 1px rgba(97,74,48,.05)}

.suite-stage .env-front-left{clip-path:polygon(.4% 1.4%,53.2% 58.6%,.8% 99%);background-image:url("assets/paper-fibre.png"),linear-gradient(142deg,#fbf5ec 0%,#efe3d3 48%,#dbc6aa 100%)}
.suite-stage .env-front-right{clip-path:polygon(99.6% 1.4%,46.8% 58.6%,99.2% 99%);background-image:url("assets/paper-fibre.png"),linear-gradient(218deg,#f6ece1 0%,#eadaca 48%,#d2b48f 100%)}
.suite-stage .env-front-bottom{clip-path:polygon(.5% 99.3%,49.6% 51.8%,99.5% 99.3%);background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#f8efe4 0%,#ecdcc8 56%,#d8bf9f 100%);box-shadow:0 -1px 0 rgba(255,255,255,.35) inset,0 1px 0 rgba(110,81,47,.05)}
.suite-stage .env-front::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.18),transparent 28%),linear-gradient(115deg,transparent 0 42%,rgba(104,76,43,.024) 50%,transparent 58%);pointer-events:none}
.env-fold-crease{left:10%;right:10%;bottom:15.5%;height:1px;background:linear-gradient(90deg,transparent,rgba(106,77,43,.19),transparent);opacity:.52}

.suite-stage .env-flap{clip-path:polygon(.2% 0,99.8% 0,51.1% 64.6%,50% 65%,48.9% 64.6%);background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#efe1cf 0%,#e0ceb6 58%,#d0b592 100%);box-shadow:0 1px 0 rgba(255,255,255,.46) inset,0 -1px 0 rgba(92,67,40,.08) inset}
.suite-stage .env-flap::before{content:"";position:absolute;left:50%;top:0;bottom:37%;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(117,84,45,.06));opacity:.55;transform:translateX(-50%)}
.suite-stage .env-flap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 24%,rgba(111,83,48,.03));pointer-events:none}
.suite-stage .env-flap i{left:7%;right:7%;top:8%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent)}

.suite-stage .env-letter{left:8.5%;right:8.5%;top:4.2%;bottom:6.2%;padding:9% 8.5% 8.5%;background-color:#fdfaf3;background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fffdf9 0%,#f4ebdf 100%);background-blend-mode:multiply,normal;box-shadow:0 18px 40px rgba(0,0,0,.16),0 1px 0 rgba(255,255,255,.62) inset;color:#392f25;transform:translateY(12%)}
.suite-stage .env-letter::before{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.46),transparent 27%,rgba(162,126,80,.024) 62%,transparent 76%)}
.suite-stage .env-letter::after{content:"";position:absolute;inset:14px;border:1px solid rgba(138,104,63,.11)}
.letter-monogram{color:#977850;margin-bottom:1rem}.suite-stage .env-letter span{color:#8d7453}.suite-stage .env-letter small{color:#7c694f}.letter-footer{color:#9d8c77}

.suite-band{top:44.8%;height:14.2%;width:50.2%;background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(239,233,222,.74) 48%,rgba(214,202,185,.6));border-top:1px solid rgba(255,255,255,.42);border-bottom:1px solid rgba(137,111,76,.10);box-shadow:0 10px 24px rgba(0,0,0,.10),inset 0 1px rgba(255,255,255,.32);backdrop-filter:blur(.8px)}
.suite-band::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.2);transform:translateY(-50%);opacity:.7}
.suite-band::after{background:linear-gradient(100deg,transparent 8%,rgba(255,255,255,.16) 30%,transparent 56%);opacity:.78}

.suite-stage .wax-seal{top:51.2%;width:78px;height:78px;border-radius:43% 55% 49% 47% / 51% 44% 56% 49%;background:radial-gradient(circle at 33% 27%,rgba(255,223,188,.18),transparent 23%),radial-gradient(circle at 68% 74%,rgba(72,32,10,.18),transparent 34%),radial-gradient(circle at 50% 46%,#a67646 0%,#915f33 54%,#76421d 82%,#623613 100%);box-shadow:0 8px 16px rgba(0,0,0,.26),0 2px 3px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,227,193,.12),inset 0 -10px 14px rgba(72,33,12,.16);font-size:1rem;color:#f0e0c9;text-shadow:0 1px rgba(60,28,10,.24)}
.suite-stage .wax-seal::before{inset:4px;border-radius:inherit;background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.12),transparent 40%)}
.suite-stage .wax-seal::after{content:"";position:absolute;inset:12px;border:1px solid rgba(235,214,189,.22);border-radius:50%}
.suite-stage .wax-seal i{inset:16px;border-color:rgba(243,222,195,.16)}

.gate.opening .suite-stage{transform:translate(-50%,-50%) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1.015)}
.gate.opening .suite-card-back{transform:translate3d(-28px,16px,-48px) rotate(-3deg);opacity:.46}.gate.opening .suite-card-mid{transform:translate3d(24px,-12px,-28px) rotate(1.4deg);opacity:.52}
.gate.opening .suite-band-left{transform:translateX(-102%);opacity:.18}.gate.opening .suite-band-right{transform:translateX(102%);opacity:.18}
.gate.opening .wax-seal{opacity:0;transform:translate(-50%,-55%) scale(.64) rotate(6deg);filter:blur(.25px)}
.gate.opening .env-flap{transform:rotateX(179deg) translateZ(1px)}
.gate.card-rising .env-letter{transform:translateY(-43%) scale(1.045);box-shadow:0 26px 70px rgba(0,0,0,.18)}
.gate.card-rising .suite-card-back,.gate.card-rising .suite-card-mid{opacity:.18}

@media(max-width:780px){
  .suite-stage{width:92vw;height:59vw;transform:translate(-50%,-50%) translateY(44px) rotateZ(-1.2deg) scale(.93)}
  .gate.ready .suite-stage{transform:translate(-50%,-50%) rotateZ(-.6deg) scale(1)}
  .suite-card-back{left:7%;right:12%;top:11%;bottom:6%;transform:translate3d(-10px,10px,-48px) rotate(-1.5deg)}
  .suite-card-mid{left:10%;right:8%;top:9%;bottom:9%;transform:translate3d(10px,-6px,-28px) rotate(.9deg)}
  .suite-stage .envelope{left:7.5%;right:7.5%;top:12%;bottom:11%;inset:12% 7.5% 11%}
  .suite-stage .wax-seal{width:66px;height:66px;font-size:.92rem}
  .suite-band{height:14.5%;top:45%}
}
@media(max-width:430px){
  .suite-stage{width:94vw;height:60vw}
  .suite-stage .env-letter{padding:8.5% 8.5% 8.3%}.suite-stage .env-letter strong{font-size:5.5vw}
  .suite-stage .wax-seal{width:58px;height:58px;font-size:.84rem}.suite-stage .wax-seal::after{inset:10px}.suite-stage .wax-seal i{inset:13px}
}


/* ============================================================
   12.3.0 — ULTRA-PREMIUM PHOTOREAL CINEMATIC INVITE
   Bigger visual leap: darker cinematic scene, tactile stationery,
   restrained luxury motion, softer realism.
   ============================================================ */
.gate.gate-cinematic{
  background:
    radial-gradient(ellipse at 50% 54%, rgba(208,178,132,.10), transparent 28%),
    radial-gradient(circle at 50% 12%, rgba(255,241,220,.06), transparent 22%),
    linear-gradient(180deg,#0d0b09 0%,#110f0d 46%,#0a0908 100%);
}
.gate.gate-cinematic::before{
  background:
    linear-gradient(114deg, transparent 0 32%, rgba(255,239,213,.03) 38%, transparent 46%),
    radial-gradient(ellipse at 50% 58%, rgba(205,170,122,.07), transparent 40%),
    radial-gradient(circle at 22% 78%, rgba(255,244,225,.025), transparent 18%),
    radial-gradient(circle at 78% 20%, rgba(255,244,225,.025), transparent 16%);
}
.gate.gate-cinematic::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), transparent 16%, transparent 84%, rgba(0,0,0,.38)),
    radial-gradient(circle at center, rgba(255,255,255,.03) 0 1px, transparent 1px 100%);
  background-size:auto,4px 4px;
  opacity:.9;
}
.gate-room-light{
  width:min(860px,68vw);height:min(540px,56vh);
  transform:translate(-50%,-46%) rotate(-1deg);
  background:radial-gradient(ellipse at center, rgba(255,235,205,.22), rgba(255,235,205,.08) 38%, transparent 72%);
  filter:blur(26px);opacity:.78;animation:roomLightBreath 9s ease-in-out infinite alternate;
}
.gate-room-vignette{box-shadow:inset 0 0 22vw rgba(0,0,0,.70), inset 0 -16vh 14vh rgba(0,0,0,.28)}
.gate-shadow-leaf{opacity:.035;filter:invert(91%) sepia(12%) saturate(364%) hue-rotate(348deg) brightness(70%) contrast(88%) blur(1.4px)}
.gate-topline{color:rgba(248,238,223,.62)}
.gate-topline i{background:linear-gradient(90deg,rgba(196,161,115,.72),rgba(196,161,115,.08))}
.gate-copy{top:clamp(82px,11vh,132px)}
.gate-copy>span{color:#cfb184;letter-spacing:.42em}
.gate-copy strong{color:#fffaf1;font-size:clamp(3.2rem,5.4vw,5.8rem);text-shadow:0 8px 42px rgba(0,0,0,.34)}
.gate-copy small{color:rgba(244,232,214,.72);letter-spacing:.38em}

.suite-stage{
  width:min(600px,66vw);height:min(390px,41vw);
  transform:translate(-50%,-50%) translateY(74px) rotateZ(-1.6deg) rotateX(5deg) scale(.92);
  perspective:2400px;transform-style:preserve-3d;
}
.gate.ready .suite-stage{
  transform:translate(-50%,-50%) translateY(0) rotateZ(-.65deg) rotateX(calc(var(--gate-tilt-x) * .55)) rotateY(calc(var(--gate-tilt-y) * .55)) scale(1);
}
.suite-stage::before{
  content:"";position:absolute;inset:-4% -2%;border-radius:4px;z-index:-2;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.04), transparent 62%);
  filter:blur(6px);pointer-events:none;
}
.suite-ground-shadow{
  left:12%;right:11%;bottom:-3%;height:14%;
  background:radial-gradient(ellipse, rgba(0,0,0,.72), rgba(0,0,0,0) 74%);
  filter:blur(38px);transform:translateY(28px) scaleX(.78);opacity:.88;
}
.suite-card{
  border-radius:1px;overflow:hidden;
  box-shadow:0 16px 42px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.56) inset, 0 -1px 0 rgba(96,73,48,.08) inset;
}
.suite-card::before{content:"";position:absolute;inset:0;background-image:url("assets/paper-fibre.png"),linear-gradient(115deg,rgba(255,255,255,.14),transparent 24%,transparent 76%,rgba(116,91,63,.025));background-blend-mode:multiply,normal;opacity:.95;pointer-events:none}
.suite-card-back{left:9%;right:14%;top:14%;bottom:7%;transform:translate3d(-10px,9px,-52px) rotate(-1.35deg);background:linear-gradient(150deg,#f7f1e7,#e0d1bc);padding:16px 18px;color:rgba(82,66,48,.25);font-size:.82rem;letter-spacing:.14em}
.suite-card-back::after{content:"";position:absolute;left:16px;right:16px;top:16px;bottom:16px;border:1px solid rgba(127,100,67,.08)}
.suite-card-mid{left:11.5%;right:8.5%;top:10%;bottom:10%;transform:translate3d(9px,-5px,-30px) rotate(.8deg);background:linear-gradient(135deg,#fdf8f1,#e7d7bf)}
.suite-card-mid i{inset:15px;border-color:rgba(122,95,63,.10)}

.suite-stage .envelope{
  left:10%;right:10%;top:13%;bottom:11%;inset:13% 10% 11%;
  transform:translate3d(var(--gate-shift-x),var(--gate-shift-y),34px);
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.14));
}
.suite-stage .envelope::before{
  content:"";position:absolute;left:-.3%;right:-.3%;top:.6%;bottom:-.8%;z-index:-1;
  background:linear-gradient(180deg,#d8c4a7,#cbb392);
  box-shadow:0 14px 18px rgba(0,0,0,.10);border-radius:2px;transform:translateY(4px);
}
.suite-stage .envelope::after{
  content:"";position:absolute;left:3%;right:3%;bottom:-3%;height:10px;
  background:radial-gradient(ellipse at center, rgba(69,49,27,.16), rgba(69,49,27,0) 74%);
  filter:blur(8px);pointer-events:none;
}
.suite-stage .env-back,
.suite-stage .env-front,
.suite-stage .env-flap{
  background-color:#ebe0d1;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,rgba(255,255,255,.10),rgba(108,80,50,.03));
  background-blend-mode:multiply,normal;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.suite-stage .env-back{
  background-image:url("assets/paper-fibre.png"),linear-gradient(170deg,#f5ede2 0%,#eadac4 54%,#ddc4a3 100%);
  box-shadow:inset 0 0 0 1px rgba(102,76,47,.12), inset 0 -34px 42px rgba(121,92,59,.035), 0 1px 0 rgba(255,255,255,.46);
}
.suite-stage .env-back::before{content:"";position:absolute;inset:2px;background:linear-gradient(108deg,rgba(255,255,255,.18),transparent 26%,transparent 78%,rgba(118,88,52,.03));pointer-events:none}
.env-back-edge{left:1.5%;right:1.5%;top:1.1%;height:1px;background:rgba(255,255,255,.44);box-shadow:0 1px rgba(100,75,47,.04)}
.suite-stage .env-front-left{clip-path:polygon(.4% 1%,53% 58.5%,.8% 99.2%);background-image:url("assets/paper-fibre.png"),linear-gradient(141deg,#fff8f0 0%,#f0e4d4 50%,#dcc8ac 100%)}
.suite-stage .env-front-right{clip-path:polygon(99.6% 1%,47% 58.5%,99.2% 99.2%);background-image:url("assets/paper-fibre.png"),linear-gradient(219deg,#f9efe4 0%,#ebdecd 50%,#d5b894 100%)}
.suite-stage .env-front-bottom{clip-path:polygon(.5% 99.3%,49.6% 51.7%,99.5% 99.3%);background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fcf3e8 0%,#ebdcc8 54%,#ddc5a6 100%);box-shadow:0 -1px 0 rgba(255,255,255,.34) inset,0 1px 0 rgba(110,81,47,.05)}
.suite-stage .env-front::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 16%,rgba(255,255,255,.16),transparent 27%),linear-gradient(115deg,transparent 0 42%,rgba(104,76,43,.024) 50%,transparent 58%);pointer-events:none}
.env-fold-crease{left:10%;right:10%;bottom:15.3%;height:1px;background:linear-gradient(90deg,transparent,rgba(106,77,43,.18),transparent);opacity:.5}

.suite-stage .env-flap{
  clip-path:polygon(.2% 0,99.8% 0,51.1% 64.3%,50% 64.8%,48.9% 64.3%);
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#f2e5d4 0%,#e4d3bb 56%,#d4bc99 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.44) inset,0 -1px 0 rgba(92,67,40,.08) inset;
}
.suite-stage .env-flap::before{content:"";position:absolute;left:50%;top:0;bottom:36%;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(117,84,45,.05));opacity:.5;transform:translateX(-50%)}
.suite-stage .env-flap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 24%,rgba(111,83,48,.028));pointer-events:none}
.suite-stage .env-flap i{left:7%;right:7%;top:8%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent)}

.suite-stage .env-letter{
  left:9%;right:9%;top:4.2%;bottom:6.5%;padding:9.2% 8.8% 8.8%;
  background-color:#fefbf5;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fffdfa 0%,#f6ede1 100%);
  background-blend-mode:multiply,normal;
  box-shadow:0 18px 36px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.62) inset;
  color:#392f25;transform:translateY(12.5%);
}
.suite-stage .env-letter::before{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.44),transparent 26%,rgba(162,126,80,.022) 62%,transparent 76%)}
.suite-stage .env-letter::after{content:"";position:absolute;inset:14px;border:1px solid rgba(138,104,63,.10)}
.letter-monogram{color:#9a7b52;margin-bottom:.95rem}
.suite-stage .env-letter span{color:#8c734f}
.suite-stage .env-letter strong{font-size:clamp(1.9rem,3.7vw,3.25rem);margin:1rem 0 .9rem;letter-spacing:-.035em}
.suite-stage .env-letter small{color:#7a6850}
.letter-footer{color:#9a8975;padding-top:1rem}
.suite-stage .letter-rule{width:66px;background:linear-gradient(90deg,transparent,#b99667,transparent)}

.suite-band{
  top:45.3%;height:12.6%;width:50.3%;
  background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(242,236,227,.76) 46%,rgba(220,210,193,.66));
  border-top:1px solid rgba(255,255,255,.44);border-bottom:1px solid rgba(138,111,75,.09);
  box-shadow:0 8px 18px rgba(0,0,0,.08), inset 0 1px rgba(255,255,255,.30);
  backdrop-filter:blur(1px);
}
.suite-band::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.17);transform:translateY(-50%)}
.suite-band::after{background:linear-gradient(100deg,transparent 8%,rgba(255,255,255,.17) 30%,transparent 56%);opacity:.75}

.suite-stage .wax-seal{
  top:51.3%;width:66px;height:66px;border-radius:44% 56% 48% 46% / 50% 45% 55% 50%;
  background:
    radial-gradient(circle at 33% 27%,rgba(255,221,184,.16),transparent 23%),
    radial-gradient(circle at 68% 74%,rgba(72,32,10,.18),transparent 34%),
    radial-gradient(circle at 50% 46%,#a87544 0%,#915f32 54%,#75431e 82%,#633613 100%);
  box-shadow:0 8px 15px rgba(0,0,0,.24),0 2px 3px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,227,193,.11),inset 0 -9px 13px rgba(72,33,12,.15);
  font-size:.92rem;color:#efdec5;text-shadow:0 1px rgba(60,28,10,.24);
  animation:sealNaturalBreath 5.6s ease-in-out infinite;
}
.suite-stage .wax-seal::before{inset:4px;border-radius:inherit;background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.11),transparent 40%)}
.suite-stage .wax-seal::after{content:"";position:absolute;inset:11px;border:1px solid rgba(235,214,189,.18);border-radius:50%}
.suite-stage .wax-seal i{inset:14px;border-color:rgba(243,222,195,.12)}
.suite-stage .wax-seal b{display:none}

.gate-action{bottom:clamp(66px,7vh,92px);color:#efe3cf;font-size:.62rem;letter-spacing:.28em;gap:14px}
.gate-action i{background:#b99566;width:48px}
.gate-action small{color:rgba(238,225,207,.48)}
.gate-instruction{right:clamp(24px,4vw,68px);bottom:30px;color:rgba(238,225,207,.22)}
.gate-brand{color:rgba(238,225,207,.38)}

.gate.seal-breaking .wax-seal{transform:translate(-50%,-50%) scale(1.05) rotate(-2deg);filter:brightness(1.02)}
.gate.opening .suite-stage{transform:translate(-50%,-50%) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1.018);transition:transform .95s cubic-bezier(.18,.82,.18,1)}
.gate.opening .suite-card-back{transform:translate3d(-18px,12px,-52px) rotate(-1.9deg);opacity:.36}
.gate.opening .suite-card-mid{transform:translate3d(14px,-8px,-30px) rotate(1deg);opacity:.42}
.gate.opening .suite-band-left{transform:translateX(-102%);opacity:.14}.gate.opening .suite-band-right{transform:translateX(102%);opacity:.14}
.gate.opening .wax-seal{opacity:0;transform:translate(-50%,-54%) scale(.56) rotate(5deg);filter:blur(.25px);transition:transform .56s cubic-bezier(.2,.72,.18,1),opacity .42s ease,filter .42s ease}
.gate.opening .env-flap{transform:rotateX(180deg) translateZ(1px);transition-duration:1.1s}
.gate.card-rising .env-letter{transform:translateY(-47.5%) scale(1.055);box-shadow:0 28px 64px rgba(0,0,0,.17);transition-duration:1.18s}
.gate.card-rising .suite-card-back,.gate.card-rising .suite-card-mid{opacity:.12}

@media(max-width:780px){
  .gate-copy{top:11vh}.gate-copy strong{font-size:clamp(2.4rem,8.7vw,3.7rem)}
  .suite-stage{width:92vw;height:58vw;transform:translate(-50%,-50%) translateY(44px) rotateZ(-1deg) scale(.93)}
  .gate.ready .suite-stage{transform:translate(-50%,-50%) rotateZ(-.45deg) scale(1)}
  .suite-card-back{left:8%;right:14%;top:14%;bottom:8%;transform:translate3d(-8px,8px,-52px) rotate(-1.1deg)}
  .suite-card-mid{left:11%;right:9%;top:11%;bottom:11%;transform:translate3d(8px,-5px,-30px) rotate(.7deg)}
  .suite-stage .envelope{left:8%;right:8%;top:13%;bottom:12%;inset:13% 8% 12%}
  .suite-stage .wax-seal{width:58px;height:58px;font-size:.82rem}.suite-band{height:13%;top:45.6%}
  .suite-stage .env-letter strong{font-size:clamp(1.45rem,5.7vw,2.2rem)}
}
@media(max-width:430px){
  .gate-copy strong{font-size:10vw}
  .suite-stage{width:94vw;height:60vw}
  .suite-stage .env-letter{padding:9% 8.5% 8.4%}
  .suite-stage .env-letter strong{font-size:5.4vw}
  .suite-stage .wax-seal{width:52px;height:52px;font-size:.76rem}.suite-stage .wax-seal::after{inset:9px}.suite-stage .wax-seal i{inset:12px}
  .gate-action{bottom:9vh}
}
@media(prefers-reduced-motion:reduce){
  .gate-room-light,.gate-shadow-leaf,.suite-stage .wax-seal{animation:none!important}
}

/* ============================================================
   12.4.0 — SINGLE-ENVELOPE REALISM PASS
   One physical envelope. The card remains fully concealed until
   the flap has finished opening, then lifts naturally from the pocket.
   ============================================================ */
.gate.gate-cinematic .suite-stage{
  width:min(650px,72vw);height:min(405px,45vw);top:57%;
  transform:translate(-50%,-50%) translateY(52px) rotateZ(-1.2deg) rotateX(2.2deg) scale(.95);
  perspective:2200px;
}
.gate.gate-cinematic.ready .suite-stage{
  transform:translate(-50%,-50%) translateY(0) rotateZ(-.45deg)
    rotateX(calc(var(--gate-tilt-x) * .26)) rotateY(calc(var(--gate-tilt-y) * .26)) scale(1);
}
.suite-card,.suite-band{display:none!important}
.suite-ground-shadow{
  left:13%;right:13%;bottom:4%;height:13%;
  background:radial-gradient(ellipse,rgba(0,0,0,.66),rgba(0,0,0,0) 72%);
  filter:blur(34px);transform:translateY(23px) scaleX(.84);opacity:.76;
}
.suite-stage .envelope{
  inset:12% 7.5% 10%;
  transform:translate3d(var(--gate-shift-x),var(--gate-shift-y),26px);
  filter:drop-shadow(0 19px 22px rgba(0,0,0,.17));
  overflow:visible;
}
.suite-stage .envelope::before{
  left:-.18%;right:-.18%;top:.5%;bottom:-1.2%;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#e7d6be,#ccb08c);
  background-blend-mode:multiply,normal;
  box-shadow:0 15px 23px rgba(0,0,0,.16),inset 0 0 0 1px rgba(96,68,37,.08);
  border-radius:2px;transform:translateY(3px);
}
.suite-stage .env-back{
  z-index:0;
  background-image:url("assets/paper-fibre.png"),linear-gradient(166deg,#f4eadc 0%,#e6d2b8 55%,#cbaa82 100%);
  background-blend-mode:multiply,normal;
  box-shadow:inset 0 0 0 1px rgba(89,64,37,.13),inset 0 -44px 54px rgba(108,79,45,.035),0 1px 0 rgba(255,255,255,.46);
}
.env-liner{
  position:absolute;z-index:1;inset:0;
  clip-path:polygon(.4% .4%,99.6% .4%,50% 64%);
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#c6a985 0%,#ad8c66 100%);
  background-blend-mode:multiply,normal;
  box-shadow:inset 0 -14px 24px rgba(61,39,19,.09);
  opacity:.82;pointer-events:none;
}
.env-letter-slot{
  position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;
}
.suite-stage .env-letter{
  left:8.6%;right:8.6%;top:5.2%;bottom:5.8%;
  padding:8.7% 8.8% 8.2%;
  background-color:#fcf8f0;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fffdf8 0%,#f5eadc 100%);
  background-blend-mode:multiply,normal;
  box-shadow:0 14px 30px rgba(44,31,18,.11),0 1px 0 rgba(255,255,255,.7) inset;
  color:#392f25;
  transform:translateY(72%) scale(.985);
  transform-origin:center 55%;
  opacity:0;
  transition:transform .72s cubic-bezier(.2,.78,.18,1),opacity .28s ease,box-shadow .7s ease;
  will-change:transform,opacity;
}
.gate.flap-opened .env-letter{
  opacity:1;transform:translateY(18%) scale(1);
  transition-duration:.34s,.24s,.34s;
}
.gate.card-rising .env-letter-slot,.gate.card-lifted .env-letter-slot{overflow:visible}
.gate.card-rising .env-letter,.gate.card-lifted .env-letter{
  opacity:1;transform:translateY(18%) scale(1);
  box-shadow:0 18px 36px rgba(35,24,15,.14);
}
.gate.flight-active .env-letter{opacity:0;transition:opacity .12s ease}
.suite-stage .env-letter::after{inset:13px;border-color:rgba(132,98,58,.11)}
.suite-stage .letter-monogram{margin-bottom:.82rem;color:#917049}
.suite-stage .env-letter strong{font-size:clamp(1.9rem,3.5vw,3.15rem);margin:.86rem 0 .76rem}
.suite-stage .env-letter span{font-size:.47rem;letter-spacing:.29em}
.suite-stage .env-letter small{font-size:.49rem;letter-spacing:.27em}
.suite-stage .letter-footer{padding-top:.86rem;font-size:.44rem;letter-spacing:.24em}
.suite-stage .env-front-left{
  z-index:4;clip-path:polygon(.2% 0,52.3% 59%,.4% 99.7%);
  background-image:url("assets/paper-fibre.png"),linear-gradient(142deg,#f8efe3 0%,#e7d5bf 58%,#caae8a 100%);
}
.suite-stage .env-front-right{
  z-index:4;clip-path:polygon(99.8% 0,47.7% 59%,99.6% 99.7%);
  background-image:url("assets/paper-fibre.png"),linear-gradient(218deg,#f4e9db 0%,#dfcbb2 58%,#c19f76 100%);
}
.suite-stage .env-front-bottom{
  z-index:4;clip-path:polygon(.2% 99.8%,50% 52.7%,99.8% 99.8%);
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fbf2e6 0%,#e5d2ba 58%,#c8aa84 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.32) inset;
}
.suite-stage .env-front::after{
  background:linear-gradient(116deg,rgba(255,255,255,.22),transparent 27%,rgba(92,62,31,.028) 51%,transparent 66%);
}
.suite-stage .env-flap{
  z-index:6;
  clip-path:polygon(.15% 0,99.85% 0,51.1% 64.2%,50% 64.8%,48.9% 64.2%);
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#f0e2d0 0%,#ddc8ac 58%,#c5a27b 100%);
  background-blend-mode:multiply,normal;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -1px 0 rgba(85,58,28,.10) inset,0 8px 14px rgba(58,38,20,.055);
  transform-origin:50% 0;
  backface-visibility:visible;
  transform:rotateX(0deg) translateZ(2px);
  transition:transform .86s cubic-bezier(.2,.72,.16,1),filter .86s ease;
}
.suite-stage .env-flap::after{
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,rgba(255,255,255,.12),transparent 34%,rgba(76,50,24,.035));
  background-blend-mode:multiply,normal;
}
.gate.opening .env-flap{
  transform:rotateX(-178deg) translateZ(2px);
  filter:brightness(.97);
  transition-duration:.74s;
}
.gate.flap-opened .env-flap{z-index:1}
.suite-stage .wax-seal{
  z-index:8;top:51.4%;width:68px;height:68px;
  border-radius:48% 52% 45% 55% / 51% 46% 54% 49%;
  background:
    radial-gradient(circle at 31% 25%,rgba(255,224,188,.18),transparent 22%),
    radial-gradient(circle at 69% 75%,rgba(63,28,8,.17),transparent 34%),
    radial-gradient(circle at 49% 47%,#aa7544 0%,#8c582d 55%,#6f3d18 83%,#5d3010 100%);
  box-shadow:0 8px 15px rgba(0,0,0,.24),0 2px 3px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,227,193,.10),inset 0 -8px 12px rgba(66,30,10,.18);
  animation:sealNaturalBreath 5.8s ease-in-out infinite;
  transition:transform .48s cubic-bezier(.2,.76,.18,1),opacity .36s ease,filter .36s ease;
}
.gate.seal-breaking .wax-seal{transform:translate(-50%,-50%) scale(1.055) rotate(-1.8deg);filter:brightness(1.04)}
.gate.seal-breaking .wax-seal b{background:rgba(61,28,8,.58);box-shadow:1px 0 rgba(255,220,177,.12)}
.gate.opening .wax-seal{
  opacity:0;transform:translate(-50%,calc(-50% + 20px)) scale(.78) rotate(8deg);filter:blur(.3px);animation:none;
}
.gate.opening .suite-stage{
  transform:translate(-50%,-50%) rotateZ(-.1deg) rotateX(0deg) rotateY(0deg) scale(1.008);
  transition:transform .68s cubic-bezier(.18,.82,.18,1);
}
.gate.opening .suite-ground-shadow{transform:translateY(25px) scaleX(.89);opacity:.68}
.gate.card-rising .suite-stage{transform:translate(-50%,-50%) rotateZ(0deg) scale(1.004)}
.gate.card-lifted .suite-stage{transform:translate(-50%,-50%) rotateZ(0deg) scale(1.004)}

@media(max-width:780px){
  .gate.gate-cinematic .suite-stage{top:55.5%;width:94vw;height:60vw;max-height:410px;transform:translate(-50%,-50%) translateY(46px) rotateZ(-1.5deg) rotateX(2deg) scale(.94)}
  .gate.gate-cinematic.ready .suite-stage{transform:translate(-50%,-50%) rotateZ(-.55deg) scale(1)}
  .suite-stage .envelope{inset:12% 5.5% 10%}
  .suite-stage .wax-seal{width:58px;height:58px;font-size:.82rem}
  .suite-stage .env-letter{padding:8.3% 8.5% 8%;transform:translateY(74%) scale(.985)}
  .gate.flap-opened .env-letter{transform:translateY(18%) scale(1)}
  .gate.card-rising .env-letter{transform:translateY(18%) scale(1)}
  .gate.card-lifted .env-letter{transform:translateY(18%) scale(1)}
  .suite-stage .env-letter strong{font-size:clamp(1.45rem,5.6vw,2.15rem);margin:.72rem 0 .58rem}
  .suite-stage .env-letter span{font-size:.40rem}.suite-stage .env-letter small{font-size:.43rem}
}
@media(max-width:430px){
  .gate.gate-cinematic .suite-stage{top:55%;width:96vw;height:63vw}
  .suite-stage .envelope{inset:12% 4.4% 10%}
  .suite-stage .env-letter{padding:8% 8.2%}
  .suite-stage .env-letter strong{font-size:5.45vw}
  .suite-stage .wax-seal{width:52px;height:52px;font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){
  .env-letter-slot{overflow:visible!important}
  .suite-stage .env-letter{opacity:1!important;transform:translateY(-12%)!important}
  .suite-stage .env-flap{transform:rotateX(-178deg)!important;z-index:1!important}
}
.suite-stage .wax-seal b{
  display:block;position:absolute;left:50%;top:14%;width:1px;height:72%;
  background:transparent;transform:translateX(-50%) rotate(18deg);
  transition:background .16s ease,box-shadow .16s ease;
}

/* ============================================================
   12.4.1 — REFINED LETTER EXTRACTION + PRESENTATION
   The card fully clears the envelope before the shared-paper handoff,
   then centres at a realistic reading size instead of filling the screen.
   ============================================================ */
.gate.flap-opened .env-letter{
  transform:translateY(42%) scale(.992);
  transition:transform .38s cubic-bezier(.2,.74,.2,1),opacity .24s ease,box-shadow .38s ease;
}
.gate.card-rising .env-letter{
  transform:translateY(-25%) scale(.998) rotate(.08deg);
  box-shadow:0 22px 48px rgba(35,24,15,.145);
  transition:transform .62s cubic-bezier(.18,.78,.16,1),box-shadow .62s ease;
}
.gate.card-lifted .env-letter{
  transform:translateY(-105%) scale(1.004) rotate(-.06deg);
  box-shadow:0 32px 72px rgba(28,18,10,.18);
  transition:transform .76s cubic-bezier(.14,.84,.16,1),box-shadow .76s ease;
}
.gate.flight-active .env-letter{opacity:0;transition:opacity .08s linear}
.gate.flight-active .suite-stage{
  opacity:.24;
  transform:translate(-50%,-50%) translateY(34px) rotateZ(0deg) scale(.95);
  filter:blur(.7px);
  transition:transform .78s cubic-bezier(.16,.78,.18,1),opacity .55s ease,filter .55s ease;
}
.gate.flight-active .suite-ground-shadow{opacity:.20;transform:translateY(27px) scaleX(.72);transition:opacity .55s ease,transform .65s ease}

/* The cloned card lives outside .suite-stage, so give it the exact invitation typography/materials. */
.gate-flight-card{
  padding:clamp(26px,3.1vw,42px) clamp(25px,3vw,40px) clamp(24px,2.8vw,38px);
  color:#392f25!important;
  overflow:hidden!important;
  border-radius:1px!important;
  box-shadow:0 34px 96px rgba(24,17,10,.24),0 1px 0 rgba(255,255,255,.68) inset!important;
}
.gate-flight-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.42),transparent 27%,rgba(162,126,80,.024) 62%,transparent 76%);
  pointer-events:none;
}
.gate-flight-card::after{inset:13px!important;border-color:rgba(132,98,58,.11)!important}
.gate-flight-card .letter-monogram{margin-bottom:.82rem;color:#917049}
.gate-flight-card .letter-rule{width:66px;background:linear-gradient(90deg,transparent,#b99667,transparent)}
.gate-flight-card span{font:600 .47rem/1 var(--sans);letter-spacing:.29em;color:#8c734f;text-transform:uppercase}
.gate-flight-card strong{font:500 clamp(1.9rem,3.5vw,3.15rem)/.92 var(--serif);letter-spacing:-.035em;margin:.86rem 0 .76rem}
.gate-flight-card strong em{font-weight:400}
.gate-flight-card small{font:600 .49rem/1 var(--sans);letter-spacing:.27em;color:#7a6850}
.gate-flight-card .letter-footer{margin-top:auto;padding-top:.86rem;font:500 .44rem/1 var(--sans);letter-spacing:.24em;color:#9a8975}

@media(max-width:780px){
  .gate.flap-opened .env-letter{transform:translateY(43%) scale(.99)}
  .gate.card-rising .env-letter{transform:translateY(-23%) scale(.997)}
  .gate.card-lifted .env-letter{transform:translateY(-103%) scale(1.002)}
  .gate-flight-card{padding:8.3% 8.5% 8%!important}
  .gate-flight-card strong{font-size:clamp(1.45rem,5.6vw,2.15rem);margin:.72rem 0 .58rem}
  .gate-flight-card span{font-size:.40rem}.gate-flight-card small{font-size:.43rem}
  .gate-flight-card .letter-footer{display:none}
}
@media(max-width:430px){
  .gate.card-lifted .env-letter{transform:translateY(-101%) scale(1.001)}
  .gate-flight-card strong{font-size:5.45vw}
}

/* ============================================================
   12.5.0 — TRUE PHYSICAL LETTER EXTRACTION
   No cloned card. The same paper physically leaves the envelope,
   settles at reading size, then hands off to the website.
   ============================================================ */
.gate.flap-opened .env-letter{
  transform:translateY(47%) scale(.991);
  transition:transform .40s cubic-bezier(.22,.72,.18,1),opacity .22s ease,box-shadow .4s ease;
}
.gate.card-rising .env-letter{
  transform:translateY(-18%) scale(.996) rotate(.05deg);
  box-shadow:0 19px 43px rgba(31,21,13,.14);
  transition:transform .68s cubic-bezier(.19,.76,.16,1),box-shadow .68s ease;
}
.gate.card-lifted .env-letter{
  transform:translateY(-114%) scale(1.001) rotate(-.04deg);
  box-shadow:0 34px 74px rgba(25,17,10,.185);
  transition:transform .84s cubic-bezier(.13,.84,.15,1),box-shadow .84s ease;
}
.gate.letter-presenting .suite-stage{
  opacity:.34;
  transform:translate(-50%,-50%) translateY(28px) rotateZ(0deg) scale(.955);
  filter:blur(.65px);
  transition:transform .92s cubic-bezier(.16,.78,.18,1),opacity .72s ease,filter .72s ease;
}
.gate.letter-presenting .gate-copy,
.gate.letter-presenting .gate-action,
.gate.letter-presenting .gate-instruction{
  opacity:0!important;
  transform:translateY(-7px)!important;
  transition:opacity .46s ease,transform .58s ease!important;
}
.gate.letter-presenting .suite-ground-shadow{
  opacity:.16;transform:translateY(30px) scaleX(.68);
  transition:opacity .7s ease,transform .86s ease;
}

/* This is the original #gateLetter after it has been re-parented to <body>. */
.gate-presented-letter{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  overflow:hidden!important;
  padding:clamp(26px,3.1vw,42px) clamp(25px,3vw,40px) clamp(24px,2.8vw,38px);
  border-radius:1px!important;
  background-color:#fcf8f0!important;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fffdf8 0%,#f5eadc 100%)!important;
  background-blend-mode:multiply,normal!important;
  color:#392f25!important;
  box-shadow:0 38px 105px rgba(19,13,8,.28),0 1px 0 rgba(255,255,255,.72) inset!important;
  transform-origin:center!important;
  will-change:transform,opacity,filter;
}
.gate-presented-letter::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.44),transparent 27%,rgba(162,126,80,.024) 62%,transparent 76%);
  pointer-events:none;
}
.gate-presented-letter::after{
  content:"";position:absolute;inset:13px!important;border:1px solid rgba(132,98,58,.11)!important;pointer-events:none;
}
.gate-presented-letter .letter-monogram{margin-bottom:.82rem;color:#917049}
.gate-presented-letter .letter-rule{width:66px;background:linear-gradient(90deg,transparent,#b99667,transparent)}
.gate-presented-letter span{font:600 .47rem/1 var(--sans);letter-spacing:.29em;color:#8c734f;text-transform:uppercase}
.gate-presented-letter strong{font:500 clamp(1.9rem,3.5vw,3.15rem)/.92 var(--serif);letter-spacing:-.035em;margin:.86rem 0 .76rem}
.gate-presented-letter strong em{font-weight:400}
.gate-presented-letter small{font:600 .49rem/1 var(--sans);letter-spacing:.27em;color:#7a6850}
.gate-presented-letter .letter-footer{margin-top:auto;padding-top:.86rem;font:500 .44rem/1 var(--sans);letter-spacing:.24em;color:#9a8975}
.gate-presented-letter.is-presented{box-shadow:0 42px 118px rgba(16,11,7,.30),0 1px 0 rgba(255,255,255,.72) inset!important}

@media(max-width:780px){
  .gate.flap-opened .env-letter{transform:translateY(48%) scale(.99)}
  .gate.card-rising .env-letter{transform:translateY(-16%) scale(.995)}
  .gate.card-lifted .env-letter{transform:translateY(-112%) scale(1)}
  .gate-presented-letter{padding:clamp(20px,5.4vw,32px) clamp(20px,5vw,30px) clamp(18px,4.8vw,28px)}
  .gate-presented-letter strong{font-size:clamp(1.45rem,5.6vw,2.15rem);margin:.72rem 0 .58rem}
  .gate-presented-letter span{font-size:.40rem}.gate-presented-letter small{font-size:.43rem}
  .gate-presented-letter .letter-footer{display:none}
}
@media(max-width:430px){
  .gate.card-lifted .env-letter{transform:translateY(-110%) scale(1)}
  .gate-presented-letter strong{font-size:5.45vw}
}


/* ============================================================
   12.5.2 — FINAL SIMPLE LETTER REVEAL OVERRIDES
   One clean movement only:
   wax breaks -> flap opens -> real letter slides to centre ->
   display 2s -> site opens.
   ============================================================ */
.gate.flap-opened .env-letter{
  opacity:1!important;
  transform:translateY(18%) scale(1)!important;
  transition:transform .34s cubic-bezier(.22,.72,.18,1),opacity .22s ease,box-shadow .34s ease!important;
}
.gate.card-rising .env-letter,
.gate.card-lifted .env-letter{
  opacity:1!important;
  transform:translateY(18%) scale(1)!important;
  box-shadow:0 18px 36px rgba(35,24,15,.14)!important;
  transition:none!important;
}
.gate.letter-presenting .suite-stage{
  opacity:1!important;
  transform:translate(-50%,-50%) rotateZ(0deg) scale(1)!important;
  filter:none!important;
  transition:none!important;
}
.gate.letter-presenting .gate-copy,
.gate.letter-presenting .gate-action,
.gate.letter-presenting .gate-instruction,
.gate.letter-presenting .gate-brand{
  opacity:0!important;
  transition:opacity .2s ease!important;
}
.gate-presented-letter{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  overflow:hidden!important;
  padding:clamp(26px,3.1vw,42px) clamp(25px,3vw,40px) clamp(24px,2.8vw,38px)!important;
  border-radius:1px!important;
  background-color:#fcf8f0!important;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fffdf8 0%,#f5eadc 100%)!important;
  background-blend-mode:multiply,normal!important;
  color:#392f25!important;
  box-shadow:0 28px 72px rgba(19,13,8,.20),0 1px 0 rgba(255,255,255,.72) inset!important;
  transform-origin:center!important;
  will-change:transform,opacity!important;
}
.gate-presented-letter::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.44),transparent 27%,rgba(162,126,80,.024) 62%,transparent 76%);
  pointer-events:none;
}
.gate-presented-letter::after{
  content:"";position:absolute;inset:13px!important;border:1px solid rgba(132,98,58,.11)!important;pointer-events:none;
}
.gate-presented-letter .letter-monogram{margin-bottom:.82rem;color:#917049!important}
.gate-presented-letter .letter-rule{width:66px;background:linear-gradient(90deg,transparent,#b99667,transparent)!important}
.gate-presented-letter span{font:600 .47rem/1 var(--sans)!important;letter-spacing:.29em!important;color:#8c734f!important;text-transform:uppercase}
.gate-presented-letter strong{font:500 clamp(1.9rem,3.5vw,3.15rem)/.92 var(--serif)!important;letter-spacing:-.035em!important;margin:.86rem 0 .76rem!important}
.gate-presented-letter strong em{font-weight:400}
.gate-presented-letter small{font:600 .49rem/1 var(--sans)!important;letter-spacing:.27em!important;color:#7a6850!important}
.gate-presented-letter .letter-footer{margin-top:auto;padding-top:.86rem;font:500 .44rem/1 var(--sans)!important;letter-spacing:.24em!important;color:#9a8975!important}
@media(max-width:780px){
  .gate.flap-opened .env-letter{transform:translateY(18%) scale(1)!important}
  .gate-presented-letter{padding:clamp(20px,5.4vw,32px) clamp(20px,5vw,30px) clamp(18px,4.8vw,28px)!important}
  .gate-presented-letter strong{font-size:clamp(1.45rem,5.6vw,2.15rem)!important;margin:.72rem 0 .58rem!important}
  .gate-presented-letter span{font-size:.40rem!important}
  .gate-presented-letter small{font-size:.43rem!important}
  .gate-presented-letter .letter-footer{display:none}
}
@media(max-width:430px){
  .gate-presented-letter strong{font-size:5.45vw!important}
}


/* ============================================================
   12.6.0 — TRUE TOP-EXIT LETTER ANIMATION
   The card never leaves the envelope DOM during the reveal.
   The pocket clips the sides + bottom, but deliberately allows
   overflow above the mouth so the paper physically slides out.
   ============================================================ */
.gate.gate-cinematic .suite-stage{
  top:58%!important;
}

/* Permit only TOP overflow. This is the key to the physical exit. */
.env-letter-slot{
  overflow:visible!important;
  clip-path:inset(-180% 0 0 0)!important;
  -webkit-clip-path:inset(-180% 0 0 0)!important;
  z-index:2!important;
}

/* Letter begins deep inside the envelope. No peeking before opening. */
.suite-stage .env-letter{
  opacity:1!important;
  transform:translateY(64%) scale(.985)!important;
  transform-origin:center center!important;
  transition:none!important;
  z-index:2!important;
  will-change:transform,box-shadow!important;
}

/* Opening the flap never moves the letter. */
.gate.opening .env-letter,
.gate.flap-opened .env-letter,
.gate.card-rising .env-letter,
.gate.card-lifted .env-letter{
  opacity:1!important;
  transform:translateY(64%) scale(.985)!important;
  transition:none!important;
}

/* Flap opens cleanly, then drops behind the card. */
.gate.opening .env-flap{
  transform:rotateX(-178deg) translateZ(2px)!important;
  filter:brightness(.97)!important;
  transition:transform .70s cubic-bezier(.22,.72,.16,1),filter .70s ease!important;
}
.gate.flap-opened .env-flap{
  z-index:1!important;
}

/* Front folds remain above the letter so it exits from the mouth, not through the face. */
.suite-stage .env-front-left,
.suite-stage .env-front-right,
.suite-stage .env-front-bottom{
  z-index:4!important;
}

/* ONE movement: deep inside -> fully above the top edge. */
.gate.letter-out .env-letter{
  transform:translateY(-109%) scale(1.015)!important;
  box-shadow:0 34px 78px rgba(24,16,9,.20)!important;
  transition:
    transform 1.08s cubic-bezier(.20,.76,.18,1),
    box-shadow 1.08s ease!important;
}

/* Keep the envelope itself steady while the paper moves. */
.gate.opening .suite-stage,
.gate.flap-opened .suite-stage,
.gate.letter-out .suite-stage,
.gate.letter-presenting .suite-stage{
  opacity:1!important;
  filter:none!important;
  transform:translate(-50%,-50%) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1)!important;
  transition:transform .60s cubic-bezier(.18,.82,.18,1)!important;
}

/* Remove all old handoff/presentation behavior. */
.gate-presented-letter,
.gate-flight-card{ }
.gate.letter-presenting .suite-ground-shadow,
.gate.flight-active .suite-ground-shadow{
  opacity:.68!important;
  transform:translateY(25px) scaleX(.89)!important;
}

/* Clean the surrounding UI immediately after click; the envelope + letter remain the focus. */
.gate.seal-breaking .gate-copy,
.gate.seal-breaking .gate-action,
.gate.seal-breaking .gate-instruction,
.gate.seal-breaking .gate-brand{
  opacity:0!important;
  transition:opacity .28s ease!important;
}

/* Final site reveal only after the extracted card has been held for ~2s. */
.gate.leaving{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .46s ease,visibility .46s ease!important;
}

@media(max-width:780px){
  .gate.gate-cinematic .suite-stage{top:58.5%!important}
  .suite-stage .env-letter,
  .gate.opening .env-letter,
  .gate.flap-opened .env-letter,
  .gate.card-rising .env-letter,
  .gate.card-lifted .env-letter{
    transform:translateY(66%) scale(.985)!important;
  }
  .gate.letter-out .env-letter{
    transform:translateY(-108%) scale(1.01)!important;
  }
}

@media(max-width:430px){
  .gate.gate-cinematic .suite-stage{top:59%!important}
  .gate.letter-out .env-letter{
    transform:translateY(-106%) scale(1.006)!important;
  }
}


/* ============================================================
   12.6.1 — FOCUSED LETTER PRESENTATION
   Keep the approved extraction, then centre and enlarge the letter
   while the gate scene blurs behind it.
   ============================================================ */
.gate.letter-focus .suite-stage,
.gate.letter-focus .gate-copy,
.gate.letter-focus .gate-action,
.gate.letter-focus .gate-instruction,
.gate.letter-focus .gate-brand,
.gate.letter-focus .gate-topline,
.gate.letter-focus .gate-room-light,
.gate.letter-focus .gate-room-vignette,
.gate.letter-focus .gate-shadow-leaf,
.gate.letter-focus .suite-ground-shadow{
  filter:blur(10px)!important;
  opacity:.28!important;
  transition:filter .45s ease,opacity .45s ease!important;
}
.gate.letter-focus .suite-stage{
  transform:translate(-50%,-50%) scale(.98)!important;
}
.gate-presented-letter{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  overflow:hidden!important;
  padding:clamp(26px,3.2vw,42px) clamp(25px,3vw,40px) clamp(24px,2.8vw,38px)!important;
  border-radius:1px!important;
  background-color:#fcf8f0!important;
  background-image:url("assets/paper-fibre.png"),linear-gradient(180deg,#fffdf8 0%,#f5eadc 100%)!important;
  background-blend-mode:multiply,normal!important;
  color:#392f25!important;
  box-shadow:0 32px 96px rgba(14,10,7,.26),0 1px 0 rgba(255,255,255,.72) inset!important;
  transform-origin:center center!important;
  will-change:transform,opacity!important;
}
.gate-presented-letter::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.44),transparent 27%,rgba(162,126,80,.024) 62%,transparent 76%);
  pointer-events:none;
}
.gate-presented-letter::after{
  content:"";position:absolute;inset:13px!important;border:1px solid rgba(132,98,58,.11)!important;pointer-events:none;
}
.gate-presented-letter .letter-monogram{margin-bottom:.82rem;color:#917049!important}
.gate-presented-letter .letter-rule{width:66px;background:linear-gradient(90deg,transparent,#b99667,transparent)!important}
.gate-presented-letter span{font:600 .47rem/1 var(--sans)!important;letter-spacing:.29em!important;color:#8c734f!important;text-transform:uppercase}
.gate-presented-letter strong{font:500 clamp(1.9rem,3.7vw,3.35rem)/.92 var(--serif)!important;letter-spacing:-.035em!important;margin:.86rem 0 .76rem!important}
.gate-presented-letter strong em{font-weight:400}
.gate-presented-letter small{font:600 .49rem/1 var(--sans)!important;letter-spacing:.27em!important;color:#7a6850!important}
.gate-presented-letter .letter-footer{margin-top:auto;padding-top:.86rem;font:500 .44rem/1 var(--sans)!important;letter-spacing:.24em!important;color:#9a8975!important}
.gate-presented-letter.is-focused{box-shadow:0 40px 120px rgba(11,8,6,.30),0 1px 0 rgba(255,255,255,.72) inset!important}

@media(max-width:780px){
  .gate.letter-focus .suite-stage,
  .gate.letter-focus .gate-room-light,
  .gate.letter-focus .gate-room-vignette,
  .gate.letter-focus .gate-shadow-leaf,
  .gate.letter-focus .suite-ground-shadow{filter:blur(8px)!important;opacity:.22!important}
  .gate-presented-letter{padding:clamp(20px,5.4vw,32px) clamp(20px,5vw,30px) clamp(18px,4.8vw,28px)!important}
  .gate-presented-letter strong{font-size:clamp(1.45rem,5.9vw,2.25rem)!important;margin:.72rem 0 .58rem!important}
  .gate-presented-letter span{font-size:.40rem!important}
  .gate-presented-letter small{font-size:.43rem!important}
  .gate-presented-letter .letter-footer{display:none!important}
}
@media(max-width:430px){
  .gate-presented-letter strong{font-size:5.55vw!important}
}