/* =========================================================
   STONE MASON — motion layer
   Loaded after style.css. Everything here is additive.
   ========================================================= */

/* ---------------------------------------------------------
   0 · smooth scroll (Lenis) + reveal primitives
   --------------------------------------------------------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* text that rises in, line by line */
.rise{display:block;overflow:hidden}
.rise > *{display:block;will-change:transform,opacity}

/* image that wipes open */
.wipe{overflow:hidden;position:relative}
/* the parallax below drifts the media down 7%, which would uncover the frame
   at the top. Give it headroom at both ends so it always covers. */
.wipe > img,.wipe > video{
  will-change:transform;
  position:absolute;top:-14%;left:0;width:100%;height:128%;object-fit:cover;
}

/* =========================================================
   1 · HERO — slogan + search
   ========================================================= */
.hero{padding-top:186px}
.hero-slogan{
  text-align:center;position:relative;z-index:3;pointer-events:none;
  margin:0 auto;max-width:1180px;padding:0 var(--pad);
}
.hero-slogan .script{
  display:block;font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(34px,5.6vw,86px);line-height:1.02;letter-spacing:-.01em;
  color:var(--navy);
}
.hero-slogan .solid{
  display:block;font-family:var(--font-serif);font-weight:500;text-transform:uppercase;
  font-size:clamp(40px,8.4vw,128px);line-height:.94;letter-spacing:-.018em;
  color:var(--navy);margin-top:.04em;
}

/* the search bar — full pill, wide, sits above the film */
.hero-search{
  position:relative;z-index:4;
  width:min(1040px,calc(100% - var(--pad)*2));
  margin:52px auto 0;
}
.search-shell{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 8px 6px 32px;
  box-shadow:0 18px 50px -24px rgba(13,25,57,.34), 0 2px 8px -4px rgba(13,25,57,.12);
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
.search-shell:focus-within{
  border-color:rgba(13,25,57,.35);
  box-shadow:0 26px 70px -28px rgba(13,25,57,.46), 0 3px 10px -4px rgba(13,25,57,.16);
}
.search-shell input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--font);font-size:16px;font-weight:400;color:var(--navy);
  padding:18px 16px 18px 0;letter-spacing:.005em;
}
.search-shell input::placeholder{color:var(--ink-55);font-weight:300}
.search-go{
  flex:0 0 auto;border:0;cursor:pointer;background:transparent;
  color:var(--navy);width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  transition:background .35s var(--ease),color .35s var(--ease);
}
/* hairline divider before the glyph, as in the reference */
.search-go::before{
  content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:1px;height:26px;background:var(--line);
}
.search-go:hover{background:var(--navy);color:#fff}
.search-go:hover::before{background:transparent}
.search-go:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.search-tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:20px;
}
.search-tags span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);margin-right:4px}
.search-tags a{
  font-size:12px;font-weight:500;color:var(--ink-70);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.search-tags a:hover{border-color:var(--navy);color:var(--navy);background:rgba(13,25,57,.04)}

.hero-media{margin-top:64px}

/* =========================================================
   2 · SECTION TITLE — script over uppercase (Privy pairing)
   ========================================================= */
.duo-title{text-align:center}
.duo-title .script{
  display:block;font-family:var(--font);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.6vw,40px);line-height:1.1;letter-spacing:-.01em;
}
.duo-title .solid{
  display:block;font-family:var(--font);font-weight:500;text-transform:uppercase;
  font-size:clamp(34px,5.6vw,86px);line-height:1;letter-spacing:.005em;margin-top:.02em;
}

/* =========================================================
   3 · FILMSTRIP  (reference: animation 2)
   pinned centre title, panels travelling a curved path
   ========================================================= */
.strip{
  --strip-bg:#0D1939;          /* brand navy */
  position:relative;background:var(--strip-bg);color:#fff;
  height:100vh;overflow:hidden;
}
.strip-stage{
  position:absolute;inset:0;
  display:flex;align-items:center;
  perspective:1600px;perspective-origin:50% 50%;
}
.strip-track{
  display:flex;align-items:center;gap:60px;
  padding:0 42vw;will-change:transform;transform-style:preserve-3d;
}
.strip-card{
  position:relative;flex:0 0 clamp(300px,34vw,560px);
  will-change:transform,opacity;
}
.strip-card-media{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a1230;
  box-shadow:0 34px 80px -46px rgba(0,0,0,.9),
             inset 0 0 0 1px rgba(255,255,255,.07);
}
.strip-card img{width:100%;height:100%;object-fit:cover;display:block}
.strip-title{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-align:center;mix-blend-mode:normal;
}
.strip-title .script,.strip-title .solid{
  text-shadow:0 6px 40px rgba(6,12,32,.7);
}
.strip-lede{
  position:absolute;left:50%;transform:translateX(-50%);bottom:56px;z-index:4;
  max-width:560px;text-align:center;font-size:14px;line-height:1.75;
  color:rgba(255,255,255,.72);padding:0 24px;
}
/* edge vignette, like the curved stage in the reference */
.strip::before,.strip::after{
  content:"";position:absolute;top:0;bottom:0;width:22vw;z-index:2;pointer-events:none;
}
.strip::before{left:0;background:linear-gradient(to right,var(--strip-bg) 6%,rgba(6,11,26,0))}
.strip::after{right:0;background:linear-gradient(to left,var(--strip-bg) 6%,rgba(6,11,26,0))}

/* =========================================================
   4 · CATEGORY SLIDES  (reference: animation 3)
   full-bleed frames, vertical slice transition, sliding labels
   ========================================================= */
.cats{position:relative;height:100vh;overflow:hidden;background:var(--navy)}
.cat{position:absolute;inset:0;will-change:clip-path}
.cat-img{position:absolute;inset:0;overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.cat::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,12,32,.86) 0%,rgba(6,12,32,.28) 42%,rgba(6,12,32,.10) 70%);
}
.cat-meta{
  position:absolute;left:0;right:0;bottom:11vh;z-index:3;text-align:center;color:#fff;
  padding:0 var(--pad);
}
.cat-eyebrow{
  display:block;font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:18px;
}
.cat-name{
  display:block;overflow:hidden;
}
.cat-name span{
  display:block;font-family:var(--font);font-weight:300;text-transform:uppercase;
  font-size:clamp(38px,7.4vw,112px);line-height:1;letter-spacing:.01em;
  will-change:transform;
}
.cat-count{
  display:block;margin-top:20px;font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.cats-rail{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:4;
  display:grid;gap:12px;
}
.cats-rail i{
  display:block;width:2px;height:28px;background:rgba(255,255,255,.26);
  position:relative;overflow:hidden;
}
.cats-rail i b{position:absolute;inset:0;background:#fff;transform:scaleY(0);transform-origin:top}

/* =========================================================
   5 · HANDPICKED — stills breathe in and out in place.
   No z-flight: the previous version read as a slide transition.
   ========================================================= */
.fly{position:relative;height:100vh;overflow:hidden;background:#fff;color:var(--navy)}
.fly-stage{position:absolute;inset:0}
.fly-item{
  position:absolute;overflow:hidden;
  background:var(--ivory-2);will-change:opacity,transform,filter;
  box-shadow:0 30px 80px -46px rgba(13,25,57,.34);
  opacity:0;
}
.fly-item img{width:100%;height:100%;object-fit:cover;display:block}
/* each still has its own resting place, so nothing ever collides with the word */
.fly-item:nth-child(1){left:6%;  top:12%; width:23vw; aspect-ratio:4/5}
.fly-item:nth-child(2){right:7%; top:9%;  width:26vw; aspect-ratio:3/2}
.fly-item:nth-child(3){left:15%; bottom:8%;width:21vw; aspect-ratio:4/3}
.fly-item:nth-child(4){right:11%;bottom:11%;width:24vw;aspect-ratio:5/4}
.fly-item:nth-child(5){left:3%;  top:40%; width:18vw; aspect-ratio:3/4}
.fly-item:nth-child(6){right:3%; top:44%; width:19vw; aspect-ratio:4/5}
.fly-item:nth-child(7){left:29%; top:4%;  width:20vw; aspect-ratio:3/2}
.fly-item:nth-child(8){right:28%;bottom:4%;width:20vw;aspect-ratio:3/2}
.fly-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(to top,rgba(6,12,32,.82),rgba(6,12,32,0));
  display:grid;gap:3px;color:#fff;
}
.fly-item figcaption b{font-size:14px;font-weight:500;letter-spacing:-.01em}
.fly-item figcaption i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.fly-copy{
  position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);z-index:5;
  max-width:300px;
}
.fly-copy p{
  font-size:12px;line-height:2.1;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-55);
}
.fly-word{
  position:absolute;left:0;right:0;top:50%;z-index:4;text-align:center;
  transform:translateY(-50%);pointer-events:none;
}
.fly-lead{
  display:block;font-family:var(--font);font-weight:300;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,72px);line-height:1;letter-spacing:.005em;color:var(--navy);
  text-shadow:0 2px 26px rgba(255,255,255,.95), 0 0 60px rgba(255,255,255,.8);
}
.fly-sub{
  display:block;margin-top:4px;font-family:var(--font);font-weight:300;
  font-size:clamp(22px,3vw,46px);line-height:1.05;letter-spacing:-.01em;color:var(--navy);
  text-shadow:0 2px 26px rgba(255,255,255,.95), 0 0 60px rgba(255,255,255,.8);
}

/* =========================================================
   6 · RESPONSIVE
   ========================================================= */
@media (max-width:991px){
  .hero{padding-top:140px}
  .hero-search{margin-top:38px}
  .search-shell{padding:7px 7px 7px 22px}
  .search-shell input{font-size:15px;padding:14px 0}
  .search-go{padding:14px 24px;font-size:10px}
  .hero-media{margin-top:44px}
  .strip{height:auto;padding:80px 0}
  .strip-stage{position:static;display:block;perspective:none}
  .strip-track{gap:18px;padding:0 var(--pad);overflow-x:auto;transform:none !important;
    scroll-snap-type:x mandatory;scrollbar-width:none}
  .strip-track::-webkit-scrollbar{display:none}
  .strip-card{flex-basis:78vw;scroll-snap-align:center;transform:none !important;opacity:1 !important}
  .strip-title{position:static;transform:none;margin-bottom:34px}
  .strip-lede{position:static;transform:none;margin:28px auto 0}
  .strip::before,.strip::after{display:none}
  .cats{height:82vh}
  .cat-meta{bottom:8vh}
  .fly{height:auto;padding:76px var(--pad)}
  .fly-stage{position:static;perspective:none}
  .fly-item{position:relative;left:auto;top:auto;margin:0 0 16px;width:100%;
    transform:none !important;opacity:1 !important}
  .fly-copy{position:static;transform:none;max-width:none;margin-bottom:28px}
  .fly-word{position:static;transform:none;margin:8px 0 30px}
}
@media (max-width:600px){
  .hero{padding-top:118px}
  .search-shell{flex-wrap:nowrap;border-radius:999px;padding:5px 6px 5px 20px}
  .search-shell input{flex:1 1 auto;order:2;padding:12px 8px 12px 0}
  .search-ico{order:1}
  .search-go{order:3;flex:0 0 auto;width:46px;height:46px}
  .search-go::before{display:none}
  .search-tags{gap:7px}
  .search-tags a{font-size:11px;padding:6px 13px}
}
@media (prefers-reduced-motion:reduce){
  .strip-track,.fly-item,.cat{transform:none !important;clip-path:none !important}
}

/* =========================================================
   7 · v2 FEEDBACK — desktop homepage
   ========================================================= */

/* --- 4 · close the gap between the stats and Our Projects --- */
.intro{padding-top:48px;padding-bottom:56px}
.intro-text{font-size:clamp(22px,2.9vw,42px);max-width:1000px}
.projects{padding-top:0}
.hero-stats{margin-bottom:0}

/* --- 3 · stat figures --- */
.hero-stats strong{display:block;overflow:hidden}
.hero-stats strong span{display:block;will-change:transform}

/* --- 5 · Our Projects: film reel to the right edge --- */
.proj-grid{grid-template-columns:minmax(0,1fr) 54vw;gap:0 72px}
.proj-right{padding-right:0;overflow:visible}
.proj-shot{aspect-ratio:860/620;will-change:transform}
.proj-reel{will-change:transform}

/* --- 6 · collection: project slides --- */
.cats{height:100vh}
.cat-meta{bottom:9vh;text-align:left;max-width:640px;margin-left:var(--pad);padding:0}
.cat-name span{font-size:clamp(40px,6.2vw,92px)}
.cat-facts{
  display:flex;flex-wrap:wrap;gap:0 46px;margin-top:26px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.26);
}
.cat-facts li{display:grid;gap:5px}
.cat-facts i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cat-facts b{font-size:15px;font-weight:500;color:#fff}
.cat-cta{
  display:inline-flex;align-items:center;gap:11px;margin-top:30px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:7px;
  transition:gap .4s var(--ease),border-color .4s var(--ease);
}
.cat-cta::after{content:"→";letter-spacing:0}
.cat-cta:hover{gap:16px;border-color:#fff}
.cats-kicker{
  position:absolute;top:8vh;left:0;right:0;z-index:4;color:#fff;pointer-events:none;
  opacity:.9;
}
.cats-kicker .script{font-size:clamp(17px,1.5vw,22px)}
.cats-kicker .solid{font-size:clamp(20px,1.9vw,28px);letter-spacing:.14em}

/* --- 7 · Golden Visa: a point that grows into a headline --- */
.gv{position:relative;height:100vh;overflow:hidden;background:var(--navy);color:#fff}
.gv-bg{position:absolute;inset:0}
.gv-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.gv-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 50%,rgba(6,12,32,.32),rgba(6,12,32,.9))}
.gv-stage{position:absolute;inset:0;display:grid;place-items:center;z-index:2;padding:0 4vw}
.gv-line{
  margin:0;text-align:center;font-family:var(--font);font-weight:300;
  text-transform:uppercase;letter-spacing:.01em;line-height:.98;
  font-size:clamp(40px,7.6vw,118px);will-change:transform;
}
.gv-line span{display:inline-block;will-change:transform,opacity}
.gv-tail{
  position:absolute;left:0;right:0;bottom:8vh;z-index:3;text-align:center;
  padding:0 var(--pad);
}
.gv-tail p{max-width:560px;margin:0 auto 26px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.82)}
.gv-tail .btn-solid{background:#fff;border-color:#fff;color:var(--navy)}
.gv-tail .btn-solid:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}

/* --- 5 (strip) · decision cards carry copy --- */
.strip-card-body{
  position:static;padding:26px 2px 0;background:none;
}
.strip-n{display:block;font-size:11px;font-weight:600;letter-spacing:.26em;color:rgba(255,255,255,.58);margin-bottom:12px}
.strip-card-body h3{font-size:24px;font-weight:400;margin-bottom:8px;letter-spacing:-.01em}
.strip-card-body p{font-size:13px;line-height:1.72;color:rgba(255,255,255,.62);max-width:46ch}

/* --- 10 · handpicked stills carry a name --- */
.fly-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  background:linear-gradient(to top,rgba(6,12,32,.9),rgba(6,12,32,0));
  display:grid;gap:3px;
}
.fly-item figcaption b{font-size:15px;font-weight:500;letter-spacing:-.01em}
.fly-item figcaption i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* --- 14 · Why Dubai: one figure at a time --- */
.why-list{position:relative}
.why-list li{will-change:transform,opacity}
.why-step .why-list{
  display:block;border-top:0;min-height:300px;
}
.why-step .why-list li{
  position:absolute;inset:0 auto auto 0;width:100%;max-width:760px;
  padding:0;border:0;opacity:0;
}
.why-step .why-list li strong{font-size:clamp(56px,9vw,132px)}
.why-step .why-list li .why-t{margin:22px 0 16px;font-size:12px}
.why-step .why-list li .why-d{font-size:16px;line-height:1.8;max-width:560px}
.why-count{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:4;
  display:grid;gap:14px;
}
.why-count i{
  display:block;width:34px;height:1px;background:rgba(255,255,255,.3);position:relative;
}
.why-count i b{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}

/* --- 11/13 · founders + faq need a stagger hook --- */
.founder-copy > *,.faq-head > *{will-change:transform,opacity}
.faq-item{will-change:transform,opacity}

/* =========================================================
   8 · v3 FEEDBACK
   ========================================================= */

/* --- 3 · intro ribbon: one line travelling right to left --- */
.ribbon{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:12vh}
.ribbon-track{
  display:flex;align-items:center;gap:0 4vw;width:max-content;
  padding:0 52vw;will-change:transform;margin-top:7vh;
}
.ribbon .w{
  font-family:var(--font);font-weight:300;color:var(--navy);
  font-size:clamp(48px,7.6vw,128px);line-height:1;letter-spacing:-.025em;white-space:nowrap;
}
.ribbon-img{display:block;flex:0 0 auto;overflow:hidden;background:var(--ivory-2)}
.ribbon-img img{
  display:block;width:clamp(280px,32vw,560px);aspect-ratio:16/10;object-fit:cover;
  will-change:transform;
}

/* --- 2 · stats: a harder entrance --- */
.hero-stats > div{overflow:hidden;will-change:transform,opacity}
.hero-stats strong span{will-change:transform,opacity}

/* --- 4 · Our Projects: a gutter on the right, per the reference --- */
.proj-grid{grid-template-columns:minmax(0,1fr) 46vw;gap:0 72px;padding-right:13vw}
.proj-shot{aspect-ratio:820/600}

/* --- 5 · Five Decisions: heading above the reel, bigger cards --- */
.strip-title{
  position:absolute;top:9vh;left:0;right:0;bottom:auto;
  display:block;height:auto;z-index:5;
}
.strip-lede{bottom:7vh}
.strip-card{flex-basis:clamp(360px,40vw,660px)}
.strip-track{gap:52px;padding:0 38vw}

/* --- 6 · collection: bigger name --- */
.cat-name span{font-size:clamp(52px,8.4vw,132px);letter-spacing:-.005em}
.cat-meta{max-width:900px}

/* --- 8 · founders: a card that grows over the frame --- */
.fdr{position:relative;height:100vh;overflow:hidden;background:var(--navy)}
.fdr-bg{position:absolute;inset:0}
.fdr-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;will-change:transform}
.fdr-bg::after{content:"";position:absolute;inset:0;background:rgba(6,12,32,.45)}
.fdr-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;background:#fff;color:var(--navy);
  width:min(1120px,84vw);max-height:90vh;overflow:hidden;
  padding:54px 60px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  grid-template-areas:"head body" "photo body";
  gap:30px 54px;align-content:start;
  will-change:transform;
}
.fdr-head{grid-area:head;text-align:left}
.fdr-head .script{font-size:clamp(20px,2vw,30px)}
.fdr-head .solid{font-size:clamp(34px,4.2vw,64px);letter-spacing:.005em}
.fdr-photo{grid-area:photo;overflow:hidden;aspect-ratio:954/855;background:var(--ivory-2)}
.fdr-photo img{width:100%;height:100%;object-fit:cover;will-change:transform}
.fdr-body{grid-area:body;align-self:center}
.fdr-p{color:var(--ink-70);font-size:15px;line-height:1.85;margin-bottom:18px;will-change:transform,opacity}
.fdr-meta{will-change:transform,opacity;padding-top:22px;border-top:1px solid var(--line)}
.fdr-names{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.fdr-names strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.01em}
.fdr-names span{display:block;margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}

/* Short laptop screens — a 13" MacBook Air with a bookmarks bar lands near
   740px of viewport — used to clip the card's own buttons. The card gives back
   padding, leading and picture height instead of hiding its bottom edge. */
@media (min-width:992px) and (max-height:860px){
  .fdr-card{max-height:94vh;padding:40px 48px;gap:24px 46px}
  /* the picture column narrows so the photograph gets shorter without being cropped */
  .fdr-card{grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr)}
  .fdr-head .solid{font-size:clamp(26px,2.95vw,45px)}
  .fdr-head .script{font-size:clamp(17px,1.6vw,24px)}
  .fdr-p{font-size:14.5px;line-height:1.72;margin-bottom:13px}
  .fdr-meta{padding-top:15px}
}
@media (min-width:992px) and (max-height:730px){
  .fdr-card{max-height:96vh;padding:30px 40px;gap:18px 38px}
  .fdr-card{grid-template-columns:minmax(0,.72fr) minmax(0,1.45fr)}
  .fdr-head .solid{font-size:clamp(22px,2.45vw,37px)}
  .fdr-head .script{font-size:clamp(15px,1.35vw,20px)}
  .fdr-p{font-size:13.5px;line-height:1.62;margin-bottom:10px}
  .fdr-meta{padding-top:11px}
  .fdr-card .btn-solid-lg{padding:14px 26px}
}

/* --- 10 · Why Dubai as a flythrough with prominent figures --- */
.wfly{position:relative;height:100vh;overflow:hidden;background:var(--navy);color:#fff}
.wfly-stage{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 50%;transform-style:preserve-3d}
.wfly-item{
  position:absolute;left:50%;top:50%;
  width:clamp(340px,42vw,760px);margin:-16vw 0 0 -21vw;
  will-change:transform,opacity;
}
.wfly-item img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9);
}
.wfly-item figcaption{text-align:center;margin-top:26px}
.wfly-item figcaption b{
  display:block;font-family:var(--font);font-weight:300;
  font-size:clamp(46px,6.4vw,104px);line-height:1;letter-spacing:-.01em;
  text-shadow:0 8px 40px rgba(6,12,32,.8);
}
.wfly-item figcaption span{
  display:block;margin:14px 0 12px;font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.75);
}
.wfly-item figcaption p{
  max-width:460px;margin:0 auto;font-size:14px;line-height:1.75;color:rgba(255,255,255,.78);
}
.wfly-head{
  position:absolute;left:0;right:0;top:7vh;z-index:5;pointer-events:none;color:#fff;opacity:.92;
}
.wfly-head .script{font-size:clamp(18px,1.7vw,26px)}
.wfly-head .solid{font-size:clamp(22px,2.2vw,34px);letter-spacing:.14em}

/* --- responsive fallbacks for the new sections --- */
@media (max-width:991px){
  .ribbon{height:auto;min-height:0;padding:70px var(--pad);display:block}
  .ribbon-track{display:block;width:auto;padding:0;transform:none !important}
  .ribbon .w{display:block;white-space:normal;font-size:clamp(26px,6vw,44px);margin-bottom:16px}
  .ribbon-img img{width:100%;margin-bottom:18px}
  .proj-grid{padding-right:var(--pad)}
  .strip-title{position:static;margin-bottom:28px}
  .fdr{height:auto;padding:70px var(--pad)}
  .fdr-card{position:static;transform:none !important;width:auto;max-height:none;
    grid-template-columns:1fr;grid-template-areas:"head" "photo" "body";padding:32px 26px}
  .wfly{height:auto;padding:70px var(--pad)}
  .wfly-stage{position:static;perspective:none}
  .wfly-item{position:relative;left:auto;top:auto;margin:0 0 44px;width:100%;
    transform:none !important;opacity:1 !important}
  .wfly-head{position:static;margin-bottom:30px}
}

/* =========================================================
   9 · v4 FEEDBACK
   ========================================================= */

/* --- 3 · hand-drawn skyline filling the ribbon's empty bands --- */
.ribbon-art{position:absolute;inset:0;pointer-events:none;color:var(--navy);overflow:hidden}
.ribbon-art img{position:absolute;left:-4%;width:108%;height:auto;display:block}
.ribbon-art-bottom{bottom:-1%;opacity:.2;width:118%;left:-9%}

.ribbon-track{position:relative;z-index:2}

/* --- 4 · collection titles must read on any frame --- */
.cat::after{
  background:
    linear-gradient(to top,rgba(6,12,32,.94) 0%,rgba(6,12,32,.72) 26%,rgba(6,12,32,.30) 52%,rgba(6,12,32,.08) 76%);
}
.cat-meta{text-shadow:0 2px 26px rgba(6,12,32,.85)}
.cat-name span{text-shadow:0 4px 34px rgba(6,12,32,.9)}
.cat-eyebrow{color:#fff}

/* --- 6 · founder steps stack as separate beats --- */
.fdr-meta{padding-top:16px;border-top:1px solid var(--line);margin-top:14px}
.fdr-meta strong{display:block;font-size:17px;font-weight:500;letter-spacing:-.01em}
.fdr-meta span{display:block;margin-top:4px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.fdr-actions{border-top:0;padding-top:20px}
.fdr-actions .btn-pair .btn-solid{font-size:10px;padding:15px 22px}

/* --- 2 · stats: the figure is the headline --- */
.hero-stats > div{position:relative;will-change:clip-path,opacity}
/* The band is widened and the cells de-padded so the longest figure
   ("AED 20M") sits on one line. Sized from the measured glyph width:
   at 1470 the cell is 313px and the text 279px. */
.hero-stats{border-bottom:0;width:94% !important;max-width:1400px !important}
.hero-stats > div{padding:66px 16px 58px}
.hero-stats strong{
  font-size:clamp(30px,4.4vw,68px) !important;
  font-weight:300 !important;letter-spacing:-.045em !important;line-height:1 !important;
  white-space:nowrap !important;
}
.hero-stats span{
  margin-top:24px !important;
  font-size:13px !important;letter-spacing:.15em !important;
  line-height:1.65 !important;color:var(--ink-70) !important;font-weight:600 !important;
}

/* =========================================================
   10 · STATS — inside the pinned ribbon, so they hold frame
   while the line travels underneath them
   ========================================================= */
.ribbon-stats{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(4,1fr);
  width:92%;max-width:1360px;margin:0 auto;
}
.ribbon-stats > div{
  padding:34px 22px 38px;text-align:center;
  border-right:1px solid var(--line-soft);
  will-change:clip-path,opacity;
}
.ribbon-stats > div:first-child{border-left:1px solid var(--line-soft)}
/* the figure lives in the inner span — target it directly, or the label
   rule below (which also matches descendant spans) wins and shrinks it */
.ribbon-stats strong{display:block;overflow:hidden}
.ribbon-stats strong > span{
  display:block;
  font-family:var(--font);
  font-size:clamp(26px,3.3vw,48px);
  font-weight:200;letter-spacing:-.035em;line-height:1.08;
  color:var(--navy);text-transform:none;white-space:nowrap;
  will-change:transform,opacity;
}
.ribbon-stats > div > span{
  display:block;margin-top:12px;
  font-size:11px;font-weight:600;letter-spacing:.16em;line-height:1.6;
  text-transform:uppercase;color:var(--ink-55);
}
@media (max-width:991px){
  .ribbon-stats{grid-template-columns:1fr 1fr;width:100%;margin-bottom:26px}
  .ribbon-stats > div{padding:24px 14px 26px}
  .ribbon-stats > div:nth-child(2n){border-right:0}
  .ribbon-stats > div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}

/* =========================================================
   11 · ENQUIRE — a balanced two-column close
   ========================================================= */
.enquire{padding:150px var(--pad) 130px;text-align:left}
.enq-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:0 8vw;align-items:center;max-width:1400px;margin:0 auto;
}
.enq-copy .eyebrow{margin-bottom:26px}
.enq-copy h2{
  font-size:clamp(38px,4.6vw,72px);font-weight:300;line-height:1.06;
  letter-spacing:-.035em;color:var(--navy);margin-bottom:28px;
}
.enq-lede{max-width:430px;font-size:16px;line-height:1.85;color:var(--ink-70)}
.enq-actions{display:flex;flex-wrap:wrap;gap:14px;margin:42px 0 52px}
.enq-meta{display:grid;gap:0;border-top:1px solid var(--line);max-width:460px}
.enq-meta li{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
}
.enq-meta span{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-55);flex:0 0 auto;
}
.enq-meta a,.enq-meta b{font-size:16px;font-weight:400;color:var(--navy);text-align:right}
.enq-meta a{border-bottom:1px solid transparent;transition:border-color .35s var(--ease)}
.enq-meta a:hover{border-bottom-color:var(--navy)}

.enq-media{position:relative}
.enq-frame{overflow:hidden;background:var(--ivory-2);aspect-ratio:4/5;width:100%}
.enq-frame video{width:100%;height:100%;object-fit:cover;display:block}
.enq-caption{
  display:block;margin-top:16px;font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);
}

@media (max-width:991px){
  .enquire{padding:76px var(--pad) 70px}
  .enq-grid{grid-template-columns:1fr;gap:44px}
  .enq-media{order:-1}
  .enq-frame{aspect-ratio:16/11}
  .enq-lede,.enq-meta{max-width:none}
  .enq-actions{margin:32px 0 38px}
  .enq-actions .btn-solid{flex:1 1 100%;justify-content:center}
}

/* =========================================================
   12 · A/B SECTIONS — remove the losing option when decided
   ========================================================= */
.ab-tag{
  position:absolute;left:var(--pad);top:26px;z-index:9;margin:0;
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-55);
}
.ab-tag-light{color:rgba(255,255,255,.6)}

/* ---------- Handpicked, option B: a deck of prints ---------- */
.deck{position:relative;height:100vh;overflow:hidden;background:#fff;color:var(--navy)}
/* the five take their places around the title, at different sizes and
   heights, and the pictures are allowed to cross it. */
.deck-stage{position:absolute;inset:0}
.deck-card{
  position:absolute;margin:0;z-index:2;
  will-change:transform,opacity;
}
.deck-card-media{
  position:relative;overflow:hidden;background:var(--ivory-2);
  box-shadow:0 30px 74px -46px rgba(13,25,57,.42);
}
.deck-card img{width:100%;height:100%;object-fit:cover;display:block}

.deck-card:nth-child(1){left:6%;top:21%;width:18%}
.deck-card:nth-child(1) .deck-card-media{aspect-ratio:4/5}
.deck-card:nth-child(2){left:28.5%;top:13%;width:17%}
.deck-card:nth-child(2) .deck-card-media{aspect-ratio:4/3}
.deck-card:nth-child(3){left:74%;top:15%;width:20%}
.deck-card:nth-child(3) .deck-card-media{aspect-ratio:3/2}
.deck-card:nth-child(4){left:57%;top:47%;width:15.5%}
.deck-card:nth-child(4) .deck-card-media{aspect-ratio:3/4}
.deck-card:nth-child(5){left:33%;top:62%;width:14.5%}
.deck-card:nth-child(5) .deck-card-media{aspect-ratio:4/3}

/* the name sits under the picture, on the white, not over the image */
.deck-card figcaption{
  position:static;padding:13px 1px 0;background:none;
  display:grid;gap:3px;color:var(--navy);
}
.deck-card figcaption b{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--navy)}
.deck-card figcaption i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.deck-copy{
  position:absolute;left:var(--pad);bottom:7vh;z-index:7;max-width:228px;
}
.deck-copy p{font-size:12px;line-height:2.1;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-55)}
.deck-word{
  position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);z-index:6;
  text-align:center;pointer-events:none;
}
.deck-count{
  position:absolute;right:var(--pad);bottom:5vh;z-index:6;
  display:flex;align-items:baseline;gap:8px;
}
.deck-count b{font-size:15px;font-weight:500;color:var(--navy)}
.deck-count i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--ink-55)}

/* ---------- Enquire: a white card set on the residences behind it ----------
   Two interiors fill the section and the panel sits over the join, so the
   invitation reads as something placed inside a home, not beside one. ---------- */
.sc{position:relative;background:var(--navy);color:var(--navy);padding:clamp(64px,9vh,116px) clamp(16px,3vw,44px);overflow:hidden}
.sc-bg{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.sc-bg img{width:100%;height:112%;object-fit:cover;display:block;will-change:transform}
.sc-bg::after{content:"";position:absolute;inset:0;background:rgba(6,12,32,.30)}

.sc-panel{
  position:relative;z-index:2;
  width:min(88%,1180px);margin:0 auto;background:#fff;text-align:center;
  padding:clamp(48px,5.4vw,88px) clamp(30px,5vw,96px) clamp(44px,5vw,76px);
  box-shadow:0 60px 130px -62px rgba(6,12,32,.62);
}
.sc-title .script,.sc-title .solid{color:var(--navy)}
/* the panel is narrower than a full section, so the solid line is sized to
   hold "CAPITAL IS FOR" on one line rather than breaking it */
.sc-title .solid{font-size:clamp(30px,4.6vw,72px)}
.sc-title .script{font-size:clamp(19px,2.1vw,32px)}
.sc-lede{
  max-width:66ch;margin:20px auto 0;
  font-size:14px;line-height:1.85;color:var(--ink-55);
}
.sc-frame{
  width:clamp(168px,30%,238px);margin:clamp(26px,3vw,40px) auto 0;
  overflow:hidden;background:var(--ivory-2);aspect-ratio:9/16;
  box-shadow:0 34px 78px -50px rgba(13,25,57,.5);
}
.sc-frame video{width:100%;height:100%;object-fit:cover;display:block}
.sc-foot{display:flex;justify-content:center;margin:clamp(26px,3vw,40px) auto 0}
/* the closing sections are full-bleed, so the footer's standing top margin
   read as a white band. Removed here for every page; the contact page, whose
   last section is a white form, carries the spacing in its own padding. */
.site-footer{margin-top:0}
.contact-grid{padding-bottom:clamp(64px,7vw,104px)}
.sc-cta{
  display:inline-flex;align-items:center;gap:13px;
  padding:19px 38px;border-radius:999px;background:var(--navy);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:gap .45s var(--ease),background .45s var(--ease);
}
.sc-cta:hover{gap:19px;background:#16255A}

@media (max-width:991px){
  .ab-tag{top:14px}
  .deck{height:auto;padding:70px var(--pad)}
  .deck-stage{position:relative;left:auto;top:auto;transform:none;width:100%;margin-bottom:28px}
  .deck-card{position:relative;inset:auto;margin-bottom:14px;transform:none !important;opacity:1 !important}
  /* the collage positions are nth-child, so they need matching specificity here */
  .deck-card:nth-child(1),.deck-card:nth-child(2),.deck-card:nth-child(3),
  .deck-card:nth-child(4),.deck-card:nth-child(5){left:auto;top:auto;width:100%}
  .deck-card:nth-child(1) .deck-card-media,.deck-card:nth-child(2) .deck-card-media,
  .deck-card:nth-child(3) .deck-card-media,.deck-card:nth-child(4) .deck-card-media,
  .deck-card:nth-child(5) .deck-card-media{aspect-ratio:4/3;clip-path:none !important}
  .deck-copy,.deck-word,.deck-count{position:static;transform:none;text-align:left;max-width:none;margin-bottom:20px}
  .sc{padding:58px var(--pad)}
  .sc-bg{grid-template-columns:1fr}
  .sc-bg img:last-child{display:none}
  .sc-panel{width:100%;padding:34px 22px 38px}
  .sc-frame{width:min(74%,250px)}
  .sc-cta{justify-content:center}
}

/* =========================================================
   13 · INNER PAGES — same language as the homepage
   ========================================================= */
.page-hero{position:relative;overflow:hidden}
.ph-art{
  position:absolute;left:-6%;right:-6%;bottom:-8%;z-index:0;
  color:var(--navy);opacity:.11;pointer-events:none;
}
.ph-art img{width:100%;display:block}
.page-hero > *:not(.ph-art){position:relative;z-index:1}
.page-hero-tight{padding-bottom:9vh}
.page-hero h1.h1-sans{font-size:clamp(34px,6.2vw,92px);font-weight:200;letter-spacing:-.045em}
.crumb{position:relative;z-index:1}

/* the developer grid picks up the homepage's card rhythm */
.dev-card h3{font-size:28px;font-weight:300;letter-spacing:-.02em;margin:26px 0 10px}
.dev-flag{background:var(--navy)}
.dev-projects li{font-size:14.5px}

/* on the founders block the big line leads and the script line follows it */
.fdr-head .solid{margin-top:0}
.fdr-head .script{margin-top:.08em}

/* the two founders alternate, each with the picture on the opposite side */
.founder-split-flip .founder-media{order:2}
.founder-split + .founder-split{margin-top:clamp(52px,6.5vw,104px)}
/* a still frame carries no drift, so its picture needs no headroom and is
   shown whole */
.wipe-still > img,.wipe-still > video{top:0;height:100%}
/* each founder's frame follows the shape of their photograph rather than
   cropping it, so the two cards are deliberately different sizes */
.founders .founder-split:not(.founder-split-flip) .founder-media{aspect-ratio:1280/787}
.founders .founder-split-flip .founder-media{aspect-ratio:720/820}
.founders .founder-media img{object-position:50% 50%}
.founders .founder-copy h2{margin-bottom:22px}
.founders .founder-copy > p{margin-bottom:18px}
.founder-cta-row{display:flex;justify-content:center;margin-top:clamp(44px,5vw,76px)}
@media (max-width:991px){
  .founder-split-flip .founder-media{order:0}
  .founder-split + .founder-split{margin-top:52px}
  .founders .founder-split:not(.founder-split-flip) .founder-media{aspect-ratio:1280/787}
  .founders .founder-split-flip .founder-media{aspect-ratio:720/820}
}

/* principles read as chapter headings, like Five Decisions */
.principle-list .p-n{font-size:12px;letter-spacing:.26em}
.principle-list h3{font-size:26px;font-weight:700;letter-spacing:-.015em}

/* the contact form sits on the same ivory as the collection captions */
.form-card{background:var(--ivory)}
.form-card h3{font-size:28px;font-weight:300;letter-spacing:-.02em}

/* the shared close needs room to breathe on the inner pages */
.page-about .sc,.sc{margin-top:0}

/* =========================================================
   14 · MOBILE REFINEMENTS
   Phone and tablet only. Nothing below this line may reach the
   desktop layout, so every rule sits inside a max-width query.
   ========================================================= */
.strip-nav{display:none}          /* the arrow is a phone affordance only */

@media (max-width:991px){

  /* 2 · the logo is already centred by .brand{position:absolute;left:50%} in the
     base stylesheet, so the header keeps its original flex layout. It just needs
     room: the logo shrinks a little so the Enquire button can never reach it. */
  .brand img{height:26px}
  .hdr-right{gap:14px}

  /* 3 · "We are not agents" reads as two lines over the skyline */
  .ribbon-img{display:none}

  /* 4 · Five Decisions: words first, then a strip that shows it can scroll */
  .strip{display:flex;flex-direction:column}
  .strip-title{order:-3;margin-bottom:18px}
  .strip-lede{order:-2;margin:0 auto 22px}
  .strip-nav{order:-1;display:flex;justify-content:flex-end;padding:0 var(--pad);margin-bottom:16px}
  .strip-stage{order:0}
  .strip-next{
    width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;
    transition:background .3s var(--ease),border-color .3s var(--ease);
  }
  .strip-next:active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
  /* A desktop rule earlier in this file sets gap:52px and padding:0 38vw with no
     media query, and it sits after the first mobile block, so it was winning on
     phones and breaking the snap. Restated here, where it wins.
     align-items keeps all five cards flush at the top. */
  .strip-track{gap:18px;padding:0 var(--pad);scroll-padding-left:var(--pad);align-items:flex-start}
  .strip-card{flex-basis:74vw;scroll-snap-align:start}

  /* the projects block needs air above it, so it reads as its own section
     rather than a continuation of the skyline sketch above */
  .projects{padding-top:54px}

  /* 5 · Handpicked leads with its title */
  .deck{display:flex;flex-direction:column}
  .deck-word{order:-2;margin-bottom:14px}
  .deck-copy{order:-1}
  .deck-stage{order:0}
  .deck-count{order:1}

  /* 6 · Why Dubai leads with its title */
  .wfly{display:flex;flex-direction:column}
  .wfly-head{order:-1}
  .wfly-stage{order:0}
}

/* narrow handsets: the logo and the Enquire button each give a little more,
   so they can never touch whatever the width */
@media (max-width:430px){
  .brand img{height:22px}
  .hdr-cta{padding:12px 16px;font-size:10px;letter-spacing:.13em}
}