/* DIALIX refine layer: images sit further back, glass panels behind copy, airier type (as in the Arabic layout). Loaded last on every page. */
:root{
  --dx-onyx:#050405; --dx-cocoa:#201818; --dx-copper:#B9937C; --dx-rose:#D5B6A3; --dx-cream:#F9ECDF;
  --dx-glass:rgba(24,19,20,.42); --dx-glass-line:rgba(213,182,163,.22);
}

/* ---------- Type: sentence case, lighter, more air ---------- */
body[data-page="home"] .cinema-copy h1,
body[data-page="home"] .story-copy h2{
  text-transform:none!important;
  font-family:Didot,'Bodoni MT','Bodoni 72',Georgia,serif!important;
  font-weight:400!important;
  letter-spacing:-.5px!important;
  line-height:1.16!important;
  font-size:clamp(38px,4.1vw,64px)!important;
  text-wrap:balance;
}
body[data-page="home"] .cinema-copy h1 em{font-style:italic}
body[data-page="home"] .cinema-copy .eyebrow,
body[data-page="home"] .story-copy .eyebrow{margin-bottom:26px!important;letter-spacing:2.4px!important}
body[data-page="home"] .cinema-copy>p:not(.eyebrow),
body[data-page="home"] .story-copy>p{line-height:1.85!important;margin-top:24px!important;max-width:34em}
body[data-page="home"] .story-copy .story-link{margin-top:34px!important}
body[data-page="home"] .cinema-actions{gap:14px!important}
html[lang="ar"] body[data-page="home"] .cinema-copy h1,
html[lang="ar"] body[data-page="home"] .story-copy h2{font-family:Tahoma,Arial,sans-serif!important;line-height:1.45!important}

/* ---------- Glass panel behind the copy ---------- */
body[data-page="home"] .cinema-copy,
body[data-page="home"] .story-copy{
  position:relative;
  padding:44px 48px 46px!important;
  background:var(--dx-glass);
  border:1px solid var(--dx-glass-line);
  border-radius:4px;
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(249,236,223,.06);
  max-width:600px!important;
}
body[data-page="home"] .cinema-editorial{left:6%!important;right:6%!important;bottom:13%!important;align-items:end}

/* ---------- 1 · Hero: watch pushed back, smaller, softer ---------- */
body[data-page="home"] .hero-frame:first-child{
  background-size:contain!important;
  background-position:center!important;
  transform:translateX(17%) scale(.74)!important;
  opacity:.5!important;
  filter:blur(1.2px) brightness(.85) saturate(.9)!important;
}
body[data-page="home"] .cinema-glow{
  background:radial-gradient(ellipse 60% 70% at 66% 46%,transparent 0,rgba(5,4,5,.25) 55%,rgba(5,4,5,.85) 100%),linear-gradient(0deg,#050405 0,transparent 30%)!important;
}
/* soft glass veil across the whole hero, so the watch reads as "behind the glass" */
body[data-page="home"] .cinema::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,rgba(249,236,223,.05) 0%,rgba(249,236,223,0) 38%,rgba(249,236,223,.035) 62%,rgba(249,236,223,0) 100%);
}
body[data-page="home"] .crystal-water{opacity:.35!important}

/* ---------- Story sections: images further back, no bleeding ---------- */
body[data-page="home"] .home-story{overflow:hidden!important;isolation:isolate}
body[data-page="home"] .home-story .story-destination{z-index:2}

/* 2 · Watch duet: smaller, to the right, orange lower */
body[data-page="home"] .story-collection .duet-art{
  inset:auto!important; top:10%!important; bottom:6%!important; left:38%!important; right:2%!important;
  width:auto!important; height:auto!important;
  opacity:.62; filter:blur(.6px) saturate(.85);
}
body[data-page="home"] .story-collection .duet-watch{position:absolute!important;width:60%!important;height:auto!important;left:auto!important;right:auto!important}
body[data-page="home"] .story-collection .duet-watch img{position:static!important;width:100%!important;height:auto!important;left:auto!important;top:auto!important;max-width:100%!important;object-fit:contain!important}
body[data-page="home"] .story-collection .duet-orange{left:0!important;top:30%!important;transform:rotate(-9deg)!important}
body[data-page="home"] .story-collection .duet-teal{left:42%!important;top:4%!important;transform:rotate(8deg)!important}

/* 3 & 4 · Background photos: pushed back */
body[data-page="home"] .story-about::before,
body[data-page="home"] .story-sourcing::before{
  transform:scale(.86) translateX(10%)!important;
  opacity:.42!important;
  filter:blur(1.2px) saturate(.4) brightness(.85)!important;
}

/* ---------- Catalogue card caption ---------- */
.card-caption{margin:6px 0 0;font-size:12px;line-height:1.6;color:#a3958f;text-align:center;letter-spacing:.3px}
.card-caption b{display:block;font-weight:400;color:var(--dx-copper);letter-spacing:1.4px;text-transform:uppercase;font-size:10px;margin-top:4px}

/* ---------- WhatsApp button ---------- */
.dx-wa{position:fixed;z-index:90;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:99px;border:1px solid rgba(185,147,124,.65);background:rgba(32,24,24,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--dx-rose);font:500 13px/1 Arial,sans-serif;letter-spacing:.6px;cursor:pointer;transition:background .3s,color .3s}
.dx-wa:hover{background:var(--dx-copper);color:var(--dx-onyx)}
.dx-wa svg{width:20px;height:20px}

/* ---------- Private search brief ---------- */
.dx-brief{position:fixed;inset:0;z-index:120;display:flex;justify-content:flex-end;font-family:Arial,sans-serif}
.dx-brief[hidden]{display:none!important}
.dx-brief .scrim{flex:1;border:0;background:rgba(5,4,5,.6);cursor:pointer}
.dx-brief .panel{width:min(520px,100vw);height:100%;overflow-y:auto;background:#141011;border-left:1px solid var(--dx-glass-line);color:var(--dx-rose);padding:calc(28px + env(safe-area-inset-top,0px)) max(30px,env(safe-area-inset-right,0px)) calc(34px + env(safe-area-inset-bottom,0px)) 30px;display:flex;flex-direction:column;gap:22px;animation:dxslide .45s cubic-bezier(.2,.7,.2,1)}
@keyframes dxslide{from{transform:translateX(36px);opacity:0}to{transform:none;opacity:1}}
.dx-brief .top{display:flex;justify-content:space-between;align-items:center}
.dx-brief .kick{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#c5a28c}
.dx-brief .x{width:44px;height:44px;border:1px solid var(--dx-glass-line);background:none;color:var(--dx-rose);font-size:20px;cursor:pointer}
.dx-brief h2{margin:0;font:400 36px/1.15 Didot,'Bodoni MT',Georgia,serif;color:var(--dx-cream)}
.dx-brief p.lead{margin:0;font-size:14px;line-height:1.75;color:#bba89d}
.dx-step{display:flex;flex-direction:column;gap:10px}
.dx-step > span{font-size:12px;letter-spacing:1px;color:#c5a28c}
.dx-chips{display:flex;flex-wrap:wrap;gap:8px}
.dx-chips button{min-height:42px;padding:0 16px;border:1px solid rgba(213,182,163,.25);border-radius:99px;background:transparent;color:#cdb9ad;font-size:13px;cursor:pointer;transition:all .2s}
.dx-chips button:hover{color:var(--dx-cream)}
.dx-chips button[aria-pressed="true"]{border-color:var(--dx-copper);color:var(--dx-cream);background:rgba(185,147,124,.14)}
.dx-brief input,.dx-brief textarea{width:100%;font:15px Arial,sans-serif;color:var(--dx-cream);background:transparent;border:0;border-bottom:1px solid rgba(213,182,163,.3);padding:10px 0;border-radius:0;outline:none}
.dx-brief input:focus,.dx-brief textarea:focus{border-bottom-color:var(--dx-copper)}
.dx-brief textarea{min-height:70px;resize:vertical}
.dx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid var(--dx-copper);background:var(--dx-copper);color:var(--dx-onyx);font:600 12px/1 Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;text-decoration:none}
.dx-btn.ghost{background:transparent;color:var(--dx-rose)}
.dx-note{font-size:13px;color:#a3958f;min-height:1.2em}
.dx-out{margin:0;white-space:pre-wrap;font:14px/1.7 Arial,sans-serif;color:#e7d6cb;background:rgba(249,236,223,.05);border:1px solid var(--dx-glass-line);padding:16px 18px;user-select:all}
.dx-row{display:flex;flex-wrap:wrap;gap:10px}
html[dir="rtl"] .dx-brief .panel{text-align:right}
.dx-brief :focus-visible,.dx-wa:focus-visible{outline:1px solid var(--dx-rose);outline-offset:3px}

/* ---------- Tablet & phone ---------- */
@media (max-width:900px){
  body[data-page="home"] .cinema-copy,body[data-page="home"] .story-copy{padding:32px 30px 34px!important}
  body[data-page="home"] .story-collection .duet-art{left:10%!important;right:-6%!important;top:6%!important;bottom:45%!important}
}
@media (max-width:650px){
  body[data-page="home"] .hero-frame:first-child{transform:translateY(-14%) scale(.82)!important;opacity:.55!important}
  body[data-page="home"] .cinema-copy,body[data-page="home"] .story-copy{padding:26px 22px 28px!important;max-width:none!important}
  body[data-page="home"] .cinema-copy h1,body[data-page="home"] .story-copy h2{font-size:clamp(30px,8.6vw,40px)!important}
  body[data-page="home"] .story-collection .duet-art{left:4%!important;right:-10%!important;top:5%!important;bottom:52%!important}
  body[data-page="home"] .story-about::before,body[data-page="home"] .story-sourcing::before{transform:translateY(-12%) scale(.92)!important}
  .dx-wa .t{display:none}.dx-wa{width:52px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.dx-brief .panel{animation:none}}

/* ===== pass 2 ===== */
/* Hero: one glass panel holding copy + buttons */
body[data-page="home"] .cinema-editorial{
  display:flex!important;flex-direction:column;gap:30px;
  left:6%!important;right:auto!important;bottom:12%!important;top:auto!important;
  width:min(620px,88vw);max-width:none!important;
  padding:46px 50px 48px;box-sizing:border-box;
  background:var(--dx-glass);border:1px solid var(--dx-glass-line);border-radius:4px;
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(249,236,223,.06);
}
body[data-page="home"] .cinema-editorial .cinema-copy{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;max-width:none!important}
body[data-page="home"] .cinema-actions{position:static!important;inset:auto!important;flex-direction:row!important;flex-wrap:wrap;gap:12px!important;padding:0!important;margin:0!important;transform:none!important}
/* soften the photo's square edges so it melts into the background */
body[data-page="home"] .hero-frame:first-child,
body[data-page="home"] .story-about::before,
body[data-page="home"] .story-sourcing::before{
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 52%,transparent 100%);
  mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 52%,transparent 100%);
}
/* Watch duet: bigger again, still behind and lower */
body[data-page="home"] .story-collection .duet-art{left:40%!important;right:-2%!important;top:12%!important;bottom:2%!important;opacity:.7}
body[data-page="home"] .story-collection .duet-watch{width:62%!important;overflow:visible}
body[data-page="home"] .story-collection .duet-watch img{width:175%!important;max-width:none!important;margin-left:-37%}
body[data-page="home"] .story-collection .duet-orange{left:-4%!important;top:36%!important}
body[data-page="home"] .story-collection .duet-teal{left:40%!important;top:6%!important}

@media (max-width:900px){
  body[data-page="home"] .cinema-editorial{padding:32px 30px 34px}
  body[data-page="home"] .story-collection .duet-art{left:0!important;right:0!important;top:12%!important;bottom:50%!important}
}
@media (max-width:650px){
  body[data-page="home"] .cinema-editorial{left:16px!important;right:16px!important;width:auto;bottom:96px!important;padding:26px 22px 26px;gap:22px}
  body[data-page="home"] .cinema-actions a{font-size:11px!important}
  body[data-page="home"] .story-copy{margin-inline:0!important}
  body[data-page="home"] .story-collection .duet-watch{width:58%!important}
  body[data-page="home"] .story-collection .duet-orange{left:-2%!important;top:40%!important}
  body[data-page="home"] .story-collection .duet-teal{left:44%!important;top:4%!important}
}
body[data-page="home"] .cinema-editorial{width:min(700px,88vw)}
body[data-page="home"] .cinema-editorial > *{margin-left:0!important}