/* ═══════════════════════════════════════════════
   أسطرلاب ستديو — Night navigation design system
   sand #D8CEBD · brick #A93B2E · night #171210
   ═══════════════════════════════════════════════ */

:root{
  --night:#171210;
  --night-2:#211a16;
  --night-3:#2b211c;
  --sand:#d8cebd;
  --sand-dim:#a99c86;
  --sand-paper:#cfc4b0;
  --brick:#a93b2e;
  --brick-hot:#c4523f;
  --gold:#c9a262;
  --ink-on-sand:#241b15;
  --font-disp:'Aref Ruqaa', serif;
  --font-body:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --pad: clamp(1.1rem, 4vw, 3rem);
  --radius:1.1rem;
  --head-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--night);
  color:var(--sand);
  line-height:1.8;
  font-weight:300;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:var(--brick);color:var(--sand)}

h1,h2,h3{font-family:var(--font-disp);font-weight:700;line-height:1.5}
h2{font-size:clamp(1.9rem,6vw,3.2rem)}

/* focus */
:focus-visible{outline:2px solid var(--brick-hot);outline-offset:3px;border-radius:4px}

/* ═════════ astrolabe mark ═════════ */
.ast-ring,.ast-orbit,.ast-alidade{stroke:currentColor}
.ast-star,.ast-spark{fill:currentColor}
@media (prefers-reduced-motion: no-preference){
  .ast-rings{animation:spin 70s linear infinite;transform-origin:center;transform-box:view-box}
  .ast-spark{animation:sparkle 3.4s ease-in-out infinite;transform-origin:38px 31px;transform-box:view-box}
}
@keyframes spin{to{rotate:360deg}}
@keyframes sparkle{0%,100%{scale:1;opacity:1}50%{scale:.55;opacity:.55}}

/* ═════════ loader — viewfinder title sequence, theater finale ═════════
   act 1: grid+corners .1s · نرصد .18–.66 · نلتقط .66–1.14 · نروي 1.14–1.62
   act 2 (1.58s): red curtains sweep closed  ·  act 3 (2.1s): spotlight,
   logo slams onto the velvet  ·  act 4 (2.68s): curtains gather open
   onto the running montage — the stage reveal */
.loader{
  position:fixed;inset:0;z-index:101;
  background:var(--night);
  display:grid;place-items:center;
  overflow:hidden;
}
.loader.act3{background:transparent}
.loader::before{ /* film grain */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.06;mix-blend-mode:overlay;
}
.loader.gone{display:none}

/* the red velvet — halves of a photographed theater curtain.
   closed = both at 0, the photo reassembles seamlessly */
.ld-curt{
  position:absolute;inset-block:0;width:50.5%;z-index:5;
  background-size:cover;
  box-shadow:0 0 46px #000000aa;
  will-change:transform;
}
.ld-curt.cl{
  left:-.5%;transform:translateX(-112%);transform-origin:left center;
  background-image:url("assets/web/curtain/l-m.webp");
  background-position:right center;
}
.ld-curt.cr{
  right:-.5%;transform:translateX(112%);transform-origin:right center;
  background-image:url("assets/web/curtain/r-m.webp");
  background-position:left center;
}
@media (min-width:700px){
  .ld-curt.cl{background-image:url("assets/web/curtain/l.webp")}
  .ld-curt.cr{background-image:url("assets/web/curtain/r.webp")}
}

/* act 2: heavy velvet sweeps closed — mass, overshoot, settle */
.loader.act2 .ld-curt.cl{animation:curtCloseL .9s cubic-bezier(.6,0,.3,1) forwards}
.loader.act2 .ld-curt.cr{animation:curtCloseR .9s cubic-bezier(.6,0,.3,1) .06s forwards}
@keyframes curtCloseL{
  0%{transform:translateX(-112%)}
  68%{transform:translateX(1.4%)}
  84%{transform:translateX(-.7%)}
  100%{transform:translateX(0)}
}
@keyframes curtCloseR{
  0%{transform:translateX(112%)}
  68%{transform:translateX(-1.4%)}
  84%{transform:translateX(.7%)}
  100%{transform:translateX(0)}
}
.loader.act2 :is(.ld-grid,.ld-corner,.ld-reticle){opacity:0 !important;transition:opacity .3s ease}

/* act 3: impact bounce — the fabric's mass lands; slow cinematic push-in */
.loader.act3 .ld-curt.cl{animation:curtCloseL .9s cubic-bezier(.6,0,.3,1) forwards, curtImpact .5s ease-out}
.loader.act3 .ld-curt.cr{animation:curtCloseR .9s cubic-bezier(.6,0,.3,1) .06s forwards, curtImpact .5s .06s ease-out}
@keyframes curtImpact{0%{translate:0 0}32%{translate:0 7px}62%{translate:0 -3px}100%{translate:0 0}}
.loader.act3{animation:stagepush 5.5s cubic-bezier(.25,.5,.3,1) forwards}
@keyframes stagepush{from{scale:1}to{scale:1.045}}

/* act 3: house spotlight on the velvet */
.ld-spot{
  position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;
  background:
    radial-gradient(42% 34% at 50% 46%, #f2e0b866, #f2e0b820 48%, transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, #00000059 100%);
  transition:opacity .5s ease;
}
.loader.act3 .ld-spot{opacity:1}
.loader.act3::after{ /* brick flash synced with the logo slam */
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(70% 70% at 50% 50%, var(--brick-hot), transparent 75%);
  opacity:0;
  animation:ldflash .45s .05s ease-out;
}

/* act 4: the reveal — light cracks through the gap, then the curtains
   drag open to the wings, folds bunching, hems lagging behind */
.ld-gap{
  position:absolute;top:0;bottom:0;left:50%;width:6px;translate:-50% 0;z-index:4;
  background:linear-gradient(90deg, transparent, #ffd9a0, transparent);
  opacity:0;filter:blur(6px);
  pointer-events:none;
}
.loader.act4 .ld-gap{animation:gapbloom 1.7s cubic-bezier(.85,0,.18,1) forwards}
@keyframes gapbloom{
  0%{opacity:0;width:6px}
  12%{opacity:1;width:12px;filter:blur(8px)}
  45%{opacity:.85;width:34vw;filter:blur(20px)}
  100%{opacity:0;width:120vw;filter:blur(34px)}
}
.loader.act4 .ld-curt.cl{animation:curtOpenL 1.9s cubic-bezier(.85,0,.18,1) .12s both}
.loader.act4 .ld-curt.cr{animation:curtOpenR 1.9s cubic-bezier(.85,0,.18,1) .19s both}
@keyframes curtOpenL{
  0%{transform:translateX(0) scaleX(1) rotate(0deg)}
  30%{transform:translateX(-16%) scaleX(.88) rotate(.9deg)}
  62%{transform:translateX(-60%) scaleX(.56) rotate(1.5deg)}
  100%{transform:translateX(-120%) scaleX(.32) rotate(0deg)}
}
@keyframes curtOpenR{
  0%{transform:translateX(0) scaleX(1) rotate(0deg)}
  30%{transform:translateX(16%) scaleX(.88) rotate(-.9deg)}
  62%{transform:translateX(60%) scaleX(.56) rotate(-1.5deg)}
  100%{transform:translateX(120%) scaleX(.32) rotate(0deg)}
}
.loader.act4 .ld-spot{opacity:0}
.loader.act4 .ld-logo{animation:ldout .55s .55s both}
@keyframes ldout{from{opacity:1}to{opacity:0}}

/* rule-of-thirds grid */
.ld-grid i{position:absolute;background:var(--sand);opacity:0}
.ld-grid i:nth-child(1){inset-block:0;width:1px;inset-inline-start:33.33%;transform:scaleY(0);transform-origin:top;animation:ldgv .8s .05s cubic-bezier(.65,0,.35,1) forwards}
.ld-grid i:nth-child(2){inset-block:0;width:1px;inset-inline-start:66.66%;transform:scaleY(0);transform-origin:bottom;animation:ldgv .8s .12s cubic-bezier(.65,0,.35,1) forwards}
.ld-grid i:nth-child(3){inset-inline:0;height:1px;top:33.33%;transform:scaleX(0);transform-origin:right;animation:ldgh .8s .09s cubic-bezier(.65,0,.35,1) forwards}
.ld-grid i:nth-child(4){inset-inline:0;height:1px;top:66.66%;transform:scaleX(0);transform-origin:left;animation:ldgh .8s .16s cubic-bezier(.65,0,.35,1) forwards}
@keyframes ldgv{to{transform:scaleY(1);opacity:.07}}
@keyframes ldgh{to{transform:scaleX(1);opacity:.07}}

/* viewfinder corners */
.ld-corner{
  --in:clamp(16px,4.5vw,42px);
  position:absolute;width:26px;height:26px;opacity:0;
  border:0 solid #d8cebd99;
  animation:ldcorner .55s .18s cubic-bezier(.2,1.2,.4,1) forwards;
}
.ld-corner.c1{top:var(--in);inset-inline-start:var(--in);border-block-start-width:2px;border-inline-start-width:2px;translate:14px 14px}
.ld-corner.c2{top:var(--in);inset-inline-end:var(--in);border-block-start-width:2px;border-inline-end-width:2px;translate:-14px 14px}
.ld-corner.c3{bottom:var(--in);inset-inline-start:var(--in);border-block-end-width:2px;border-inline-start-width:2px;translate:14px -14px}
.ld-corner.c4{bottom:var(--in);inset-inline-end:var(--in);border-block-end-width:2px;border-inline-end-width:2px;translate:-14px -14px}
@keyframes ldcorner{to{opacity:1;translate:0 0}}

/* autofocus reticle — locks 3 times, once per word */
.ld-reticle{
  position:absolute;top:50%;left:50%;
  width:clamp(250px,72vw,560px);height:clamp(110px,26vw,190px);
  translate:-50% -50%;
  opacity:0;scale:1.35;
  animation:ldaf .48s .18s cubic-bezier(.25,1,.4,1) 3;
}
.ld-reticle b{position:absolute;width:20px;height:20px;border:0 solid var(--gold)}
.ld-reticle b:nth-child(1){top:0;inset-inline-start:0;border-block-start-width:2px;border-inline-start-width:2px}
.ld-reticle b:nth-child(2){top:0;inset-inline-end:0;border-block-start-width:2px;border-inline-end-width:2px}
.ld-reticle b:nth-child(3){bottom:0;inset-inline-start:0;border-block-end-width:2px;border-inline-start-width:2px}
.ld-reticle b:nth-child(4){bottom:0;inset-inline-end:0;border-block-end-width:2px;border-inline-end-width:2px}
.ld-reticle u{ /* focus-lock blip */
  position:absolute;top:-5px;inset-inline-end:-5px;
  width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 14px var(--gold);
}
@keyframes ldaf{
  0%{opacity:0;scale:1.35}
  22%{opacity:1;scale:1}
  78%{opacity:1;scale:1}
  100%{opacity:0;scale:1.35}
}

/* word beats */
.ld-w{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  font-family:var(--font-disp);font-weight:700;
  font-size:clamp(2.8rem,11vw,5.6rem);line-height:1.6;
  color:var(--sand);text-shadow:0 4px 60px #000000aa;
  white-space:nowrap;
  opacity:0;
  animation:ldbeat .48s cubic-bezier(.25,1,.4,1) both;
}
.ld-w.w1{animation-delay:.18s}
.ld-w.w2{animation-delay:.66s;color:var(--brick-hot);text-shadow:0 0 60px #c4523f66}
.ld-w.w3{animation-delay:1.14s}
@keyframes ldbeat{
  0%{opacity:0;scale:1.2;filter:blur(12px)}
  13%{opacity:1;scale:1;filter:blur(0)}
  84%{opacity:1;scale:1;filter:blur(0)}
  100%{opacity:0;scale:.92;filter:blur(5px)}
}

/* shutter blades between beats */
.ld-shutter{
  position:absolute;inset-block:-12%;inset-inline-start:-20%;
  width:140%;pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, var(--brick) 14%, #7e2a20 50%, var(--brick) 86%, transparent 100%);
  transform:translateX(140%) skewX(-14deg);
}
.ld-shutter.s1{animation:ldswipeL .26s .54s cubic-bezier(.7,0,.3,1) both}
.ld-shutter.s2{animation:ldswipeR .26s 1.02s cubic-bezier(.7,0,.3,1) both}
.ld-shutter.s3{animation:ldswipeL .26s 1.5s cubic-bezier(.7,0,.3,1) both}
@keyframes ldswipeL{
  from{transform:translateX(140%) skewX(-14deg)}
  to{transform:translateX(-140%) skewX(-14deg)}
}
@keyframes ldswipeR{
  from{transform:translateX(-140%) skewX(14deg)}
  to{transform:translateX(140%) skewX(14deg)}
}

/* logo slam — onto the closed velvet, under the spotlight */
.ld-logo{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:7;
  width:clamp(210px,52vw,330px);
  opacity:0;
  filter:drop-shadow(0 12px 60px #17121088);
  animation:ldslam .55s 2.62s cubic-bezier(.2,1.3,.4,1) forwards;
}
@keyframes ldslam{
  from{opacity:0;scale:1.22;filter:blur(12px) drop-shadow(0 12px 60px #17121088)}
  to{opacity:1;scale:1;filter:blur(0) drop-shadow(0 12px 60px #17121088)}
}
@keyframes ldflash{0%{opacity:0}25%{opacity:.16}100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .loader{display:none}
}

/* ═════════ header ═════════ */
.site-head{
  position:fixed;inset-inline:0;top:0;z-index:50;
  height:var(--head-h);
  display:flex;align-items:center;gap:1rem;
  padding-inline:var(--pad);
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:color-mix(in srgb, var(--night) 82%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:#ffffff14;
}
.brand{display:flex;align-items:center;gap:.55rem;margin-inline-end:auto}
.brand-mark{height:40px;width:auto;flex:none}
.brand-word{height:30px;width:auto}
.head-nav{display:none;gap:1.7rem;font-size:.95rem;font-weight:400}
.head-nav a{
  position:relative;overflow:hidden;display:inline-block;
  padding-block:.15em;color:var(--sand-dim);
}
.head-nav a>span{
  display:block;position:relative;
  transition:translate .34s cubic-bezier(.65,0,.35,1);
}
.head-nav a>span::after{
  content:attr(data-text);
  position:absolute;top:100%;inset-inline-start:0;width:100%;
  color:var(--sand);
}
.head-nav a:hover>span{translate:0 -100%}
.head-nav a::after{
  content:"";position:absolute;bottom:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,var(--brick-hot),var(--gold));
  border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.head-nav a.act{color:var(--sand)}
.head-nav a.act::after{transform:scaleX(1)}

.head-cta{
  display:inline-flex;position:relative;overflow:hidden;isolation:isolate;
  align-items:center;gap:.5rem;
  padding:.62rem 1.4rem;border-radius:999px;
  border:1px solid #a93b2e88;
  font-size:.92rem;font-weight:500;color:var(--sand);
  transition:color .3s ease, border-color .3s ease, translate .25s ease, box-shadow .3s ease;
}
.head-cta b{font-weight:500;position:relative;z-index:1}
.head-cta i{
  font-style:normal;font-size:.75em;color:var(--gold);
  position:relative;z-index:1;
  transition:rotate .5s cubic-bezier(.65,0,.35,1), color .3s;
}
.head-cta::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,var(--brick),var(--brick-hot));
  border-radius:inherit;
  transform:translateY(102%);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
}
.head-cta:hover{color:#f5efe4;border-color:var(--brick-hot);translate:0 -1px;box-shadow:0 12px 30px -12px #c4523fcc}
.head-cta:hover::before{transform:translateY(0)}
.head-cta:hover i{rotate:180deg;color:#f5efe4}
.menu-btn{
  position:relative;width:44px;height:44px;flex:none;
}
.menu-btn span{
  position:absolute;left:11px;width:22px;height:2px;
  background:var(--sand);border-radius:2px;transition:.3s;
}
.menu-btn span:first-child{top:17px}
.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{top:21px;rotate:45deg}
.menu-btn[aria-expanded="true"] span:last-child{top:21px;rotate:-45deg}

@media (max-width:819px){
  /* mobile: full logo, no booking button — booking lives in the menu & CTAs below */
  .head-cta{display:none}
  .brand-mark{height:36px}
  .brand-word{height:27px}
}
@media (min-width:820px){
  .head-nav{display:flex}
  .menu-btn{display:none}
}

/* ═════════ fullscreen menu ═════════ */
.menu-overlay{
  position:fixed;inset:0;z-index:49;
  background:color-mix(in srgb, var(--night) 94%, transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3rem;
  opacity:0;visibility:hidden;transition:.35s ease;
}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-links{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.menu-links a{
  font-family:var(--font-disp);font-size:clamp(2rem,9vw,3rem);color:var(--sand);
  opacity:0;translate:0 18px;transition:.4s ease;transition-delay:calc(var(--i)*70ms);
}
.menu-links a:hover{color:var(--brick-hot)}
.menu-overlay.open .menu-links a{opacity:1;translate:0 0}
.menu-foot{display:flex;gap:1.4rem;font-size:.9rem;color:var(--sand-dim)}

/* ═════════ hero ═════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  text-align:center;
  overflow:hidden;
  padding:calc(var(--head-h) + 2rem) var(--pad) 4rem;
  background:var(--night);
}
.hero-media{position:absolute;inset:0;isolation:isolate}

/* ── the montage wall — beat-cut video panels ──
   z ladder inside hero-media: wall 1 < stills 2 < shade 3 < flash 4 < pulse 5 */
.wall{
  position:absolute;inset:0;z-index:1;isolation:isolate;
  background:url("assets/web/hero/reel-poster.webp") center/cover no-repeat var(--night);
}
.wall video{
  position:absolute;top:0;height:100%;object-fit:cover;
  filter:saturate(1.04) contrast(1.03) brightness(.97);
}
.wall .seam{
  position:absolute;top:0;height:100%;width:1px;z-index:2;
  background:var(--night);
}
.wall-stills{position:absolute;inset:0;z-index:2}
.wall-stills img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 32%;
  opacity:0;
  filter:saturate(.96) brightness(.92);
}
.wall-stills img.is-on{opacity:1}
.wall-flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:#f5efe4;opacity:0;
}
.wall-flash.is-on{opacity:.9}
.wall-pulse{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  display:grid;place-items:center;
  opacity:0;mix-blend-mode:difference;
  color:var(--sand);
}
.wall-pulse.is-on{opacity:1}
.wall-pulse svg{width:min(46svh,72vw);height:auto}
.wall-pulse .ast-rings,.wall-pulse .ast-spark{animation:none}

/* wordless scroll cue */
.hero-cue{
  position:absolute;bottom:1.6rem;inset-inline-start:50%;translate:-50% 0;z-index:3;
  padding:.4rem .9rem;
}
[dir="rtl"] .hero-cue{translate:50% 0}
.hero-cue span{
  display:block;width:1px;height:52px;overflow:hidden;
  background:#d8cebd30;
}
.hero-cue i{display:block;width:100%;height:50%;background:var(--sand)}
@media (prefers-reduced-motion: no-preference){
  .hero-cue i{animation:cuedrop 2.2s cubic-bezier(.65,0,.35,1) infinite}
}
@keyframes cuedrop{
  0%{translate:0 -100%}
  55%{translate:0 200%}
  100%{translate:0 200%}
}
.hero-shade{
  position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(0deg, var(--night) 0%, #17121059 14%, #17121014 40%, #1712107a 100%),
    radial-gradient(120% 90% at 50% 55%, #17121000 55%, #17121066 100%);
}
/* full-journey starfield: fixed behind content, above the hero video */
#stars{
  position:fixed;inset:0;width:100vw;height:100svh;
  z-index:1;pointer-events:none;mix-blend-mode:screen;
}
main>*{position:relative;z-index:2}
main .hero{z-index:0}
@media (prefers-reduced-motion: reduce){#stars{display:none}}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.055;mix-blend-mode:overlay;
}
.hero-inner{position:relative;z-index:2;width:100%;display:grid;place-items:center}
.eyebrow{
  font-size:.8rem;font-weight:500;letter-spacing:.05em;
  color:var(--brick-hot);
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before,.eyebrow::after{content:"✦";font-size:.7em;color:var(--gold)}

/* hero logo — hands off from the loader logo as the curtain lifts */
.hero-logo{
  width:clamp(210px,52vw,330px);      /* EXACT match with .ld-logo */
  opacity:0;
  filter:drop-shadow(0 12px 60px #171210cc);
  will-change:transform;
}
body.ready .hero-logo{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero-logo{opacity:1}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;border-radius:999px;
  font-weight:500;font-size:.95rem;font-family:var(--font-body);
  transition:.25s ease;
  border:1px solid transparent;
}
.btn-lg{padding:1rem 2.1rem;font-size:1.05rem}
.btn-sand{background:var(--sand);color:var(--brick);box-shadow:0 10px 34px -12px #00000066}
.btn-sand:hover{background:#fff;translate:0 -2px}

/* ═════════ filmstrip ═════════ */
.strip{
  overflow:hidden;
  display:grid;gap:.55rem;
  padding-block:.55rem;
  background:var(--night-2);
  border-block:1px solid #ffffff0d;
}
.strip-row{display:flex;gap:.55rem;width:max-content}
.strip-row img{
  height:clamp(96px,15vw,170px);width:auto;
  border-radius:.45rem;object-fit:cover;
  aspect-ratio:4/3;
}
@media (prefers-reduced-motion: no-preference){
  .strip-row.r1{animation:stripL 45s linear infinite}
  .strip-row.r2{animation:stripR 45s linear infinite}
}
@keyframes stripL{to{translate:-50% 0}}
@keyframes stripR{from{translate:-50% 0}to{translate:0 0}}

/* ═════════ sections ═════════ */
.section{padding:clamp(4rem,10vw,7rem) var(--pad);overflow:hidden}
#works,#reels,#partners,#about{content-visibility:auto;contain-intrinsic-size:auto 900px}
.section-head{text-align:center;margin-bottom:clamp(2rem,6vw,3.5rem)}
.section-head h2{
  margin-top:.4rem;
  clip-path:inset(0 0 110% 0);
  translate:0 22px;
  transition:clip-path .85s cubic-bezier(.19,1,.22,1) .1s, translate .85s cubic-bezier(.19,1,.22,1) .1s;
}
.section-head.in h2{clip-path:inset(-18% -10% -22% -10%);translate:0 0}
@media (prefers-reduced-motion: reduce){
  .section-head h2{clip-path:none;translate:0 0;transition:none}
}
.section-sand{
  background:var(--sand);color:var(--ink-on-sand);
}
.section-sand .eyebrow{color:var(--brick)}
.section-sand h2{color:var(--brick)}

/* ═════════ services rail ═════════ */
.svc-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;
  gap:1rem;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
  scrollbar-width:none;
}
.svc-rail::-webkit-scrollbar{display:none}
.svc-card{
  scroll-snap-align:center;
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/5;
  background:var(--night-2);
  isolation:isolate;
}
.svc-card img{width:100%;height:100%;object-fit:cover;transition:scale .6s ease;z-index:-1;position:absolute;inset:0}
.svc-card:hover img{scale:1.06}
.svc-txt{
  position:absolute;inset-inline:0;bottom:0;
  padding:2.6rem 1.2rem 1.1rem;
  background:linear-gradient(0deg, #171210ee 0%, #17121088 55%, transparent 100%);
}
.svc-txt h3{font-size:1.45rem;color:var(--sand)}
@media (min-width:700px){
  .svc-rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-inline:0;padding-inline:0;max-width:1100px;margin-inline:auto}
}

/* ═════════ gallery ═════════ */
.filters{
  display:flex;gap:.5rem;flex-wrap:nowrap;overflow-x:auto;
  justify-content:flex-start;
  margin:0 auto 1.8rem;max-width:900px;
  padding-bottom:.4rem;scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
@media(min-width:700px){.filters{justify-content:center;flex-wrap:wrap}}
.chip{
  flex:none;
  padding:.45rem 1.1rem;border-radius:999px;
  border:1px solid #a93b2e55;color:var(--brick);
  font-size:.9rem;font-weight:500;transition:.2s;
  background:transparent;
}
.chip:hover{background:#a93b2e14}
.chip.active{background:var(--brick);color:var(--sand);border-color:var(--brick)}

.masonry{columns:2;column-gap:.7rem;max-width:1200px;margin-inline:auto}
@media(min-width:768px){.masonry{columns:3;column-gap:1rem}}
@media(min-width:1200px){.masonry{columns:4}}
.masonry figure{
  break-inside:avoid;margin-bottom:.7rem;position:relative;
  border-radius:.8rem;overflow:hidden;cursor:zoom-in;
  transition:opacity .35s ease, scale .35s ease;
}
@media(min-width:768px){.masonry figure{margin-bottom:1rem}}
.masonry figure.hide{display:none}
.masonry figure.dim{opacity:0;scale:.94}
.masonry img{width:100%;transition:scale .5s ease}
.masonry figure:hover img{scale:1.05}
.masonry figcaption{
  position:absolute;bottom:.5rem;inset-inline-start:.5rem;
  font-size:.7rem;font-weight:500;
  background:#171210cc;color:var(--sand);
  padding:.15rem .6rem;border-radius:999px;
  opacity:0;transition:.25s;
}
.masonry figure:hover figcaption{opacity:1}

/* ═════════ film roll — scroll scrub ═════════ */
.roll{height:340vh;background:var(--night)}
.roll-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;
}
.roll-sticky::before,.roll-sticky::after{ /* 35mm perforations */
  content:"";position:absolute;inset-inline:0;height:30px;z-index:3;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 14px, #d8cebd2e 14px 26px, transparent 26px 40px),
    var(--night);
  background-clip:content-box, border-box;
  padding-block:9px;
}
.roll-sticky::before{top:0;border-bottom:1px solid #d8cebd1f}
.roll-sticky::after{bottom:0;border-top:1px solid #d8cebd1f}
.roll-frames{position:absolute;inset:30px 0}
.rf{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.rf img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) brightness(.94);
  scale:1.08;
}
.rf.on{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .rf{transition:opacity .18s ease}
  .rf.on img{animation:rollken 5s linear forwards}
}
@keyframes rollken{from{scale:1.08}to{scale:1}}
.roll-flash{
  position:absolute;inset:30px 0;z-index:2;pointer-events:none;
  background:#f5efe4;opacity:0;
}
.roll-flash.go{animation:rollflash .32s ease-out}
@keyframes rollflash{0%{opacity:.55}100%{opacity:0}}
.roll-cap{
  position:absolute;bottom:calc(30px + 1.4rem);inset-inline-start:var(--pad);z-index:4;
  font-family:var(--font-disp);font-weight:700;
  font-size:clamp(1.7rem,7vw,3rem);line-height:1.5;
  color:var(--sand);text-shadow:0 4px 34px #000000cc;
}
.roll-cap.snap{animation:capsnap .45s cubic-bezier(.25,1,.4,1)}
@keyframes capsnap{
  0%{opacity:0;translate:0 16px;filter:blur(6px)}
  100%{opacity:1;translate:0 0;filter:blur(0)}
}
.roll-dots{
  position:absolute;bottom:calc(30px + 1.6rem);inset-inline-end:var(--pad);z-index:4;
  display:flex;gap:.55rem;
}
.roll-dots i{
  font-style:normal;font-size:.8rem;color:#d8cebd44;
  transition:color .25s, scale .25s;
}
.roll-dots i.on{color:var(--gold);scale:1.35;text-shadow:0 0 12px #c9a26288}
@media (prefers-reduced-motion: reduce){
  .roll{height:auto}
  .roll-sticky{position:static;height:auto;display:block}
  .roll-sticky::before,.roll-sticky::after{display:none}
  .roll-frames{position:static;inset:auto}
  .rf{position:static;opacity:1;aspect-ratio:4/5}
  .rf img{scale:1}
  .roll-flash,.roll-cap,.roll-dots{display:none}
}

/* ═════════ ghost calligraphy behind sections ═════════ */
.ghost{
  position:absolute;z-index:-1;top:.2em;inset-inline-start:-.1em;
  font-family:var(--font-disp);font-weight:700;
  font-size:clamp(5rem,26vw,13rem);line-height:1.4;
  white-space:nowrap;pointer-events:none;
  color:#d8cebd0a;
  will-change:translate;
}
@supports (-webkit-text-stroke:1px #000){
  .ghost{color:transparent;-webkit-text-stroke:1.5px #d8cebd14}
  .ghost-brick{-webkit-text-stroke:1.5px #a93b2e1c}
}
.ghost-brick{color:#a93b2e0d}

/* ═════════ astrolabe scroll dial ═════════ */
.orbit-dial{
  position:fixed;z-index:40;
  bottom:calc(1.1rem + env(safe-area-inset-bottom));
  inset-inline-end:1.1rem;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:#171210c4;border:1px solid #d8cebd2b;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--sand-dim);
  opacity:0;visibility:hidden;translate:0 14px;
  transition:opacity .4s ease, visibility .4s, translate .4s ease, color .25s, border-color .25s;
}
.orbit-dial.show{opacity:1;visibility:visible;translate:0 0}
.orbit-dial:hover{color:var(--brick-hot);border-color:#a93b2e77}
.orbit-dial svg{width:34px;height:34px;transition:rotate .15s linear}
.orbit-dial .ast-rings{animation:none}
.orbit-dial .ast-spark{animation:none}

/* ═════════ reels ═════════ */
.reel-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:62%;
  gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  padding-bottom:1rem;scrollbar-width:none;
}
.reel-rail::-webkit-scrollbar{display:none}
@media(min-width:640px){.reel-rail{grid-auto-columns:280px;justify-content:center}}
.reel{
  scroll-snap-align:center;position:relative;
  aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;
  background:var(--night-2);
  border:1px solid #ffffff10;
}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .snd{
  position:absolute;bottom:.7rem;inset-inline-end:.7rem;
  width:40px;height:40px;border-radius:50%;
  background:#171210b8;display:grid;place-items:center;font-size:1rem;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ═════════ about (mini) ═════════ */
.about-mini{
  display:grid;justify-items:center;gap:1.4rem;text-align:center;
}
.about-svg{width:min(34vw,150px);color:var(--brick)}
.about-line{
  font-family:var(--font-disp);
  font-size:clamp(1.25rem,4.6vw,1.9rem);
  color:var(--ink-on-sand);
  line-height:2;
  word-spacing:.4em;
}

/* ═════════ partners ═════════ */
.partner-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:70%;
  gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  padding-bottom:1rem;scrollbar-width:none;
}
.partner-rail::-webkit-scrollbar{display:none}
@media(min-width:640px){.partner-rail{grid-auto-columns:300px}}
.partner-rail img{
  scroll-snap-align:center;border-radius:var(--radius);
  aspect-ratio:9/16;object-fit:cover;width:100%;
  border:1px solid #ffffff12;
}

/* ═════════ contact ═════════ */
.contact{padding-bottom:clamp(4rem,10vw,7rem)}
.contact-card{
  position:relative;overflow:hidden;
  max-width:880px;margin-inline:auto;
  background:linear-gradient(150deg, var(--brick) 0%, #7e2a20 100%);
  border-radius:calc(var(--radius) * 1.6);
  padding:clamp(2.2rem,7vw,4rem);
  text-align:center;color:#f2e8d8;
  box-shadow:0 30px 80px -30px #a93b2e66;
}
.contact-mark{
  position:absolute;width:400px;color:#d8cebd14;
  top:-80px;inset-inline-end:-100px;pointer-events:none;
}
.contact-card h2{color:#f5efe4;position:relative;margin-bottom:1.5rem}
.contact-links{
  position:relative;
  display:grid;gap:.6rem;margin-top:2rem;
}
@media(min-width:640px){.contact-links{grid-template-columns:1fr 1fr}}
.contact-links a{
  display:flex;flex-direction:column;gap:.1rem;
  background:#00000026;border:1px solid #ffffff1c;
  border-radius:.9rem;padding:.8rem 1rem;transition:.2s;
}
.contact-links a:hover{background:#00000040;translate:0 -2px}
.contact-links span{font-size:.72rem;color:#e0cdb4;opacity:.8}
.contact-links b{font-weight:500;font-size:.95rem;overflow-wrap:anywhere}

/* ═════════ footer ═════════ */
.site-foot{
  border-top:1px solid #ffffff10;
  padding:4rem var(--pad) calc(3rem + env(safe-area-inset-bottom));
  display:grid;justify-items:center;
}
.foot-logo{width:clamp(130px,30vw,180px)}

/* ═════════ lightbox ═════════ */
.lightbox{
  border:none;background:transparent;
  width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;
  padding:0;
  display:none;
  place-items:center;
}
.lightbox[open]{display:grid}
.lightbox::backdrop{background:#171210f2}
.lightbox img{
  max-width:94vw;max-height:82dvh;
  border-radius:.7rem;
  box-shadow:0 20px 90px #000c;
}
.lb-close,.lb-nav{
  position:fixed;z-index:2;color:var(--sand);
  width:48px;height:48px;border-radius:50%;
  background:#ffffff12;display:grid;place-items:center;font-size:1.2rem;
  transition:.2s;
}
.lb-close:hover,.lb-nav:hover{background:#ffffff28}
.lb-close{top:1rem;inset-inline-end:1rem}
.lb-nav{top:50%;translate:0 -50%;font-size:1.8rem}
.lb-prev{inset-inline-start:.6rem}
.lb-next{inset-inline-end:.6rem}
.lb-cap{
  position:fixed;bottom:1.2rem;inset-inline:0;text-align:center;
  color:var(--sand-dim);font-size:.85rem;
}

/* ═════════ reveal on scroll ═════════ */
.reveal{opacity:0;translate:0 26px;transition:opacity .7s ease, translate .7s ease}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;translate:0 0;transition:none}
  html{scroll-behavior:auto}
}