:root{
  --cream:#F5F3E7; --cream2:#E7EBD9; --line:#C3CFB9; --gold:#5E7F5E; --goldd:#0F5132; --sage:#A7B89F; --green:#0F5132; --green2:#5E7F5E;
  --ink:#0F5132; --text:#25382E; --muted:#4F6850; --white:#FBFAF1;
  --yes:#0F5132; --yesbg:#DCE8D4; --no:#8A3F4A; --nobg:#F3DEDF;
  --disp:'Cormorant Garamond',Georgia,serif; --ui:'Inter',system-ui,sans-serif;
}
html[lang=ar]{--disp:'Amiri',Georgia,serif;--ui:'Cairo',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--text);font:400 16px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.05;margin:0;color:var(--ink)}
p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
section[id]{scroll-margin-top:9rem}
.tc{letter-spacing:.3em;text-transform:uppercase}
html[lang=ar] .tc,.exp[lang=ar] .tc{letter-spacing:0;text-transform:none}
.gtxt{background:linear-gradient(180deg,#5E7F5E,#0F5132);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{font-weight:700;line-height:1.3}
html[lang=ar] em,html[lang=ar] .btn,html[lang=ar] .cta,html[lang=ar] .pill-dark{font-style:normal}

/* buttons */
.btn,.cta,.pill-dark{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;border:0;border-radius:999px;background:var(--ink);color:#F5F3E7;text-decoration:none;font:italic 500 1.2rem/1.2 var(--disp);padding:.95rem 1.9rem;box-shadow:0 14px 28px -14px rgba(0,0,0,.5)}
.cta{font-size:1.6rem;padding:1.25rem 2.6rem}
.cta.sm,.btn.small{font-size:1.1rem;padding:.7rem 1.5rem;box-shadow:none}
.btn.ghost{background:var(--cream2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:#DCE3CC}
.link{background:none;border:0;padding:0;color:var(--goldd);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.round{width:3.1rem;height:3.1rem;border-radius:50%;border:1px solid var(--line);background:var(--cream2);display:grid;place-items:center;padding:0;color:var(--goldd)}
.round svg{width:1.3rem;height:1.3rem}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(245,243,231,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(94,127,94,.22)}
.hdr-row1{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem .5rem;max-height:6.5rem;overflow:hidden;transition:max-height .3s,padding .3s,opacity .3s}
.hdr.compact .hdr-row1{max-height:0;padding-block:0;opacity:0}
.logo{display:grid;justify-items:center;gap:.4rem;text-decoration:none}
.logo b{font:600 2.3rem/1 'Cormorant Garamond',serif;letter-spacing:.06em;background:linear-gradient(180deg,#5E7F5E,#0F5132);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo i{display:block;position:relative;width:10.5rem;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent)}
.logo i::after{content:"";position:absolute;left:50%;top:50%;width:.42rem;height:.42rem;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 .3rem var(--cream)}
.hdr-act{display:flex;align-items:center;gap:.7rem}
.pills{display:flex;gap:.7rem;overflow-x:auto;padding:.4rem 1.25rem .9rem;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pills button{flex:none;border:1px solid var(--line);background:var(--cream2);border-radius:999px;padding:.8rem 1.9rem;font:500 .98rem var(--ui);color:var(--hfg,#3F5A45);text-decoration:none;display:inline-block}
.pills button:hover{background:#DCE3CC}
.menu{position:absolute;inset-inline:1rem;top:100%;background:var(--white);border:1px solid var(--line);border-radius:1.4rem;padding:1.2rem;box-shadow:0 24px 50px -20px rgba(15,50,35,.5);display:grid;gap:1rem}
.menu[hidden]{display:none}
.menu .lbl{font:500 .8rem var(--ui);color:var(--muted)}
.langs{display:flex;flex-wrap:wrap;gap:.5rem}
.langs button{border:1px solid var(--line);background:var(--cream2);border-radius:999px;padding:.55rem 1.2rem;font-weight:500}
.langs button[aria-pressed=true]{background:var(--ink);color:#F5F3E7;border-color:var(--ink)}
@media(min-width:900px){.hdr-row1,.pills{max-width:1160px;margin-inline:auto}.pills{justify-content:center}.menu{inset-inline:auto 1.25rem;width:22rem}}

/* hero */
.hero{text-align:center;padding:5.5rem 1.25rem 4.5rem;background:radial-gradient(55% 45% at 50% 28%,#FBFAF1,transparent 72%)}
.eyebrow{font:400 .95rem var(--disp);color:var(--gold);letter-spacing:.4em}
html[lang=ar] .eyebrow{font-size:1.1rem}
.hero h1{font-size:clamp(3.3rem,9.5vw,6.6rem);line-height:1;max-width:11em;margin:2rem auto}
.hero h1 em{font-style:italic;background:linear-gradient(180deg,#5E7F5E,#0F5132);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline:.04em}
html[lang=ar] .hero h1 em{font-style:normal}
.lede{font-size:1.2rem;line-height:1.85;max-width:35em;margin:0 auto 3rem;color:var(--text)}
.explore{margin:3.5rem auto 0;display:grid;justify-items:center;gap:1.1rem;background:none;border:0;font:500 .85rem var(--disp);color:var(--ink)}
.explore .arrow{width:3.4rem;height:3.4rem;border-radius:50%;background:#E2E8D6;display:grid;place-items:center;color:var(--gold);box-shadow:0 0 0 .9rem rgba(226,232,214,.5)}
.explore svg{width:1.3rem;height:1.3rem}

/* themes carousel */
.designs{padding:4rem 0 3.5rem;text-align:center}
.designs h2,.how h2,.planner h2,.faq h2{font-size:clamp(2.4rem,5vw,3.6rem)}
.designs .sub{max-width:36em;margin:1rem auto 0;padding-inline:1.25rem;color:var(--muted)}
.filter{display:flex;justify-content:center;margin:2rem 0 .5rem}
.catsel{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--cream2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E7F5E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.1rem center/1.1rem;border-radius:999px;padding:1rem 3.2rem 1rem 2.6rem;font:500 .9rem var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);position:relative}
html[dir=rtl] .catsel{background-position:left 1.1rem center;padding:1rem 2.6rem 1rem 3.2rem;letter-spacing:0;text-transform:none}
.car{display:flex;gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:2rem calc(50% - min(36vw,170px)) 1.5rem;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.tcard{flex:0 0 min(72vw,340px);scroll-snap-align:center;display:grid;gap:.7rem;justify-items:center;text-align:center}
.tvis{position:relative;container-type:inline-size;width:100%;aspect-ratio:9/16;border-radius:3rem 3rem 1.8rem 1.8rem;overflow:hidden;background:var(--door1);box-shadow:0 30px 50px -28px rgba(15,50,35,.6)}
.tvis::before{content:"";position:absolute;inset:0 0 auto;height:9%;background:rgba(255,255,255,.55);z-index:3;pointer-events:none}
.tvis .dv{position:absolute;inset:0;font-size:clamp(11px,4.1cqw,18px)}
.badge{position:absolute;top:5%;inset-inline-start:7%;z-index:6;display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.1rem;border-radius:999px;background:linear-gradient(180deg,#A7B89F,#5E7F5E);color:#0B2A1B;font:600 .8rem var(--disp);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -6px rgba(0,0,0,.5)}
.badge i{width:.5rem;height:.5rem;border-radius:50%;background:#0B2A1B}
.live{position:absolute;inset-inline-start:7%;bottom:3.5%;z-index:6;display:inline-flex;align-items:center;gap:.7rem;padding:.7rem 1.3rem;border-radius:999px;border:1px solid rgba(255,255,255,.55);background:rgba(110,100,92,.62);backdrop-filter:blur(4px);color:#fff;font:500 .78rem var(--disp)}
.live svg{width:1.1rem;height:1.1rem}
.tcard .sub{font:500 .82rem var(--disp);color:var(--muted);margin:.9rem 0 0;padding:0}
.tcard h3{font-size:2.6rem}
.tcard .desc{color:var(--text);max-width:18em;margin-bottom:.6rem}
.tcard .none{padding:3rem;color:var(--muted)}

/* sections */
.how,.planner{max-width:1100px;margin:0 auto;padding:4.5rem 1.25rem}
.how{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:3.8rem 1fr;gap:1rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font:italic 400 3.4rem/.9 var(--disp);color:var(--gold)}
html[lang=ar] .steps .n{font-style:normal}
.steps h3{font-size:1.9rem;margin-bottom:.3rem}
.steps p{color:var(--muted);max-width:34em}
.planner{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.planner form{display:grid;gap:1rem}
.planner .two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.planner output{display:block;padding:1.2rem 0;border-top:1px solid var(--line);font-size:1.1rem}
@media(max-width:900px){.how,.planner{grid-template-columns:1fr;gap:1.5rem}}
.faq{max-width:820px;margin:0 auto;padding:3rem 1.25rem 5rem}
.faq h2{margin-bottom:1.6rem}
.faq details{border-top:1px solid var(--line);padding:1.2rem 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font:500 1.5rem var(--disp);cursor:pointer;color:var(--ink)}
.faq details p{margin-top:.6rem;color:var(--muted);max-width:40em}
.foot{padding:2rem 1.25rem 4rem;text-align:center;color:var(--muted);font-size:.92rem}

/* floating */
.totop,.float{position:fixed;bottom:1.2rem;z-index:25;width:3.4rem;height:3.4rem;border-radius:50%;display:grid;place-items:center;border:0;padding:0;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.totop{inset-inline-end:1.2rem;background:var(--white);border:1px solid var(--line);color:var(--goldd);opacity:0;pointer-events:none;transition:opacity .25s}
.totop.show{opacity:1;pointer-events:auto}
.totop svg,.float svg{width:1.5rem;height:1.5rem}
.float{inset-inline-start:1.2rem;color:#fff;text-decoration:none}
.float.wa{background:#25D366}
.float.ig{bottom:5.2rem;background:linear-gradient(45deg,#F9A03F,#E1306C,#7B3FE4)}

/* forms */
.field{display:grid;gap:.4rem;margin-bottom:1rem}
.field>label,.lab{font-weight:600;font-size:.92rem;color:var(--ink)}
.field .hint{font-size:.82rem;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:.8rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink)}
.field textarea{min-height:5.2em;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
fieldset{border:0;padding:0;margin:0 0 2rem}
legend{font:500 2rem var(--disp);padding:0;margin-bottom:.9rem;color:var(--ink)}

/* phone bezel */
.pbezel{position:relative;--h:min(72vh,660px);height:var(--h);width:min(88vw,calc(var(--h) * .47));border-radius:2.7rem;background:#FBFAF1;padding:.6rem;box-shadow:0 30px 60px -26px rgba(15,50,35,.5),0 0 0 1px rgba(94,127,94,.3)}
.pscreen{position:relative;width:100%;height:100%;border-radius:2.1rem;overflow:hidden}

/* modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(8,40,26,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(100%,560px);max-height:96vh;overflow:auto;background:var(--cream);border-radius:2rem 2rem 0 0;padding:1.4rem 1.2rem 1.6rem;display:grid;justify-items:center;gap:1.1rem}
.sh-head{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.sh-head h3{font-size:2rem}
.sh-head p{font-size:.85rem;color:var(--muted)}
.x{width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--line);background:var(--white);font-size:1.5rem;line-height:1;display:grid;place-items:center;padding:0}
@media(min-width:700px){.modal{align-items:center}.sheet{border-radius:2rem}}

/* builder */
.builder{max-width:1160px;margin:0 auto;padding:2rem 1.25rem 4rem;display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:4rem}
.builder h1{font-size:clamp(2.6rem,5vw,3.8rem);margin-bottom:1.6rem}
.b-preview{position:sticky;top:9rem;align-self:start;display:grid;justify-items:center;gap:.9rem}
.b-preview .pbezel{--h:min(70vh,640px)}
.b-preview .hint{color:var(--muted);font-size:.92rem;text-align:center;max-width:20em}
.builder-tabs{display:none;grid-column:1/-1}
.swatches{display:flex;flex-wrap:wrap;gap:.5rem}
.sw{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 1rem .4rem .45rem;border-radius:99px;border:1px solid var(--line);background:var(--white);font-weight:500;color:var(--ink)}
html[dir=rtl] .sw{padding:.4rem .45rem .4rem 1rem}
.sw[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sw-chip{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
@media(max-width:900px){
  .builder{grid-template-columns:1fr;gap:1rem;padding-top:1rem}
  .builder-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--white);border-radius:99px;padding:4px;border:1px solid var(--line);position:sticky;top:3.6rem;z-index:5}
  .builder-tabs button{border:0;background:none;border-radius:99px;padding:.6rem;font-weight:600;color:var(--ink)}
  .builder-tabs button[aria-selected=true]{background:var(--ink);color:#F5F3E7}
  .builder[data-pane=form] .b-preview{display:none}
  .builder[data-pane=preview] .b-form{display:none}
  .b-preview{position:static;padding-top:1rem}
}

/* dashboard */
.dash{max-width:960px;margin:0 auto;padding:2.5rem 1.25rem 5rem}
.dash h1{font-size:clamp(2.6rem,5vw,4rem)}
.dash .sub{color:var(--muted);margin-top:.5rem}
.dash .bar{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 2rem}
.share{background:var(--white);border:1px solid var(--line);border-radius:1.4rem;padding:1.4rem;display:grid;gap:.9rem;margin-bottom:2rem}
.share h2{font-size:2rem}
.share .linkrow{display:flex;gap:.6rem}
.share input{flex:1;min-width:0;font:inherit;padding:.75rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--cream);color:var(--ink);direction:ltr}
.share .btns{display:flex;gap:.5rem;flex-wrap:wrap}
.stats{display:flex;margin:0 0 2rem;padding:0}
.stats>div{flex:1;padding:.2rem 1.2rem;border-inline-start:1px solid var(--gold);display:flex;flex-direction:column}
.stats>div:first-child{padding-inline-start:0;border-inline-start:0}
.stats dt{font-size:.92rem;color:var(--muted);order:2}
.stats dd{margin:0;font:400 3.8rem/1 var(--disp);color:var(--ink)}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.listhead h2{font-size:2.2rem}
.filters{display:flex;gap:.4rem;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--cream2);border-radius:99px;padding:.4rem 1rem;font-weight:500;color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);color:#F5F3E7;border-color:var(--ink)}
.replies{list-style:none;margin:0;padding:0}
.reply{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:1rem 0;border-top:1px solid var(--line)}
.reply .who{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.reply .note{grid-column:1;color:var(--muted)}
.reply .meta{grid-column:2;grid-row:1;text-align:end;font-size:.85rem;color:var(--muted)}
.pill{display:inline-block;font-size:.82rem;font-weight:600;padding:.15rem .7rem;border-radius:99px}
.pill.yes{background:var(--yesbg);color:var(--yes)}
.pill.no{background:var(--nobg);color:var(--no)}
.empty{padding:2rem 0;border-top:1px solid var(--line)}
.empty h3{font-size:2rem;margin-bottom:.4rem}
.empty p{color:var(--muted);max-width:34em;margin-bottom:1rem}
.note-proto{margin-top:2.5rem;font-size:.88rem;color:var(--muted);border-inline-start:3px solid var(--line);padding-inline-start:.9rem;max-width:42em}
.invlist{list-style:none;margin:1.6rem 0 0;padding:0}
.invlist li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.invlist strong{font-size:1.1rem}
.invlist span{color:var(--muted);font-size:.92rem;display:block}
.wrap-c{text-align:center;padding:5rem 1.25rem}
@media(max-width:600px){.stats dd{font-size:2.6rem}.stats>div{padding:.2rem .7rem}.reply{grid-template-columns:1fr}.reply .meta{grid-column:1;grid-row:auto;text-align:start}}

/* guest */
.gwrap{position:fixed;inset:0;display:grid;place-items:center;background:#DDE3D0}
.gframe{position:relative;width:min(100%,480px);height:100vh;height:100dvh;max-height:940px;overflow:hidden;background:#000}
@media(min-width:600px){.gframe{height:min(100dvh,900px);border-radius:28px;box-shadow:0 30px 80px -24px rgba(15,50,35,.6)}}
.gl{position:absolute;top:.6rem;inset-inline-end:.6rem;z-index:40;font:inherit;font-size:.82rem;padding:.3rem .65rem;border-radius:99px;border:1px solid rgba(0,0,0,.2);background:rgba(255,255,255,.85);color:#222}
.gx{position:absolute;inset:0}

#toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,20px);background:var(--ink);color:#F5F3E7;padding:.75rem 1.3rem;border-radius:99px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}


/* ============ INVITATION EXPERIENCE ============ */
.exp{--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--scr:'Allura','Pinyon Script',cursive;
  position:relative;width:100%;height:100%;container-type:inline-size;overflow:hidden;background:var(--bg);color:var(--ink2);font-family:var(--serif)}
.exp[lang=ar]{--serif:'Amiri',Georgia,serif;--sans:'Cairo',system-ui,sans-serif;--scr:'Aref Ruqaa','Amiri',serif}
.exp-in{position:absolute;inset:0;font-size:clamp(11px,4.1cqw,18px)}

/* ornaments */
.orn{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(-.6px -.6px 0 var(--hi)) drop-shadow(.8px 1px 1.2px var(--lo))}
.orn ellipse,.orn circle{fill:var(--relief);stroke:var(--lo);stroke-width:.5}
.orn .ln{fill:none}
.orn .stem{stroke:var(--lo);stroke-width:1;fill:none}
.orn .shoulder{fill:var(--shoulder);stroke:none}
.orn .archln{stroke:var(--hi);stroke-width:1.2;fill:none}
.fr-top{position:absolute;inset:0 0 auto;z-index:4}
.fr-bot{position:absolute;inset:auto 0 0;z-index:4}
.rim{position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 .7em var(--shoulder),inset 0 0 0 calc(.7em + 1px) var(--lo)}

/* doors */
.stage{position:absolute;inset:0;z-index:12;perspective:80em;overflow:hidden}
.door{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.6,.05,.25,1)}
.door.l{left:0;transform-origin:left center;z-index:2}
.door.r{right:0;transform-origin:right center;z-index:1}
.face,.back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face{overflow:hidden;background:linear-gradient(180deg,var(--door1),var(--door2))}
.door.l .face{box-shadow:inset -2px 0 0 rgba(15,50,35,.45)}
.door.r .face{box-shadow:inset 2px 0 0 rgba(15,50,35,.45)}
.face .orn{position:absolute;top:0;height:100%;width:200%}
.door.l .face .orn{left:0}
.door.r .face .orn{right:0}
.back{transform:rotateY(180deg);background:linear-gradient(90deg,var(--doorin),color-mix(in srgb,var(--doorin) 65%,#fff))}
.seal{position:absolute;inset-inline-end:auto;right:0;top:50%;width:4.6em;height:5.3em;transform:translate(50%,-50%);z-index:5;border:0;padding:0;display:grid;place-items:center;border-radius:50% 50% 48% 52%/54% 52% 48% 46%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.7),transparent 42%),radial-gradient(circle at 50% 55%,var(--seal1),var(--seal2));
  box-shadow:inset 0 .12em .25em rgba(255,255,255,.85),inset 0 -.3em .55em rgba(90,60,30,.4),0 .5em 1em rgba(50,35,20,.5)}
.seal::before{content:"";position:absolute;inset:.45em;border-radius:inherit;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(110,80,40,.22)}
.seal svg{width:2.5em;height:2.9em;color:rgba(120,92,50,.72);filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
.openbtn{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:6;white-space:nowrap;padding:.95em 1.8em;border-radius:999px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.5);backdrop-filter:blur(4px);color:#0F5132;font:500 .78em var(--serif);box-shadow:0 .5em 1.2em -.5em rgba(50,35,20,.5)}
.exp[data-state=opening] .door.l{transform:rotateY(-112deg)}
.exp[data-state=opening] .door.r{transform:rotateY(112deg)}
.exp[data-state=opening] .stage{opacity:0;transition:opacity .45s 1.05s}
.exp[data-state=opening] .openbtn{opacity:0;transition:opacity .3s}
.exp[data-state=open] .stage{display:none}
.static .openbtn{display:none}

/* pager */
.pager{position:absolute;inset:0}
.track{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.track::-webkit-scrollbar{display:none}
.pg{height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;scrollbar-width:none;padding:34cqw 2.2em 24cqw;display:flex;flex-direction:column;align-items:center;gap:1.1em;text-align:center}
.pg::-webkit-scrollbar{display:none}
.pg{position:relative}
.pg>:first-child{margin-top:auto}
.pg>:nth-last-child(1 of :not(.el)){margin-bottom:auto}
.pg>.el{margin:0}
.pg>:not(.el){position:relative;z-index:1}
.script{font:400 3.7em/1.08 var(--scr);color:var(--script);overflow-wrap:anywhere;max-width:100%}
.exp[lang=ar] .script{font-size:3em;line-height:1.55;font-weight:700}
.amp{font:italic 400 1.7em/1 var(--serif);color:var(--gold2)}
.exp[lang=ar] .amp{font-style:normal}
.exp .tc{font:500 .72em/1.8 var(--serif);color:var(--gold2)}
.exp .tc.big{font-size:1.15em;letter-spacing:.34em;color:var(--ink2);line-height:2}
.exp[lang=ar] .tc.big{font-size:1.5em;letter-spacing:0;font-weight:700}
.exp .tc.intro{font-size:.74em;letter-spacing:.26em;line-height:2.1;max-width:22em;color:var(--ink2)}
.exp[lang=ar] .tc.intro{font-size:1.15em;line-height:1.9}
.fam{display:grid;grid-template-columns:1fr auto 1fr;gap:1em;align-items:stretch;width:100%;max-width:21em;font-size:.95em;line-height:1.6;margin-top:.6em}
.fam .vr{width:1px;background:var(--lo)}
.dframe{position:relative;width:14em;padding:3.4em 1em 1.5em;border:1px solid var(--lo);border-radius:7em 7em 1.4em 1.4em/8.5em 8.5em 1.4em 1.4em;display:grid;gap:.1em;justify-items:center;background:color-mix(in srgb,var(--hi) 16%,transparent)}
.wreath{position:absolute;inset:.5em;width:calc(100% - 1em);height:calc(100% - 1em);pointer-events:none}
.wreath ellipse{fill:var(--gold2);fill-opacity:.55;stroke:none}
.wreath .stem{stroke:var(--gold2);stroke-opacity:.5;stroke-width:1;fill:none}
.dnum{position:relative;font:500 4.6em/1 var(--serif);color:var(--script)}
.exp .mon{font-size:.95em;letter-spacing:.3em;color:var(--ink2);position:relative}
.yr{position:relative;font:400 .9em var(--serif);letter-spacing:.2em}
.exp .wd{position:relative;font-size:.78em;color:var(--gold2)}
.tm{position:relative;font:500 1.6em/1.3 var(--serif);color:var(--ink2);margin-top:.25em}
.cd{display:flex;gap:.45em;direction:ltr}
.cd>div{min-width:3.3em;padding:.45em .2em;border:1px solid var(--lo);border-radius:.6em;display:grid;gap:.05em;font-family:var(--sans)}
.cd b{font:600 1.15em/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink2)}
.cd span{font-size:.62em;opacity:.8}
.venue{font:500 2em/1.15 var(--serif);color:var(--ink2)}
.addr{max-width:17em;line-height:1.6}
.sched{display:grid;gap:1em;width:100%;max-width:19em}
.sched div{display:grid;gap:.1em}
.sched b{font:500 1.05em var(--sans);color:var(--gold2);letter-spacing:.08em}
.sched span{font-size:1.25em}
.ttl{font:italic 500 1.9em/1.15 var(--serif);color:var(--ink2)}
.exp[lang=ar] .ttl{font-style:normal;font-weight:700}
.msg{max-width:19em;font-style:italic;line-height:1.65;font-size:1.25em}
.exp[lang=ar] .msg{font-style:normal}
.endline{max-width:17em;font:italic 400 1.3em/1.55 var(--serif)}
.exp[lang=ar] .endline{font-style:normal}
.pbtn{display:inline-flex;justify-content:center;align-items:center;gap:.6em;border:0;border-radius:999px;padding:.85em 1.7em;background:var(--ink2);color:var(--bg);font:500 .74em var(--serif);letter-spacing:.28em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.exp[lang=ar] .pbtn{letter-spacing:0;text-transform:none;font-size:1em}
.pbtn.ghost{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--lo)}

/* controls */
.ctrls{position:absolute;inset-inline:0;bottom:1em;z-index:8;display:flex;justify-content:space-between;align-items:center;padding:0 1.3em;pointer-events:none}
.ctrls>*{pointer-events:auto}
.down{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--lo);border-radius:999px;padding:.7em 1.3em;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(3px);color:var(--ink2);font:500 .7em var(--serif);letter-spacing:.2em;text-transform:uppercase}
.exp[lang=ar] .down{letter-spacing:0;text-transform:none;font-size:.95em}
.down svg{width:1.2em;height:1.2em;transition:transform .3s}
.down.up svg{transform:rotate(180deg)}
.mus{width:2.8em;height:2.8em;border-radius:50%;border:1px solid var(--lo);background:color-mix(in srgb,var(--bg) 82%,transparent);display:grid;place-items:center;padding:0;color:var(--ink2)}
.mus svg{width:1.3em;height:1.3em}
.mus[aria-pressed=true]{background:var(--ink2);color:var(--bg)}

/* RSVP */
.rs{width:100%;max-width:21em;display:grid;gap:.8em;text-align:start}
.rs h3{font:italic 500 1.9em/1.15 var(--serif);color:var(--ink2);text-align:center}
.exp[lang=ar] .rs h3{font-style:normal;font-weight:700}
.rs-sub{text-align:center;font-size:.95em}
.rs .l{display:block;font:600 .8em var(--sans);margin-bottom:.3em}
.rs .o{font-weight:400;opacity:.8}
.rs input[type=text],.rs select,.rs textarea{width:100%;font:400 .9em var(--sans);padding:.7em .9em;border:1px solid var(--lo);border-radius:.9em;background:rgba(255,255,255,.78);color:#2a221b}
.rs textarea{min-height:4em;resize:none}
.rs-choice{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.rs-choice label{position:relative;display:block}
.rs-choice input{position:absolute;opacity:0;inset:0;margin:0}
.rs-choice span{display:block;text-align:center;padding:.7em .3em;border:1px solid var(--lo);border-radius:999px;font:500 .85em var(--sans)}
.rs-choice input:checked+span{background:var(--ink2);color:var(--bg);border-color:var(--ink2)}
.rs-choice input:focus-visible+span{outline:3px solid var(--gold2);outline-offset:2px}
.rs .pbtn{width:100%}
.rs-note{font-size:.8em;opacity:.85;text-align:center}
.rs .tlink{background:none;border:0;padding:0;color:var(--ink2);font:600 .85em var(--sans);text-decoration:underline;justify-self:center}
.rs-thanks{text-align:center;display:grid;gap:.8em}

/* preview watermark */
.wm{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='130'%3E%3Ctext x='10' y='75' font-family='Inter,sans-serif' font-size='11' letter-spacing='3' fill='%238a7a68' fill-opacity='.38' transform='rotate(-22 115 65)'%3EHAFLA PREVIEW%3C/text%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ===================== platform additions ===================== */
.sub{color:var(--muted)}
.auth{max-width:460px;margin:3rem auto 5rem;padding:0 1.25rem}
.auth h1{font-size:3.2rem;margin-bottom:.4rem}
.tabs2{display:grid;grid-template-columns:1fr 1fr;background:var(--cream2);border:1px solid var(--line);border-radius:999px;padding:4px;margin:1.4rem 0}
.tabs2 button{border:0;background:none;border-radius:999px;padding:.7rem;font-weight:600;color:var(--ink)}
.tabs2 button[aria-selected=true]{background:var(--ink);color:#F5F3E7}
.card{background:var(--white);border:1px solid var(--line);border-radius:1.4rem;padding:1.4rem;margin-bottom:1.4rem}
.card h2{font-size:2rem;margin-bottom:.8rem}
.err{color:var(--no);background:var(--nobg);border-radius:.8rem;padding:.7rem 1rem;margin-bottom:1rem;font-size:.92rem}
.acc{max-width:760px;margin:0 auto;padding:2.5rem 1.25rem 5rem}
.acc h1{font-size:clamp(2.6rem,5vw,3.8rem)}
.acc-links{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 2rem}
.badge-admin{display:inline-block;font:600 .8rem var(--ui);padding:.2rem .7rem;border-radius:99px;background:var(--cream2);border:1px solid var(--line);color:var(--goldd);margin-top:.6rem}

/* builder blocks */
.bsec{margin:0 0 1.1rem;border:1px solid var(--line);border-radius:1.2rem;background:var(--white);overflow:hidden}
.bsec>summary{list-style:none;cursor:pointer;padding:1rem 1.2rem;font:500 1.8rem var(--disp);color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.bsec>summary::-webkit-details-marker{display:none}
.bsec>summary::after{content:"+";font:400 1.6rem var(--ui);color:var(--gold)}
.bsec[open]>summary::after{content:"–"}
.bsec .inner{padding:0 1.2rem 1.2rem}
html[lang=ar] .bsec>summary{font-weight:700}
.colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.1rem;margin-top:.6rem}
.colors label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.86rem;font-weight:500}
.colors input[type=color]{width:2.6rem;height:2rem;border:1px solid var(--line);border-radius:.5rem;padding:0;background:none;cursor:pointer}
.mini-det{margin:.4rem 0 1rem}
.mini-det>summary{cursor:pointer;font-weight:600;color:var(--goldd);padding:.3rem 0}
.seclist{display:grid;gap:.6rem;margin-bottom:1rem}
.seccard{border:1px solid var(--line);border-radius:1rem;background:var(--cream)}
.seccard.off{opacity:.62}
.sechead{display:flex;align-items:center;gap:.35rem;padding:.5rem .6rem .5rem .9rem}
html[dir=rtl] .sechead{padding:.5rem .9rem .5rem .6rem}
.sechead .st{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;text-align:start;padding:.4rem 0}
.sechead .st small{font-weight:400;color:var(--muted)}
.ib{width:2.3rem;height:2.3rem;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;padding:0;font-size:1rem;line-height:1;color:var(--ink)}
.ib:disabled{opacity:.3;cursor:default}
.secbody{padding:.8rem 1rem 1rem;border-top:1px solid var(--line)}
.chk{display:flex;align-items:center;gap:.6rem;font-weight:500;margin-bottom:1rem}
.chk input{width:1.15rem;height:1.15rem;accent-color:var(--ink)}
.note-s{font-size:.88rem;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.7rem;margin:.6rem 0}
.thumb{position:relative;display:grid;gap:.35rem}
.thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.8rem;border:1px solid var(--line);display:block}
.thumb .ib{position:absolute;top:.3rem;inset-inline-end:.3rem;width:1.8rem;height:1.8rem;background:rgba(255,255,255,.92)}
.thumb input{font:inherit;font-size:.82rem;padding:.4rem .5rem;border:1px solid var(--line);border-radius:.6rem;background:var(--white);width:100%}
.hide-file{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.upl{position:relative;cursor:pointer}
.upl:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.addrow{display:flex;flex-wrap:wrap;gap:.5rem}
.addrow button{border:1px dashed var(--gold);background:var(--cream);border-radius:999px;padding:.55rem 1.1rem;font-weight:500;color:var(--ink)}
.addrow button:disabled{opacity:.4;cursor:default}
.addrow button:not(:disabled):hover{background:var(--cream2)}
.audiorow{display:grid;gap:.6rem;margin:.6rem 0 1rem}
.audiorow audio{width:100%}
.fname{font-weight:600;word-break:break-all}
.tpl-sw{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}

/* admin */
.adm{max-width:1240px;margin:0 auto;padding:2rem 1.25rem 5rem;display:grid;grid-template-columns:230px minmax(0,1fr) auto;gap:2rem}
.adm h1{font-size:clamp(2.6rem,5vw,3.6rem)}
.adm-head{grid-column:1/-1}
.adm-list{display:grid;gap:.5rem;align-content:start}
.adm-list button{display:flex;align-items:center;gap:.7rem;text-align:start;border:1px solid var(--line);background:var(--white);border-radius:1rem;padding:.6rem .8rem;font-weight:500;color:var(--ink)}
.adm-list button[aria-current=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.adm-prev{position:sticky;top:9rem;align-self:start}
.cats{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.langrow{display:grid;gap:.5rem;margin-bottom:.8rem}
@media(max-width:1100px){.adm{grid-template-columns:1fr}.adm-prev{position:static}.adm-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}

/* ---- invitation: new sections ---- */
.cphoto{flex:none;width:11em;height:14em;border-radius:50% 50% 1.2em 1.2em/36% 36% 1.2em 1.2em;overflow:hidden;box-shadow:0 0 0 .35em var(--shoulder),0 0 0 calc(.35em + 1px) var(--lo),0 .8em 1.4em -.8em rgba(0,0,0,.45)}
.cphoto img{width:100%;height:100%;object-fit:cover;display:block}
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:.8em;width:100%;max-width:21em}
.gimg{padding:0;border:0;background:none;display:grid;gap:.35em;text-align:center;color:inherit;cursor:zoom-in}
.gimg img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:.9em;display:block;box-shadow:0 0 0 1px var(--lo),0 .5em 1em -.6em rgba(0,0,0,.5)}
.gimg span{font-size:.82em;opacity:.9;line-height:1.3}
.timg{flex:none;width:12em;aspect-ratio:4/5;object-fit:cover;border-radius:6em 6em 1em 1em/7em 7em 1em 1em;box-shadow:0 0 0 .3em var(--shoulder),0 0 0 calc(.3em + 1px) var(--lo)}
.pre{white-space:pre-line}
.lb{position:absolute;inset:0;z-index:30;background:rgba(15,12,10,.95);display:grid;place-items:center}
.lb img{max-width:92%;max-height:78%;object-fit:contain;border-radius:.6em}
.lb button{position:absolute;width:2.8em;height:2.8em;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;font-size:1.3em;line-height:1;display:grid;place-items:center;padding:0}
.lb .lbx{top:.8em;inset-inline-end:.8em}
.lb .lbp{inset-inline-start:.6em;top:50%;transform:translateY(-50%)}
.lb .lbn{inset-inline-end:.6em;top:50%;transform:translateY(-50%)}
.lb .lbc{position:absolute;bottom:1.2em;color:#fff;font:400 .95em var(--serif);text-align:center;max-width:80%}
.mus.err{outline:2px solid var(--gold2)}

/* ===================== v3: header, covers, controls, arrows, editor ===================== */
section[id]{scroll-margin-top:calc(var(--hh,4.4rem) + 3.5rem)}

/* ---- header v2: logo + menu are always reachable ---- */
.hdr{position:sticky;top:0;z-index:40;background:var(--hbg,color-mix(in srgb,var(--cream) 97%,transparent));backdrop-filter:blur(10px);border-bottom:1px solid rgba(94,127,94,.25)}
.hdr-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1240px;margin:0 auto;padding:.6rem 1.25rem}
.hdr .logo{flex:none;gap:.25rem}
.hdr .logo b{font-size:2rem}
.hdr .logo i{width:8.5rem}
.hnav{display:none;align-items:center;justify-content:center;gap:.3rem;flex:1}
.hnav button{border:0;background:none;padding:.55rem 1rem;border-radius:999px;font:500 .98rem var(--ui);color:#3F5A45}
.hnav button:hover{background:var(--cream2);color:var(--ink)}
.hdr-act{display:flex;align-items:center;gap:.55rem;flex:none}
.hdr-act .pill-dark{font-size:1.05rem;padding:.6rem 1.3rem;box-shadow:none}
.hdr-act .langsel{display:none;font:500 .92rem var(--ui);padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--cream2);color:var(--ink)}
.hdr .pills{max-height:4.6rem;overflow-x:auto;padding:.1rem 1.25rem .8rem;transition:max-height .25s,padding .25s,opacity .25s}
.hdr.hide-pills .pills{max-height:0;padding-block:0;opacity:0;overflow:hidden}
.hdr[data-page=other] .pills{display:none}
.hdr .menu{position:absolute;top:calc(100% + .4rem);inset-inline-start:auto;inset-inline-end:1rem;width:min(22rem,calc(100vw - 2rem));max-height:calc(100dvh - 6rem);overflow:auto;background:var(--white);border:1px solid var(--line);border-radius:1.4rem;padding:1.2rem;box-shadow:0 24px 50px -20px rgba(15,50,35,.5);display:grid;gap:.9rem}
.hdr .menu[hidden]{display:none}
.hdr .menu .btn{width:100%}
@media(min-width:900px){
  .hnav{display:flex}
  .hdr .pills{display:none}
  .hdr-act .langsel{display:block}
}
@media(max-width:480px){
  .hdr .logo b{font-size:1.75rem}.hdr .logo i{width:6.5rem}
  .hdr-act{gap:.4rem}.hdr-act .pill-dark{padding:.5rem .95rem;font-size:.98rem}
  .round{width:2.8rem;height:2.8rem}
}
.builder-tabs{top:var(--hh,4.4rem)!important}
.b-preview{top:calc(var(--hh,4.4rem) + 1rem)!important}
.adm-prev{top:calc(var(--hh,4.4rem) + 1rem)!important}
@media(max-width:900px){.b-preview{top:auto!important}}

/* ---- carousel + template arrows ---- */
.carwrap{position:relative}
.cnav{position:absolute;top:38%;z-index:6;width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--line);background:rgba(251,250,241,.96);color:var(--goldd);display:grid;place-items:center;padding:0;box-shadow:0 10px 24px -10px rgba(15,50,35,.55)}
.cnav.prev{inset-inline-start:max(.5rem,calc(50% - min(36vw,170px) - 4.4rem))}
.cnav.next{inset-inline-end:max(.5rem,calc(50% - min(36vw,170px) - 4.4rem))}
.cnav svg,.round svg{width:1.3rem;height:1.3rem}
.cnav:disabled{opacity:.3;cursor:default}
html[dir=rtl] .cnav svg,html[dir=rtl] .stepper .round svg{transform:scaleX(-1)}
.stepper{display:flex;align-items:center;justify-content:center;gap:1rem;width:100%}
.stepper .nm{font:500 1.5rem/1.1 var(--disp);text-align:center;min-width:8rem}
.stepper .nm small{display:block;font:500 .8rem var(--ui);color:var(--muted);margin-top:.2rem}
.stepper .round:disabled{opacity:.3;cursor:default}
.sheet{position:relative}

/* ---- cover (doors) ---- */
.door{transition:transform var(--dur,1500ms) cubic-bezier(.6,.05,.25,1)}
.exp[data-state=opening] .stage{transition:opacity .45s calc(var(--dur,1500ms) * .7)}
.exp:not([data-anim=doors])[data-state=opening] .door{transform:none!important}
.exp[data-anim=fade][data-state=opening] .stage{opacity:0;transition:opacity var(--dur,1500ms) ease}
.exp[data-anim=zoom][data-state=opening] .stage{opacity:0;transform:scale(1.35);transition:opacity var(--dur,1500ms) ease,transform var(--dur,1500ms) ease}
.exp[data-anim=slide][data-state=opening] .stage{transform:translateY(-102%);transition:transform var(--dur,1500ms) cubic-bezier(.7,0,.2,1)}
.exp[data-anim=slide][data-state=opening] .openbtn,.exp[data-anim=fade][data-state=opening] .openbtn,.exp[data-anim=zoom][data-state=opening] .openbtn{opacity:0;transition:opacity .3s}
.face.has-img{background-repeat:no-repeat}
.stage.single .door.l{width:100%}
.stage.single .door.r{display:none}
.stage.single .door.l .face{box-shadow:none}
.stage.single .door.l .face .orn{width:100%}
.stage.single .seal{right:50%}
.seal{width:calc(var(--sealsize,4.6) * 1em);height:calc(var(--sealsize,4.6) * 1.15em)}
.seal svg{width:54%;height:54%}
.seal .ini{font:600 1.5em/1 var(--serif);color:rgba(120,92,50,.85);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.seal.img{background:none;box-shadow:none;border-radius:0}
.seal.img::before{display:none}
.seal.img img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 .4em .6em rgba(40,25,10,.45))}
.seal.none{opacity:0}
.openbtn.st-glass{background:color-mix(in srgb,var(--btnbg,#fff) 55%,transparent);color:var(--btnfg,#0F5132);border-color:color-mix(in srgb,var(--btnbg,#fff) 85%,transparent)}
.openbtn.st-solid{background:var(--btnbg,#fff);color:var(--btnfg,#0F5132);border-color:var(--btnbg,#fff);backdrop-filter:none}
.openbtn.st-outline{background:transparent;color:var(--btnbg,#fff);border:1.5px solid var(--btnbg,#fff);backdrop-filter:none;box-shadow:none;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.openbtn.pos-top{bottom:auto}
.openbtn.pos-seal{bottom:auto;top:calc(50% + var(--sealsize,4.6) * .62em + 1.2em)}

/* ---- page frame images + bottom controls ---- */
.orn-img{display:block;width:100%;height:auto;pointer-events:none}
.ctrls{inset:0;bottom:0;display:block;padding:0}
.ctrls>*{position:absolute;bottom:1em}
.ctrls .pos-start{inset-inline-start:1.3em}
.ctrls .pos-end{inset-inline-end:1.3em}
.ctrls .pos-center{left:50%;transform:translateX(-50%)}
.script{font-size:var(--ns,3.7em)}
.exp[lang=ar] .script{font-size:calc(var(--ns,3.7em) * .8)}

/* ---- admin editor ---- */
.adm-step{grid-column:2/3}
.adm .tabs2{max-width:360px}
.adm-main{grid-column:2/3;display:grid;gap:0}
.adm input[type=range],.card input[type=range]{width:100%;accent-color:var(--ink)}
.adm textarea.code{font:500 .85rem/1.5 ui-monospace,Menlo,Consolas,monospace;direction:ltr;min-height:9rem;white-space:pre}
.imgfield{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.imgfield img{width:3.6rem;height:3.6rem;object-fit:cover;border-radius:.6rem;border:1px solid var(--line);background:repeating-conic-gradient(#dfe6d0 0 25%,#fff 0 50%) 0 0/12px 12px}
.imgfield .lab{flex:1 0 100%}
.fontrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.fontrow .smp{font-size:1.7rem;line-height:1.2}
.fontrow small{color:var(--muted);display:block;font-size:.8rem}
.fontlist{margin-top:.6rem}
.adm .card h2{font-size:1.9rem}
@media(max-width:1100px){.adm-step,.adm-main{grid-column:1/-1}}
.admrow{display:flex;align-items:center;gap:.3rem}
.admrow>button:first-child{flex:1;min-width:0}
.admrow .ib{width:2rem;height:2rem}

/* ===================== v4: luxury green, responsive grid, 3D doors, commerce ===================== */
body{background:var(--cream)}
.hero{padding-top:clamp(4rem,9vw,6.5rem)}
.designs{padding-top:clamp(3.5rem,7vw,6rem);background:var(--white)}
.filter{margin:2.2rem 0 1rem}
.hdr .pills{justify-content:safe center;gap:.6rem}
.hdr .pills button{min-width:7.5rem;text-align:center}
.badge{color:#0B2A1B}

/* templates grid (desktop/tablet) and snap carousel (phones) */
@media(min-width:640px){
  .car{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2.8rem 2rem;max-width:1160px;margin:0 auto;padding:2.4rem 1.25rem 1.5rem;overflow:visible;scroll-snap-type:none}
  .tcard{width:100%;max-width:370px;margin-inline:auto}
  .cnav{display:none}
}
@media(min-width:640px) and (max-width:900px){.car{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tcard .meta{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.price-tag{display:inline-block;font:600 .85rem var(--ui);padding:.22rem .85rem;border-radius:99px;background:var(--cream2);border:1px solid var(--sage);color:var(--green)}
.price-tag.free{background:#DCE8D4}
.sw small{color:var(--muted);font-weight:500}

/* dark green sections */
.band{background:var(--green);color:var(--cream);text-align:center;padding:clamp(3.5rem,8vw,5.5rem) 1.25rem}
.band h2{color:var(--cream);font-size:clamp(2.4rem,5vw,3.6rem);max-width:14em;margin:0 auto 1rem}
.band p{color:var(--sage);max-width:34em;margin:0 auto 2rem}
.cta.light{background:var(--cream);color:var(--green)}
.foot{background:color-mix(in srgb,var(--green) 75%,#000);color:var(--sage);padding:2.6rem 1.25rem 3rem}
.foot .flogo{display:block;font:600 2rem var(--disp);color:var(--cream);letter-spacing:.06em;margin-bottom:.4rem}

/* thin seam + 3D door thickness */
.door.l .face{box-shadow:inset calc(var(--seam,1) * -1px) 0 0 var(--seamc,rgba(15,50,35,.3))}
.door.r .face{box-shadow:inset calc(var(--seam,1) * 1px) 0 0 var(--seamc,rgba(15,50,35,.3))}
.face{transform:translateZ(calc(var(--thick,.7em) / 2))}
.back{transform:rotateY(180deg) translateZ(calc(var(--thick,.7em) / 2))}
.edge{position:absolute;top:0;bottom:0;width:var(--thick,.7em);transform:rotateY(90deg);backface-visibility:visible;
  background:var(--doorin)}
.door.l .edge{right:calc(var(--thick,.7em) / -2)}
.door.r .edge{left:calc(var(--thick,.7em) / -2)}
.stage.single .edge{display:none}
.seal{transform:none;translate:50% -50% calc(var(--thick,.7em) / 2 + .15em);transition:scale .35s,opacity .3s}
.seal:hover{transform:none;scale:1.06}
.exp[data-state=opening] .seal,.exp[data-state=open] .seal{transform:none;scale:.4}

/* page background image + bottom bar image */
.exp.has-bar .ctrls::before{content:"";position:absolute;inset:auto 0 0;height:5.4em;background:var(--barbg) center/cover no-repeat;pointer-events:none;z-index:-1}

/* gift (IBAN) page inside the invitation */
.iban{font:600 1.1em/1.45 ui-monospace,Menlo,Consolas,monospace;direction:ltr;letter-spacing:.04em;word-break:break-all;background:color-mix(in srgb,var(--hi) 35%,transparent);border:1px solid var(--lo);border-radius:.7em;padding:.7em .9em;max-width:19em}
.giftname{font-size:1.35em;color:var(--head,var(--ink2))}
.giftbank{opacity:.9}

/* checkout */
.co{max-width:1000px;margin:0 auto;padding:2.5rem 1.25rem 5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:2rem;align-items:start}
.co h1{grid-column:1/-1;font-size:clamp(2.6rem,5vw,3.8rem)}
.co .sum{position:sticky;top:calc(var(--hh,4.4rem) + 1rem)}
.line{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid var(--line)}
.line.total{font-weight:700;font-size:1.15rem;border-top:2px solid var(--green)}
.line.disc{color:var(--green2)}
.coupon-row{display:flex;gap:.6rem;margin:.6rem 0}
.coupon-row input{flex:1;min-width:0;font:inherit;text-transform:uppercase;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink)}
.pm{display:grid;gap:.7rem;margin:1rem 0}
.pm label{display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--white);cursor:pointer}
.pm label:has(input:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.pm input{margin-top:.25rem;accent-color:var(--green)}
.pm b{display:block}.pm small{color:var(--muted)}
.qrbox{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.8rem;max-width:270px;margin:1rem auto}
.qrbox svg,.qrbox img{width:100%;height:auto;display:block}
.refcode{display:inline-block;font:700 1.5rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;background:var(--cream2);border:1px dashed var(--sage);padding:.4rem 1rem;border-radius:.8rem;direction:ltr}
.status{display:inline-block;font:600 .85rem var(--ui);padding:.2rem .8rem;border-radius:99px}
.status.pending{background:#F1EBC6;color:#5E4D0B}.status.paid{background:var(--yesbg);color:var(--green)}.status.canceled{background:var(--nobg);color:var(--no)}
.pill.wait{background:#F1EBC6;color:#5E4D0B}
.paybanner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#F1EBC6;border:1px solid #D8CF8C;color:#4D3F08;border-radius:1rem;padding:1rem 1.2rem;margin-bottom:1.6rem}
.paybanner .btn{background:var(--green)}
@media(max-width:860px){.co{grid-template-columns:1fr}.co .sum{position:static}}

/* admin: tabs, tables, settings */
.adm .tabs2{display:flex;flex-wrap:wrap;gap:4px;max-width:none;border-radius:1.4rem;margin-top:1rem}
.adm .tabs2 button{flex:1 1 auto;padding:.6rem 1.2rem}
.adm-wide{grid-column:1/-1}
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:start;padding:.7rem .6rem;border-top:1px solid var(--line);font-size:.92rem;vertical-align:top}
.tbl th{font-weight:600;color:var(--muted);border-top:0}
.tbl .acts{display:flex;gap:.4rem;flex-wrap:wrap}
.statrow{display:flex;gap:2rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.statrow div{display:grid}.statrow b{font:400 2.4rem/1 var(--disp)}.statrow span{color:var(--muted);font-size:.88rem}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media(max-width:700px){.row3{grid-template-columns:1fr 1fr}}

/* music picker */
.tracks{display:grid;gap:.6rem;margin:.6rem 0 1rem}
.mtrack{display:grid;grid-template-columns:1fr auto;gap:.5rem .8rem;align-items:center;padding:.7rem .9rem;border:1px solid var(--line);border-radius:.9rem;background:var(--white)}
.mtrack.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.mtrack audio{grid-column:1/-1;width:100%;height:2.2rem}
.mtrack strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ===================== v4 ===================== */
/* page background: one fixed layer behind the scrolling pages */
.pgbg{position:absolute;inset:0;pointer-events:none}
.exp.has-pgbg.bg-cover .pgbg{background:var(--pgbg) center/cover no-repeat,var(--bg)}
.exp.has-pgbg.bg-tile .pgbg{background:var(--pgbg) 0 0/auto repeat,var(--bg)}
.exp.has-pgbg .pg{background:none}

/* text animations */
.exp{--ta-dur:900ms;--ta-stag:.12s;--ta-dist:1.2;--ta-blur:10px}
.exp[data-rev] .pg>*:not(.el):not(.split){opacity:0;transition:opacity var(--ta-dur) ease,transform var(--ta-dur) cubic-bezier(.2,.7,.2,1),filter var(--ta-dur) ease,clip-path var(--ta-dur) ease}
.exp[data-ta][data-rev] .pg.in>*:not(.el):not(.split){opacity:1;transform:none;filter:none;clip-path:inset(-20% -20% -20% -20%)}
.exp[data-ta=rise][data-rev] .pg>*:not(.el):not(.split){transform:translateY(calc(var(--ta-dist) * 1em))}
.exp[data-ta=slide][data-rev] .pg>*:not(.el):not(.split){transform:translateX(calc(var(--ta-dist) * -2em))}
.exp[dir=rtl][data-ta=slide][data-rev] .pg>*:not(.el):not(.split){transform:translateX(calc(var(--ta-dist) * 2em))}
.exp[data-ta=blur][data-rev] .pg>*:not(.el):not(.split){filter:blur(var(--ta-blur));transform:scale(1.04)}
.exp[data-ta=zoom][data-rev] .pg>*:not(.el):not(.split){transform:scale(.8)}
.exp[data-ta=flip][data-rev] .pg>*:not(.el):not(.split){transform:perspective(40em) rotateX(70deg);transform-origin:50% 100%}
.exp[data-ta=mask][data-rev] .pg>*:not(.el):not(.split){opacity:1;clip-path:inset(0 0 100% 0);transform:translateY(.4em)}
.exp[data-ta=none][data-rev] .pg>*:not(.el){opacity:1;transition:none;transform:none;filter:none}
.exp[data-rev] .pg>:nth-child(2){transition-delay:calc(var(--ta-stag) * 1)}
.exp[data-rev] .pg>:nth-child(3){transition-delay:calc(var(--ta-stag) * 2)}
.exp[data-rev] .pg>:nth-child(4){transition-delay:calc(var(--ta-stag) * 3)}
.exp[data-rev] .pg>:nth-child(5){transition-delay:calc(var(--ta-stag) * 4)}
.exp[data-rev] .pg>:nth-child(6){transition-delay:calc(var(--ta-stag) * 5)}
.exp[data-rev] .pg>:nth-child(n+7){transition-delay:calc(var(--ta-stag) * 6)}
.tww{display:inline-block;white-space:nowrap}
.tw{display:inline-block;opacity:0;transform:translateY(.7em);filter:blur(var(--ta-blur));transition:opacity var(--ta-dur) ease,transform var(--ta-dur) cubic-bezier(.2,.7,.2,1),filter var(--ta-dur) ease;transition-delay:calc(var(--i) * (var(--ta-stag) * .35) + var(--ta-stag))}
.exp[data-ta=words] .tw{transition-delay:calc(var(--i) * (var(--ta-stag) * 1.6) + var(--ta-stag))}
.exp .pg.in .tw{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.exp[data-rev] .pg>*,.tw{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;clip-path:none!important}}

/* PNG / decoration elements placed by the admin on each section */
.el{position:absolute;height:auto;max-width:none;pointer-events:none;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scaleX(var(--fx,1));z-index:0}
.el.front{z-index:3}
.mo-float{animation:elfloat 5s ease-in-out infinite}
.mo-sway{animation:elsway 6s ease-in-out infinite}
.mo-pulse{animation:elpulse 3.6s ease-in-out infinite}
.mo-spin{animation:elspin 40s linear infinite}
@keyframes elfloat{50%{translate:0 -.8em}}
@keyframes elsway{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@keyframes elpulse{50%{scale:1.08}}
@keyframes elspin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.el{animation:none!important}}

/* shared ornaments */
.ordiv{display:flex;align-items:center;justify-content:center;gap:.6em;width:min(15em,80%);color:var(--gold2);opacity:.9}
.ordiv i{flex:1;height:1px;background:currentColor;opacity:.55}
.ordiv b{width:.5em;height:.5em;border:1px solid currentColor;transform:rotate(45deg)}
.it{font-style:italic}
.panel{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1em;width:100%;max-width:21em;padding:2.4em 1.4em;border:1px solid var(--lo)}
.panel.pn-arch{border-radius:10em 10em 1.6em 1.6em/12em 12em 1.6em 1.6em;padding-top:4.6em;box-shadow:inset 0 0 0 .4em transparent,0 0 0 .35em color-mix(in srgb,var(--hi) 30%,transparent)}
.panel.pn-frame{border-radius:1.4em}

/* date: arch + plain + card */
.dframe.dv-arch{width:17em;padding:5.2em 1em 1.8em;border-radius:9em 9em 2.2em 2.2em/11em 11em 2.2em 2.2em;box-shadow:inset 0 0 0 .45em transparent,inset 0 0 0 calc(.45em + 1px) color-mix(in srgb,var(--lo) 45%,transparent)}
.dsprig{position:absolute;top:1.4em;left:50%;translate:-50% 0;width:3.2em;color:var(--gold2);opacity:.8}
.dsprig svg{width:100%;height:auto}
.dline{width:3.4em;height:1px;background:var(--lo);margin:.5em 0 .3em;position:relative}
.dline::after{content:"";position:absolute;left:50%;top:50%;width:.35em;height:.35em;border-radius:50%;background:var(--gold2);translate:-50% -50%}
.dv-arch .dnum{font-size:5.6em;font-weight:400}
.dv-arch .mon{letter-spacing:.42em}
.pbtn.cal{letter-spacing:.2em;padding:.9em 1.6em}
.dframe.dv-plain{border:0;background:none;padding:1em}
.dframe.dv-card{border-radius:1.6em;padding:2.4em 2em}

/* place: map card */
.mapcard{position:relative;width:min(17em,86%);color:var(--gold2)}
.mapsvg{display:block;width:100%;height:auto;overflow:visible}
.mapname{position:absolute;left:54%;top:38%;font:italic 500 .8em/1.1 var(--serif);color:var(--ink2);max-width:6.5em;text-align:start;text-shadow:0 0 .4em var(--bg),0 0 .4em var(--bg)}
.venue.it{font-size:2.1em;color:var(--gold2)}
.exp[lang=ar] .venue.it{font-style:normal}

/* program timeline */
.sched.tl{position:relative;padding-inline-start:1.8em;text-align:start;justify-items:start}
.sched.tl::before{content:"";position:absolute;inset-block:.4em;inset-inline-start:.45em;width:1px;background:var(--lo)}
.sched.tl>div{position:relative}
.sched.tl>div::before{content:"";position:absolute;inset-inline-start:-1.65em;top:.55em;width:.6em;height:.6em;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 .22em var(--bg)}

/* gallery variants */
.g-arch{max-width:22em;gap:1em;grid-template-columns:1fr 1fr}
.g-arch .gimg{padding:.35em;background:transparent;border-radius:50% 50% 1.2em 1.2em/32% 32% 1.2em 1.2em;box-shadow:0 0 0 1px var(--lo),0 0 0 .3em color-mix(in srgb,var(--hi) 55%,transparent)}
.g-arch .gimg img{aspect-ratio:3/4;border-radius:50% 50% .8em .8em/32% 32% .8em .8em;box-shadow:none}
.g-arch .gimg:first-child{grid-column:1/-1}
.g-arch .gimg:first-child img{aspect-ratio:4/5}
.g-stack{grid-template-columns:1fr;max-width:17em}
.g-stack .gimg img{aspect-ratio:4/5}
.gimg{position:relative;padding:0;border:0;background:none;display:block;width:100%}
.gph{display:block;aspect-ratio:3/4;border-radius:inherit;background:linear-gradient(160deg,color-mix(in srgb,var(--gold2) 35%,var(--bg)),color-mix(in srgb,var(--ink2) 45%,var(--bg)))}
.g-arch .gimg:first-child .gph{aspect-ratio:4/5}.g-arch .gph{border-radius:50% 50% .8em .8em/32% 32% .8em .8em}

/* text photo variants */
.timg.tv-arch{width:14em;border-radius:50% 50% 1em 1em/36% 36% 1em 1em}
.timg.tv-plain{border-radius:1em;width:15em;aspect-ratio:4/3}
.ibcard{border-radius:1.2em;padding:1.1em 1.2em}

/* RSVP: arch + card */
.rs.rsv-arch,.rs.rsv-card{width:100%;max-width:21em;border:1px solid var(--lo);padding:2.4em 1.6em 2em;justify-items:center;gap:1em}
.rs.rsv-arch{border-radius:10em 10em 2em 2em/12em 12em 2em 2em;padding-top:4.2em}
.rs.rsv-card{border-radius:1.6em}
.rsv-arch .rs-sub,.rsv-card .rs-sub{font:italic 500 1em/1.6 var(--serif);max-width:15em}
.rsv-arch>div,.rsv-card>div{width:100%}
.rsv-arch input[type=text],.rsv-card input[type=text]{border:0;border-bottom:1px solid var(--lo);border-radius:0;background:none;text-align:center;font:italic 400 1.1em var(--serif);padding:.7em 0}
.rsv-arch .rs-choice,.rsv-card .rs-choice{grid-template-columns:1fr;gap:0}
.rsv-arch .rs-choice span,.rsv-card .rs-choice span{display:flex;align-items:center;justify-content:center;gap:.7em;border:0;border-bottom:1px solid color-mix(in srgb,var(--lo) 40%,transparent);border-radius:0;padding:.95em .3em;font:italic 500 1.25em var(--serif);background:none;color:var(--ink2)}
.rsv-arch .rs-choice span::before,.rsv-card .rs-choice span::before{content:"";width:.9em;height:.9em;border:1px solid var(--ink2);transform:rotate(45deg) scale(.8)}
.rsv-arch .rs-choice input:checked+span,.rsv-card .rs-choice input:checked+span{background:none;color:var(--ink2);border-color:color-mix(in srgb,var(--lo) 40%,transparent)}
.rsv-arch .rs-choice input:checked+span::before,.rsv-card .rs-choice input:checked+span::before{background:var(--gold2);border-color:var(--gold2)}
.stp{display:flex;align-items:center;justify-content:center;gap:.9em}
.stp[hidden]{display:none}
.stp .l{margin:0;font:500 .72em var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.stp button{width:2.2em;height:2.2em;border-radius:50%;border:1px solid var(--lo);background:none;color:var(--ink2);font-size:1em;line-height:1;padding:0}
.stp output{min-width:1.4em;text-align:center;font:500 1.5em var(--serif);color:var(--ink2)}
.rsv-arch .rs .pbtn,.rsv-arch .pbtn,.rsv-card .pbtn{width:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--gold2) 78%,#fff),var(--gold2));color:#fff;box-shadow:0 .6em 1.2em -.7em rgba(60,40,20,.55),inset 0 1px 0 rgba(255,255,255,.35);padding:1.1em}
.rsv-arch textarea,.rsv-card textarea{border:0;border-bottom:1px solid var(--lo);border-radius:0;background:none}
.rsv-arch .rs-note{display:none}


/* ===================== v4: site-wide ===================== */
.logo-img{display:block;width:auto;max-width:min(60vw,320px);object-fit:contain}
.hdr.nosticky{position:relative}
.hnav a{border:0;background:none;padding:.55rem 1rem;border-radius:999px;font:500 .98rem var(--ui);color:var(--hfg,#3F5A45);text-decoration:none;white-space:nowrap}
.hnav a:hover{background:var(--cream2);color:var(--ink)}
.hnav button{color:var(--hfg,#3F5A45)}
.pills a{flex:none;border:1px solid var(--line);background:var(--cream2);border-radius:999px;padding:.8rem 1.9rem;font:500 .98rem var(--ui);color:var(--hfg,#3F5A45);text-decoration:none;display:inline-block}
.hdr .pills a{min-width:7.5rem;text-align:center}
.hcta{white-space:nowrap}
@media(max-width:600px){.hcta{display:none}}
.hero.has-bg,.hero.has-bg h1,.hero.has-bg .lede,.hero.has-bg .eyebrow{color:#fff}
.foot-in{max-width:1160px;margin:0 auto;display:grid;gap:1.6rem;align-items:start}
.foot.cols-2 .foot-in{grid-template-columns:1fr 1fr}
.foot.cols-3 .foot-in{grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:700px){.foot.cols-2 .foot-in,.foot.cols-3 .foot-in{grid-template-columns:1fr}}
.foot .flogo{display:block;margin-bottom:.4rem}
.foot-links,.foot-social{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-content:start}
.foot-links a,.foot-social a{color:inherit;text-decoration:none;opacity:.9;border-bottom:1px solid transparent}
.foot-links a:hover,.foot-social a:hover{border-color:currentColor}
.pagehead{max-width:900px;margin:0 auto;padding:3rem 1.25rem 0;text-align:center}
.pagehead h1{font-size:clamp(2.6rem,6vw,4rem)}
.blk{max-width:1100px;margin:0 auto;padding-inline:1.25rem}
.blk h2{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:1rem}
.blk-body p{margin:0 0 1rem;max-width:42em}
.blk-text.al-center{text-align:center}.blk-text.al-center .blk-body p{margin-inline:auto}
.blk-it{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.blk-it.flip .blk-img{order:2}
.blk-img{width:100%;border-radius:1.2rem;display:block;object-fit:cover;max-height:520px}
@media(max-width:760px){.blk-it{grid-template-columns:1fr}.blk-it.flip .blk-img{order:0}}
.blk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.blk-card{background:var(--white);border:1px solid var(--line);border-radius:1.2rem;padding:1.2rem;display:grid;gap:.5rem;align-content:start}
.blk-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.8rem}
.blk-card h3{font-size:1.7rem}
.blk-image img{width:100%;border-radius:1.2rem;display:block}
.blk .cta{margin-top:.6rem}

/* admin: site tab + elements */
.elrow{border:1px solid var(--line);border-radius:1rem;padding:.8rem 1rem;margin:.7rem 0;background:var(--cream)}
.elhead{display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem}
.elhead img{width:3rem;height:3rem;object-fit:contain;border-radius:.5rem;background:repeating-conic-gradient(#dfe6d0 0 25%,#fff 0 50%) 0 0/12px 12px;border:1px solid var(--line)}
.elhead strong{flex:1}
.pscreen .el{pointer-events:auto;cursor:grab;touch-action:none}
.pscreen .el:hover{outline:1px dashed var(--green2);outline-offset:2px}
.pscreen .el.drag{cursor:grabbing;outline:1px solid var(--green)}
.sblock{border:1px solid var(--line);border-radius:1rem;background:var(--cream);margin:.6rem 0}
.sblock>summary{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;cursor:pointer;list-style:none;font-weight:600}
.sblock>summary::-webkit-details-marker{display:none}
.sblock>summary .sp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sblock>summary .sp small{font-weight:400;color:var(--muted)}
.sblock .sb-body{padding:.4rem 1rem 1rem;border-top:1px solid var(--line)}
.mlf{display:grid;gap:.35rem;margin:.4rem 0 .8rem}
.mlr{display:grid;grid-template-columns:2.2rem 1fr;gap:.5rem;align-items:center}
.mlr small{font-weight:700;color:var(--muted)}
.mlr input,.mlr textarea{width:100%}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem 1rem}
.cgrid label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-weight:500}
.cgrid input[type=color]{width:3rem;height:2.2rem;padding:0;border:1px solid var(--line);border-radius:.5rem;background:none}
.sbar{position:sticky;bottom:0;display:flex;gap:.6rem;padding:.8rem 0;background:linear-gradient(transparent,var(--cream) 30%);z-index:5}
.addline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem}
.iconbtn{border:1px solid var(--line);background:var(--white);border-radius:.6rem;width:2rem;height:2rem;padding:0;line-height:1}

/* v5: doors are flat (no dark shading, no ornament drop-shadow) */
.face::before,.face::after{content:none!important;background:none!important}
.face .orn{filter:none}
.edge{background:var(--doorin)!important}

/* v5: guest page fills the whole phone screen */
html.guest,html.guest body{margin:0;height:100%;overflow:hidden;background:#000;overscroll-behavior:none}
.gwrap{height:100vh;height:100dvh}
@media(max-width:700px),(pointer:coarse) and (max-width:900px){
  .gwrap{background:#000}
  .gframe{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;box-shadow:none}
}
.gframe:fullscreen,.gwrap:fullscreen{width:100vw;height:100vh;max-height:none;border-radius:0}

/* v5: background image behind sections keeps its transparency: no colour fill unless the admin picks one */
.exp.has-pgbg.bg-cover .pgbg{background:var(--pgbg) center/cover no-repeat}
.exp.has-pgbg.bg-tile .pgbg{background:var(--pgbg) 0 0/auto repeat}
.exp.has-pgbg.has-pgfill .pgbg{background-color:var(--pgfill)}
.exp.has-pgbg{background:transparent}
.pg .el,.pg .cphoto img,.pg .timg{background:none}

/* ===================== v7: phone sizing + builder header ===================== */
.builder>*{min-width:0}
.b-form,.b-form form,.bsec,.bsec .inner,.field{min-width:0;max-width:100%}
.b-form input,.b-form select,.b-form textarea{max-width:100%;min-width:0}
@media(max-width:900px){
  .builder{grid-template-columns:minmax(0,1fr);padding:.8rem .9rem 3rem;gap:.8rem}
  .builder h1{font-size:clamp(2rem,9vw,2.6rem);margin-bottom:1rem;line-height:1.05}
  .builder-tabs{top:var(--hh,3.6rem)!important;margin-inline:0;box-shadow:0 6px 14px -10px rgba(15,50,35,.35)}
  .builder-tabs button{min-width:0;padding:.7rem .4rem;white-space:nowrap}
  .bsec>summary{font-size:1.5rem;padding:.85rem 1rem}
  .bsec .inner{padding:0 1rem 1rem}
  .row2,.two{grid-template-columns:1fr 1fr;gap:.6rem}
  .b-form input[type=date],.b-form input[type=time]{min-width:0;width:100%}
  .swatches{gap:.4rem}.sw{padding:.35rem .8rem .35rem .4rem;font-size:.95rem}
  .b-preview{padding-top:.4rem}
  .b-preview .pbezel{--h:min(74vh,640px);width:min(92vw,calc(var(--h) * .47))}
  .stepper{gap:.6rem}.stepper .nm{min-width:0;font-size:1.3rem;flex:1}
}
@media(max-width:480px){
  .hdr{padding-inline:.7rem}
  .hdr-in,.hdr>div{gap:.5rem}
  .logo-img{max-width:42vw}
  .hdr-act .pill-dark{padding:.45rem .8rem;font-size:.92rem;white-space:nowrap}
  .row2,.two{grid-template-columns:1fr}
  .row2.keep2{grid-template-columns:1fr 1fr}
}
.seclist{grid-template-columns:minmax(0,1fr)}
.seccard,.seclist>*{min-width:0;max-width:100%}
.sechead{flex-wrap:nowrap;min-width:0}
.sechead .st{min-width:0;flex:1 1 0}
@media(max-width:480px){
  .sechead{padding:.4rem .4rem .4rem .7rem;gap:.25rem}
  .sechead .ib{width:2rem;height:2rem}
}

/* header: keep clear of the phone notch / status bar, stay above the builder tabs */
.hdr{padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);z-index:60}
.hdr[data-page=other] .hdr-row1{padding-block:.55rem .45rem}
.hdr[data-page=other] .logo b{font-size:2rem}
.hdr .menu{z-index:70}
.builder{padding-left:max(.9rem,env(safe-area-inset-left,0px));padding-right:max(.9rem,env(safe-area-inset-right,0px))}
.totop,.float{bottom:max(1rem,env(safe-area-inset-bottom,0px))}
@media(max-width:900px){
  .builder-tabs{z-index:20}
  .b-form,.b-preview{scroll-margin-top:calc(var(--hh,4rem) + 4rem)}
}


/* ===================== v8: stacked names that fit their frame ===================== */
.nmb{--fit:1;display:grid;justify-items:center;align-content:center;gap:.12em;width:100%;max-width:100%;min-width:0}
.nmp{display:grid;justify-items:center;gap:.04em;max-width:100%;min-width:0}
.nmn{font-size:calc(var(--ns,3.7em) * var(--nsc,1) * var(--fit,1));line-height:1.12;white-space:normal;overflow-wrap:normal;word-break:normal;text-wrap:balance;text-align:center;max-width:100%}
.exp[lang=ar] .nmn{font-size:calc(var(--ns,3.7em) * .8 * var(--nsc,1) * var(--fit,1));line-height:1.5;font-weight:700}
.nmpre{font:500 calc(var(--ns,3.7em) * var(--nsc,1) * var(--nps,.34) * var(--fit,1))/1.2 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;max-width:100%}
.exp[lang=ar] .nmpre{letter-spacing:0;text-transform:none;font-size:calc(var(--ns,3.7em) * .8 * var(--nsc,1) * var(--nps,.34) * var(--fit,1) * 1.9)}
.nmpost{text-transform:none;letter-spacing:.06em}
.nmsep{line-height:1.1;color:var(--gold2);white-space:nowrap;margin-block:.05em}
.nmgap{height:.3em}
.exp[lang=ar] .nmsep{font-style:normal}

/* builder: names card */
.nmset{border:1px solid var(--line);border-radius:1rem;padding:.2rem .9rem .8rem;margin:.5rem 0 .9rem;min-width:0;background:var(--cream)}
.nmset legend{padding:0 .5rem;font-weight:700;color:var(--ink)}
.row2.keep2{grid-template-columns:1fr 1fr!important}
.chk{display:flex;align-items:center;gap:.5rem;margin:.3rem 0;font-weight:500}

.nmset legend{font:700 1rem var(--ui);color:var(--ink)}
.nmpre{text-align:center}