/* =====================================================================
   HAMANDI INTERIORS - Presentation Engine
   styles.css  ·  matches the studio's own deck: Lato + Open Sans
   Condensed, pure black / white / grey. No client text lives here.
   ===================================================================== */

/* ----- Fonts (self-hosted, the studio's actual deck fonts) ----- */
@font-face{font-family:"Lato";font-weight:300;font-style:normal;font-display:swap;src:url("assets/fonts/lato-300.woff2") format("woff2");}
@font-face{font-family:"Lato";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/lato-400.woff2") format("woff2");}
@font-face{font-family:"Lato";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/lato-700.woff2") format("woff2");}
@font-face{font-family:"Lato";font-weight:900;font-style:normal;font-display:swap;src:url("assets/fonts/lato-900.woff2") format("woff2");}
@font-face{font-family:"Open Sans Condensed";font-weight:300;font-style:normal;font-display:swap;src:url("assets/fonts/osc-300.woff2") format("woff2");}
@font-face{font-family:"Open Sans Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/osc-700.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/ibmplexarabic-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/ibmplexarabic-600.woff2") format("woff2");}
@font-face{font-family:"Gumela Arabic";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/gumela-arabic.woff2") format("woff2");}

/* ----- Tokens (the deck's real palette) ----- */
:root{
  --bg:#000000;
  --ink:#ffffff;
  --grey:#7f7f7f;            /* the deck's exact secondary grey */
  --grey-soft:#9a9a9a;
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.08);

  --sans:"Lato","Helvetica Neue",Arial,sans-serif;
  --cond:"Open Sans Condensed","Lato",sans-serif;
  --arabic:"Gumela Arabic","IBM Plex Sans Arabic","Lato",sans-serif;

  --fs-display:clamp(1.9rem,4.4vw,3.1rem);
  --fs-title:clamp(1.55rem,3.2vw,2.5rem);
  --fs-num:clamp(1.5rem,3vw,2.2rem);
  --fs-lead:clamp(1rem,1.4vw,1.25rem);
  --fs-body:clamp(.92rem,1.05vw,1.05rem);
  --fs-label:clamp(.66rem,.85vw,.8rem);

  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:auto}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
::selection{background:#fff;color:#000}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ----- shared ----- */
.section{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(2.75rem,7vh,5rem) var(--pad);
  overflow:hidden;text-align:center;
}
.section--flush{padding:0}
.label{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--grey)}
.num{font-family:var(--cond);font-weight:300;font-size:var(--fs-num);letter-spacing:.04em;color:var(--ink);line-height:1}

/* progressive reveal (only active when GSAP is live) */
html.has-gsap .reveal{opacity:0;transform:translateY(22px)}
html.has-gsap .reveal-img{opacity:0;transform:scale(1.02)}

/* slide navigation: up/down (bottom-right), dots (mid-right), folio (bottom-left) */
.navwrap{position:fixed;right:clamp(.9rem,3vw,2.2rem);bottom:clamp(.9rem,3vw,2.2rem);z-index:85;display:flex;flex-direction:column;gap:.55rem}
.navbtn{width:clamp(44px,7.5vw,52px);height:clamp(44px,7.5vw,52px);border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;color:#fff;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s,transform .3s var(--ease)}
.navbtn:hover{background:#fff;color:#000;transform:translateY(-1px)}
.navbtn svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.navbtn.is-off{opacity:.28;pointer-events:none}
.dots{position:fixed;right:clamp(.55rem,1.8vw,1.3rem);top:50%;transform:translateY(-50%);z-index:85;display:flex;flex-direction:column;gap:.65rem;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.45);box-shadow:0 0 3px rgba(0,0,0,.6);transition:background .3s,transform .3s}
.dot:hover{background:rgba(255,255,255,.85)}
.dot.is-active{background:#fff;transform:scale(1.6)}
.pageno{position:fixed;left:clamp(1rem,3.5vw,2.4rem);bottom:clamp(1.25rem,3.7vw,2.75rem);z-index:85;font-family:var(--cond);font-weight:300;font-size:clamp(.82rem,1.4vw,1rem);letter-spacing:.18em;color:var(--grey);display:flex;gap:.45em;align-items:baseline}
.pageno b{font-weight:700;color:#fff}

/* on-screen instructions (Arabic) - plain red so they stand out clearly */
.glossy-red{color:#ff2d2d;font-weight:400;font-family:var(--arabic);direction:rtl;letter-spacing:0;text-transform:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* logo images (white, transparent) */
.logo{display:block;width:auto;height:auto}

/* =====================================================================
   COVER
   ===================================================================== */
.cover{justify-content:center}
.cover__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.cover__bg img,.cover__bg video{width:100%;height:100%;object-fit:cover;will-change:transform}
.kenburns{animation:kenburns 28s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.16) translate3d(-2%,-1.4%,0)}}
.cover__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.35) 35%,rgba(0,0,0,.8))}
.cover__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,4vh,2.4rem);width:100%}
.cover__logo{width:min(420px,64vw);opacity:.98}
.cover__client{font-family:var(--sans);font-weight:300;font-size:var(--fs-display);letter-spacing:.01em;line-height:1.1}
.cover__sub{font-family:var(--sans);font-weight:700;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--grey);margin-top:.55em}
.cover__meta{
  position:absolute;left:0;right:0;bottom:clamp(3.6rem,9vh,5rem);z-index:2;
  display:flex;justify-content:center;align-items:center;gap:.6em;flex-wrap:wrap;
  padding-inline:calc(var(--pad) + 3.5rem);color:var(--grey);font-size:var(--fs-label);letter-spacing:.04em;
}
.cover__meta b{font-weight:900;color:var(--ink);letter-spacing:.12em}
.cover__meta .sep{opacity:.6}
.cover__help{position:absolute;left:0;right:0;bottom:clamp(6.5rem,15vh,9rem);z-index:2;text-align:center;padding-inline:calc(var(--pad) + 3.2rem);font-family:var(--arabic);direction:rtl;font-size:clamp(.85rem,1.7vw,1.05rem);letter-spacing:0;line-height:1.7}

/* =====================================================================
   BRAND DIVIDER
   ===================================================================== */
.divider{background:#000}
.divider__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.divider__bg img{width:100%;height:100%;object-fit:cover;opacity:.16}
.divider__scrim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.55)}
.divider__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(2rem,6vh,3.4rem)}
.divider__brand{width:min(440px,72vw)}
.divider__lock{display:flex;flex-direction:column;align-items:center;gap:1rem}
.divider__by{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.18em;text-transform:lowercase;color:var(--grey)}
.divider__hamandi{width:min(240px,46vw)}

/* =====================================================================
   SECTION INTRO  (numbered opener)  +  ROOM SHOWCASE
   ===================================================================== */
.intro,.room{background:#000}
.room__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.room__bg img{width:100%;height:100%;object-fit:cover;opacity:.2}
.room__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.6),rgba(0,0,0,.82))}
.stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(.9rem,2.4vh,1.5rem)}
.intro__title,.room__title{font-family:var(--sans);font-weight:300;font-size:var(--fs-title);letter-spacing:.02em;line-height:1.12}
.intro__option,.room__brand{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--grey)}
.intro__palette{display:flex;align-items:center;justify-content:center;gap:.9em;flex-wrap:wrap;margin-top:.7rem}
.intro__palette span{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.intro__palette i{width:4px;height:4px;border-radius:50%;background:var(--grey);font-style:normal}
.intro__price{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:clamp(1.4rem,3.5vh,2.4rem);padding-top:clamp(1.1rem,3vh,1.8rem);border-top:1px solid var(--line)}
.intro__price-label{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--grey)}
.intro__price-amount{font-family:var(--sans);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:.02em;color:var(--ink)}

/* =====================================================================
   MOODBOARD  (the composite flatlay, exactly like the deck slide)
   ===================================================================== */
.mood{background:#000;gap:clamp(1rem,2.8vh,1.8rem);padding-block:clamp(2.5rem,6vh,4.5rem)}
.mood__head{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.mood__title{font-family:var(--sans);font-weight:300;font-size:var(--fs-title);letter-spacing:.02em}
.mood__sub{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--grey)}
.mood__board{display:flex;justify-content:center;width:100%}
/* the whole board fits within one screen (heading + image) */
.mood__board img{width:auto;height:auto;max-width:min(1000px,92vw);max-height:60svh;display:block}

/* single full-screen photo per slide - whole image, no crop / no stretch / no slider */
.photo{background:#000;padding:clamp(1rem,2.5vh,2rem) clamp(.6rem,2vw,1.5rem)}
.photo__frame{display:flex;justify-content:center;width:100%}
.photo__frame img{max-width:100%;max-height:86svh;width:auto;height:auto;object-fit:contain;display:block}
.photo__cap{position:absolute;left:0;right:0;top:0;z-index:2;text-align:center;padding:clamp(1rem,3vh,2rem);font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--grey-soft)}

/* both moodboards on a single slide (side by side on web, stacked on phone) */
.moodpair{background:#000;gap:clamp(1rem,3vh,2rem);padding-block:clamp(2.25rem,5vh,3.5rem)}
.moodpair__head{display:flex;justify-content:center}
.moodpair__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3rem);align-items:start;justify-items:center;width:100%;max-width:1100px}
.mb{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.mb__img{display:flex;justify-content:center;width:100%}
.mb__img img{width:auto;height:auto;max-width:100%;max-height:56svh;object-fit:contain;display:block}
.mb__cap{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center}
.mb__name{font-family:var(--sans);font-weight:300;font-size:clamp(1rem,1.8vw,1.4rem)}
.mb__sub{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--grey)}
@media (max-width:760px){
  .moodpair__grid{grid-template-columns:1fr;gap:1rem;max-width:430px}
  .mb__img img{max-height:32svh}
}

/* =====================================================================
   GALLERY  (stack / fullbleed / split)
   ===================================================================== */
.gallery{padding-block:0}
.gallery--stack{padding:clamp(4rem,10vh,8rem) var(--pad);gap:clamp(2.6rem,8vh,6rem);display:flex;flex-direction:column;align-items:center}
.gallery--split{padding:clamp(4rem,10vh,8rem) var(--pad);gap:clamp(2.4rem,7vh,5rem);display:flex;flex-direction:column;align-items:stretch}

/* fullbleed */
.shot{position:relative;width:100%;height:100svh;overflow:hidden;background:#000}
.shot img,.shot video{width:100%;height:100%;object-fit:cover}
.shot__cap{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(1.2rem,4vw,2.6rem);text-align:left;display:flex;flex-direction:column;gap:.3rem}
.shot__cap::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.65),transparent)}
.shot__t{font-family:var(--sans);font-weight:400;font-size:clamp(1.1rem,2vw,1.6rem)}
.shot__s{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--grey-soft)}

/* stack */
.plate{width:100%;max-width:1080px;display:flex;flex-direction:column;gap:.9rem}
.plate__frame{overflow:hidden;background:#0b0b0b}
.plate__frame img{width:100%;height:auto;display:block}
.plate__frame.is-portrait{max-height:86svh;width:auto;margin-inline:auto}
.plate__frame.is-portrait img{height:86svh;width:auto}
.plate__cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;text-align:left}
.plate__t{font-family:var(--sans);font-weight:400;font-size:clamp(1.05rem,1.8vw,1.45rem)}
.plate__s{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}

/* split */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;text-align:left}
.duo:nth-child(even){grid-template-columns:1fr 1fr}
.duo__img{overflow:hidden;background:#0b0b0b}
.duo__img img{width:100%;height:100%;object-fit:cover;max-height:82svh}
.duo__txt{display:flex;flex-direction:column;gap:.5rem}
.duo:nth-child(even) .duo__txt{order:-1}
.duo__t{font-family:var(--sans);font-weight:300;font-size:var(--fs-title);line-height:1.1}
.duo__d{font-family:var(--sans);color:var(--grey);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase}
@media (max-width:760px){
  .duo,.duo:nth-child(even){grid-template-columns:1fr}
  .duo:nth-child(even) .duo__txt{order:0}
}

/* =====================================================================
   COMPARE SLIDER
   ===================================================================== */
.compare{gap:clamp(.7rem,2vh,1.3rem);padding-block:clamp(1.75rem,4.5vh,3rem)}
.compare__head{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.compare__title{font-family:var(--sans);font-weight:300;font-size:clamp(1.05rem,2.1vw,1.5rem)}
.compare__hint{font-family:var(--arabic);direction:rtl;font-size:clamp(.85rem,1.8vw,1.1rem);letter-spacing:0;text-transform:none;line-height:1.6}
/* one slider per slide, sized to fit width (phones) AND height (web) with no stretch */
.cmp{position:relative;margin-inline:auto;user-select:none;-webkit-user-select:none;touch-action:pan-y;background:#000;overflow:hidden;--pos:50%;--maxh:72svh;
  width:min(100%,calc(var(--maxh) * var(--ar,1.79)));aspect-ratio:var(--ar,1.79)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-drag:none;pointer-events:none}
.cmp__after{z-index:1}
.cmp__before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp__tag{position:absolute;bottom:1rem;z-index:4;font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;padding:.4em .85em;background:rgba(0,0,0,.5);color:#fff;pointer-events:none}
.cmp__tag--l{left:1rem}
.cmp__tag--r{right:1rem}
.cmp__handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;width:1px;background:#fff;transform:translateX(-50%)}
.cmp__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid #fff;backdrop-filter:blur(3px);display:grid;place-items:center;cursor:ew-resize}
.cmp__grip::before,.cmp__grip::after{content:"";position:absolute;width:0;height:0;border-block:5px solid transparent}
.cmp__grip::before{left:12px;border-right:6px solid #fff}
.cmp__grip::after{right:12px;border-left:6px solid #fff}
.cmp.is-drag .cmp__grip{background:#fff}
.cmp.is-drag .cmp__grip::before{border-right-color:#000}
.cmp.is-drag .cmp__grip::after{border-left-color:#000}

/* =====================================================================
   CLOSING
   ===================================================================== */
.closing{background:#000}
/* ---- non-video closing (kept for template reuse) ---- */
.closing__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.closing__bg img{width:100%;height:100%;object-fit:cover;opacity:.14;animation:kenburns 32s var(--ease) infinite alternate}
.closing__scrim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.7)}
.closing__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(1.8rem,5vh,3rem)}
.closing__logo{width:min(420px,64vw)}
.closing__msg{font-family:var(--sans);font-weight:900;font-size:clamp(1.5rem,3.6vw,2.6rem);letter-spacing:.3em;text-transform:uppercase;text-indent:.3em}

/* =====================================================================
   CLOSING FILM (video): the text is anchored to the VIDEO band via a
   self-letterboxing 16:9 stage, so the logo + THANK YOU sit in the top
   negative space (never on the sofa) identically on phone and web. The
   lockup pops in quickly (transform + opacity only) the instant the
   film ends; the film holds on its final Camaleonda frame.
   ===================================================================== */
.section.closing--video{padding:0;background:#000}   /* beat the phone .section side-padding so the film fills full width */
.closing--video .closing__stage{
  position:relative;margin:auto;background:#000;
  width:min(100%, calc(100svh * 16 / 9));   /* largest 16:9 box that fits: contain, no crop (100% avoids scrollbar offset) */
  aspect-ratio:16 / 9;
  isolation:isolate;                         /* own stacking context: the animated lockup can't perturb the film layer */
}
/* film layer: clipped + paint-contained + isolated so the video's GPU quad cannot
   ghost / trail sideways during the scroll transition (Chromium desktop + iOS Safari) */
.closing--video .closing__media{
  position:absolute;inset:0;z-index:0;overflow:hidden;contain:paint;isolation:isolate;background:#000;
}
.closing--video .closing__video,
.closing--video .closing__last{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;background:#000;   /* stage AR == video AR, so cover == no crop; centered */
  transform:translateZ(0);                                    /* stable, self-contained compositing layer */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.closing--video .closing__last{opacity:0}   /* final-frame still: shown only if the film cannot play */
.closing--fallback .closing__video{opacity:0}
.closing--fallback .closing__last{opacity:1}
/* top gradient scrim: confined to the black sky, fades to nothing well above the sofa (~42%) */
.closing--video .closing__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 22%,rgba(0,0,0,0) 42%);
}
/* logo + THANK YOU lockup: top negative-space band, centered on the sofa's axis */
.closing--video .closing__lockup{
  position:absolute;z-index:3;top:20%;left:50%;transform:translate(-50%,-50%);
  isolation:isolate;                 /* keep the animated title on its own layer, away from the film */
  width:min(560px,76vw);display:flex;flex-direction:column;align-items:center;
  gap:clamp(.6rem,2.2vh,1.25rem);text-align:center;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;   /* hidden until the film ends */
}
.closing--video .closing__lockup.is-done{opacity:1;visibility:visible}
.closing--video .closing__logo{width:clamp(150px,44%,300px)}
.closing--video .closing__msg{
  font-family:var(--sans);font-weight:600;line-height:1.1;text-transform:uppercase;
  font-size:clamp(1.1rem,2.9vw,2.15rem);letter-spacing:.34em;text-indent:.34em;
}
/* quick, premium entrance: compositor-only (transform+opacity), ~400ms, tiny stagger */
.closing--video .closing__lockup.is-done .closing__logo{animation:closingRise .40s cubic-bezier(.16,1,.3,1) both}
.closing--video .closing__lockup.is-done .closing__msg{animation:closingRise .40s cubic-bezier(.16,1,.3,1) .075s both}
@keyframes closingRise{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.99)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
/* portrait phone: the 16:9 band is a thin strip whose sky is too small to hold the
   lockup, so seat the title in the black letterbox bar just ABOVE the band (seamless
   black, always clear of the sofa). Anchored to the band top so it holds on any phone. */
@media (max-width:640px){
  .closing--video .closing__lockup{
    top:0;left:50%;transform:translate(-50%,calc(-100% - 3vh));
    width:84vw;gap:.5rem;
  }
  .closing--video .closing__logo{width:clamp(128px,52%,190px)}
  .closing--video .closing__msg{letter-spacing:.28em;text-indent:.28em}
  .closing--video .closing__scrim{background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 24%,rgba(0,0,0,0) 44%)}
}

/* =====================================================================
   PRICING (summary of both kitchens, just before the close)
   ===================================================================== */
.pricing{flex-direction:column;text-align:center}
.pricing__title{font-family:var(--sans);font-weight:400;font-size:var(--fs-label);letter-spacing:.4em;text-transform:uppercase;color:var(--grey);margin-bottom:clamp(1.1rem,3.6vh,3.4rem)}
.pricing__list{width:min(640px,90vw);display:flex;flex-direction:column;gap:0}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;padding:clamp(.5rem,1.6vh,1.7rem) 0;border-top:1px solid var(--line);text-align:left}
.price-row:last-child{border-bottom:1px solid var(--line)}
.price-row__label{font-family:var(--sans);font-weight:300;font-size:min(clamp(1.05rem,2.6vw,1.5rem),2.4vh);letter-spacing:.02em;color:var(--ink);line-height:1.4}
.price-row__amount{font-family:var(--sans);font-weight:400;font-size:min(clamp(1.15rem,3vw,1.7rem),2.7vh);letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.pricing__note{margin-top:clamp(1.4rem,4vh,2.4rem);font-family:var(--sans);font-weight:300;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
/* secondary tier: the appliances. Anchored under the two kitchen figures, set visibly smaller and
   greyer (magnitude-size congruency: a physically smaller price reads as a smaller amount), tighter
   rows and hairline dividers so the block occupies less of the slide, currency sign shrunk. */
.price-group{font-family:var(--sans);font-weight:400;font-size:clamp(.6rem,.75vw,.72rem);letter-spacing:.32em;text-transform:uppercase;color:var(--grey);text-align:left;
  padding:clamp(.8rem,2.4vh,1.5rem) 0 clamp(.3rem,.9vh,.55rem);border-top:1px solid var(--line)}
.price-row--minor{padding:clamp(.26rem,.8vh,.55rem) 0;border-top:1px solid var(--line-soft);gap:1rem;align-items:baseline}
.price-row--minor .price-row__label{font-size:min(clamp(.8rem,1.65vw,1rem),1.7vh);color:var(--grey-soft);font-weight:300;letter-spacing:.01em;line-height:1.35}
.price-row--minor .price-row__amount{font-size:min(clamp(.8rem,1.65vw,1rem),1.7vh);color:var(--grey-soft);font-weight:300;letter-spacing:.01em}
.price-row--minor .cur{font-size:.78em;opacity:.75;margin-right:.06em}
.price-row--minor:last-child{border-bottom:1px solid var(--line)}
.price-row--free .price-row__amount{color:var(--ink);font-weight:400}   /* "Included": the one line that should feel like a gift */


/* =====================================================================
   ZOOM: on-slide hint + full-screen zoom viewer (lightbox)
   ===================================================================== */
img.is-zoomable{cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.photo__hint{position:absolute;left:0;right:0;bottom:clamp(1.05rem,3.2vh,2.2rem);z-index:2;text-align:center;
  padding-inline:calc(var(--pad) + 3.2rem);font-family:var(--arabic);direction:rtl;font-size:clamp(.8rem,1.5vw,.98rem);line-height:1.6;pointer-events:none}
.mood .photo__hint{bottom:clamp(.7rem,2vh,1.4rem)}
/* keep the picture clear of the bottom hint on every viewport */
.photo__frame img{max-height:82svh}
.mood__board img{max-height:58svh}

body.lb-open{overflow:hidden;touch-action:none}
.lb{position:fixed;inset:0;z-index:200;background:#000;display:none;align-items:center;justify-content:center;overflow:hidden;
  touch-action:none;-webkit-user-select:none;user-select:none;cursor:default;overscroll-behavior:contain}
.lb.is-open{display:flex}
.lb__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:50% 50%;will-change:transform;
  -webkit-user-drag:none;user-drag:none;cursor:zoom-in}
.lb.is-zoomed .lb__img{cursor:grab}
.lb__close{position:absolute;top:max(.75rem,env(safe-area-inset-top));right:max(.75rem,env(safe-area-inset-right));z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,color .25s}
.lb__close:hover{background:#fff;color:#000}
.lb__close svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lb__zoom{position:absolute;left:50%;transform:translateX(-50%);top:max(.85rem,env(safe-area-inset-top));z-index:3;display:flex;align-items:center;gap:.35rem;
  padding:.25rem .35rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb__zbtn{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:#fff;font:400 1.25rem/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.lb__zbtn:hover{background:rgba(255,255,255,.18)}
.lb__zval{min-width:3.4em;text-align:center;font-family:var(--cond);font-weight:300;font-size:.9rem;letter-spacing:.12em;color:#fff}
.lb__help{position:absolute;left:0;right:0;bottom:max(1rem,env(safe-area-inset-bottom));z-index:3;text-align:center;padding-inline:1.25rem;
  font-family:var(--arabic);direction:rtl;font-size:clamp(.8rem,1.5vw,.98rem);line-height:1.6;pointer-events:none;transition:opacity .3s}
.lb.is-zoomed .lb__help{opacity:0}
@media (max-width:600px){
  .lb__zoom{top:auto;bottom:max(3.1rem,calc(env(safe-area-inset-bottom) + 2.6rem))}
}

/* phones: four price rows must sit above the up/down buttons and the folio, on one screen */
@media (max-width:600px){
  .pricing{padding-top:clamp(1.4rem,3.5vh,2.4rem);padding-bottom:6.2rem}   /* bottom = nav/folio zone */
  .pricing__title{margin-bottom:clamp(.8rem,2vh,1.4rem)}
  .price-row{padding:clamp(.4rem,1.2vh,.8rem) 0;gap:.9rem}
  .price-row__label{font-size:clamp(.82rem,3.6vw,1rem);line-height:1.3}
  .price-row__amount{font-size:clamp(.92rem,4vw,1.1rem)}
  .price-group{padding-top:clamp(.7rem,1.8vh,1.1rem)}
  .price-row--minor{padding:clamp(.22rem,.7vh,.4rem) 0;gap:.8rem}
  .price-row--minor .price-row__label,.price-row--minor .price-row__amount{font-size:clamp(.68rem,2.9vw,.8rem);line-height:1.3}
}
/* very narrow phones (<=400px): keep the price table clear of the dots column and the
   footnote clear of the up/down buttons */
@media (max-width:400px){
  .pricing__list{width:80vw;margin-right:8vw}
  .price-row{gap:.9rem}
  .price-row__amount{font-size:clamp(1rem,4.6vw,1.2rem)}
  .pricing__note{padding-inline:2.5rem 4.5rem;margin-top:clamp(1rem,3vh,1.6rem)}
}

/* =====================================================================
   Photo / moodboard slides must clear the fixed UI (up/down buttons bottom-right,
   dots right, folio bottom-left) on every device. Portrait phones + tablets: the
   picture hangs from just under the caption and stops above the button zone.
   ===================================================================== */
:root{--navzone:calc(clamp(.9rem,3vw,2.2rem) + 2*clamp(44px,7.5vw,52px) + .55rem)}   /* height of the up/down button stack incl. its bottom offset */
@media (max-width:1024px) and (orientation:portrait){
  /* top offset = the caption block (its padding x2 + one line) + breathing room, so they never touch */
  .photo{justify-content:flex-start;padding-top:calc(2*clamp(1rem,3vh,2rem) + 1.7rem);padding-bottom:calc(var(--navzone) + .7rem)}
  .photo__frame img{max-height:calc(100svh - 2*clamp(1rem,3vh,2rem) - 1.7rem - var(--navzone) - .7rem)}
  /* a wide (landscape) render is short on a portrait phone: centre it in the safe area instead of hanging it under the caption */
  .photo--landscape{justify-content:center}
  .mood{justify-content:flex-start;padding-top:clamp(2rem,4.5vh,3rem);padding-bottom:calc(var(--navzone) + .7rem);gap:clamp(.8rem,2vh,1.4rem)}
  .mood__board img{max-width:min(1000px,84vw);max-height:calc(100svh - 7.6rem - var(--navzone) - .7rem)}
}
/* phone held sideways (short landscape): tighten everything so it still fits one screen */
@media (max-height:480px) and (orientation:landscape){
  .photo{justify-content:flex-start;padding-top:2.3rem;padding-bottom:2.6rem}
  .photo__cap{padding:.55rem}
  .photo__frame img{max-height:calc(100svh - 2.3rem - 2.6rem);max-width:min(100%,calc(100vw - 8.5rem))}
  .photo__hint,.mood .photo__hint{bottom:.35rem;font-size:.72rem;padding-inline:4.5rem}
  .mood{padding-block:.9rem 2.2rem;gap:.35rem}
  .mood__head{gap:.15rem}
  .mood__title{font-size:1.05rem}
  .mood__board img{max-height:calc(100svh - 6.4rem)}
  .moodpair__grid .mb__img img{max-height:40svh}
  .pricing{padding-top:1.2rem;padding-bottom:2.4rem}
  .pricing__title{margin-bottom:.5rem}
  .pricing__list{width:min(640px,74vw);margin-right:9vw}
  .price-row{padding:.28rem 0}
  .price-group{padding:.45rem 0 .15rem}
  .price-row--minor{padding:.16rem 0}
  .cover__help{bottom:4.6rem;font-size:.72rem}
  .cover__meta{bottom:1.9rem}
  .intro,.divider{padding-block:1.5rem}
}

/* wide (landscape) renders on laptops/desktops must stop short of the dots + up/down buttons on the right
   and keep the same clearance on the left for balance */
@media (orientation:landscape) and (min-width:1025px){
  .photo__frame img{max-width:calc(100% - 2*(clamp(.9rem,3vw,2.2rem) + clamp(44px,7.5vw,52px) + .8rem))}
}

/* Netlify's free-plan "Powered by Netlify" badge is injected as a fixed iframe bottom-right, exactly
   over the up/down arrows. Park it top-left (empty on every slide) and drop it under our UI layers;
   hide it entirely while the zoom viewer is open. No-op on Cloudflare, where it does not exist. */
#nl-hud-frame,#nl-badge-frame,iframe[id^="nl-"]{
  top:max(.6rem,env(safe-area-inset-top))!important;left:max(.6rem,env(safe-area-inset-left))!important;
  bottom:auto!important;right:auto!important;z-index:80!important;opacity:.85}
body.lb-open #nl-hud-frame,body.lb-open #nl-badge-frame,body.lb-open iframe[id^="nl-"]{display:none!important}
/* the badge iframe is ~197x64: on phones that reaches the slide caption, so scale it down at the corner */
@media (max-width:760px){
  #nl-hud-frame,#nl-badge-frame,iframe[id^="nl-"]{transform:scale(.6)!important;transform-origin:top left!important;opacity:.75}
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .kenburns,.closing__bg img{animation:none}
  html.has-gsap .reveal,html.has-gsap .reveal-img{opacity:1;transform:none}
  .closing--video .closing__lockup.is-done .closing__logo,
  .closing--video .closing__lockup.is-done .closing__msg{animation:none;opacity:1;transform:none}
}

/* =====================================================================
   Phone polish
   ===================================================================== */
@media (max-width:600px){
  .section{padding-left:clamp(1.1rem,5vw,2rem);padding-right:clamp(1.1rem,5vw,2rem)}
  .intro__palette{gap:.7em}
  .shot__cap{padding:1.1rem}
  /* keep room for the heading + hint + nav under a full-width slider */
  .cmp{--maxh:62svh}
}
/* on phones, show the full transition frame (don't crop the 16:9 morph).
   Uses a JS-applied .has-video class (not :has()) for old-Safari support. */
@media (max-width:760px){
  .shot.has-video{height:auto;min-height:0;display:flex;align-items:center;background:#000;padding-block:14svh}
  .shot.has-video .shot__video{height:auto;aspect-ratio:16/9;object-fit:cover}
}
/* compare-slider stone labels must never clip on narrow phones */
@media (max-width:600px){
  .cmp__tag{font-size:clamp(.5rem,2.4vw,.62rem);letter-spacing:.08em;padding:.32em .55em;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmp__tag--l{left:.6rem}
  .cmp__tag--r{right:.6rem}
  .cmp__tag{bottom:.6rem}
}