/* SECTION on b41.uk — "the light opens the slats" */
:root{
  --stage:#17130f; --wall:#25211b; --wall2:#342e25; --greige:#9a907f; --oak:#c49a66; --walnut:#6b4a2e;
  --veneer:#ece4d3; --ink:#1a1611; --light:#FEDD10;
  --disp:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; --body:'IBM Plex Sans Arabic','Alexandria',system-ui,sans-serif;
  --pad:clamp(20px,6vw,96px); --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.locked{overflow:hidden}
body{margin:0;background:var(--stage);color:var(--veneer);font:400 clamp(16px,1.05vw,18px)/1.8 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote,fieldset{margin:0;padding:0;border:0}
:focus-visible{outline:2px solid var(--light);outline-offset:3px}
::selection{background:var(--light);color:var(--ink)}

.h2{font:500 clamp(1.4rem,2.4vw,2.5rem)/1.4 var(--disp);letter-spacing:0;text-wrap:balance}
.h2::before{content:"";display:block;width:42px;height:2px;background:var(--light);margin-bottom:.75em}
.h3{font:500 clamp(1.25rem,2vw,1.9rem)/1.3 var(--disp)}
.lede{color:var(--greige);max-width:34em;margin-top:.9em;font-size:1em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.85em 1.7em;font:600 .95rem/1.2 var(--disp);border-radius:2px;transition:background .3s,color .3s,border-color .3s,transform .5s var(--ease);white-space:nowrap}
.btn-light{background:var(--light);color:var(--ink)}
.btn-light:hover{background:var(--veneer)}
.btn-line{border:1px solid rgba(236,228,211,.4)}
.btn-line:hover{background:var(--veneer);color:var(--ink);border-color:var(--veneer)}
.btn-dark{background:var(--ink);color:var(--light)}
.btn-dark:hover{background:#000}
.btn-ghost-d{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost-d:hover{background:var(--ink);color:var(--light)}

/* ---------- veil (preloader) ---------- */
#veil{position:fixed;inset:0;z-index:100;perspective:1800px;display:grid;place-items:center}
.veil-slats{position:absolute;inset:0;display:flex;direction:ltr}
.veil-slats i{flex:1;background:linear-gradient(90deg,#231a12 0,#6f4f33 38%,#b98f5e 52%,#59402a 70%,#1d150e 100%);transform-origin:50% 50%;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*55ms);backface-visibility:hidden}
.veil-mark{position:relative;display:grid;justify-items:center;gap:18px;transition:opacity .4s}
.veil-mark img{width:min(46vw,220px);height:auto}
.veil-mark span{font:300 1rem/1 var(--disp);color:var(--light);letter-spacing:.2em}
#veil.open .veil-slats i{transform:rotateY(90deg)}
#veil.open .veil-mark{opacity:0}
#veil.gone{display:none}

#glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:60;background:radial-gradient(circle,rgba(254,221,16,.13),rgba(254,221,16,.04) 38%,transparent 62%);mix-blend-mode:screen;opacity:0;transition:opacity .5s;will-change:transform}
#glow.on{opacity:1}
#glow.dim{opacity:0}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--pad);transition:transform .6s var(--ease),background .4s}
.bar.solid{background:rgba(23,19,15,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bar.hide{transform:translateY(-110%)}
.bar-logo img{width:132px;height:auto}
.bar-nav{display:flex;gap:clamp(18px,3vw,44px);font:500 .95rem var(--disp)}
.bar-nav a{position:relative;padding:6px 0}
.bar-nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--light);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.bar-nav a:hover::after{transform:scaleX(1)}
@media (max-width:860px){.bar-nav{display:none}.bar .btn{padding:.7em 1.1em;font-size:.85rem}}

/* ---------- hero ---------- */
.hero{height:126vh;position:relative}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0d0a07}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
.no-gl .hero-pin{background:#0d0a07 url(../media/drive/projects/selected/swan-lake/swan-lake-01.webp) center/cover}
.hero-copy{position:absolute;inset:auto var(--pad) clamp(64px,12vh,120px) var(--pad);pointer-events:none;will-change:transform,opacity;perspective:900px}
.hero-meta{display:flex;gap:1.4em;font:400 clamp(.78rem,.9vw,.9rem) var(--disp);color:var(--light);margin-bottom:.9em;opacity:0;transition:opacity 1s 1.2s}
.hero-title{display:inline-block;font:600 clamp(1.7rem,2.9vw,3.2rem)/1.4 var(--disp);letter-spacing:0;color:#f7f0e0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  text-shadow:calc(var(--sx,.4)*.012em) calc(var(--sy,.6)*.012em) 0 #d2ab74,calc(var(--sx,.4)*.024em) calc(var(--sy,.6)*.024em) 0 #b98f5e,calc(var(--sx,.4)*.036em) calc(var(--sy,.6)*.036em) 0 #9a7347,calc(var(--sx,.4)*.048em) calc(var(--sy,.6)*.048em) 0 #7b5a37,calc(var(--sx,.4)*.06em) calc(var(--sy,.6)*.06em) 0 #5d4329,calc(var(--sx,.4)*.072em) calc(var(--sy,.6)*.072em) 0 #40301e,calc(var(--sx,.4)*.32em) calc(var(--sy,.6)*.32em) .5em rgba(0,0,0,.62)}
.hero-title .w3{display:inline-block;transform-origin:50% 100%;opacity:0;transform:translate3d(0,.5em,-160px) rotateX(-86deg);filter:blur(10px);transition:transform 1.5s var(--ease),opacity 1.1s ease,filter 1.3s ease;transition-delay:calc(.25s + var(--i)*.17s)}
.ready .hero-title .w3{opacity:1;transform:none;filter:none}
.hero-title::after{content:"";display:block;height:1px;margin-top:.55em;background:linear-gradient(90deg,transparent,var(--light) 30%,var(--light) 70%,transparent);transform:scaleX(0);transition:transform 1.8s var(--ease) 1.1s;text-shadow:none}
.ready .hero-title::after{transform:scaleX(1)}
.hero-sub{max-width:30em;margin-top:.9em;font-size:clamp(.9rem,1.05vw,1.05rem);color:rgba(236,228,211,.82);opacity:0;transform:translateY(12px);transition:opacity 1s 1.3s,transform 1s 1.3s var(--ease)}
.ready .hero-meta,.ready .hero-sub{opacity:1;transform:none}
.hero-hint{position:absolute;top:clamp(84px,14vh,150px);inset-inline-end:var(--pad);display:flex;align-items:center;gap:.7em;font:400 .85rem var(--disp);color:rgba(236,228,211,.7);opacity:0;transition:opacity .8s}
.ready .hero-hint{opacity:1}.ready .hero-hint.off{opacity:0}
.hero-hint i{width:10px;height:10px;border-radius:50%;background:var(--light);box-shadow:0 0 0 0 rgba(254,221,16,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 14px rgba(254,221,16,0)}100%{box-shadow:0 0 0 0 rgba(254,221,16,0)}}
.hero-scroll{position:absolute;bottom:22px;left:50%;width:1px;height:44px;background:rgba(236,228,211,.25);overflow:hidden}
.hero-scroll i{position:absolute;inset:0;background:var(--light);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- production line ---------- */
.line{height:184vh;position:relative;background:linear-gradient(#0d0a07,var(--stage) 12%)}
.line-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;padding:clamp(70px,10vh,96px) var(--pad) clamp(24px,5vh,48px);overflow:hidden}
.line-stage{position:relative;height:min(72vh,700px);perspective:1500px;direction:ltr}
.board{position:absolute;left:50%;top:50%;width:min(28vw,50vh,400px);aspect-ratio:3/4;margin:0;translate:-50% -50%;overflow:hidden;border-radius:3px;box-shadow:0 40px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(236,228,211,.08);will-change:transform,opacity;backface-visibility:hidden;background:var(--wall)}
.board img{width:100%;height:100%;object-fit:cover}
.line-copy{min-width:0}
.steps-wrap{position:relative;margin-top:clamp(14px,3.5vh,40px);padding-inline-start:28px}
.steps-rail{position:absolute;top:.9em;bottom:.9em;inset-inline-start:5px;width:1px;background:rgba(236,228,211,.16)}
.steps-rail i{position:absolute;inset:0;background:var(--light);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.steps{display:grid}
.steps li{position:relative;padding:clamp(.3em,1.1vh,.7em) 0;opacity:.4;transition:opacity .5s}
.steps li::before{content:"";position:absolute;inset-inline-start:-27px;top:calc(clamp(.3em,1.1vh,.7em) + .6em);width:9px;height:9px;border-radius:50%;background:var(--stage);border:1px solid rgba(236,228,211,.4);transition:background .4s,border-color .4s,box-shadow .4s}
.steps li.on{opacity:1}
.steps li.done{opacity:.62}
.steps li.on::before,.steps li.done::before{background:var(--light);border-color:var(--light)}
.steps li.on::before{box-shadow:0 0 0 5px rgba(254,221,16,.16)}
.steps .t{display:block;font:600 clamp(1rem,1.35vw,1.25rem)/1.5 var(--disp)}
.steps .t small{font:400 .78em var(--body);color:var(--greige);margin-inline-start:.7em}
.steps .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);color:rgba(236,228,211,.78);font-size:.95em}
.steps .d>span{overflow:hidden}
.steps li.on .d{grid-template-rows:1fr}
@media (max-height:660px) and (min-width:861px){.line-copy .lede,.proc-copy .lede{display:none}.steps .d{font-size:.86em;line-height:1.6}}
@media (max-width:860px){
  .line-pin{grid-template-columns:1fr;grid-template-rows:minmax(0,46svh) auto;align-content:start;align-items:start;gap:12px}
  .line-stage{height:100%}.board{width:min(50vw,32vh)}
  .line-copy .lede{display:none}
  .steps-wrap{padding-inline-start:0;margin-top:12px}
  .steps-rail{position:relative;top:auto;bottom:auto;inset-inline-start:auto;width:100%;height:2px;margin-bottom:12px}
  .steps-rail i{transform-origin:100% 50%;transform:scaleX(var(--p,0))}
  .steps li{display:none;opacity:1}.steps li.on{display:block}.steps li::before{display:none}
}

/* ---------- collections ring ---------- */
.coll{padding:clamp(90px,16vh,180px) 0 clamp(70px,12vh,140px);position:relative;overflow:clip;background:radial-gradient(90% 60% at 50% 55%,var(--wall2) 0,var(--stage) 70%)}
.coll-head{padding:0 var(--pad);max-width:1100px}
.ring-wrap{position:relative;height:clamp(340px,62vh,640px);perspective:1500px;margin-top:3vh;cursor:grab;touch-action:pan-y;user-select:none;direction:ltr}
.ring-wrap.drag{cursor:grabbing}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.panel{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);margin:calc(var(--ph)/-2) 0 0 calc(var(--pw)/-2);overflow:hidden;border-radius:3px;background:var(--wall);filter:brightness(calc(.3 + var(--f,0)*.7));opacity:calc(.1 + var(--f,0)*5);box-shadow:0 0 0 1px rgba(236,228,211,.07)}
.panel img{width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.04)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,10,7,.85),transparent 46%)}
.panel span{position:absolute;inset:auto 16px 14px 16px;z-index:1;font:700 clamp(1.05rem,1.5vw,1.45rem)/1.3 var(--disp);direction:rtl;text-align:right}
.panel em{position:absolute;top:12px;right:14px;z-index:1;font:300 .85rem var(--disp);font-style:normal;color:var(--light);direction:rtl}
.ring-ui{display:grid;grid-template-columns:auto minmax(0,560px) auto;justify-content:center;align-items:center;gap:clamp(12px,4vw,56px);padding:0 var(--pad);margin-top:1vh;text-align:center}
.arrow{width:56px;height:56px;border:1px solid rgba(236,228,211,.3);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.arrow:hover{background:var(--light);color:var(--ink);border-color:var(--light)}
.ring-dots{display:flex;justify-content:center;gap:2px;direction:rtl}
.ring-dots button{width:16px;height:26px;position:relative}
.ring-dots button::after{content:"";position:absolute;inset:7px 6px;background:rgba(236,228,211,.28);transition:background .3s,transform .45s var(--ease)}
.ring-dots button.on::after{background:var(--light);transform:scaleY(1.7)}
.ring-t{font:600 clamp(1.25rem,2vw,1.9rem)/1.3 var(--disp);margin:.45em 0 .25em}
.ring-d{color:var(--greige);min-height:3.4em;margin-bottom:1em;font-size:.95em}
.ring-info.swap>*{animation:swap .5s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(12px)}}
@media (max-width:640px){.arrow{width:46px;height:46px}.ring-ui{gap:8px}}

/* ---------- process louvers ---------- */
.proc{height:260vh;position:relative}
.proc-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:5vw;padding:clamp(70px,10vh,96px) var(--pad) clamp(24px,5vh,48px);overflow:hidden}
.proc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(20px,4vh,42px) 0 clamp(16px,3vh,30px)}
.proc-tabs button{padding:.55em 1.1em;border:1px solid rgba(236,228,211,.22);border-radius:2px;font:500 .9rem var(--disp);color:var(--greige);transition:all .35s}
.proc-tabs button[aria-selected=true]{background:var(--light);border-color:var(--light);color:var(--ink)}
.proc-text{min-height:7em}
.proc-text .big{font:800 clamp(4rem,9vw,8.5rem)/1 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(236,228,211,.35);display:block}
.proc-text h3{font:600 clamp(1.15rem,1.9vw,1.7rem)/1.4 var(--disp);margin:.2em 0 .4em}
.proc-text p{color:rgba(236,228,211,.8);max-width:30em}
.proc-text.swap>*{animation:swap .6s var(--ease)}
.louver{position:relative;justify-self:center;width:min(38vw,66vh,540px);aspect-ratio:4/5;perspective:1700px;direction:ltr}
.slat{position:absolute;top:0;height:100%;transform-style:preserve-3d;transition:transform 1s var(--ease);transition-delay:calc(var(--i)*48ms)}
.slat i{position:absolute;inset:0 .5px;background-repeat:no-repeat;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:var(--wall)}
.slat .b{transform:rotateY(180deg)}
.slat.flip{transform:rotateY(180deg)}
@media (max-width:860px){
  .proc-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:12px;padding-top:76px;align-items:start}
  .louver{width:min(64vw,40vh);order:-1}
  .proc-copy .h2{font-size:1.3rem}.proc-tabs{margin:10px 0}.proc-tabs button{padding:.4em .7em;font-size:.78rem}
  .proc-text .big{display:none}.proc-text{min-height:0}
}

/* ---------- selected work (horizontal) ---------- */
.work{height:380vh;position:relative;background:var(--wall)}
.work-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.work-track{display:flex;align-items:center;gap:clamp(40px,7vw,120px);height:100%;width:max-content;padding:70px var(--pad) 0;will-change:transform}
.work-intro{width:min(80vw,560px);flex:none}
.slide{flex:none;width:min(86vw,1120px);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3.5vw,60px);align-items:center}
.slide-img{position:relative;height:min(64vh,620px);overflow:hidden;border-radius:3px;display:block;background:var(--stage)}
.slide-img img{position:absolute;top:0;left:-8%;width:116%;max-width:none;height:100%;object-fit:cover;will-change:transform;transition:filter .5s}
.slide-img:hover img{filter:brightness(1.12)}
.slide-n{font:300 1rem var(--disp);color:var(--light)}
.slide-s{color:var(--greige);font-size:.95rem;margin-top:.2em}
.slide h3{font:600 clamp(1.5rem,2.8vw,2.6rem)/1.3 var(--disp);margin:.2em 0 .35em}
.slide p.d{color:rgba(236,228,211,.8);max-width:30em}
.slide-with{display:flex;align-items:center;gap:14px;margin:1.2em 0;color:var(--greige);font-size:.9rem}
.slide-with img{height:58px;width:auto;opacity:.9}
.slide .btn{margin-top:.6em}
@media (max-width:860px){
  .work{height:auto;padding:90px 0 70px}
  .work-pin{position:static;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .work-pin::-webkit-scrollbar{display:none}
  .work-track{height:auto;align-items:start;padding-top:0;transform:none!important;gap:22px}
  .work-intro,.slide{scroll-snap-align:center}
  .slide{width:84vw;grid-template-columns:1fr;gap:14px}.slide-img{height:52vh}.slide-img img{transform:none!important}
}

/* ---------- studio ---------- */
.studio{padding:clamp(90px,15vh,170px) var(--pad);position:relative}
.studio-h{font-size:clamp(1.6rem,3.2vw,3.2rem);max-width:14em}
.studio-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin:clamp(40px,8vh,90px) 0;font:400 clamp(1.02rem,1.35vw,1.3rem)/1.9 var(--body);max-width:1200px}
.lit .w{opacity:.14;transition:opacity .35s linear}
.lit .w.on{opacity:1}
.quote{font:500 clamp(1.25rem,2.4vw,2.3rem)/1.5 var(--disp);color:var(--light);border-inline-start:2px solid var(--light);padding-inline-start:.8em;max-width:20em}
@media (max-width:760px){.studio-cols{grid-template-columns:1fr}}

/* ---------- partners / brands ---------- */
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.4em;margin-bottom:clamp(26px,5vh,54px)}
.sec-head p{color:var(--greige)}
.partners{padding:clamp(60px,10vh,120px) var(--pad) clamp(90px,14vh,170px)}
.logos{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(236,228,211,.12);border-inline-start:1px solid rgba(236,228,211,.12)}
.logos li{aspect-ratio:16/10;display:grid;place-items:center;border-bottom:1px solid rgba(236,228,211,.12);border-inline-end:1px solid rgba(236,228,211,.12);position:relative;overflow:hidden;padding:8%}
.logos li::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(254,221,16,.16),transparent 55%);opacity:0;transition:opacity .4s}
.logos li:hover::before{opacity:1}
.logos img{max-height:100%;width:auto;object-fit:contain;opacity:.82;transition:opacity .4s,transform .6s var(--ease)}
.logos li:hover img{opacity:1;transform:scale(1.06)}
.logos .txt{font:600 clamp(1.1rem,1.9vw,1.7rem) var(--disp);letter-spacing:.14em;opacity:.75}
@media (max-width:860px){.logos{grid-template-columns:repeat(2,1fr)}}

/* material brands: framed certificates hanging on a wood wall */
.brands{position:relative;padding:clamp(80px,13vh,150px) var(--pad) clamp(100px,16vh,180px);color:var(--veneer);overflow:hidden;background:#7a5535;isolation:isolate}
.wall{position:absolute;inset:0;z-index:-1;--plank:clamp(90px,11vw,170px);background:
  radial-gradient(120% 70% at 50% 0%,rgba(255,220,150,.2),transparent 60%),
  linear-gradient(180deg,rgba(13,10,7,.86) 0,rgba(13,10,7,.14) 20%,rgba(13,10,7,0) 58%,rgba(13,10,7,.74) 100%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.44) 0 2px,rgba(255,236,200,.06) 2px 3px,transparent 3px var(--plank)),
  linear-gradient(90deg,rgba(0,0,0,0) 0 20%,rgba(0,0,0,.14) 20% 40%,rgba(255,240,210,.05) 40% 60%,rgba(0,0,0,.2) 60% 80%,rgba(0,0,0,.07) 80% 100%) 0 0/calc(var(--plank)*5) 100%,
  url(../media/ui/wood.svg) 0 0/520px 900px,
  #7a5535}
.brands .sec-head{text-shadow:0 2px 14px rgba(0,0,0,.6)}
.brands .sec-head p{color:rgba(236,228,211,.78)}
.frames{--n:9;--g:clamp(10px,1.7vw,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:66px var(--g);padding-top:50px}
.frame{position:relative;width:min(150px,calc((100% - (var(--n) - 1)*var(--g))/var(--n)));transform-origin:50% -34px;rotate:calc(var(--sw,0deg)*var(--k,1));transform:rotate(var(--tilt,0deg));opacity:0}
.frame::before{content:"";position:absolute;left:50%;top:-38px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6e2a2,#9a7426 70%);box-shadow:0 2px 3px rgba(0,0,0,.65);z-index:2}
.frame::after{content:"";position:absolute;left:-34%;right:-34%;top:-84px;bottom:-34%;background:radial-gradient(50% 62% at 50% 6%,rgba(255,224,155,.3),transparent 70%);z-index:-1;pointer-events:none}
.wire{position:absolute;left:0;top:-34px;width:100%;height:34px;overflow:visible}
.wire path{fill:none;stroke:rgba(18,12,7,.88);stroke-width:1.2;vector-effect:non-scaling-stroke}
.cert{position:relative;aspect-ratio:4/5;background:#f6f0e1;border:clamp(5px,.55vw,9px) solid #b08a3c;border-image:linear-gradient(135deg,#e6c77a,#8f6d2a 28%,#f3dc97 50%,#7d5d22 72%,#d2ab57) 1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 0 14px rgba(90,60,20,.25),0 22px 26px -10px rgba(0,0,0,.68),0 4px 8px rgba(0,0,0,.45);display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;padding:12% 10% 9%;overflow:hidden}
.frame:nth-child(even) .cert{border-image:linear-gradient(135deg,#3d2c1c,#17100a 30%,#4d3825 50%,#120c07 72%,#35271a) 1}
.cert::before{content:"";position:absolute;inset:5%;border:1px solid rgba(160,124,58,.6);outline:1px solid rgba(160,124,58,.25);outline-offset:2px;pointer-events:none}
.cert::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.3) 46%,transparent 58%);transform:translateX(calc(var(--gx,-.8)*100%));transition:transform .5s ease-out;pointer-events:none}
.cert img{width:100%;height:100%;min-height:0;object-fit:contain}
.frame:nth-child(7) .cert img{filter:brightness(0) opacity(.72)}
.seal{display:block;width:clamp(9px,1vw,15px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7e3a4,#b98d2d 65%,#8a6519);box-shadow:0 0 0 2px rgba(185,141,45,.25);margin-top:8%}
.frames.in .frame{opacity:1;animation:hang 2.7s cubic-bezier(.3,.1,.3,1) both;animation-delay:calc(var(--i)*95ms)}
.frames.hung .frame{animation:none;opacity:1}
.frames.hung .frame:hover{animation:nudge 1.9s ease-out}
@keyframes hang{0%{opacity:0;transform:translateY(-28px) rotate(calc(var(--d)*9deg))}12%{opacity:1}30%{transform:translateY(0) rotate(calc(var(--d)*-6deg))}48%{transform:rotate(calc(var(--d)*4deg))}64%{transform:rotate(calc(var(--d)*-2.4deg))}80%{transform:rotate(calc(var(--d)*1.2deg))}100%{transform:rotate(var(--tilt,0deg))}}
@keyframes nudge{0%{transform:rotate(var(--tilt,0deg))}22%{transform:rotate(calc(var(--tilt,0deg) + 3.4deg))}46%{transform:rotate(calc(var(--tilt,0deg) - 2.3deg))}68%{transform:rotate(calc(var(--tilt,0deg) + 1.2deg))}86%{transform:rotate(calc(var(--tilt,0deg) - .5deg))}100%{transform:rotate(var(--tilt,0deg))}}
@media (max-width:1100px){.frames{--n:5}}
@media (max-width:640px){.frames{--n:3;--g:16px;gap:60px var(--g)}}

/* ---------- start (yellow light) ---------- */
.start{background:var(--light);color:var(--ink);padding:clamp(90px,15vh,180px) var(--pad)}
.start-in{max-width:1180px;margin:0 auto}
.start-h{font:700 clamp(1.8rem,4vw,3.8rem)/1.25 var(--disp);letter-spacing:0;text-wrap:balance}
.start-p{max-width:32em;margin:1.4em 0 2.4em;font-size:1.1em}
.wiz{border-top:2px solid var(--ink);padding-top:22px}
.wiz-top{display:flex;align-items:center;gap:18px;font:600 .9rem var(--disp);margin-bottom:22px}
.wiz-bar{flex:1;height:2px;background:rgba(26,22,17,.18)}
.wiz-bar i{display:block;height:100%;width:25%;background:var(--ink);transition:width .6s var(--ease)}
.wiz-pane{display:none}
.wiz-pane.on{display:block;animation:swap .55s var(--ease)}
.wiz legend{font:600 clamp(1.15rem,2vw,1.7rem)/1.4 var(--disp);margin-bottom:.8em;display:block;width:100%}
.wiz legend small{font:400 .95rem var(--body);margin-inline-start:.8em;opacity:.75}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.opt{display:block;text-align:start;padding:14px 16px;border:1.5px solid var(--ink);border-radius:2px;transition:background .25s,color .25s,transform .4s var(--ease)}
.opt b{display:block;font:700 1.05rem/1.4 var(--disp)}
.opt span{display:block;font-size:.86rem;line-height:1.6;opacity:.78;margin-top:2px}
.opt:hover{transform:translateY(-3px)}
.opt[aria-pressed=true]{background:var(--ink);color:var(--light)}
.wiz textarea,.wiz input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--ink);font:500 1.15rem/1.7 var(--body);color:var(--ink);padding:.5em 0;border-radius:0;resize:vertical}
.wiz textarea::placeholder{color:rgba(26,22,17,.5)}
.wiz textarea:focus,.wiz input:focus{outline:0;border-bottom-color:#000;box-shadow:0 2px 0 #000}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fields label{font:600 .9rem var(--disp);display:grid;gap:4px}
.wiz-err{color:#8a1c00;font-weight:600;min-height:1.8em;margin-top:.6em}
.wiz-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:26px}
@media (max-width:640px){.fields{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{padding:clamp(70px,12vh,140px) var(--pad) 28px;background:#0d0a07}
.foot-big{font:500 clamp(1.3rem,2.6vw,2.4rem)/1.45 var(--disp);color:var(--oak)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:clamp(40px,8vh,90px) 0;padding-top:34px;border-top:1px solid rgba(236,228,211,.12)}
.foot h3{font:500 .85rem var(--disp);color:var(--light);margin-bottom:.8em}
.foot-grid a{display:block;width:fit-content;transition:color .3s}
.foot-grid a:hover{color:var(--light)}
.foot-grid p{color:rgba(236,228,211,.8);max-width:16em}
.foot-end{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--greige);font-size:.85rem}
.foot-end img{width:110px;height:auto;opacity:.8}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

.wa{position:fixed;bottom:20px;left:20px;z-index:55;width:54px;height:54px;border-radius:50%;background:var(--light);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .5s var(--ease)}
.wa:hover{transform:scale(1.1) rotate(-8deg)}

/* ---------- detail sheet ---------- */
.sheet{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.sheet.on{visibility:visible;pointer-events:auto}
.sheet-wipe{position:absolute;inset:0;display:flex;direction:ltr;z-index:2;pointer-events:none}
.sheet-wipe i{flex:1;background:linear-gradient(90deg,#3b2a1b,#b98f5e 50%,#4a3523);transform:scaleY(0)}
.sheet.wiping .sheet-wipe i{animation:wipe 1.15s var(--ease) both;animation-delay:calc(var(--i)*16ms)}
@keyframes wipe{0%{transform:scaleY(0);transform-origin:50% 100%}38%,63%{transform:scaleY(1.02);transform-origin:50% 100%}64%{transform:scaleY(1.02);transform-origin:50% 0}100%{transform:scaleY(0);transform-origin:50% 0}}
.sheet-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:var(--stage);opacity:0;transition:opacity .01s .62s}
.sheet.on .sheet-scroll{opacity:1}
.sheet.closing .sheet-scroll{opacity:0}
.sheet-x{position:fixed;top:18px;left:var(--pad);z-index:3;display:flex;align-items:center;gap:.5em;padding:.6em 1em;background:var(--light);color:var(--ink);border-radius:2px;font:600 .9rem var(--disp);opacity:0;transition:opacity .3s .6s}
.sheet.on .sheet-x{opacity:1}
.d-hero{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
.d-hero-t{padding:clamp(100px,16vh,170px) var(--pad) clamp(40px,8vh,90px);display:flex;flex-direction:column;justify-content:flex-end}
.d-kick{color:var(--light);font:400 .95rem var(--disp);margin-bottom:.6em}
.d-hero h1{font:600 clamp(1.9rem,4.2vw,3.8rem)/1.25 var(--disp);letter-spacing:0}
.d-desc{margin-top:1.2em;max-width:32em;font-size:1.12em;color:rgba(236,228,211,.84)}
.d-facts{display:grid;grid-template-columns:auto 1fr;gap:.35em 1.4em;margin-top:1.8em;padding-top:1.2em;border-top:1px solid rgba(236,228,211,.14);font-size:.95rem;align-items:center}
.d-facts dt{color:var(--greige)}.d-facts dd{margin:0}
.d-facts img{height:54px;width:auto}
.d-hero .btn{margin-top:2em;align-self:flex-start}
.d-hero-i{position:relative;overflow:hidden;min-height:50vh;background:var(--wall)}
.d-hero-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 14s ease-out both}
@keyframes kb{from{transform:scale(1.14)}}
.d-note{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(60px,10vh,120px) var(--pad);background:var(--wall)}
.d-note h2{font:600 clamp(1.25rem,2.2vw,2rem)/1.4 var(--disp)}
.d-note p{color:var(--greige);margin-top:.8em;max-width:30em}
.d-note figure img{border-radius:3px;max-height:60vh;width:auto}
.d-note figcaption{font-size:.85rem;color:var(--greige);margin-top:.6em}
.d-group{padding:clamp(50px,9vh,110px) var(--pad) 0}
.d-group-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 1.2em;margin-bottom:1.4em;position:sticky;top:0;z-index:1;padding:14px 0;background:linear-gradient(var(--stage) 70%,transparent)}
.d-group-h h2{font:600 clamp(1.2rem,2.2vw,2rem)/1.3 var(--disp)}
.d-group-h span{color:var(--greige)}
.d-group-h em{font-style:normal;color:var(--light);font:300 .95rem var(--disp);margin-inline-start:auto;padding-inline-end:120px}
.gal{columns:3 260px;column-gap:14px}
.gal button{display:block;width:100%;margin:0 0 14px;break-inside:avoid;overflow:hidden;border-radius:3px;position:relative;background:var(--wall);cursor:zoom-in}
.gal img{width:100%;height:auto;transition:transform .9s var(--ease),filter .5s;filter:brightness(.86)}
.gal button:hover img,.gal button:focus-visible img{transform:scale(1.05);filter:brightness(1.08)}
.gal .cap{position:absolute;inset:auto 0 0 0;padding:28px 12px 10px;font-size:.82rem;line-height:1.5;text-align:start;background:linear-gradient(transparent,rgba(13,10,7,.88));opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.gal button:hover .cap,.gal button:focus-visible .cap{opacity:1;transform:none}
.d-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(236,228,211,.12);margin:clamp(60px,10vh,120px) var(--pad) 0;border:1px solid rgba(236,228,211,.12)}
.d-tri>div{background:var(--stage);padding:clamp(20px,3vw,44px)}
.d-tri h2{font:700 1.3rem var(--disp);color:var(--light);margin-bottom:.8em}
.d-tri li{padding:.5em 0;border-top:1px solid rgba(236,228,211,.1);font-size:1.05rem}
.d-next{display:block;margin-top:clamp(70px,12vh,140px);padding:clamp(50px,9vh,110px) var(--pad);background:var(--light);color:var(--ink);position:relative;overflow:hidden}
.d-next small{font:500 .95rem var(--disp);display:block}
.d-next b{font:700 clamp(1.6rem,3.6vw,3.2rem)/1.3 var(--disp);display:inline-block;transition:transform .7s var(--ease)}
.d-next:hover b{transform:translateX(-.25em)}
@media (max-width:860px){.d-hero{grid-template-columns:1fr}.d-hero-i{order:-1;min-height:56vh}.d-hero-t{padding-top:36px}.d-note,.d-tri{grid-template-columns:1fr}.gal{columns:2 150px;column-gap:8px}.gal button{margin-bottom:8px}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;background:rgba(9,7,5,.95);display:grid;grid-template-columns:auto 1fr auto;align-items:center;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.lb.on{visibility:visible;opacity:1}
.lb-fig{display:grid;justify-items:center;gap:12px;padding:16px;min-width:0}
.lb-fig img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-fig img.sw{animation:lbin .45s var(--ease)}
@keyframes lbin{from{opacity:0;transform:scale(.96)}}
.lb-fig figcaption{direction:rtl;color:rgba(236,228,211,.8);font-size:.92rem;text-align:center;max-width:46em;min-height:1.6em}
.lb-a,.lb-x{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;margin:0 12px;transition:background .3s,color .3s}
.lb-a:hover,.lb-x:hover{background:var(--light);color:var(--ink)}
.lb-x{position:absolute;top:14px;right:14px;margin:0}
@media (max-width:640px){.lb-a{width:40px;height:40px;margin:0 2px}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.hero-hint i,.hero-scroll i{animation:none}}
[hidden]{display:none!important}

#prog{position:fixed;inset:0 0 auto 0;height:2px;z-index:70;background:var(--light);transform-origin:100% 50%;transform:scaleX(0);pointer-events:none}

/* v2 small-screen centering */
@media (max-width:860px){.line-pin{align-content:center}.proc-pin{grid-template-rows:auto auto;align-content:center}}