@font-face{font-family:"Gracela";src:url(fonts/Gracela.woff2) format("woff2");font-display:swap}
@font-face{font-family:"El Messiri";src:url(fonts/ElMessiri.woff2) format("woff2");font-weight:400 700;font-display:swap}

/* Layout concept: one long scroll told as seven chapters of a wedding night.
   Each chapter owns a palette; the page re-tints itself as you cross into it. */
@property --bg{syntax:"<color>";inherits:true;initial-value:#160d06}
@property --fg{syntax:"<color>";inherits:true;initial-value:#f3e9d6}
@property --muted{syntax:"<color>";inherits:true;initial-value:#b5ab9b}
@property --accent{syntax:"<color>";inherits:true;initial-value:#d9b36e}
@property --head{syntax:"<color>";inherits:true;initial-value:#f3e9d6}
@property --line{syntax:"<color>";inherits:true;initial-value:#5a4526}
:root{
  --noir:#160d06; --umber:#2c180a; --bronze:#aa8955; --amber:#c19249; --gold:#d8b36e; --brown:#74441c; --blush:#fbdadb; --ivory:#fffcf3;
  --bg:var(--noir); --fg:#f3e9d6; --muted:rgba(243,233,214,.66); --accent:var(--gold); --head:#f3e9d6; --line:rgba(217,179,110,.28);
  --f-en:"Gracela","Cormorant Garamond",Georgia,serif;
  --f-ar:"El Messiri","Noto Naskh Arabic",Tahoma,sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.22,.8,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
/* Each chapter owns its palette statically: nothing repaints while scrolling. */
[data-theme="noir"],[data-t="noir"],[data-cap="noir"]{--bg:#160d06;--fg:#fffcf3;--muted:rgba(255,252,243,.64);--accent:#d8b36e;--head:#fffcf3;--line:rgba(216,179,110,.26)}
[data-theme="ivory"],[data-t="ivory"],[data-cap="ivory"]{--bg:#fffcf3;--fg:#2a1909;--muted:#6e5a45;--accent:#aa8955;--head:#74441c;--line:rgba(170,137,85,.3)}
[data-theme="cream"],[data-t="cream"],[data-cap="cream"]{--bg:#f7ecd8;--fg:#2a1909;--muted:#6a543b;--accent:#aa8955;--head:#74441c;--line:rgba(116,68,28,.18)}
[data-theme="blush"],[data-t="blush"],[data-cap="blush"]{--bg:#fdf2ec;--fg:#2a1909;--muted:#6e5a4b;--accent:#aa8955;--head:#74441c;--line:rgba(170,137,85,.26)}
[data-theme="gold"],[data-t="gold"],[data-cap="gold"]{--bg:#c19249;--fg:#fffcf3;--muted:rgba(255,252,243,.84);--accent:#fff3d6;--head:#fffcf3;--line:rgba(255,252,243,.38)}
[data-theme="umber"],[data-t="umber"],[data-cap="umber"]{--bg:#2c180a;--fg:#fffcf3;--muted:rgba(255,252,243,.7);--accent:#d8b36e;--head:#fbe9c6;--line:rgba(216,179,110,.28)}
/* light, layered gradients — each chapter glows like candlelight on silk */
section[data-theme="noir"]{background-image:radial-gradient(70% 55% at 88% 30%,rgba(116,68,28,.38),transparent 62%),radial-gradient(60% 45% at 8% 92%,rgba(193,146,73,.14),transparent 64%)}
section[data-theme="ivory"]{background-image:radial-gradient(55% 45% at 100% 45%,rgba(251,218,219,.42),transparent 70%),radial-gradient(45% 40% at 0% 88%,rgba(216,179,110,.16),transparent 70%)}
section[data-theme="cream"]{background-image:radial-gradient(50% 40% at 12% 62%,rgba(251,218,219,.38),transparent 72%),linear-gradient(180deg,#f7ecd8 0%,#f2e1c1 100%)}
section[data-theme="blush"]{background-image:radial-gradient(60% 50% at 85% 20%,rgba(251,218,219,.85),transparent 70%),radial-gradient(55% 45% at 10% 85%,rgba(216,179,110,.2),transparent 70%)}
section[data-theme="gold"]{background-image:
  radial-gradient(55% 45% at 22% 38%,rgba(255,238,196,.55),transparent 62%),
  radial-gradient(48% 60% at 86% 72%,rgba(170,137,85,.95),transparent 66%),
  radial-gradient(38% 34% at 62% 22%,rgba(216,179,110,.85),transparent 70%),
  radial-gradient(45% 40% at 38% 100%,rgba(116,68,28,.42),transparent 70%),
  radial-gradient(30% 30% at 75% 40%,rgba(251,218,219,.22),transparent 70%),
  linear-gradient(115deg,#b58a4e 0%,#c19249 42%,#d8b36e 62%,#c19249 100%)}
section[data-theme="umber"]{background-image:radial-gradient(60% 45% at 82% 34%,rgba(193,146,73,.2),transparent 64%),linear-gradient(180deg,#2c180a 0%,#3a210d 55%,#2c180a 100%)}
/* foil type: the logo's gilding carried into the headlines */
.foil .w{background:linear-gradient(100deg,#fffcf3 0%,#f3dcae 38%,#fffcf3 58%,#d8b36e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.foil-deep .w{background:linear-gradient(100deg,#74441c 0%,#aa8955 45%,#74441c 75%,#c19249 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme]{background:var(--bg);color:var(--fg)}
[data-theme="ivory"],[data-theme="cream"],[data-theme="blush"]{color-scheme:light}
/* fixed UI glides between palettes (only these few elements animate color) */
.nav,.wa{transition:--bg .9s ease,--fg .9s ease,--muted .9s ease,--accent .9s ease,--head .9s ease,--line .9s ease}
/* arch transition between chapters — echoes the crown arch, animated by transform only */
.cap{position:relative;height:0;z-index:4;pointer-events:none}
.cap i{position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,3.6vw,58px);background:var(--bg);clip-path:ellipse(56% 100% at 50% 100%);transform-origin:50% 100%;transform:scaleY(0);will-change:transform}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-ar);font-size:clamp(16px,1.05vw + 10px,19px);line-height:1.85;overflow-x:hidden;transition:none}
html[lang="en"] body{font-family:var(--f-en);line-height:1.6;font-size:clamp(17px,1.1vw + 10px,20px)}
html[lang="ar"] .en, html[lang="en"] .ar{display:none!important}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit}
::selection{background:var(--gold);color:var(--noir)}
/* no text selection anywhere except the form fields */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:101;background:var(--bg)}

.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.wrap-pad{padding-left:max(var(--gut),4vw);padding-right:max(var(--gut-r),4vw)}
section{position:relative}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;line-height:1.2;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:.98rem;font-weight:500}
.eyebrow > span{display:inline-flex;align-items:center;gap:10px}
.eyebrow .k{opacity:.72;font-weight:400}
.eyebrow .sep{width:5px;height:5px;background:currentColor;transform:rotate(45deg);opacity:.6;flex:none}
.eyebrow::before{content:"";width:14px;height:16px;flex:none;align-self:center;margin-top:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20432%20304%20360%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M183.78%2C513.7c-28-14.87-45.09-45.19-43.76-77.65-.04.6-.06%2C1.22-.07%2C1.86%2C0%2C.12.01.23.01.34%2C0-.15.01-.31.01-.47-.02%2C1.19%2C0%2C2.34.05%2C3.43-.06-.92-.07-1.93-.06-2.97.47%2C31.62-16.33%2C60.91-43.7%2C75.44-30.93%2C16.42-69.78%2C11.16-96.25-13.39l44.71%2C56.31c34.41-25.05%2C67.11-33.01%2C95.3-32.65%2C28.19-.36%2C60.89%2C7.6%2C95.3%2C32.65l44.71-56.31c-26.46%2C24.55-65.32%2C29.81-96.25%2C13.39M268.82%2C607.12c6.67%2C13.73%2C10.46%2C28.74%2C10.38%2C44.03-.21%2C42.25-29.47%2C70.55-34.86%2C75.76-5.27%2C5.07-43.28%2C40.61-93.55%2C32.33-45.84-7.54-83.56-48.5-91.23-101.5%2C7.47%2C37.4%2C35.89%2C69.88%2C71.97%2C82.24%2C21.08%2C7.21%2C39.63%2C4.1%2C45.15%2C3.01%2C6.48-1.27%2C37.54-8.11%2C55.44-35.93%2C22.99-35.73%2C5.93-77.47.98-89.61-4.76-11.63-19.43-46.89-58.75-61.89-27.46-10.47-59.88-7.41-84.5%2C8.65-17.2%2C11.21-30.29%2C28.22-38.07%2C47.23-1.1%2C2.65-2.07%2C5.34-2.94%2C8.07-20.15%2C62.76%2C28.24%2C133.79%2C89.4%2C150.36%2C44.58%2C12.07%2C83.5-9.76%2C94.77-16.71%2C10.26-6.34%2C36.54-24.63%2C50.17-58.22%2C16.45-40.51%2C4.33-78.31%2C4.17-78.3-.18.01%2C22.1%2C61.14-7.35%2C107.96-27.34%2C43.49-89.51%2C59.11-90.59%2C59.31-1.54.28-2.74.48-3.56.62-.33.05-.58.1-.79.12-33.33%2C5.34-68.78%2C2.33-99.48-12.28-76.63-36.41-106.61-141.96-41.15-204.03%2C33.13-31.41%2C73.7-31.91%2C95.81-32.06%2C33.45-.22%2C67.55%2C8.78%2C94.18%2C29.02%2C14.44%2C10.99%2C26.44%2C25.48%2C34.38%2C41.78%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20432%20304%20360%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M183.78%2C513.7c-28-14.87-45.09-45.19-43.76-77.65-.04.6-.06%2C1.22-.07%2C1.86%2C0%2C.12.01.23.01.34%2C0-.15.01-.31.01-.47-.02%2C1.19%2C0%2C2.34.05%2C3.43-.06-.92-.07-1.93-.06-2.97.47%2C31.62-16.33%2C60.91-43.7%2C75.44-30.93%2C16.42-69.78%2C11.16-96.25-13.39l44.71%2C56.31c34.41-25.05%2C67.11-33.01%2C95.3-32.65%2C28.19-.36%2C60.89%2C7.6%2C95.3%2C32.65l44.71-56.31c-26.46%2C24.55-65.32%2C29.81-96.25%2C13.39M268.82%2C607.12c6.67%2C13.73%2C10.46%2C28.74%2C10.38%2C44.03-.21%2C42.25-29.47%2C70.55-34.86%2C75.76-5.27%2C5.07-43.28%2C40.61-93.55%2C32.33-45.84-7.54-83.56-48.5-91.23-101.5%2C7.47%2C37.4%2C35.89%2C69.88%2C71.97%2C82.24%2C21.08%2C7.21%2C39.63%2C4.1%2C45.15%2C3.01%2C6.48-1.27%2C37.54-8.11%2C55.44-35.93%2C22.99-35.73%2C5.93-77.47.98-89.61-4.76-11.63-19.43-46.89-58.75-61.89-27.46-10.47-59.88-7.41-84.5%2C8.65-17.2%2C11.21-30.29%2C28.22-38.07%2C47.23-1.1%2C2.65-2.07%2C5.34-2.94%2C8.07-20.15%2C62.76%2C28.24%2C133.79%2C89.4%2C150.36%2C44.58%2C12.07%2C83.5-9.76%2C94.77-16.71%2C10.26-6.34%2C36.54-24.63%2C50.17-58.22%2C16.45-40.51%2C4.33-78.31%2C4.17-78.3-.18.01%2C22.1%2C61.14-7.35%2C107.96-27.34%2C43.49-89.51%2C59.11-90.59%2C59.31-1.54.28-2.74.48-3.56.62-.33.05-.58.1-.79.12-33.33%2C5.34-68.78%2C2.33-99.48-12.28-76.63-36.41-106.61-141.96-41.15-204.03%2C33.13-31.41%2C73.7-31.91%2C95.81-32.06%2C33.45-.22%2C67.55%2C8.78%2C94.18%2C29.02%2C14.44%2C10.99%2C26.44%2C25.48%2C34.38%2C41.78%22/%3E%3C/svg%3E") center/contain no-repeat}
.chap{font-family:var(--f-en);font-size:clamp(15px,1.2vw,18px);letter-spacing:.2em;color:var(--accent)}
h1,h2,h3{font-weight:400;margin:0;color:var(--head);text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2{font-weight:500}
html[lang="ar"] h3{font-weight:600}
.display{font-size:clamp(2.6rem,6.2vw,6.4rem);line-height:1.02;letter-spacing:-.01em}
html[lang="ar"] .display{font-size:clamp(2.3rem,5.4vw,5.4rem);line-height:1.3}
.h2{font-size:clamp(2.1rem,4.4vw,4.4rem);line-height:1.06}
html[lang="ar"] .h2{font-size:clamp(1.9rem,3.7vw,3.7rem);line-height:1.35}
.h3{font-size:clamp(1.35rem,1.8vw,1.75rem);line-height:1.2}
html[lang="ar"] .h3{font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.5}
.lead{font-size:clamp(1.12rem,1.5vw,1.45rem);line-height:1.55;color:var(--fg)}
html[lang="ar"] .lead{line-height:1.95}
p{margin:0;max-width:62ch}
.muted{color:var(--muted)}
.gold-text{color:var(--accent)}
.w{display:inline-block}
.split-line{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em}

/* ---------- buttons ---------- */
.btn{--h:54px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--h);padding:0 30px;border:1px solid var(--accent);color:var(--fg);text-decoration:none;font:inherit;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;background:transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
html[lang="ar"] .btn{letter-spacing:0;font-size:1rem;font-weight:500}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--bg)}
.btn.solid{background:var(--accent);color:var(--bg)}
.btn.solid::before{background:var(--fg)}
.btn svg{width:18px;height:18px}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}

/* ---------- preloader ---------- */
.pre{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;animation:preFallback 0s 4s forwards}
.pre .door{position:absolute;top:0;bottom:0;width:50.2%;background:radial-gradient(120% 70% at 100% 50%,#2c180a 0%,#160d06 62%);will-change:transform}
.pre .door.l{left:0;border-right:1px solid rgba(216,179,110,.32)}
.pre .door.r{right:0;border-left:1px solid rgba(216,179,110,.32);background:radial-gradient(120% 70% at 0% 50%,#2c180a 0%,#160d06 62%)}
.pre .door::after{content:"";position:absolute;top:12%;bottom:12%;width:min(34vw,300px);border:1px solid rgba(216,179,110,.14);border-radius:999px 999px 0 0}
.pre .door.l::after{right:clamp(18px,4vw,60px)}
.pre .door.r::after{left:clamp(18px,4vw,60px)}
.pre-sub{position:absolute;left:0;right:0;top:calc(50% + min(66px,14.5vw) + 34px);display:grid;justify-items:center;gap:16px;z-index:3;padding-inline:20px;text-align:center}
.pre-line{width:min(180px,42vw);height:1px;background:rgba(216,179,110,.22);overflow:hidden}
.pre-line i{display:block;height:100%;background:#d8b36e;transform:scaleX(0);transform-origin:center}
.pre-slogan{font-size:clamp(1rem,1.6vw,1.25rem);color:#f3e9d6;opacity:0;letter-spacing:.02em}
.pre .pct{position:absolute;z-index:3;inset-inline-end:max(28px,4vw);bottom:max(28px,env(safe-area-inset-bottom));font-family:var(--f-en);color:#d8b36e;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:.02em;direction:ltr}
.pre .pct small{font-size:.38em;margin-inline-start:4px;opacity:.7}
@media (max-width:600px){.pre .count{bottom:auto;top:max(40px,env(safe-area-inset-top))}}
.pre .mono{position:relative;width:min(110px,24vw);color:var(--gold);z-index:2}
.pre .mono-fill{position:absolute;inset:0;z-index:3;color:var(--gold);clip-path:inset(100% 0 0 0)}
.pre .mono-base{opacity:.18}
.pre .count{position:absolute;bottom:max(40px,env(safe-area-inset-bottom));font-family:var(--f-en);color:var(--gold);letter-spacing:.3em;font-size:.8rem;z-index:3}
@keyframes preFallback{to{opacity:0;visibility:hidden}}
html.ready .pre{display:none}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;top:env(safe-area-inset-top,0px);z-index:100;padding-left:var(--gut);padding-right:var(--gut-r);color:var(--fg);transition:transform .7s var(--ease),--bg .9s ease,--fg .9s ease,--muted .9s ease,--accent .9s ease,--head .9s ease,--line .9s ease}
.nav-in{display:flex;align-items:center;gap:28px;height:84px;max-width:1520px;margin-inline:auto;transition:height .5s var(--ease)}
.nav.scrolled .nav-in{height:66px}
.nav::before{content:"";position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity .5s;border-bottom:1px solid var(--line)}
.nav.scrolled::before{opacity:.95;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.hide{transform:translateY(-110%)}
.nav > *{position:relative}
.brand{display:block;width:132px;color:var(--accent);flex:none}
.brand svg{width:100%;height:auto;display:block}
.links{display:flex;gap:clamp(14px,2vw,30px);margin-inline-start:auto;list-style:none;padding:0;margin-block:0}
.links a{text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;position:relative;padding-block:6px;color:var(--fg)}
html[lang="ar"] .links a{letter-spacing:0;font-size:.98rem}
.links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .5s var(--ease)}
.links a:hover::after,.links a.on::after{transform:scaleX(1)}
.lang{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:40px;padding:3px;background:transparent;cursor:pointer;color:var(--fg);font:inherit}
.lang span{padding:5px 12px;border-radius:40px;font-size:.78rem;line-height:1;transition:background .4s,color .4s}
.lang .l-en{font-family:var(--f-en);letter-spacing:.12em}
.lang .l-ar{font-family:var(--f-ar);font-size:.9rem}
html[lang="ar"] .lang .l-ar, html[lang="en"] .lang .l-en{background:var(--accent);color:var(--bg)}
.nav .btn{--h:44px;padding:0 20px;font-size:.78rem}
html[lang="ar"] .nav .btn{font-size:.92rem}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--fg);cursor:pointer;place-items:center}
.burger i{display:block;width:18px;height:1px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
.menu{position:fixed;inset:0;z-index:99;background:var(--noir);color:#f3e9d6;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:110px var(--gut-r) 40px var(--gut);clip-path:circle(0% at 90% 5%);transition:clip-path .9s var(--ease);visibility:hidden}
html[dir="rtl"] .menu{clip-path:circle(0% at 10% 5%)}
.menu.open{clip-path:circle(150% at 50% 50%)!important;visibility:visible}
.menu a{font-size:clamp(1.9rem,8vw,3rem);text-decoration:none;line-height:1.35;color:#f3e9d6}
.menu a small{font-family:var(--f-en);font-size:.8rem;color:var(--gold);letter-spacing:.2em;margin-inline-end:14px;vertical-align:middle}
.menu .menu-foot{margin-top:28px;color:rgba(243,233,214,.6);font-size:.95rem}
@media (max-width:1080px){.links,.nav .btn{display:none}.burger{display:grid}.lang{margin-inline-start:auto}}

/* ---------- side progress ---------- */
.rail{position:fixed;inset-inline-end:max(22px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--accent);font-family:var(--f-en);font-size:.75rem;letter-spacing:.2em;mix-blend-mode:normal}
.rail .bar{width:1px;height:120px;background:var(--line);position:relative;overflow:hidden}
.rail .bar i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
@media (max-width:900px){.rail{display:none}}

/* ---------- floating whatsapp ---------- */
.wa{position:fixed;z-index:70;color:var(--bg);bottom:calc(22px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(22px + env(safe-area-inset-left,0px));width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.25);}
.wa svg{width:40px;height:40px}
@media (max-width:600px){.wa{width:64px;height:64px}.wa svg{width:34px;height:34px}}
@media (max-width:380px){.wa{width:56px;height:56px}.wa svg{width:30px;height:30px}.compass .totop{width:52px;height:52px}}
.wa::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);animation:pulse 2.6s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* ---------- mobile scroll rail: a slim gold thread on the right you can grab and drag ---------- */
.mscroll{display:none}
@media (hover:none),(pointer:coarse),(max-width:900px){
  .mscroll{display:block;position:fixed;z-index:71;right:max(0px,env(safe-area-inset-right,0px));top:calc(84px + env(safe-area-inset-top,0px));bottom:calc(104px + env(safe-area-inset-bottom,0px));width:26px;touch-action:none;
    opacity:0;transition:opacity .5s,--accent .9s ease,--line .9s ease,--bg .9s ease}
  .mscroll.on,.mscroll.drag{opacity:1}
  .ms-track{position:absolute;top:0;bottom:0;right:4px;width:2px;border-radius:2px;background:var(--line)}
  .ms-fill{position:absolute;top:0;left:0;right:0;height:var(--p,0%);background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 40%,transparent));border-radius:2px;opacity:.6}
  .ms-thumb{position:absolute;right:-3px;top:0;width:8px;height:46px;border-radius:8px;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 6px 18px rgba(22,13,6,.35);
    transform:translateY(var(--y,0px));transition:width .35s var(--ease),right .35s var(--ease),box-shadow .35s}
  .mscroll.drag .ms-thumb{width:12px;right:-5px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent),0 10px 26px rgba(22,13,6,.4)}
  .ms-tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(8px,-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 14px;border-radius:30px;
    background:color-mix(in srgb,var(--bg) 92%,transparent);border:1px solid var(--line);color:var(--fg);font-size:.88rem;font-weight:500;box-shadow:0 10px 30px -10px rgba(22,13,6,.45);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .45s var(--ease)}
  .mscroll.drag .ms-tip{opacity:1;transform:translate(0,-50%)}
  .ms-n{font-style:normal;font-family:var(--f-en);color:var(--accent);letter-spacing:.08em}
}
/* ---------- travel veil: long jumps fade through soft blur instead of racing past pinned chapters ---------- */
.veil{position:fixed;inset:0;z-index:95;pointer-events:none;visibility:hidden;display:grid;place-items:center;
  background:radial-gradient(60% 50% at 50% 45%,color-mix(in srgb,var(--accent) 16%,var(--bg)),var(--bg) 70%);clip-path:circle(0px at 50% 50%)}
.veil .vm{width:58px}
.veil .vt{position:absolute;top:calc(50% + 52px);font-family:var(--f-en);font-size:.78rem;letter-spacing:.3em;color:var(--accent);opacity:.8;text-transform:uppercase}
.veil .vm{width:54px;color:var(--accent);opacity:.9}
.veil .vm svg{display:block;width:100%;height:auto}
/* ---------- back to top ---------- */
.compass{position:fixed;z-index:72;bottom:calc(22px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(22px + env(safe-area-inset-right,0px));display:grid;justify-items:end;transition:--bg .9s ease,--fg .9s ease,--accent .9s ease,--line .9s ease}
.totop{position:relative;width:58px;height:58px;overflow:hidden;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--accent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(22,13,6,.18);opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .5s var(--ease),visibility .5s,transform .6s var(--ease),--bg .9s ease,--accent .9s ease,--line .9s ease}
.compass.vis .totop{opacity:1;visibility:visible;transform:none}
.totop svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke-width:1.5}
.totop .ring .trk{stroke:var(--line)}
.totop .ring .bar{stroke:var(--accent);stroke-dasharray:157;stroke-dashoffset:157;stroke-linecap:round}
.totop .arr,.totop .cp-num{position:absolute;transition:transform .55s var(--ease),opacity .4s}
.totop .arr{width:18px;height:18px;transform:translateY(140%);opacity:0}
.totop .cp-num{font-family:var(--f-en);font-size:.95rem;letter-spacing:.08em;color:var(--accent);line-height:1}
.compass.open .totop .arr{transform:none;opacity:1}
.compass.open .totop .cp-num{transform:translateY(-140%);opacity:0}
.cp-list{position:absolute;bottom:calc(100% + 12px);inset-inline-end:0;display:grid;gap:2px;padding:8px;width:max-content;min-width:220px;max-width:calc(100vw - 44px);
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px -18px rgba(22,13,6,.45);opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:100% 100%;transition:opacity .4s var(--ease),transform .55s var(--ease),visibility .4s}
html[dir="rtl"] .cp-list{transform-origin:0 100%}
.compass.open .cp-list{opacity:1;visibility:visible;transform:none}
.cp-list a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--fg);font-size:.92rem;line-height:1.3;
  opacity:0;transform:translateY(8px);transition:background .3s,opacity .4s,transform .5s var(--ease)}
.compass.open .cp-list a{opacity:1;transform:none;transition-delay:calc((8 - var(--i)) * 28ms)}
.cp-list a b{font-family:var(--f-en);font-weight:400;letter-spacing:.1em;color:var(--accent);font-size:.85rem;display:grid;place-items:center}
.cp-list a b svg{width:15px;height:15px}
.cp-list a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cp-list a.on{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.cp-list a.on b{color:var(--fg)}
.cp-list a.cp-top{border-bottom:1px solid var(--line);border-radius:12px 12px 4px 4px;margin-bottom:4px}
.compass:not(.vis){pointer-events:none}
.compass:not(.vis) .cp-list{opacity:0;visibility:hidden}
/* ---------- cursor ---------- */
.cur,.cur-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:150;border-radius:50%;display:none}
.cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--accent);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,--accent .9s ease}
.cur-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--accent)}
.cur.big{width:78px;height:78px;margin:-39px 0 0 -39px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.cur .ct{position:absolute;inset:0;display:grid;place-items:center;font-size:.6rem;letter-spacing:.2em;color:var(--accent);opacity:0;transition:opacity .3s;font-family:var(--f-en)}
.cur.big .ct{opacity:1}
@media (hover:hover) and (pointer:fine) and (min-width:901px){html.fx .cur,html.fx .cur-dot{display:block}
  /* the gold ring replaces the system pointer */
  html.fx,html.fx *{cursor:none!important}}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;overflow:hidden;color:#f3e9d6;isolation:isolate}
.hero-bg{position:absolute;inset:-4% 0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
@media (max-width:700px){.hero-bg img{object-position:66% 50%}.hero::after{background-color:rgba(22,13,6,.18)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(62% 46% at 50% 50%,rgba(22,13,6,.5),transparent 78%),
  linear-gradient(rgba(22,13,6,.22),rgba(22,13,6,.22)),
  radial-gradient(130% 70% at 50% 115%,rgba(116,68,28,.88) 0%,rgba(116,68,28,.3) 42%,transparent 68%),
  linear-gradient(180deg,rgba(22,13,6,.62) 0%,rgba(22,13,6,0) 26%,rgba(22,13,6,0) 58%,rgba(22,13,6,.55) 100%)}
.hero-in{flex:1;text-align:center;display:grid;justify-items:center;align-content:center;gap:clamp(18px,3.2svh,40px);padding-block:104px 28px}
.hero .logo-full{width:min(1040px,90vw,92svh);height:auto;color:#fffcf3;filter:drop-shadow(0 10px 40px rgba(22,13,6,.45))}
.hero .logo-full path{fill:url(#foil)}
.hero .tag{font-size:clamp(1.3rem,2.5vw,2.3rem);color:#fffcf3;line-height:1.3;margin:0;font-weight:400;letter-spacing:.01em;text-shadow:0 2px 24px rgba(22,13,6,.5)}
html[lang="ar"] .hero .tag{font-weight:400;line-height:1.6}
.hero .sub{color:rgba(251,242,223,.82);max-width:58ch;margin-inline:auto}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px}
.hero .btn{color:#160d06;border-color:#d8b36e;--accent:#d8b36e;--fg:#fffcf3;margin-top:6px}
.hero .btn:hover{color:var(--noir)}
.hero .btn.solid{color:var(--noir)}
.scroll-cue{position:relative;z-index:6;flex:none;margin-bottom:calc(clamp(28px,3.6vw,58px) + 22px + env(safe-area-inset-bottom,0px));width:max-content;display:grid;justify-items:center;gap:10px;color:#f4dfb2;text-decoration:none;transition:opacity .4s}
.scroll-cue .mouse{width:22px;height:36px;border:1.5px solid rgba(244,223,178,.85);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#f4dfb2;animation:wheel 1.9s var(--ease) infinite}
.scroll-cue small{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;opacity:.9}
html[lang="ar"] .scroll-cue small{letter-spacing:0;font-size:.92rem}
.scroll-cue:hover{opacity:.75}
@keyframes wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@media (max-height:620px){.scroll-cue small{display:none}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding-block:clamp(12px,1.8vw,22px);border-block:1px solid var(--line);white-space:nowrap;direction:ltr}
.marquee .track{display:inline-flex;gap:46px;align-items:center;font-family:var(--f-en);font-size:clamp(1.5rem,3.4vw,3.1rem);color:var(--accent);line-height:1}
.marquee .track .ar-t{font-family:var(--f-ar);font-weight:400;font-size:.82em}
.marquee .track svg{width:.55em;height:auto;flex:none;opacity:.85}
.marquee .track .o{-webkit-text-stroke:1px var(--accent);color:transparent}

/* ---------- STORY ---------- */
.story{padding-block:clamp(110px,14vw,200px) clamp(90px,10vw,150px)}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,110px);align-items:center}
.story-copy{display:grid;gap:30px;min-width:0}
.story-copy .h2{margin-top:6px}
.story-fig{position:relative;min-width:0}
.story-fig .frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:260px 260px 0 0}
.story-fig img{width:100%;height:118%;object-fit:cover;object-position:50% 30%}
.story-fig .mono-badge{position:absolute;width:156px;aspect-ratio:1;inset-inline-start:-58px;bottom:48px;border-radius:50%;background:var(--bg);box-shadow:0 18px 40px rgba(116,68,28,.14),inset 0 0 0 1px var(--line);display:grid;place-items:center}
.story-fig .ring-wrap{position:absolute;inset:7%;will-change:transform}
.story-fig .ring-text{direction:ltr;unicode-bidi:isolate;display:block;width:100%;height:100%;overflow:visible}
.story-fig .ring-text text{fill:var(--accent);font-family:var(--f-en);font-size:13.5px}
.story-fig .mono-in{position:relative;width:34%;margin-top:-2%;color:var(--head);display:block}
.story-fig .mono-in svg{display:block;width:100%;height:auto}
.story-fig figcaption{margin-top:14px;font-size:.85rem;color:var(--muted)}
.story .arch-small{margin-top:10px;display:flex;gap:20px;align-items:center}
.story .arch-small img{width:120px;aspect-ratio:1;object-fit:cover;border-radius:50%}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}.story-fig{max-width:520px;margin-inline:auto;width:100%}.story-fig .mono-badge{inset-inline-start:-8px;width:118px;bottom:24px}}

/* ---------- WHY ---------- */
.why{padding-block:clamp(100px,12vw,180px)}
.why-head{display:grid;gap:18px;margin-bottom:clamp(50px,6vw,90px);text-align:center;justify-items:center}
.why-head p{margin-inline:auto}
.why-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pillar{background:var(--bg);padding:clamp(28px,3vw,46px);display:grid;gap:14px;align-content:start;min-width:0;position:relative;overflow:hidden;transition:background .6s}
.pillar .ic{width:34px;height:34px;color:var(--accent)}
.pillar::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .7s var(--ease)}
html[dir="rtl"] .pillar::after{--o:right}
.pillar:hover::after{transform:scaleX(1)}
.pillar.img{padding:0;grid-row:span 3;grid-column:3}
.pillar.img{min-height:360px}
.pillar.img img{position:absolute;inset:0;width:100%;height:116%;object-fit:cover}
@media (max-width:980px){.why-grid{grid-template-columns:1fr 1fr}.pillar.img{grid-row:auto;grid-column:1/-1}.pillar.img img{max-height:420px}}
@media (max-width:620px){.why-grid{grid-template-columns:1fr}}

/* ---------- MVV ---------- */
.mvv{padding-block:clamp(110px,13vw,190px);overflow:hidden}
.mvv .pattern{position:absolute;width:150vw;max-width:none;top:6%;inset-inline-start:-20vw;color:var(--head);opacity:.12;pointer-events:none;height:auto}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);position:relative}
.mv{display:grid;gap:16px;align-content:start;padding-top:28px;border-top:1px solid var(--line)}
.mv .q{font-size:clamp(1.35rem,2.2vw,2.1rem);line-height:1.35;color:var(--head)}
html[lang="ar"] .mv .q{line-height:1.75;font-weight:400}
.values{margin-top:clamp(70px,9vw,130px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(22px,3vw,44px);position:relative}
.value{display:grid;gap:12px;align-content:start;min-width:0}
.value svg{width:40px;height:40px;color:var(--head)}
.value .h3{color:var(--head)}
.value p{font-size:.95rem;color:var(--muted)}
@media (max-width:980px){.values{grid-template-columns:1fr 1fr}.mv-grid{grid-template-columns:1fr}}
@media (max-width:560px){.values{grid-template-columns:1fr}}
@media (max-width:700px){
  .mvv{padding-block:90px 80px}
  .mvv .pattern{width:260vw;top:auto;bottom:-2%;inset-inline-start:-80vw;opacity:.09}
  .mv-grid{gap:44px}
  .mv{gap:12px;padding-top:22px}
  .mv .q{font-size:1.32rem;line-height:1.45}
  html[lang="ar"] .mv .q{font-size:1.22rem;line-height:1.8}
  .values{margin-top:56px;gap:0}
  .value{grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:6px;padding-block:20px;border-top:1px solid var(--line)}
  .value svg{grid-row:span 2;width:34px;height:34px;margin-top:4px}
  .value .h3{font-size:1.25rem}
  .value p{font-size:.95rem;line-height:1.6}
}

/* ---------- DESIGN (expanding image) ---------- */
.design{height:auto}
.expand{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}
.expand .media{position:absolute;inset:0;clip-path:inset(14% 22% 14% 22% round 400px 400px 0 0)}
.expand .media img{width:100%;height:100%;object-fit:cover}
.expand .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,8,.25),rgba(18,13,8,.55))}
.expand .title{position:relative;text-align:center;color:#fbf2df;display:grid;gap:14px;justify-items:center;padding-inline:var(--gut)}
.expand .title .display{color:#fbf2df}
.expand .title .chap{color:#d9b36e}
html:not(.fx) .expand .media{clip-path:none}

.inside{padding-block:clamp(110px,13vw,190px)}
.inside-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:end}
.inside-grid > *{min-width:0}
.inside .pic{aspect-ratio:3/4;overflow:hidden}
.inside .pic img{width:100%;height:120%;object-fit:cover}
.inside .copy{display:grid;gap:26px}
.big-quote{font-size:clamp(1.6rem,3vw,2.9rem);line-height:1.2;color:var(--head)}
html[lang="ar"] .big-quote{line-height:1.6;font-weight:500}
@media (max-width:900px){.inside-grid{grid-template-columns:1fr}.inside .pic{aspect-ratio:4/3}}

/* ---------- PRINCIPLES (horizontal) ---------- */
.principles{overflow:hidden}
.h-pin{padding-block:clamp(90px,10vw,140px)}
.h-track{display:flex;gap:clamp(18px,2.4vw,34px);padding-left:var(--gut);padding-right:var(--gut-r);flex-wrap:wrap}
.h-intro{flex:0 0 100%;display:grid;gap:18px;margin-bottom:30px}
.pr{flex:1 1 200px;min-width:0;position:relative;border:1px solid var(--line);padding:clamp(28px,3vw,44px);display:grid;gap:16px;align-content:start;background:color-mix(in srgb,var(--bg) 70%,#fff 30%);min-height:380px}
.pr .num{position:relative;display:inline-block;align-self:start;justify-self:start;font-family:var(--f-en);font-size:clamp(5rem,9vw,9rem);line-height:.9;padding-block:.04em}
.pr .num .n-o{display:block;color:transparent;-webkit-text-stroke:1px var(--accent)}
.pr .num .n-f{position:absolute;inset:0;padding-block:.04em;background:linear-gradient(180deg,#e9cf98 0%,#c19249 45%,#aa8955 70%,#74441c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(0% 0 0 0)}
html.fx .pr .num .n-f{clip-path:inset(100% 0 0 0)}
.pr .h3{margin-top:auto}
html.fx .principles .h-pin{height:100svh;display:flex;align-items:center;padding-block:0}
html.fx .principles .h-track{flex-wrap:nowrap;width:max-content;align-items:stretch;padding-inline:max(var(--gut),6vw)}
html.fx .h-intro{flex:0 0 min(520px,80vw);margin:0;align-content:center;padding-inline-end:4vw}
html.fx .pr{flex:0 0 clamp(300px,30vw,420px);min-height:min(62svh,560px)}
@media (max-width:899px){.pr{min-height:0}html.fx .principles .h-pin{height:auto;display:block;padding-block:90px}html.fx .principles .h-track{flex-wrap:wrap;width:auto}html.fx .pr{flex:1 1 100%;min-height:0}html.fx .h-intro{flex:0 0 100%}}

/* ---------- SCENES ---------- */
.scenes-head{padding-block:clamp(110px,12vw,170px) clamp(50px,6vw,80px);display:grid;gap:18px;text-align:center;justify-items:center}
.scenes-stage{position:relative}
.scene{position:relative;min-height:88svh;display:grid;align-items:end;overflow:hidden;color:#fbf2df}
.scene .s-img{position:absolute;inset:0}
.scene .s-img img{width:100%;height:100%;object-fit:cover}
.scene .s-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,13,8,.92) 0%,rgba(18,13,8,.35) 45%,rgba(18,13,8,.08) 75%)}
.scene .s-copy{position:relative;display:grid;gap:14px;padding-block:0 clamp(60px,9vh,110px);max-width:680px}
.scene .s-idx{font-family:var(--f-en);color:#d9b36e;letter-spacing:.25em;font-size:.85rem}
.scene .s-title{font-size:clamp(2.6rem,6vw,6rem);line-height:1;color:#fbf2df}
html[lang="ar"] .scene .s-title{line-height:1.25;font-weight:500}
.scene .s-sub{font-family:var(--f-en);color:#d9b36e;font-size:1.05rem;letter-spacing:.06em}
html[lang="ar"] .scene .s-sub{font-family:var(--f-ar)}
.scene p{color:rgba(251,242,223,.84);font-size:1.08rem}
.s-ui{display:none}
html.fx .scenes-stage{height:100svh;overflow:hidden}
html.fx .scene{position:absolute;inset:0;min-height:0}
html.fx .scene:not(:first-child) .s-img{clip-path:inset(100% 0 0 0)}
html.fx .scene:not(:first-child) .s-copy{opacity:0}
html.fx .s-ui{display:flex;position:absolute;z-index:5;bottom:clamp(60px,9vh,110px);inset-inline-end:max(var(--gut-r),5vw);align-items:center;gap:16px;font-family:var(--f-en);color:#d9b36e;letter-spacing:.2em;font-size:.85rem}
html.fx .s-ui .s-bar{width:min(180px,26vw);height:1px;background:rgba(217,179,110,.3);position:relative;overflow:hidden}
html.fx .s-ui .s-bar i{position:absolute;inset:0;background:#d9b36e;transform:scaleX(0);transform-origin:left}
html[dir="rtl"].fx .s-ui .s-bar i{transform-origin:right}
@media (max-width:700px){html.fx .s-ui{inset-inline-end:auto;inset-inline-start:var(--gut);bottom:24px}}

/* ---------- SERVICES ---------- */
.services{padding-block:clamp(110px,12vw,180px)}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(50px,6vw,80px)}
.svc-head > *{min-width:0}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line);position:relative;transition:background .6s var(--ease)}
.svc.open{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 9%,transparent) 50%,transparent)}
.svc-row{display:grid;grid-template-columns:90px minmax(0,1fr) 46px;gap:clamp(16px,3vw,48px);align-items:center;padding-block:clamp(22px,2.6vw,34px);cursor:pointer;outline-offset:-2px}
.svc .n{font-family:var(--f-en);font-size:1rem;color:var(--accent);letter-spacing:.15em;transition:transform .6s var(--ease)}
.svc .h3{transition:transform .6s var(--ease),color .5s}
.svc .go{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);transition:transform .6s var(--ease),background .5s,color .5s,border-color .5s}
.svc .go svg{width:16px;height:16px}
.svc.open .h3{color:var(--accent);transform:translateX(14px)}
html[dir="rtl"] .svc.open .h3{transform:translateX(-14px)}
.svc.open .n{transform:scale(1.25)}
.svc.open .go{background:var(--accent);border-color:var(--accent);color:var(--bg);transform:rotate(45deg)}
@media (hover:hover){.svc:not(.open) .svc-row:hover .go{border-color:var(--accent);transform:rotate(90deg)}}
.svc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .75s var(--ease)}
.svc.open .svc-panel{grid-template-rows:1fr}
.svc-in{overflow:hidden;min-height:0}
.svc-grid{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.05fr);gap:clamp(16px,3vw,48px);align-items:center;padding-bottom:clamp(26px,3vw,40px)}
.svc-txt{grid-column:2;display:grid;gap:22px;align-content:center;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .7s var(--ease)}
.svc.open .svc-txt{opacity:1;transform:none;transition-delay:.18s}
.svc-txt p{font-size:1.05rem;color:var(--fg);max-width:46ch}
.svc-ask{justify-self:start;display:inline-flex;align-items:center;gap:10px;color:var(--accent);text-decoration:none;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--accent)}
html[lang="ar"] .svc-ask{letter-spacing:0;font-size:.98rem;font-weight:500}
.svc-ask svg{width:14px;height:14px;transition:transform .5s var(--ease)}
html[dir="rtl"] .svc-ask svg{transform:scaleX(-1)}
.svc-ask:hover svg{transform:translateX(5px)}
html[dir="rtl"] .svc-ask:hover svg{transform:scaleX(-1) translateX(5px)}
.svc-fig{grid-column:3;margin:0;position:relative;aspect-ratio:1550/965;overflow:hidden;border-radius:50% 50% 0 0 / 80.3% 80.3% 0 0;clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease)}
.svc.open .svc-fig{clip-path:inset(0 0 0 0);transition-delay:.1s}
.svc-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.6s var(--ease)}
.svc.open .svc-fig img{transform:scale(1)}
.svc-fig::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,252,243,.55);border-radius:inherit;pointer-events:none}
@media (max-width:900px){.svc-head{grid-template-columns:1fr}.svc-row{grid-template-columns:44px minmax(0,1fr) 40px;gap:14px}.svc .go{width:40px;height:40px}.svc-grid{grid-template-columns:minmax(0,1fr);gap:18px;padding-inline-start:58px}.svc-txt,.svc-fig{grid-column:1}.svc-fig{order:-1}}
@media (prefers-reduced-motion:reduce){.svc-fig{clip-path:none}.svc-txt{opacity:1;transform:none}}

/* ---------- JOURNEY ---------- */
.journey{padding-block:clamp(110px,12vw,180px);overflow:hidden}
.j-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(60px,8vw,110px)}
.j-head > *{min-width:0}
.j-quote{font-size:clamp(1.2rem,1.7vw,1.55rem);line-height:1.55;color:var(--fg);position:relative;padding-inline-start:28px;border-inline-start:1px solid var(--accent)}
.j-body{position:relative}
.j-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.j-path path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.j-path .ghost{stroke:var(--line)}
.j-path .ink{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:0}
html.fx .j-path .ink{stroke-dashoffset:1}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,6vw,80px);position:relative}
.step{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center}
.step .card{grid-column:1;display:grid;gap:10px;text-align:end;min-width:0}
.step:nth-child(even) .card{grid-column:3;text-align:start}
.step .dot{grid-column:2;grid-row:1;justify-self:center;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--accent);font-family:var(--f-en);font-size:1.7rem;color:var(--accent);position:relative;z-index:2;transition:background .6s var(--ease),color .6s var(--ease),transform .6s var(--ease)}
.step .dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--accent);opacity:0;transform:scale(.8);transition:opacity .6s,transform .8s var(--ease)}
.step.lit .dot{background:var(--accent);color:var(--bg);transform:scale(1.06)}
.step.lit .dot::after{opacity:.45;transform:scale(1)}
.step .card{transition:opacity .7s var(--ease)}
html.fx .step:not(.lit) .card{opacity:.38}
.step .card p{margin-inline-start:auto;font-size:.98rem;color:var(--muted);max-width:40ch}
.step:nth-child(even) .card p{margin-inline-start:0}
.step .card .h3{color:var(--head)}
@media (max-width:820px){.j-head{grid-template-columns:1fr}.steps{gap:34px}.step{grid-template-columns:58px 1fr;gap:18px;align-items:start}.step .card,.step:nth-child(even) .card{grid-column:2;text-align:start;gap:6px;padding-top:12px}.step .dot{grid-column:1;width:58px;height:58px;font-size:1.35rem}.step .dot::after{inset:-7px}.step .card p{margin-inline-start:0;font-size:.95rem;line-height:1.65}.step .card .h3{font-size:1.28rem;line-height:1.3}html[lang="ar"] .step .card .h3{font-size:1.15rem;line-height:1.5}html[lang="ar"] .step .card p{line-height:1.85}}

/* ---------- GALA ---------- */
.gala{padding-block:0 clamp(110px,12vw,180px);overflow:hidden}
.gala-hero{position:relative;height:clamp(420px,82svh,860px);overflow:hidden}
.gala-hero img{width:100%;height:125%;object-fit:cover;object-position:50% 40%}
.gala-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--umber) 0%,transparent 25%,transparent 55%,var(--umber) 100%)}
.gala-card{position:relative;z-index:2;margin-top:clamp(-240px,-16vw,-120px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px)}
.gala-card > *{min-width:0}
.gala-copy{display:grid;gap:22px;align-content:start}
.gala-svcs{--gx:50%;--gy:50%;display:grid;grid-template-columns:1fr 1fr;gap:1px;align-self:start;position:relative;perspective:1200px;border:1px solid var(--line);
  background:radial-gradient(340px circle at var(--gx) var(--gy),rgba(240,208,140,.95),transparent 70%),var(--line)}
.gala-svcs::after{content:"";position:absolute;inset:-1px;pointer-events:none;border:1px solid transparent;
  background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(240,208,140,.9),transparent 70%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.gala-svcs:hover::after{opacity:1}
.gala-svcs:not(:hover){background:var(--line)}
.gs{position:relative;overflow:hidden;isolation:isolate;cursor:default}
.gs::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(216,179,110,.2),transparent 65%)}
.gs .gs-n{position:absolute;top:clamp(14px,1.6vw,22px);inset-inline-end:clamp(18px,2vw,28px);font-family:var(--f-en);font-size:clamp(2.6rem,4vw,3.8rem);line-height:1;color:var(--accent);opacity:.14;transition:opacity .6s,transform .8s var(--ease)}
.gs svg path{stroke-dasharray:1;stroke-dashoffset:0}
.gs .h3{transition:color .5s,transform .7s var(--ease)}
.gs p{transition:color .5s}
.gs .gs-line{display:block;height:1px;width:34px;background:var(--accent);opacity:.5;transform-origin:left;transition:width .8s var(--ease),opacity .6s}
html[dir="rtl"] .gs .gs-line{transform-origin:right}
.gs:hover,.gs.lit{z-index:1}
.gs:hover::before,.gs.lit::before{opacity:1}
.gs:hover .gs-n,.gs.lit .gs-n{opacity:.5;transform:translateY(4px) scale(1.08)}
.gs:hover .h3,.gs.lit .h3{color:var(--accent);transform:translateY(-3px)}
.gs:hover p,.gs.lit p{color:var(--fg)}
.gs:hover .gs-line,.gs.lit .gs-line{width:100%;opacity:1}
.gs:hover svg path,.gs.lit svg path{animation:gsDraw 1.4s var(--ease) both}
@keyframes gsDraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.gs{background:var(--bg);padding:clamp(24px,2.6vw,38px);display:grid;gap:12px;align-content:start;min-width:0}
.gs svg{width:40px;height:40px;color:var(--accent)}
.gs p{font-size:.95rem;color:var(--muted)}
@media (max-width:900px){.gala-card{grid-template-columns:1fr}}
@media (max-width:520px){.gala-svcs{grid-template-columns:1fr}}

/* ---------- CONTACT ---------- */
.contact{padding-block:clamp(80px,8vw,120px) clamp(50px,5vw,80px);overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(118deg,transparent 30%,rgba(255,244,214,.22) 46%,transparent 58%),linear-gradient(118deg,transparent 52%,rgba(251,218,219,.16) 64%,transparent 74%)}
.contact .bigmono{position:absolute;z-index:-1;width:min(720px,80vw);inset-inline-end:-8vw;top:8%;color:#fff;opacity:.1}
.c-top{display:grid;gap:14px;max-width:980px}
.c-top .display{color:var(--head);font-size:clamp(2.2rem,4.6vw,4.6rem)}
html[lang="ar"] .c-top .display{font-size:clamp(2rem,4vw,4rem)}
.c-grid{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,2.6vw,36px);align-items:stretch}
.c-grid > *{min-width:0}
/* framed cards: the form on ivory paper, the details on umber */
.c-card{position:relative;padding:clamp(24px,3vw,44px);border-radius:6px;box-shadow:0 40px 80px -30px rgba(60,32,10,.55),0 0 0 1px rgba(255,252,243,.35)}
.c-card::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);border-radius:3px;pointer-events:none}
.c-form{background:#fffcf3;--fg:#2a1909;--muted:#6e5a45;--accent:#aa8955;--head:#74441c;--line:rgba(170,137,85,.42);color:var(--fg);color-scheme:light}
.c-info{background:linear-gradient(160deg,#2c180a 0%,#3d230f 100%);--fg:#fffcf3;--muted:rgba(255,252,243,.66);--accent:#d8b36e;--head:#fbe9c6;--line:rgba(216,179,110,.3);color:var(--fg);display:grid;align-content:start;gap:0}
.c-card-h{display:grid;gap:4px;margin-bottom:22px;position:relative}
.c-card-h h3{font-size:clamp(1.3rem,1.7vw,1.6rem);color:var(--head)}
.c-card-h p{font-size:.95rem;color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;position:relative}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--head);font-weight:500}
html[lang="ar"] .field label{letter-spacing:0;font-size:.95rem}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:1rem;color:var(--fg);background:#fff;border:1px solid var(--line);padding:11px 14px;border-radius:8px;transition:border-color .4s,box-shadow .4s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(170,137,85,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.6}
.field.err input{border-color:#9a2b2b;box-shadow:0 0 0 3px rgba(154,43,43,.12)}
.send{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.send .btn{--h:56px;width:100%;padding:0 18px;letter-spacing:.1em;font-size:.86rem}
html[lang="ar"] .send .btn{font-size:1rem;letter-spacing:0}
.send .btn svg{width:20px;height:20px;flex:none}
.send .b-wa{background:#2c180a;border-color:#2c180a;color:#fffcf3;--accent:#aa8955}
.send .b-wa::before{background:#aa8955}
.send .b-wa:hover{color:#fffcf3}
.send .b-mail{background:transparent;border-color:#2c180a;color:#2c180a;--accent:#2c180a}
.send .b-mail:hover{color:#fffcf3}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{grid-column:1/-1;font-size:.86rem;color:var(--muted);margin:0}
.form-note a{color:var(--head)}
.ci{display:grid;grid-template-columns:42px minmax(0,1fr);gap:4px 14px;align-items:center;padding-block:13px;border-bottom:1px solid var(--line);position:relative}
.ci:first-of-type{padding-top:0}
.ci .ic{grid-row:span 2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.ci .ic svg{width:18px;height:18px}
.ci small{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.3}
html[lang="ar"] .ci small{letter-spacing:0;font-size:.86rem}
.ci a,.ci span{font-size:clamp(1rem,1.15vw,1.12rem);text-decoration:none;color:var(--head);line-height:1.5}
.ci a.num{font-family:var(--f-en);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate;justify-self:start;width:max-content;max-width:100%}
.ci a:hover{color:var(--accent)}
.ci .row{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.ci .row a.chat,.ci a.chat.map{font-size:.92rem;color:var(--accent)}
.ci a.chat.map{grid-column:2;justify-self:start}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;position:relative}
.socials a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--head);transition:background .4s,color .4s}
.socials a:hover{background:var(--accent);color:#2c180a}
.socials svg{width:18px;height:18px}
@media (max-width:980px){.c-grid{grid-template-columns:1fr}}
@media (max-width:560px){form{grid-template-columns:1fr}.send{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
footer{padding-block:clamp(70px,8vw,110px) calc(40px + env(safe-area-inset-bottom,0px));text-align:center;display:grid;gap:26px;justify-items:center}
footer .logo-full{width:min(360px,70vw);color:var(--accent)}
footer .logo-full .t{opacity:1}
footer .f-links{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center}
footer .f-links a{text-decoration:none;color:var(--muted);font-size:.92rem}
footer .f-links a:hover{color:var(--accent)}
footer .copy{font-size:.82rem;color:var(--muted)}


/* ---------- pages: shared pieces added when the site became several pages ---------- */
.lang{text-decoration:none}
.links a.on{color:var(--accent)}
.menu a.on{color:var(--gold)}
.menu .menu-foot{display:grid;gap:14px;justify-items:start}
.menu .menu-foot a.menu-cta{font-size:1rem;line-height:1;display:inline-flex;align-items:center;height:50px;padding:0 24px;border:1px solid var(--gold);color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
html[lang="ar"] .menu .menu-foot a.menu-cta{letter-spacing:0;font-size:1.05rem}
@media (max-width:1240px){.links,.nav .btn{display:none}.burger{display:grid}.lang{margin-inline-start:auto}}

/* arriving from another page: the veil already covers the screen, so the door preloader is skipped */
html.arrive .pre{display:none}
html.arrive .veil{visibility:visible;clip-path:none;animation:veilOut 0s 3.5s forwards}
@keyframes veilOut{to{visibility:hidden}}

/* hero */
.hero-logo{display:grid;justify-items:center}
.hero .logo-full{width:min(940px,86vw,70svh)}
.hero .btn.ghost{color:#fffcf3;background:rgba(22,13,6,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn.ghost::before{background:#fffcf3}
.hero .btn.ghost:hover{color:var(--noir)}
.hero .sub{font-size:clamp(1rem,1.2vw,1.15rem)}

/* page header: the hero's language at chapter scale */
.page-hero{min-height:clamp(520px,82svh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;color:#fffcf3}
.ph-bg{position:absolute;inset:-6% 0;z-index:-2}
.ph-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(22,13,6,.7) 0%,rgba(22,13,6,.12) 26%,rgba(22,13,6,.38) 52%,rgba(22,13,6,.82) 76%,rgba(22,13,6,.95) 100%),
  radial-gradient(90% 60% at 50% 110%,rgba(116,68,28,.7),transparent 70%)}
.page-hero[data-theme="umber"]::after{background:
  linear-gradient(180deg,rgba(44,24,10,.72) 0%,rgba(44,24,10,.12) 32%,rgba(44,24,10,.3) 58%,#2c180a 100%)}
.ph-in{display:grid;gap:18px;justify-items:start;padding-block:140px clamp(56px,7vw,100px)}
.ph-in .display{max-width:16ch;color:#fffcf3;filter:drop-shadow(0 4px 30px rgba(22,13,6,.55))}
.ph-in .eyebrow,.ph-in .crumbs{text-shadow:0 1px 14px rgba(22,13,6,.8)}
[data-theme="gold"] .foil{filter:drop-shadow(0 3px 18px rgba(116,68,28,.4))}
html[lang="ar"] .ph-in .display{max-width:18ch}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.3}
html[lang="ar"] .crumbs{letter-spacing:0;font-size:.95rem}
.crumbs a{text-decoration:none;color:var(--muted);transition:color .3s}
.crumbs a:hover{color:var(--accent)}
.crumbs i{width:4px;height:4px;background:var(--accent);transform:rotate(45deg);opacity:.7}
.crumbs [aria-current]{color:var(--fg)}

/* why: icon and its number share the top row */
.p-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.p-n{font-family:var(--f-en);font-size:1.05rem;letter-spacing:.16em;color:var(--accent);opacity:.7;line-height:1}

/* values get their own heading */
.values-h{margin-top:clamp(70px,9vw,130px)}
.values-h + .values{margin-top:clamp(26px,3vw,40px)}
@media (max-width:700px){.values-h{margin-top:56px}.values-h + .values{margin-top:8px}}

/* design copy */
.kicker{font-size:clamp(1.1rem,1.4vw,1.35rem);color:var(--head);font-style:italic}
html[lang="ar"] .kicker{font-style:normal;font-weight:600}
.coda{font-size:clamp(1.08rem,1.35vw,1.3rem);line-height:1.6;color:var(--head);padding-inline-start:22px;border-inline-start:1px solid var(--accent)}
html[lang="ar"] .coda{line-height:1.95}

/* subtitles under service, step and gala headings */
.svc-sub,.st-sub,.gs-sub{font-family:var(--f-en);font-style:italic;color:var(--accent);font-size:1.08rem;line-height:1.4;letter-spacing:.01em}
html[lang="ar"] .svc-sub,html[lang="ar"] .st-sub,html[lang="ar"] .gs-sub{font-family:var(--f-ar);font-style:normal;font-weight:500;font-size:1.02rem;line-height:1.7}
.svc-sub{font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--head)}
.step .card .st-sub{margin-top:-4px}
.step .card p.st-sub{color:var(--accent);margin-inline-start:0;max-width:none}
.gs .gs-sub{color:var(--accent);margin-top:-4px}

/* journey header holds the quote alone */
.p-journey .j-head{grid-template-columns:1fr;justify-items:center;text-align:start}
.p-journey .j-quote{max-width:60ch}
.p-journey .journey{padding-top:clamp(80px,9vw,140px)}
.p-services .services{padding-top:clamp(80px,9vw,140px)}

/* gala page: the header image stands in for the old banner */
.p-events .gala{padding-top:clamp(70px,8vw,120px)}
.p-events .gala-card{margin-top:0}

/* contact page opens with the form */
.contact.first{padding-top:calc(clamp(110px,11vw,150px) + env(safe-area-inset-top,0px))}
.c-card-h h2{font-size:clamp(1.3rem,1.7vw,1.6rem);color:var(--head)}
.field select{cursor:pointer;padding-inline-end:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23aa8955' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:12px 8px;background-position:right 14px center}
html[dir="rtl"] .field select{background-position:left 14px center}
.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(170,137,85,.18)}
.svc-chip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding:10px 10px 10px 16px;border:1px solid var(--accent);border-radius:40px;background:rgba(170,137,85,.08);color:var(--fg);font-size:.95rem}
html[dir="rtl"] .svc-chip{padding:10px 16px 10px 10px}
.svc-chip b{color:var(--head);font-weight:600}
.svc-chip button{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--head);font:inherit;font-size:1.1rem;line-height:1;cursor:pointer}

/* explore: the home page opens onto the three chapter pages */
.explore{padding-block:clamp(100px,11vw,170px)}
.x-head{display:grid;justify-items:center;margin-bottom:clamp(40px,5vw,70px)}
.x-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.x-card{position:relative;display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--fg);padding-bottom:22px;border-bottom:1px solid var(--line)}
.x-fig{margin:0 0 12px;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px 0 0}
.x-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.x-fig::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,252,243,.55);border-radius:inherit;pointer-events:none}
.x-card:hover .x-fig img{transform:scale(1.12)}
.x-n{font-family:var(--f-en);color:var(--accent);letter-spacing:.2em;font-size:.9rem}
.x-t{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.15;color:var(--head)}
html[lang="ar"] .x-t{font-weight:500;line-height:1.5;font-size:clamp(1.35rem,1.9vw,1.8rem)}
.x-l{color:var(--muted);font-size:1rem;max-width:34ch}
.x-go{position:absolute;bottom:18px;inset-inline-end:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);transition:background .5s,color .5s,border-color .5s,transform .6s var(--ease)}
.x-go svg{width:15px;height:15px}
html[dir="rtl"] .x-go svg{transform:scaleX(-1)}
.x-card:hover .x-go{background:var(--accent);border-color:var(--accent);color:var(--bg);transform:translateX(4px)}
html[dir="rtl"] .x-card:hover .x-go{transform:translateX(-4px)}
.x-card .x-l{padding-inline-end:56px}
@media (max-width:900px){.x-grid{grid-template-columns:1fr;gap:44px}.x-fig{aspect-ratio:16/11;border-radius:999px 999px 0 0/60% 60% 0 0}}

/* consultation band at the foot of each page */
.cta-band{padding-block:clamp(100px,11vw,170px);overflow:hidden;isolation:isolate;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(118deg,transparent 30%,rgba(255,244,214,.22) 46%,transparent 58%),linear-gradient(118deg,transparent 52%,rgba(251,218,219,.16) 64%,transparent 74%)}
.cta-band .bigmono{position:absolute;z-index:-1;width:min(560px,70vw);left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;opacity:.1}
.cta-band .bigmono svg{width:100%;height:auto;display:block}
.cta-in{display:grid;gap:22px;justify-items:center}
.cta-in .h2{max-width:20ch}
.cta-in .lead{margin-inline:auto}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:10px}
.cta-band .btn{--accent:#fffcf3;--fg:#fffcf3;--bg:#2c180a}
.cta-band .btn.solid{background:#2c180a;border-color:#2c180a;color:#fffcf3}
.cta-band .btn.solid::before{background:#fffcf3}
.cta-band .btn.solid:hover{color:#2c180a}
.cta-band .btn:not(.solid):hover{color:#2c180a}
.contact .bigmono svg{width:100%;height:auto;display:block}

/* next chapter: the whole band is the link */
.next{overflow:hidden}
.next-link{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:center;gap:16px;min-height:clamp(380px,62svh,640px);padding:90px var(--gut-r) 90px var(--gut);text-align:center;text-decoration:none;color:#fffcf3}
.nx-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.nx-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.8s var(--ease)}
.nx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,13,6,.9) 0%,rgba(22,13,6,.55) 50%,rgba(22,13,6,.9) 100%);transition:background .8s}
.next-link:hover .nx-bg img{transform:scale(1)}
.next-link:hover .nx-bg::after{background:linear-gradient(180deg,rgba(22,13,6,.82) 0%,rgba(22,13,6,.4) 50%,rgba(22,13,6,.85) 100%)}
.nx-n{font-family:var(--f-en);color:var(--gold);letter-spacing:.3em;font-size:1rem}
.nx-t{display:block;color:#fffcf3;max-width:16ch}
.nx-go{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);margin-top:10px;transition:background .5s,color .5s,transform .7s var(--ease)}
.nx-go svg{width:20px;height:20px}
html[dir="rtl"] .nx-go svg{transform:scaleX(-1)}
.next-link:hover .nx-go{background:var(--gold);color:var(--noir);transform:scale(1.08)}

/* footer */
footer .f-logo{display:block;color:var(--accent);text-decoration:none}
footer .f-tag{color:var(--accent);font-size:clamp(1.05rem,1.3vw,1.25rem);margin:-8px 0 0;max-width:none}
@media (max-width:900px){footer{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}}
footer .copy a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
footer .copy a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Elementor: its ".elementor img" reset must not flatten the design images */
body img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
body .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
@media (max-width:700px){body .hero-bg img{object-position:66% 50%}}
body .story-fig img{width:100%;height:118%;object-fit:cover;object-position:50% 30%}
body .story .arch-small img{width:120px;aspect-ratio:1;object-fit:cover;border-radius:50%}
body .pillar.img img{position:absolute;inset:0;width:100%;height:116%;object-fit:cover}
@media (max-width:980px){body .pillar.img img{max-height:420px}}
body .expand .media img{width:100%;height:100%;object-fit:cover}
body .inside .pic img{width:100%;height:120%;object-fit:cover}
body .scene .s-img img{width:100%;height:100%;object-fit:cover}
body .svc-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.6s var(--ease)}
body .svc.open .svc-fig img{transform:scale(1)}
body .gala-hero img{width:100%;height:125%;object-fit:cover;object-position:50% 40%}
body .ph-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
body .x-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)}
body .x-card:hover .x-fig img{transform:scale(1.12)}
body .nx-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.8s var(--ease)}
body .next-link:hover .nx-bg img{transform:scale(1)}