/* SALA — a small paper theatre for handmade plushies */
:root{
  --paper:#f5efe4; --paper-light:#fbf8f1; --paper-deep:#e8dfd0;
  --ink:#211d1a; --ink-soft:#71685f; --line:#d8ccba;
  --red:#c94432; --red-dark:#9d3428; --gold:#dfa94e; --sage:#b9c9ba;
  --blue:#849da3; --lilac:#c8bfd0; --white:#fffdf8;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Bricolage Grotesque',Inter,system-ui,sans-serif;
  --arabic:'IBM Plex Sans Arabic','Noto Kufi Arabic',sans-serif;
  --shell:1280px; --gutter:clamp(20px,5vw,76px); --header:78px;
  --ease:cubic-bezier(.2,.72,.22,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 14px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
::selection{background:var(--red);color:var(--white)}
[hidden]{display:none!important}
.section-wrap,.header-inner{width:calc(100% - var(--gutter) - var(--gutter));max-width:var(--shell);margin-inline:auto}
.skip-link{position:fixed;z-index:500;top:8px;inset-inline-start:8px;padding:10px 16px;background:var(--ink);color:var(--white);transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
.scroll-progress{position:fixed;z-index:500;inset:0 0 auto;height:3px;pointer-events:none}
.scroll-progress span{display:block;width:0;height:100%;background:var(--red);transition:width .08s linear}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(245,239,228,.93);backdrop-filter:blur(14px);border-bottom:1px solid rgba(33,29,26,.12)}
.header-inner{height:var(--header);display:flex;align-items:center;gap:clamp(20px,4vw,58px)}
.brand{display:inline-flex;flex-direction:column;gap:1px;line-height:1;flex:0 0 auto}
.brand-word{font:400 35px/.85 var(--serif);letter-spacing:-.045em}
.brand-word>span{color:var(--red);font-size:.72em;vertical-align:middle;margin-inline:1px}
.brand-caption{font:600 8px/1.4 var(--body);letter-spacing:.19em;color:var(--ink-soft);white-space:nowrap}
.main-nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,42px);margin-inline:auto}
.main-nav a{position:relative;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);padding-block:8px;transition:color .2s}
.main-nav a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
html[dir=rtl] .main-nav a::after{transform-origin:right}
.main-nav a:hover{color:var(--ink)}.main-nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.language-switch{display:flex;align-items:center;gap:2px;border:1px solid rgba(33,29,26,.35);border-radius:100px;padding:3px}
.language-switch button{border:0;border-radius:99px;background:transparent;min-width:30px;padding:5px 8px;font:600 10px var(--body);color:var(--ink-soft);transition:background .2s,color .2s}
.language-switch button.is-active{background:var(--ink);color:var(--paper-light)}
.header-cta{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--red);padding:7px 0;font-size:12px;font-weight:600;color:var(--ink)}
.header-cta .arrow{font-size:17px;color:var(--red);transition:transform .2s}.header-cta:hover .arrow{transform:translate(3px,-3px)}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);background:transparent;border-radius:50%;position:relative}
.menu-toggle span{position:absolute;width:17px;height:1px;background:var(--ink);left:12px;transition:transform .2s,top .2s}.menu-toggle span:first-child{top:16px}.menu-toggle span:last-child{top:23px}
.menu-toggle[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{top:20px;transform:rotate(-45deg)}
.mobile-nav{position:absolute;top:100%;inset-inline:0;background:var(--paper);padding:12px var(--gutter) 24px;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(30,23,18,.08)}
.mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font:400 25px/1.2 var(--serif)}

/* Shared type & buttons */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow-dot{width:7px;height:7px;background:var(--red);border-radius:50%;display:inline-block;flex:none}
.section-heading h2,.process-intro h2,.scale-copy h2,.request-copy h2,.faq-intro h2{max-width:750px;margin:0;font:400 clamp(40px,5.2vw,74px)/.96 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.section-intro{max-width:390px;margin:0;color:var(--ink-soft);font-size:15px;line-height:1.7}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:54px;padding:0 23px;border:1px solid transparent;border-radius:2px;font-size:12px;font-weight:600;transition:background .2s,color .2s,transform .2s,border-color .2s}
.button:hover{transform:translateY(-2px)}
.button-dark{background:var(--ink);color:var(--white)}.button-dark:hover{background:var(--red)}
.button-outline{border-color:var(--ink);background:transparent;color:var(--ink)}.button-outline:hover{background:var(--ink);color:var(--white)}
.button-arrow{font-size:16px;font-weight:400}
.text-link{display:inline-flex;align-items:center;gap:13px;padding:0 0 4px;border:0;border-bottom:1px solid var(--red);background:none;font-size:12px;font-weight:600;color:var(--ink);transition:gap .2s}
.text-link:hover{gap:19px}.text-link span:last-child{color:var(--red);font-size:17px;line-height:1}

/* Hero — slanted paper bands + suspended photo puppets */
.hero{position:relative;min-height:min(800px,max(660px,calc(100svh - var(--header))));overflow:hidden;isolation:isolate;border-bottom:1px solid rgba(33,29,26,.14)}
.hero-paper{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--paper)}
.hero-ribbon{position:absolute;pointer-events:none;filter:saturate(.86)}
.ribbon-one{right:-8%;top:8%;width:70%;height:49%;background:var(--sage);opacity:.52;clip-path:polygon(12% 0,100% 17%,88% 100%,0 74%);transform:rotate(-3deg)}
.ribbon-two{right:-8%;bottom:-4%;width:78%;height:39%;background:#e6c58d;opacity:.68;clip-path:polygon(8% 0,100% 22%,90% 100%,0 82%);transform:rotate(2deg)}
.hero-orb{position:absolute;right:30%;top:18%;width:clamp(100px,17vw,245px);aspect-ratio:1;border-radius:50%;background:var(--lilac);opacity:.44;filter:blur(1px)}
.hero-threads{position:absolute;inset:0;width:100%;height:100%;opacity:.38;overflow:visible}
.hero-threads path{fill:none;stroke:var(--red);stroke-width:1.4;stroke-dasharray:5 10;animation:thread-drift 26s linear infinite}
.hero-threads path:last-child{stroke:#637d7c;animation-duration:34s;animation-direction:reverse}
@keyframes thread-drift{to{stroke-dashoffset:-300}}
.hero-inner{position:relative;width:min(calc(100% - var(--gutter) - var(--gutter)),1440px);min-height:inherit;margin-inline:auto;display:grid;grid-template-columns:minmax(340px,.76fr) minmax(0,1.24fr);align-items:center;gap:clamp(20px,3vw,54px);padding-block:clamp(48px,6.5vh,78px) 68px}
.hero-copy{position:relative;z-index:4;max-width:555px;padding-block:26px}
.hero-copy .eyebrow{margin-bottom:24px}
.hero h1{margin:0 0 25px;max-width:690px;font:400 clamp(68px,8.3vw,124px)/.77 var(--serif);letter-spacing:-.045em}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{margin-inline-start:.12em;color:var(--red);font-weight:400}
.hero-description{max-width:410px;margin:0;color:#5f5850;font-size:16px;line-height:1.65}
.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:30px}
.hero-whisper{display:flex;align-items:center;gap:8px;margin:21px 0 0;color:var(--ink-soft);font:italic 13px var(--serif)}
.wave-hand{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid rgba(33,29,26,.28);border-radius:50%;font:12px var(--body);color:var(--red);animation:whisper-twinkle 2.8s ease-in-out infinite}
@keyframes whisper-twinkle{50%{transform:rotate(35deg) scale(1.08)}}
.hero-theatre{position:relative;z-index:2;align-self:stretch;min-height:535px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.hero-theatre::before{content:"";position:absolute;z-index:-1;inset:8% -7% 5% 2%;background:rgba(255,253,248,.22);clip-path:polygon(11% 0,100% 12%,89% 100%,0 81%)}
.theatre-caption{position:absolute;z-index:5;top:3%;inset-inline-start:5%;display:flex;align-items:center;gap:12px;font:600 9px var(--body);letter-spacing:.16em;color:var(--ink-soft)}
.theatre-caption>span:last-child{font-family:var(--serif);font-size:13px;letter-spacing:.03em;color:var(--red)}
.caption-line{width:34px;height:1px;background:var(--red);opacity:.7}
.hero-cast{position:absolute;inset:0}
.hanging{position:absolute;z-index:2;top:var(--top);inset-inline-start:var(--x);width:var(--w);height:var(--h);padding:0;border:0;background:transparent;animation:puppet-sway var(--duration,5.8s) ease-in-out var(--delay,0s) infinite;transform-origin:50% calc(0px - var(--drop));transition:filter .25s;isolation:isolate}
.hanging::before{content:"";position:absolute;z-index:-1;bottom:100%;inset-inline-start:50%;height:110vh;width:1px;transform:translateX(-50%);background:linear-gradient(to top,rgba(70,50,60,.55),rgba(70,50,60,.28) 55%,rgba(70,50,60,0))}
.hanging::after{content:"";position:absolute;z-index:2;bottom:calc(100% - 3px);inset-inline-start:50%;width:6px;height:6px;border:1px solid rgba(70,50,60,.65);border-radius:50%;background:var(--gold);transform:translateX(-50%)}
.hanging-frame{position:relative;display:flex;width:100%;height:100%;flex-direction:column;padding:7px 7px 0;background:rgba(255,253,248,.96);box-shadow:0 14px 32px rgba(48,37,27,.13);border:1px solid rgba(33,29,26,.14);overflow:hidden}
.hanging-frame img{width:100%;height:calc(100% - 25px);object-fit:contain;object-position:center;background:var(--white);padding:3px;transition:transform .7s var(--ease)}
.hanging:hover,.hanging:focus-visible{animation-play-state:paused}
.hanging:hover .hanging-frame img{transform:scale(1.025)}
.hanging-label{display:flex;align-items:center;justify-content:space-between;gap:3px;height:25px;font:600 9px var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.hanging-label i{font:italic 13px var(--serif);color:var(--red)}
.hanging:nth-child(1){--x:8%;--top:17%;--w:clamp(112px,13vw,174px);--h:clamp(192px,24vw,286px);--drop:102px;--duration:6.2s;--delay:-1s}
.hanging:nth-child(2){--x:34%;--top:39%;--w:clamp(132px,16vw,212px);--h:clamp(164px,19vw,240px);--drop:238px;--duration:5.6s;--delay:-3s}
.hanging:nth-child(3){--x:61%;--top:11%;--w:clamp(112px,13vw,172px);--h:clamp(192px,24vw,286px);--drop:62px;--duration:6.8s;--delay:-2s}
.hanging:nth-child(4){--x:81%;--top:34%;--w:clamp(104px,12vw,158px);--h:clamp(182px,21vw,250px);--drop:196px;--duration:5.9s;--delay:-.8s}
@keyframes puppet-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.hanging:hover{z-index:7;filter:drop-shadow(0 15px 18px rgba(50,37,26,.12));animation-duration:2s}
.hanging.is-speaking{z-index:9;animation:puppet-greet .8s ease-in-out 2;animation-play-state:running}
@keyframes puppet-greet{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg) translateY(-5px)}65%{transform:rotate(6deg) translateY(-7px)}}
.speech{position:absolute;z-index:10;inset-inline-start:50%;bottom:calc(100% + 14px);width:max-content;max-width:min(230px,70vw);padding:9px 13px;border-radius:22px 22px 22px 4px;background:var(--white);color:var(--ink);font:500 12px/1.45 var(--body);box-shadow:0 5px 20px rgba(33,29,26,.12);opacity:0;pointer-events:none;transform:translate(calc(-50% + var(--shift,0px)),8px) scale(.96);transition:opacity .2s,transform .25s var(--ease)}
.speech::after{content:"";position:absolute;bottom:-5px;inset-inline-start:50%;width:10px;height:10px;background:var(--white);transform:translateX(-50%) rotate(45deg)}
.hanging.is-speaking .speech,.resident-card.is-speaking .speech{opacity:1;transform:translate(calc(-50% + var(--shift,0px)),0) scale(1)}
.stage-say{display:none}
.stage-ticket{position:absolute;z-index:4;right:3%;bottom:7%;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;width:125px;height:100px;padding:15px 9px;background:#fdf7e9;border:1px solid var(--ink);outline:1px dashed rgba(33,29,26,.55);outline-offset:-6px;box-shadow:5px 6px 0 rgba(33,29,26,.17);transform:rotate(7deg);font-family:var(--serif)}
.stage-ticket>span{display:block;flex-basis:100%;text-align:center;font:600 7px var(--body);letter-spacing:.12em;color:var(--ink-soft)}
.stage-ticket b{font:400 18px var(--serif)}.stage-ticket i{font:400 12px var(--serif);color:var(--red)}
.stage-side-note{position:absolute;z-index:3;top:47%;inset-inline-end:-3%;writing-mode:vertical-rl;transform:rotate(180deg);font:italic 14px var(--serif);color:rgba(33,29,26,.63)}
.hero-baseline{position:absolute;bottom:0;inset-inline:var(--gutter);display:flex;align-items:center;gap:13px;height:36px;font:600 8px var(--body);letter-spacing:.18em;color:var(--ink-soft)}
.hero-baseline span:first-child,.hero-baseline span:last-child{height:1px;background:rgba(33,29,26,.18);flex:1}

/* Moving facts ribbon */
.facts-band{height:48px;overflow:hidden;display:flex;align-items:center;background:var(--red);color:#fff8ed}
.facts-track{display:flex;align-items:center;gap:clamp(22px,4vw,54px);width:max-content;white-space:nowrap;animation:marquee 42s linear infinite}
.facts-band:hover .facts-track{animation-play-state:paused}
.facts-track span{font:600 9px var(--body);letter-spacing:.16em;text-transform:uppercase}
.facts-track i{font-style:normal;font-size:13px;color:#f0c672}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Cast — full, uncropped source photos */
.section{position:relative;padding-block:clamp(78px,10vw,142px)}
.cast-section{background:var(--paper-light)}
.section-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);align-items:end;gap:50px;margin-bottom:clamp(36px,5vw,66px)}
.section-heading .section-intro{justify-self:end;padding-bottom:4px}
.resident-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.resident-card{position:relative;min-width:0;background:var(--paper);transition:transform .3s var(--ease);isolation:isolate}
.resident-card:nth-child(4n+2){margin-top:36px}.resident-card:nth-child(4n+3){margin-top:72px}.resident-card:nth-child(4n){margin-top:24px}
.resident-card:hover{transform:translateY(-7px)}
.resident-card::before{content:attr(data-number);position:absolute;z-index:-1;top:9px;inset-inline-end:12px;font:italic 18px var(--serif);color:var(--red)}
.resident-photo{position:relative;display:grid;place-items:center;overflow:hidden;height:clamp(220px,27vw,340px);background:var(--tone,var(--paper-deep));}
.resident-photo img{width:100%;height:100%;object-fit:contain;object-position:center;padding:10px;transition:transform .55s var(--ease)}
.resident-card:hover .resident-photo img{transform:translateY(-3px)}
.resident-meta{display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px;padding:15px 2px 16px;border-bottom:1px solid var(--line)}
.resident-name{margin:0;font:400 28px/1 var(--serif)}
.resident-role{margin:6px 0 0;color:var(--ink-soft);font-size:11px;line-height:1.5}
.resident-say{width:34px;height:34px;border:1px solid rgba(33,29,26,.34);border-radius:50%;background:transparent;color:var(--red);font-size:16px;transition:background .2s,color .2s,transform .2s}
.resident-say:hover{background:var(--red);color:#fff;transform:rotate(10deg)}
.resident-card .speech{bottom:calc(100% + 10px);z-index:5}

/* Archive */
.archive-section{background:#ece4d7;overflow:hidden}
.archive-heading h2{max-width:640px}
.archive-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.filter-button{display:inline-flex;align-items:center;gap:10px;min-height:37px;padding:7px 14px;border:1px solid rgba(33,29,26,.3);border-radius:100px;background:transparent;font-size:11px;color:var(--ink-soft);transition:color .2s,background .2s,border-color .2s}
.filter-button b{font:500 9px var(--body);opacity:.62}
.filter-button:hover,.filter-button.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper-light)}
.archive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,24px)}
.archive-card{display:block;width:100%;padding:0;text-align:start;border:0;background:var(--paper-light);color:var(--ink);overflow:hidden;animation:photo-enter .45s var(--ease) both;transition:transform .25s var(--ease)}
.archive-card:hover{transform:translateY(-5px)}
.archive-art{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/5;background:var(--tone,var(--paper));overflow:hidden}
.archive-art img{width:100%;height:100%;object-fit:contain;object-position:center;padding:6px;transition:transform .45s var(--ease)}
.archive-card:hover .archive-art img{transform:translateY(-3px)}
.archive-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 13px;border-top:1px solid rgba(33,29,26,.1)}
.archive-card-meta b{font:400 17px/1.1 var(--serif)}
.archive-card-meta span{font-size:9px;color:var(--ink-soft);text-align:end}
.archive-more{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:31px;padding-top:19px;border-top:1px solid rgba(33,29,26,.22);font-size:11px;color:var(--ink-soft)}
@keyframes photo-enter{from{opacity:0;transform:translateY(14px)}}

/* Process */
.process-section{background:var(--red);color:#fff8ed;overflow:hidden}
.process-section .eyebrow{color:rgba(255,248,237,.75)}.process-section .eyebrow-dot{background:#e9bd6a}
.process-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:end;margin-bottom:clamp(55px,8vw,110px)}
.process-intro .eyebrow{grid-column:1/-1}
.process-intro h2{max-width:680px}.process-intro .section-intro{justify-self:end;color:rgba(255,248,237,.75)}
.process-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,44px)}
.process-steps::before{content:"";position:absolute;top:30px;inset-inline:1%;height:1px;background:rgba(255,248,237,.35)}
.process-step{position:relative;padding-top:67px;border-top:1px solid rgba(255,248,237,.26)}
.step-no{position:absolute;top:0;inset-inline-start:0;display:grid;place-items:center;width:60px;height:60px;border:1px solid rgba(255,248,237,.66);border-radius:50%;background:var(--red);font:italic 23px var(--serif);color:#fff8ed;transition:background .25s,color .25s,transform .25s}
.process-step:hover .step-no{background:#f4d48e;color:var(--ink);transform:rotate(-9deg)}
.process-step h3{margin:0 0 10px;font:400 26px/1 var(--serif)}
.process-step p{max-width:245px;margin:0;color:rgba(255,248,237,.72);font-size:12px;line-height:1.7}

/* Scale and shipping */
.scale-section{background:var(--paper)}
.scale-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(50px,9vw,130px);align-items:center}
.scale-copy .section-intro{margin:23px 0 25px;max-width:410px}
.size-chart{padding:clamp(22px,4vw,48px);background:#e8dfd1}
.size-art{height:260px;position:relative;display:flex;align-items:flex-end;justify-content:space-around;padding:0 8% 26px;border-bottom:1px solid rgba(33,29,26,.22)}
.size-sample{position:relative;width:16%;background:var(--tone,var(--red));transform-origin:bottom;animation:grow-in 1.15s var(--ease) both}
.sample-small{--tone:#d3a15a;height:20%;}.sample-mid{--tone:#9aada0;height:48%;}.sample-large{--tone:#c64c38;height:90%;}
.sample-small::before,.sample-mid::before,.sample-large::before{content:"";position:absolute;bottom:100%;inset-inline-start:50%;width:1px;height:18px;background:rgba(33,29,26,.5)}
.sample-small{border-radius:45% 45% 5px 5px}.sample-mid{border-radius:45% 45% 4px 4px}.sample-large{border-radius:40% 40% 3px 3px}
.ruler-line{position:absolute;bottom:14px;inset-inline:5%;height:1px;background:var(--ink);display:flex;justify-content:space-between}
.ruler-line i{position:relative;top:-4px;width:1px;height:8px;background:var(--ink)}.ruler-line i:nth-child(4n){height:15px;top:-7px}
.size-labels{display:flex;justify-content:space-between;gap:12px;padding-top:14px}
.size-labels span{display:flex;flex-direction:column;gap:2px}.size-labels span:nth-child(2){text-align:center}.size-labels span:last-child{text-align:end}
.size-labels b{font:400 22px var(--serif)}.size-labels small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
@keyframes grow-in{from{transform:scaleY(.15);opacity:.4}to{transform:scaleY(1);opacity:1}}
.shipping-note{width:min(calc(100% - var(--gutter) - var(--gutter)),var(--shell));margin:clamp(62px,8vw,104px) auto 0;display:flex;align-items:center;gap:19px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shipping-symbol{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid var(--red);border-radius:50%;color:var(--red);font-size:20px}
.shipping-note p{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:12px}.shipping-note p b{font-weight:600}.shipping-note p span{color:var(--ink-soft)}

/* Request form */
.request-section{background:#d9e1d8}
.request-layout{display:grid;grid-template-columns:.76fr 1.24fr;gap:clamp(40px,8vw,116px);align-items:start}
.request-copy{position:sticky;top:calc(var(--header) + 36px)}
.request-copy .section-intro{margin:23px 0 29px}
.request-points{display:grid;gap:11px;margin-bottom:26px}.request-points p{display:grid;grid-template-columns:35px 1fr;gap:10px;margin:0;font-size:12px;line-height:1.55}.request-points p>span:first-child{font:italic 16px var(--serif);color:var(--red)}
.no-price-note{max-width:360px;padding:14px 16px;border-inline-start:2px solid var(--red);background:rgba(255,253,248,.43);color:#5c655b;font-size:11px;line-height:1.65}
.request-card{padding:clamp(22px,4.4vw,52px);background:var(--paper-light);box-shadow:0 22px 50px rgba(37,49,38,.09)}
.form-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px;padding-bottom:13px;border-bottom:1px solid var(--line);font-size:9px;font-weight:600;letter-spacing:.15em;color:var(--ink-soft)}
.form-heading i{font:italic 14px var(--serif);color:var(--red)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:11px;font-weight:600}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid #bdb4a7;border-radius:0;padding:11px 0;background:transparent;outline:none;color:var(--ink);font-size:13px;font-weight:400;transition:border-color .2s;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)}
.field textarea{resize:vertical;min-height:65px}.field input::placeholder,.field textarea::placeholder{color:#9e9589}
.upload-field{display:flex;align-items:center;gap:13px;margin:4px 0 12px;padding:16px;border:1px dashed #aaab9d;background:#f7f4ec;cursor:pointer;transition:border-color .2s,background .2s}
.upload-field:hover{border-color:var(--red);background:#fffaf1}.upload-field input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:50%;font-size:20px;color:var(--red)}
.upload-field>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.upload-field b{font-size:11px}.upload-field small{font-size:9px;color:var(--ink-soft)}
.file-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.file-pill{padding:5px 9px;border-radius:99px;background:#eee8dd;font-size:9px;color:var(--ink-soft)}
.consent-field{display:flex;align-items:flex-start;gap:10px;margin:15px 0 17px;font-size:10px;line-height:1.55;color:var(--ink-soft)}
.consent-field input{margin:2px 0 0;accent-color:var(--red);flex:none;width:14px;height:14px}
.form-error{margin:0 0 14px;color:#a52c20;font-size:11px;font-weight:600}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#c0392b}
.field input[aria-invalid="true"]::placeholder,.field textarea[aria-invalid="true"]::placeholder{color:#c0392b;opacity:.75}
.submit-button{width:100%;justify-content:space-between}
.form-footnote{margin:13px 0 0;color:#81786e;font-size:9px;line-height:1.6}
.form-success{animation:success-show .4s var(--ease) both}.success-mark{display:grid;place-items:center;width:50px;height:50px;margin-bottom:18px;border:1px solid var(--red);border-radius:50%;color:var(--red);font-size:22px}
.form-success h3{margin:0 0 8px;font:400 44px/1 var(--serif)}.form-success>p:not(.eyebrow):not(.form-footnote){color:var(--ink-soft);font-size:13px}
.form-success textarea{display:block;width:100%;margin:18px 0;border:1px solid var(--line);padding:14px;background:#f7f3eb;color:var(--ink);font:12px/1.6 var(--body);resize:vertical}
.success-actions{display:flex;flex-wrap:wrap;align-items:center;gap:11px}.success-actions .button{min-height:45px}.success-actions .text-link{margin-inline-start:auto}
@keyframes success-show{from{opacity:0;transform:translateY(12px)}}

/* FAQ and footer */
.faq-section{background:var(--paper-light)}
.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(40px,9vw,126px);align-items:start}
.faq-intro .section-intro{margin:19px 0 23px}.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border:0;background:none;text-align:start;font:400 22px/1.2 var(--serif)}
.faq-mark{position:relative;flex:none;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;transition:transform .25s,background .25s,border-color .25s}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;top:11px;left:7px;width:9px;height:1px;background:var(--red)}.faq-mark::after{transform:rotate(90deg);transition:transform .2s}
.faq-item[open] .faq-mark{background:var(--red);border-color:var(--red);transform:rotate(45deg)}.faq-item[open] .faq-mark::before,.faq-item[open] .faq-mark::after{background:#fff}
.faq-answer{max-width:600px;padding:0 0 20px;color:var(--ink-soft);font-size:12px;line-height:1.75}
.site-footer{background:var(--ink);color:var(--paper-light);padding:40px 0 18px}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px;padding-bottom:33px;border-bottom:1px solid rgba(255,253,248,.2)}
.footer-brand .brand-caption{color:rgba(255,253,248,.57)}.footer-brand .brand-word{font-size:32px}.footer-brand .brand-word>span{color:#df826e}
.footer-top>p{margin:0;text-align:center;font:italic 20px var(--serif);color:rgba(255,253,248,.82)}
.footer-social{justify-self:end;display:flex;gap:11px;align-items:center;font-size:11px}.footer-social span:last-child{color:#e9a45e;font-size:17px}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:17px;color:rgba(255,253,248,.55);font-size:9px;letter-spacing:.04em}.footer-bottom a:hover{color:#fff}

/* Full-image viewer: contain, never crop */
.image-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(24px,5vw,64px);border:0;background:rgba(24,21,19,.94);color:var(--paper-light);overflow:hidden}
.image-dialog::backdrop{background:rgba(24,21,19,.94)}
.image-dialog figure{display:flex;width:100%;height:100%;margin:0;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.image-dialog img{display:block;width:auto;height:auto;max-width:min(100%,1080px);max-height:calc(100% - 74px);object-fit:contain;background:var(--paper-light)}
.image-dialog figcaption{display:flex;align-items:center;gap:16px;justify-content:center;font:400 23px var(--serif);text-align:center}.image-dialog figcaption small{font:10px var(--body);color:rgba(255,253,248,.64)}
.dialog-close,.dialog-arrow{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,253,248,.42);border-radius:50%;background:transparent;color:var(--paper-light);transition:background .2s,color .2s}
.dialog-close{top:18px;inset-inline-end:20px;font-size:26px}.dialog-arrow{top:50%;font:400 32px var(--serif);transform:translateY(-50%)}.dialog-prev{inset-inline-start:18px}.dialog-next{inset-inline-end:18px}
.dialog-close:hover,.dialog-arrow:hover{background:var(--paper-light);color:var(--ink)}
.toast{position:fixed;z-index:600;bottom:22px;left:50%;transform:translate(-50%,12px);padding:11px 17px;border:1px solid rgba(255,255,255,.24);border-radius:99px;background:var(--ink);color:#fff;font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Entrance motion is progressive-enhancement only */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .process-step:nth-child(2){transition-delay:.08s}.js .process-step:nth-child(3){transition-delay:.16s}.js .process-step:nth-child(4){transition-delay:.24s}

/* Arabic layout and lettering */
html[dir=rtl] body{font-family:var(--arabic);font-size:15px}
html[dir=rtl] .brand-caption,html[dir=rtl] .eyebrow,html[dir=rtl] .main-nav a,html[dir=rtl] .facts-track span,html[dir=rtl] .stage-ticket>span,html[dir=rtl] .theatre-caption,html[dir=rtl] .hero-baseline,html[dir=rtl] .form-heading{letter-spacing:0}
html[dir=rtl] .hero h1,html[dir=rtl] .section-heading h2,html[dir=rtl] .process-intro h2,html[dir=rtl] .scale-copy h2,html[dir=rtl] .request-copy h2,html[dir=rtl] .faq-intro h2,html[dir=rtl] .resident-name,html[dir=rtl] .process-step h3,html[dir=rtl] .faq-question,html[dir=rtl] .form-success h3{font-family:'Noto Kufi Arabic',var(--arabic);font-weight:600;letter-spacing:0;line-height:1.55}
html[dir=rtl] .hero h1{font-size:clamp(34px,4.3vw,64px);line-height:1.55;margin-block:-.05em .1em}
html[dir=rtl] .hero h1 em{margin-inline-start:0;color:var(--red);font-style:normal}
html[dir=rtl] .section-heading h2,html[dir=rtl] .process-intro h2,html[dir=rtl] .scale-copy h2,html[dir=rtl] .request-copy h2,html[dir=rtl] .faq-intro h2{font-size:clamp(29px,4vw,49px);line-height:1.55}
html[dir=rtl] .resident-name{font-size:21px;line-height:1.5}
html[dir=rtl] .process-step h3,html[dir=rtl] .faq-question{font-size:18px}
html[dir=rtl] .main-nav{letter-spacing:0}
html[dir=rtl] .hanging-label{letter-spacing:0}
html[dir=rtl] .speech{font-family:var(--arabic);border-radius:22px 22px 4px 22px}
html[dir=rtl] .speech::after{border-radius:0 0 0 3px}
html[dir=rtl] .stage-side-note{writing-mode:vertical-rl;transform:none}
html[dir=rtl] .hero-theatre{direction:ltr}
html[dir=rtl] .hero-cast{direction:ltr}
html[dir=rtl] .hero-baseline{direction:ltr}
html[dir=rtl] .process-step p,html[dir=rtl] .section-intro,html[dir=rtl] .hero-description,html[dir=rtl] .field,html[dir=rtl] .consent-field{text-align:start}
html[dir=rtl] .dialog-arrow{font-family:var(--serif)}

/* Responsive */
@media(max-width:1080px){
  :root{--gutter:clamp(22px,4vw,46px)}
  .main-nav{gap:18px}.main-nav a{font-size:10px}
  .hero-inner{grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr)}
  .resident-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .resident-card:nth-child(n){margin-top:0}.resident-card:nth-child(3n+2){margin-top:30px}.resident-card:nth-child(3n){margin-top:58px}
  .archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
  :root{--header:70px;--gutter:28px}
  .main-nav{display:none}.header-inner{gap:16px}.brand{margin-inline-end:auto}.header-actions{gap:11px}.menu-toggle{display:block}
  .hero{min-height:0}
  .hero-inner{display:grid;grid-template-columns:1fr;gap:0;padding-top:60px;padding-bottom:50px}
  .hero-copy{max-width:600px;padding:0 0 16px}.hero h1{font-size:clamp(68px,12vw,108px)}
  .hero-theatre{min-height:510px;margin-top:0}
  .hero-theatre::before{inset:4% -5% 8% -3%}
  .hero-cast{inset:0 2%}
  .hanging:nth-child(1){--x:5%;--top:22%;--w:clamp(125px,20vw,180px);--h:clamp(200px,31vw,270px);--drop:112px}
  .hanging:nth-child(2){--x:31%;--top:44%;--w:clamp(145px,22vw,206px);--h:clamp(180px,26vw,236px);--drop:224px}
  .hanging:nth-child(3){--x:60%;--top:16%;--w:clamp(125px,20vw,180px);--h:clamp(200px,31vw,270px);--drop:80px}
  .hanging:nth-child(4){--x:80%;--top:41%;--w:clamp(108px,17vw,156px);--h:clamp(178px,26vw,230px);--drop:209px}
  .stage-ticket{bottom:2%;right:4%;width:112px;height:86px}
  .section-heading{grid-template-columns:1fr;gap:18px}.section-heading .section-intro{justify-self:start}
  .resident-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resident-card:nth-child(n){margin-top:0}.resident-card:nth-child(2n){margin-top:34px}
  .resident-photo{height:clamp(225px,47vw,360px)}
  .process-intro{grid-template-columns:1fr;gap:16px}.process-intro .eyebrow{grid-column:auto}.process-intro .section-intro{justify-self:start}
  .process-steps{grid-template-columns:repeat(2,1fr);row-gap:38px}.process-steps::before{display:none}
  .scale-layout{grid-template-columns:1fr;gap:36px}.scale-copy{max-width:620px}.size-art{height:230px}
  .request-layout,.faq-layout{grid-template-columns:1fr;gap:42px}.request-copy{position:static}.request-points{grid-template-columns:repeat(3,1fr)}.request-points p{grid-template-columns:1fr;gap:5px}
}
@media(max-width:600px){
  :root{--header:64px;--gutter:21px}
  .brand-word{font-size:30px}.brand-caption{font-size:7px;letter-spacing:.14em}.header-cta{display:none}.header-actions{gap:9px}.language-switch button{min-width:27px;padding:5px 7px}
  .hero-inner{padding-top:46px;padding-bottom:38px}
  .hero-copy .eyebrow{font-size:9px;margin-bottom:19px}.hero h1{font-size:clamp(57px,15vw,83px);line-height:.78;margin-bottom:21px}.hero-description{font-size:14px;max-width:35ch}
  .hero-actions{gap:17px;margin-top:23px}.hero-actions .button{min-height:48px;padding-inline:17px;gap:13px}.hero-actions .text-link{font-size:11px}
  .hero-whisper{font-size:12px;margin-top:16px}
  .hero-theatre{min-height:360px;margin-inline:-9px}
  .hero-theatre::before{inset:9% -12% 3%}
  .theatre-caption{top:0;inset-inline-start:4%;font-size:8px}
  .hanging:nth-child(1){--x:1%;--top:23%;--w:clamp(94px,28vw,125px);--h:clamp(158px,45vw,193px);--drop:82px}
  .hanging:nth-child(2){--x:31%;--top:37%;--w:clamp(112px,31vw,145px);--h:clamp(145px,38vw,178px);--drop:132px}
  .hanging:nth-child(3){--x:65%;--top:20%;--w:clamp(96px,27vw,127px);--h:clamp(160px,44vw,191px);--drop:72px}
  .hanging:nth-child(4){display:none}
  .stage-ticket{width:92px;height:74px;bottom:0;right:2%;padding:10px 5px}.stage-ticket>span{font-size:6px}.stage-ticket b{font-size:15px}
  .stage-side-note{font-size:11px;inset-inline-end:-5%;top:51%}
  .hero-baseline{height:30px;font-size:7px;gap:8px}
  .facts-band{height:42px}.facts-track span{font-size:8px}
  .section{padding-block:76px}.section-heading{margin-bottom:30px}.section-heading h2,.process-intro h2,.scale-copy h2,.request-copy h2,.faq-intro h2{font-size:clamp(38px,11vw,54px)}
  .section-intro{font-size:13px}
  .resident-grid{gap:17px 12px}.resident-card:nth-child(2n){margin-top:19px}.resident-photo{height:clamp(180px,51vw,248px)}.resident-photo img{padding:6px}.resident-meta{padding:11px 1px 12px;gap:7px}.resident-name{font-size:24px}.resident-role{font-size:10px}.resident-say{width:30px;height:30px;font-size:14px}
  .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.archive-controls{gap:7px;margin-bottom:20px}.filter-button{min-height:33px;padding:6px 10px;font-size:10px}.filter-button b{font-size:8px}.archive-art{aspect-ratio:4/5}.archive-art img{padding:4px}.archive-card-meta{padding:9px 8px 10px;gap:5px}.archive-card-meta b{font-size:15px}.archive-card-meta span{font-size:8px}.archive-more{align-items:flex-start;flex-direction:column;font-size:10px}
  .process-intro{margin-bottom:48px}.process-steps{gap:30px 19px}.process-step{padding-top:56px}.step-no{width:47px;height:47px;font-size:19px}.process-steps::before{display:none}.process-step h3{font-size:23px}.process-step p{font-size:11px}
  .size-chart{padding:21px 16px}.size-art{height:205px}.size-labels b{font-size:18px}.size-labels small{font-size:8px}.shipping-note{margin-top:51px;align-items:flex-start}.shipping-note p{display:flex;flex-direction:column;gap:4px;font-size:11px}
  .request-points{grid-template-columns:1fr;gap:9px}.request-points p{grid-template-columns:28px 1fr}.request-card{padding:22px 18px}.form-row{grid-template-columns:1fr;gap:0}.form-heading{font-size:8px;margin-bottom:21px}.field{font-size:10px}.field input,.field select,.field textarea{font-size:12px}.upload-field{padding:13px}.upload-field small{font-size:8px}.consent-field{font-size:9px}.success-actions{align-items:stretch;flex-direction:column}.success-actions .text-link{align-self:flex-start;margin:4px 0}
  .faq-layout{gap:32px}.faq-question{font-size:20px;padding:17px 0}.faq-answer{font-size:11px}.footer-top{grid-template-columns:1fr 1fr;gap:18px}.footer-top>p{grid-column:1/-1;grid-row:2;text-align:start;font-size:18px}.footer-social{grid-column:2;grid-row:1}.footer-bottom{font-size:8px}
  .image-dialog{padding:62px 17px 24px}.image-dialog img{max-height:calc(100% - 80px)}.image-dialog figcaption{flex-direction:column;gap:3px;font-size:20px}.dialog-close{top:11px;inset-inline-end:12px}.dialog-arrow{width:36px;height:36px;top:auto;bottom:12px;transform:none}.dialog-prev{inset-inline-start:calc(50% - 46px)}.dialog-next{inset-inline-end:calc(50% - 46px)}
}
@media(max-width:390px){.resident-photo{height:178px}.resident-name{font-size:21px}.hero-theatre{min-height:340px}.hanging:nth-child(1){--x:0%;--w:94px}.hanging:nth-child(2){--x:31%;--w:112px}.hanging:nth-child(3){--x:68%;--w:92px}.stage-side-note{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.js .reveal{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════
   PINK THEATRE — palette + hanging troupe (v4)
   ══════════════════════════════════════════════════════════════ */
:root{
  --paper:#fdf2f1; --paper-light:#fffaf9; --paper-deep:#f8e3e5;
  --ink:#2a2126; --ink-soft:#7c6b72; --line:#efd6d9;
  --red:#bb5b76; --red-dark:#9a4460; --gold:#eec4a6;
  --sage:#cfe4d8; --blue:#c3dbee; --lilac:#e6d6ec; --white:#fffcfc;
  --blush:#f8dde3; --rose:#d98ba3;
}
::selection{background:var(--rose);color:#fff}
.facts-band{background:var(--red);color:#fff3f4}
.process-section{background:var(--blush);color:var(--ink)}
.process-section .eyebrow{color:rgba(42,33,38,.62)}
.process-section .eyebrow-dot{background:var(--rose)}
.process-intro .section-intro{color:rgba(42,33,38,.66)}
.process-steps::before{background:rgba(42,33,38,.16)}
.process-step{border-top-color:rgba(42,33,38,.18)}
.step-no{border-color:rgba(42,33,38,.28);background:var(--blush);color:var(--ink)}
.process-step:hover .step-no{background:var(--rose);color:#fff}
.process-step p{color:rgba(42,33,38,.68)}
.archive-section{background:var(--blush)}
.size-chart{background:var(--paper-deep)}
.request-section{background:#e2edf5}
.cast-section{background:var(--paper-light)}

/* the troupe hangs as cut-outs, not framed photos */
.hero-cast.is-dolls .hanging-frame{background:none;border:0;box-shadow:none;padding:0;overflow:visible}
.hero-cast.is-dolls .hanging-frame img{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;background:none;padding:0;
  filter:drop-shadow(0 16px 20px rgba(70,40,55,.20));
}
.hero-cast.is-dolls .hanging:hover .hanging-frame img{transform:scale(1.03) translateY(-3px)}
.doll-glow{
  position:absolute;z-index:-1;top:6%;left:50%;width:170%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 52%, rgba(255,255,255,.92), rgba(255,255,255,.45) 46%, rgba(255,255,255,0) 70%);
}
.doll-name{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-3px);white-space:nowrap;
  font:600 9px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.doll:hover .doll-name,.doll:focus-visible .doll-name,.doll.is-speaking .doll-name{opacity:.95;transform:translateX(-50%) translateY(0)}
html[dir=rtl] .doll-name{letter-spacing:0;font-size:10px}

/* seven hanging plushies, grouped tight like a theatre — height drives width via the cut-out aspect */
.doll{width:auto;height:var(--h);aspect-ratio:var(--ar,0.6)}
.doll:nth-child(1){--ar:.588; --x:1%;  --top:16%; --h:clamp(160px,19vw,276px); --duration:6.4s; --delay:-1.2s}
.doll:nth-child(2){--ar:.383; --x:26%; --top:36%; --h:clamp(140px,16.5vw,244px); --duration:5.7s; --delay:-3.1s}
.doll:nth-child(3){--ar:.792; --x:47%; --top:6%;  --h:clamp(168px,19.8vw,290px); --duration:6.9s; --delay:-2.2s}
.doll:nth-child(4){--ar:.479; --x:39%; --top:57%; --h:clamp(126px,14.8vw,218px); --duration:5.9s; --delay:-.7s}
.doll:nth-child(5){--ar:.728; --x:53%; --top:60%; --h:clamp(118px,13.9vw,204px); --duration:6.2s; --delay:-4s}
.doll:nth-child(6){--ar:.631; --x:69%; --top:27%; --h:clamp(150px,17.6vw,258px); --duration:5.5s; --delay:-1.8s}
.doll:nth-child(7){--ar:.364; --x:83%; --top:58%; --h:clamp(132px,15.6vw,232px); --duration:6.1s; --delay:-2.6s}

.hero-theatre::before{background:rgba(255,255,255,.5)}
.hero-ribbon.ribbon-one{background:rgba(255,255,255,.55)}
.hero-ribbon.ribbon-two{background:rgba(248,221,227,.75)}
.stage-ticket{right:3%;left:auto;top:5%;bottom:auto;width:110px;height:90px;background:#fffaf8;border-color:rgba(70,50,60,.5);outline-color:rgba(70,50,60,.35);box-shadow:5px 6px 0 rgba(120,70,90,.16);transform:rotate(6deg)}
.stage-side-note{display:none}

@media (max-width:1024px){
  /* narrower stage: four plushies, still grouped */
  .hanging::before{height:170px}
  .doll:nth-child(2),.doll:nth-child(5),.doll:nth-child(7){display:none}
  .doll:nth-child(1),.doll:nth-child(3),.doll:nth-child(4),.doll:nth-child(6){display:block}
  .doll:nth-child(1){--x:0%;  --top:6%;  --h:clamp(170px,26vw,285px)}
  .doll:nth-child(3){--x:44%; --top:12%; --h:clamp(140px,22vw,240px)}
  .doll:nth-child(4){--x:8%; --top:54%; --h:clamp(96px,15vw,160px)}
  .doll:nth-child(6){--x:64%; --top:44%; --h:clamp(132px,20vw,210px)}
  .theatre-caption{top:1%;inset-inline-start:2%}
  .stage-ticket{width:86px;height:72px;top:2%;right:2%;padding:10px 6px}
  .stage-ticket b{font-size:14px}
  .stage-ticket>span{font-size:6px}
}
@media (max-width:640px){
  /* on phones the troupe stands together on a line instead of hanging from threads */
  .hero-theatre{min-height:275px;margin-top:10px}
  .hanging::before,.hanging::after{display:none}
  .doll{top:auto;bottom:7%}
  .doll:nth-child(2),.doll:nth-child(5),.doll:nth-child(7){display:none}
  .doll:nth-child(1),.doll:nth-child(3),.doll:nth-child(4),.doll:nth-child(6){display:block}
  .doll:nth-child(1){--x:0%;  --h:clamp(140px,41vw,184px)}
  .doll:nth-child(3){--x:45%; --h:clamp(120px,34vw,158px)}
  .doll:nth-child(4){--x:24%; --h:clamp(104px,29vw,138px)}
  .doll:nth-child(6){--x:70%; --h:clamp(104px,27vw,132px)}
  .doll-name{font-size:7.5px;letter-spacing:.1em}
  .stage-ticket{display:none}
  .theatre-caption{top:0}
}

/* ── the request form: three questions first, everything else folded away ── */
.form-more{margin:6px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.form-more>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.02em;list-style:none;color:var(--ink);
}
.form-more>summary::-webkit-details-marker{display:none}
.form-more>summary i{font-style:normal;font-size:15px;line-height:1;color:var(--red);transition:transform .25s var(--ease)}
.form-more[open]>summary i{transform:rotate(45deg)}
.form-more-body{padding-block:8px 14px;animation:more-in .28s var(--ease) both}
@keyframes more-in{from{opacity:0;transform:translateY(-6px)}}
.form-more .field{margin-bottom:14px}

/* the cast drifts in when the page opens, like puppets lowered onto the stage */
.hero-cast{transition:transform .5s var(--ease)}
.js .hero-cast.is-live .doll .hanging-frame{animation:doll-enter 1.15s cubic-bezier(.2,.9,.2,1) both}
.js .hero-cast.is-live .doll:nth-child(1) .hanging-frame{animation-delay:.05s}
.js .hero-cast.is-live .doll:nth-child(2) .hanging-frame{animation-delay:.34s}
.js .hero-cast.is-live .doll:nth-child(3) .hanging-frame{animation-delay:.19s}
.js .hero-cast.is-live .doll:nth-child(4) .hanging-frame{animation-delay:.46s}
.js .hero-cast.is-live .doll:nth-child(5) .hanging-frame{animation-delay:.28s}
.js .hero-cast.is-live .doll:nth-child(6) .hanging-frame{animation-delay:.58s}
/* the cast swings in on its threads after the curtain */
.js .hero-cast.is-live .hanging-frame{transform-origin:50% -18%}
@keyframes doll-enter{from{opacity:0;transform:translateY(-42px) rotate(-4deg)}to{opacity:1;transform:none}}

/* =========================================================
   CURTAIN — the little stage opens before the cast appears
   ========================================================= */
.curtain{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(246,207,216,.0) 0%, rgba(253,242,241,.0) 46%, rgba(248,227,229,.0) 100%),
    radial-gradient(90% 70% at 50% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  transition:opacity .7s var(--ease), visibility .7s}
.curtain::before{content:"";position:absolute;inset:0;background:
    radial-gradient(120% 90% at 50% 8%, #f6cfd8 0%, var(--paper) 46%, var(--paper-deep) 100%);
  transition:opacity .55s var(--ease)}
.curtain.is-show::before{opacity:0;transition:opacity 1.1s var(--ease) .45s}
.curtain-panel{position:absolute;z-index:3;top:0;bottom:0;width:52%;will-change:transform;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.34) 0 3px,
      rgba(255,255,255,.08) 3px 16px,
      rgba(122,42,70,.16) 16px 24px,
      rgba(122,42,70,.30) 24px 40px,
      rgba(255,255,255,.14) 40px 52px,
      rgba(122,42,70,.06) 52px 64px),
    linear-gradient(180deg, #f7c7d3 0%, #e490a9 34%, #c4738c 72%, #a95a75 100%);
  box-shadow:inset 0 -90px 120px -60px rgba(88,26,48,.55), inset 0 0 0 1px rgba(255,255,255,.2),
             0 0 90px rgba(122,42,70,.28);
  transition:transform 2s cubic-bezier(.62,.02,.18,1)}
.curtain-left{left:0;transform-origin:0% 50%;border-radius:0 6% 3% 0/0 8% 4% 0}
.curtain-right{right:0;transform-origin:100% 50%;border-radius:6% 0 0 3%/8% 0 0 4%}
.curtain-valance{position:absolute;top:0;left:0;right:0;height:92px;z-index:6;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 2px, rgba(255,255,255,0) 2px 24px, rgba(96,26,50,.26) 24px 28px),
    linear-gradient(180deg,#8e3f5c,#b8607e 46%,#e189a5);
  border-bottom:3px solid rgba(255,255,255,.55);
  mask:radial-gradient(18px 22px at 18px 100%, #0000 96%, #000) -18px 0/36px 100% repeat-x;
  -webkit-mask:radial-gradient(18px 22px at 18px 100%, #0000 96%, #000) -18px 0/36px 100% repeat-x;
  box-shadow:0 14px 34px -12px rgba(90,32,52,.6), inset 0 -4px 0 rgba(238,196,166,.95), inset 0 3px 0 rgba(255,255,255,.35);
  transition:transform 1.5s cubic-bezier(.55,.03,.2,1)}
.curtain-centre{position:relative;z-index:4;pointer-events:none;display:grid;justify-items:center;gap:14px;text-align:center;
  padding:0 24px;transition:opacity .45s var(--ease), transform .6s var(--ease)}
.curtain-brand{font-family:var(--font-display);font-size:clamp(52px,8vw,104px);line-height:.9;letter-spacing:.02em;color:#5c2338}
.curtain-brand span{color:var(--gold)}
.curtain-caption{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:#7d3b52;font-weight:600}
.curtain-rule{display:block;width:min(230px,52vw);height:1px;background:linear-gradient(90deg,transparent,#9a4460,transparent)}
.curtain-line{font-family:var(--font-display);font-style:italic;font-size:clamp(17px,2vw,24px);color:#6d2c44}
.curtain-skip{position:absolute;bottom:26px;right:26px;z-index:5;appearance:none;cursor:pointer;
  border:1px solid rgba(92,35,56,.35);background:rgba(255,255,255,.55);color:#5c2338;
  border-radius:999px;padding:9px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;backdrop-filter:blur(6px);transition:.25s}
.curtain-skip:hover{background:#fff;transform:translateY(-1px)}
html[dir=rtl] .curtain-skip{right:auto;left:26px}
.curtain.is-open .curtain-left{transform:translate3d(-101%,0,0) scaleX(.8)}
.curtain.is-open .curtain-right{transform:translate3d(101%,0,0) scaleX(.8)}
.curtain.is-ready.is-open .curtain-centre,.curtain.is-show .curtain-centre,
.curtain.is-ready.is-prologue .curtain-centre{opacity:0;transform:translateY(-16px) scale(.98)}
.curtain.is-open .curtain-skip,.curtain.is-prologue .curtain-skip{opacity:0;transform:translateY(-10px);pointer-events:none}
.curtain.is-lifting .curtain-valance,.curtain.is-open .curtain-valance{transform:translateY(-118%);opacity:1}
.curtain.is-done{opacity:0;visibility:hidden;pointer-events:none}
/* house lights: warm spot that blooms as the panels part */
.curtain-glow{position:absolute;z-index:1;left:50%;top:-14%;width:120vw;height:90vh;transform:translateX(-50%) scale(.6);
  z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(50% 55% at 50% 0%, rgba(255,246,230,.95), rgba(255,226,236,.35) 46%, rgba(255,226,236,0) 72%);
  transition:opacity 1.6s var(--ease), transform 2.6s var(--ease)}
.curtain.is-open .curtain-glow{opacity:.85;transform:translateX(-50%) scale(1)}
.curtain-centre{opacity:0;transform:translateY(14px)}
.curtain.is-ready .curtain-centre{opacity:1;transform:none}
.curtain.is-ready .curtain-brand{animation:brand-in 1.1s var(--ease) both}
@keyframes brand-in{from{opacity:0;transform:translateY(16px) scale(.97);letter-spacing:.14em}to{opacity:1;transform:none}}
body.curtain-active{overflow:hidden}

/* the big hello once the stage is open */
.hero-cast.is-live .doll.is-hi .speech{bottom:calc(100% + 18px);
  font-size:clamp(22px,2.9vw,34px);font-weight:700;padding:16px 30px;letter-spacing:.01em;
  max-width:min(320px,78vw);border-radius:26px 26px 26px 6px;
  box-shadow:0 26px 50px -26px rgba(94,36,58,.55)}

@media (prefers-reduced-motion: reduce){
  .curtain,.curtain-panel,.curtain-centre,.curtain-valance,.curtain-glow{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =========================================================
   PHONES — the whole little stage has to fit in the first
   screen: headline + buttons + the troupe, no scrolling.
   ========================================================= */
@media (max-width:640px){
  .hero{min-height:0}
  .hero-inner{padding-top:12px;padding-bottom:10px;gap:0;align-items:start}
  .hero-copy{padding:0 0 2px;max-width:none}
  .hero-copy .eyebrow{font-size:8.5px;letter-spacing:.13em;margin-bottom:9px;gap:7px}
  .hero h1{font-size:clamp(37px,10.8vw,54px);line-height:.85;margin-bottom:11px;letter-spacing:-.03em}
  .hero h1 em{margin-inline-start:.05em}
  .hero-description{font-size:12.8px;line-height:1.5;max-width:40ch}
  .hero-actions{margin-top:13px;gap:11px;flex-wrap:nowrap;align-items:center}
  .hero-actions .button{min-height:42px;padding-inline:14px;font-size:11.5px;gap:10px;white-space:nowrap}
  .hero-actions .text-link{font-size:10px;white-space:nowrap}
  .hero-whisper{display:none}
  .hero-theatre{min-height:clamp(214px,55vw,268px);margin:6px 0 0;min-width:0}
  .hero-theatre::before{inset:8% -6% 2%}
  .theatre-caption{font-size:7px;letter-spacing:.14em;inset-inline-start:2%;top:-2px}
  .doll{bottom:3%}
  .doll:nth-child(1){--x:0%;  --h:clamp(112px,29.5vw,146px)}
  .doll:nth-child(3){--x:27%; --h:clamp(68px,18vw,88px)}
  .doll:nth-child(5){--x:45%; --h:clamp(100px,26.5vw,130px)}
  .doll:nth-child(6){--x:71%; --h:clamp(78px,20.5vw,100px)}
  .doll-name{font-size:6.5px}
  .hero-cast.is-live .doll.is-hi .speech{font-size:16px;padding:9px 14px;bottom:calc(100% + 8px)}
  .speech{max-width:min(200px,72vw);font-size:11px;padding:7px 11px}
  .hero-baseline{display:none}
}
html[dir=rtl] .hero h1{font-size:clamp(26px,7.4vw,36px);line-height:1.42;margin-bottom:10px}
@media (max-width:640px){
  html[dir=rtl] .hero h1{font-size:clamp(25px,7.2vw,35px);line-height:1.4}
  html[dir=rtl] .hero-description{font-size:12px}
  html[dir=rtl] .hero-actions .button{font-size:11px}
}

/* short phones (iPhone SE and friends): keep it on one screen */
@media (max-width:640px) and (max-height:720px){
  .hero-copy .eyebrow{margin-bottom:6px}
  .hero h1{font-size:clamp(32px,9.6vw,44px);margin-bottom:8px}
  .hero-description{font-size:11.8px}
  .hero-actions{margin-top:10px}
  .hero-theatre{min-height:clamp(190px,50vw,238px);margin-top:2px}
  .doll:nth-child(1){--h:clamp(92px,25vw,118px)}
  .doll:nth-child(3){--h:clamp(56px,15vw,72px)}
  .doll:nth-child(5){--h:clamp(84px,22vw,106px)}
  .doll:nth-child(6){--h:clamp(64px,17vw,84px)}
}

/* phones: the threads come back — long, a touch thicker, and they may
   cross the headline. It reads like a real puppet theatre, not a grid. */
@media (max-width:640px){
  /* v15 · the client asked for the threads to sit BEHIND the headline on
     phones: the copy is lifted above the theatre so the type always wins,
     while the threads still read as strings coming out from under the words. */
  .hero-theatre{z-index:5;position:relative}
  .hero-theatre::before{display:none}
  .hero-copy{position:relative;z-index:7}
  /* v17 · no more scrim (it also washed out the speech bubbles): every glyph
     carries its own paper halo, so the thread stays visible yet never sits on a
     letterform and the type reads clean. */
  .hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-description,.hero-copy .hero-whisper{
    text-shadow:0 0 5px rgba(251,248,241,.98),0 0 9px rgba(251,248,241,.92),0 0 14px rgba(251,248,241,.75);
  }
  .hanging::before,.hanging::after{display:block}
  .hanging::before{
    width:2px;
    height:clamp(150px,40vh,300px);
    background:linear-gradient(to top, rgba(58,40,48,.72), rgba(58,40,48,.34) 62%, rgba(58,40,48,0) 100%);
    border-radius:2px;
  }
  .hanging::after{width:7px;height:7px;bottom:calc(100% - 4px);background:var(--gold);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
  /* the thread starts at each doll's own height so the group looks hung in a row */
  .doll:nth-child(1)::before{height:clamp(170px,44vh,330px)}
  .doll:nth-child(2)::before{height:clamp(130px,34vh,250px)}
  .doll:nth-child(3)::before{height:clamp(150px,40vh,300px)}
  .doll:nth-child(4)::before{height:clamp(120px,32vh,235px)}
  .doll:nth-child(5)::before{height:clamp(115px,30vh,225px)}
  .doll:nth-child(6)::before{height:clamp(140px,37vh,275px)}
  .doll:nth-child(7)::before{height:clamp(118px,31vh,230px)}
  .doll{animation-name:puppet-sway-mobile}
}
@keyframes puppet-sway-mobile{
  0%,100%{transform:rotate(-1.1deg)}
  50%{transform:rotate(1.1deg)}
}

/* ── v11 · seven-doll stage: explicit layout for tablet + phone
      (kept last so it settles the older six-doll cascade) ── */
@media (max-width:1024px){
  /* v18 · all seven plushies on the tablet too, spread over two rows so the
     stage has no dead corner */
  .hero-cast .hanging:nth-child(1){display:block; --x:3%;  --top:3%;  --h:clamp(150px,19vw,206px)}
  .hero-cast .hanging:nth-child(2){display:block; --x:26%; --top:19%; --h:clamp(118px,15vw,164px)}
  .hero-cast .hanging:nth-child(3){display:block; --x:40%; --top:0%;  --h:clamp(170px,22vw,244px)}
  .hero-cast .hanging:nth-child(4){display:block; --x:76%; --top:7%;  --h:clamp(112px,14vw,154px)}
  .hero-cast .hanging:nth-child(5){display:block; --x:2%;  --top:57%; --h:clamp(140px,18vw,194px)}
  .hero-cast .hanging:nth-child(6){display:block; --x:30%; --top:54%; --h:clamp(150px,19vw,208px)}
  .hero-cast .hanging:nth-child(7){display:block; --x:66%; --top:53%; --h:clamp(122px,15vw,166px)}
  .stage-ticket,.stage-side-note{display:none}
  /* the caption drops to the empty foot of the stage so it never sits under a doll */
  .theatre-caption{top:auto;bottom:2px;inset-inline-start:2%}
}
@media (max-width:640px){
  /* v16 · phone hero mirrors the desktop composition: the copy keeps the left
     column, the seven plushies hang large in the right column. */
  .hero-inner{display:grid;grid-template-columns:1fr;align-items:start;row-gap:0}
  .hero-copy{grid-column:1;grid-row:1;max-width:none;width:56%;padding:0}
  .hero-theatre{grid-column:1/-1;grid-row:1;min-height:clamp(540px,155vw,620px);margin-top:0}
  .hero-copy .eyebrow{font-size:9px;letter-spacing:.1em;gap:6px;margin-bottom:10px}
  .hero h1{font-size:clamp(32px,10vw,45px);line-height:.84;margin-bottom:12px}
  .hero-description{font-size:13.4px;line-height:1.5;max-width:none}
  .hero-actions{margin-top:11px;flex-direction:column;align-items:flex-start;gap:9px}
  .hero-actions .button{padding:13px 16px;font-size:12px}
  .hero-whisper{font-size:9.6px;margin-top:11px}
  .theatre-caption{
    display:flex;top:auto;bottom:6px;inset-inline-start:50%;
    transform:translateX(-50%);gap:8px;font-size:7.8px;letter-spacing:.1em;white-space:nowrap;
  }
  .theatre-caption .caption-line{width:34px}
  .stage-ticket{display:none}
  .stage-side-note{display:none}
  /* all seven plushies stay on the phone, hung in a staggered column */
  .hero-cast .hanging:nth-child(1){--h:clamp(116px,32vw,140px)}
  .hero-cast .hanging:nth-child(2){--h:clamp(94px,26vw,112px)}
  .hero-cast .hanging:nth-child(3){--h:clamp(96px,27vw,114px)}
  .hero-cast .hanging:nth-child(4){--h:clamp(96px,27vw,114px)}
  .hero-cast .hanging:nth-child(5){--h:clamp(100px,28vw,120px)}
  .hero-cast .hanging:nth-child(6){--h:clamp(104px,29vw,124px)}
  .hero-cast .hanging:nth-child(7){--h:clamp(100px,28vw,118px)}
  /* the narrow column is mirrored by hand so Arabic puts the cast on the left */
  .hero-cast .hanging{inset-inline-start:auto;left:var(--x)}
  [dir="rtl"] .hero-cast .hanging{left:auto;right:var(--x)}
  .hero-cast .hanging:nth-child(1){display:block; top:0%;  --x:56%; --duration:6.4s}
  .hero-cast .hanging:nth-child(2){display:block; top:15%; --x:85%; --duration:5.7s}
  .hero-cast .hanging:nth-child(3){display:block; top:23%; --x:61%; --duration:6.9s}
  .hero-cast .hanging:nth-child(4){display:block; top:44%; --x:86%; --duration:5.9s}
  .hero-cast .hanging:nth-child(5){display:block; top:66%; --x:2%;  --duration:5.5s}
  .hero-cast .hanging:nth-child(6){display:block; top:71%; --x:33%; --duration:6.2s}
  .hero-cast .hanging:nth-child(7){display:block; top:67%; --x:66%; --duration:6.1s}
}

/* ── phones: the two back-row plushies speak downwards, so the roll-call
      bubble never lands on the "Request a plushie" button ── */
@media (max-width:640px){
  .hero-cast .doll-name{display:none}
  /* a softer halo so it never washes the copy when the cast hangs beside it */
  .hero-cast .doll-glow{
    width:132%;
    background:radial-gradient(circle at 50% 55%, rgba(255,255,255,.6), rgba(255,255,255,.24) 48%, rgba(255,255,255,0) 72%);
  }
  .hero-cast .hanging:nth-child(5)::before,.hero-cast .hanging:nth-child(6)::before,.hero-cast .hanging:nth-child(7)::before{height:clamp(150px,42vw,230px)}
  /* v17 · a hello is written on a stage card under the cast instead of a bubble
     over it, so it can never collide with the headline or a neighbour doll */
  .hero-cast .speech{display:none}
  .stage-say{
    display:block;position:absolute;z-index:12;
    inset-inline:6px;bottom:30px;margin:0;padding:9px 12px;
    border:1px solid rgba(33,29,26,.14);border-radius:14px;
    background:rgba(255,253,248,.97);
    box-shadow:0 6px 18px rgba(33,29,26,.09);
    font:500 10.5px/1.4 var(--body);color:var(--ink);text-align:center;
    opacity:0;transform:translateY(6px);pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease);
  }
  .stage-say.is-visible{opacity:1;transform:none}
}

/* ── v21/v23 · the prologue proper: L waits on a lit stage BEHIND the cloth,
      so the curtain really has to open to show him, and really closes again ── */
.curtain-intro{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  background:
    radial-gradient(62% 46% at 50% 30%, #fffdf9 0%, rgba(255,251,246,.75) 52%, rgba(255,251,246,0) 78%),
    radial-gradient(88% 76% at 50% 40%, #fdf8f2 0%, #f7ecec 60%, #efdadd 100%);
  opacity:1;visibility:hidden;pointer-events:none;
}
.curtain-intro.is-live{visibility:visible}
/* the follow-spot, and the dust hanging in it */
.curtain-intro-spot{position:absolute;left:50%;top:0;width:min(96vh,104vw);height:100%;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,247,232,.95) 0%, rgba(255,242,232,.55) 42%, rgba(255,240,236,0) 78%);
  clip-path:polygon(38% 0, 62% 0, 96% 100%, 4% 100%);
  filter:blur(3px);opacity:0;transition:opacity 1.4s var(--ease) .25s}
.curtain-intro.is-live .curtain-intro-spot{opacity:.8}
/* the boards under his feet */
.curtain-intro-floor{position:absolute;left:50%;bottom:15%;width:min(74vw,420px);height:52px;
  transform:translateX(-50%) scaleX(.4);border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(120,58,74,.20), rgba(120,58,74,0) 72%);
  opacity:0;transition:opacity .9s var(--ease) .5s, transform 1.4s var(--ease) .5s}
.curtain-intro.is-live .curtain-intro-floor{opacity:1;transform:translateX(-50%) scaleX(1)}
.curtain-intro-img{
  position:relative;z-index:1;height:auto;width:auto;
  max-height:min(64vh,520px);max-width:min(86vw,480px);object-fit:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
  transform:translateY(18px) scale(.93);opacity:0;
  transition:transform 1.5s cubic-bezier(.35,.05,.15,1) .1s, opacity .9s var(--ease) .1s;
}
.curtain-intro.is-live .curtain-intro-img{transform:none;opacity:1}
/* he steps back into the wings as the cloth closes */
.curtain-intro.is-leaving .curtain-intro-img{transform:translateY(10px) scale(.96);opacity:.55;transition-duration:.9s,.6s}
.curtain-intro.is-leaving .curtain-intro-spot{opacity:.25;transition-duration:.8s}
.curtain-intro-line{
  position:absolute;z-index:2;left:50%;bottom:9vh;transform:translate(-50%,12px) scale(.95);
  margin:0;padding:13px 22px;border-radius:26px 26px 26px 6px;
  background:var(--white);color:var(--ink);
  font:500 15px/1.4 var(--body);text-align:center;white-space:nowrap;
  box-shadow:0 12px 34px rgba(33,29,26,.16);
  opacity:0;transition:opacity .3s var(--ease),transform .36s var(--ease);
}
.curtain-intro-line.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}
@media (max-width:640px){
  .curtain-intro-img{max-height:58vh;max-width:92vw}
  .curtain-intro-floor{bottom:17%;height:38px}
  .curtain-intro-line{bottom:6vh;font-size:13.5px;padding:11px 18px;max-width:92vw}
}