@font-face {
  font-family:"IBM Plex Sans Arabic";
  src:url("assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"IBM Plex Sans Arabic";
  src:url("assets/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight:500 900;
  font-display:swap;
}
@font-face {
  font-family:"Suisse Local";
  src:local("Suisse Int'l Regular"),local("SuisseIntl-Regular");
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Suisse Local";
  src:local("Suisse Int'l SemiBold"),local("SuisseIntl-Semibold"),local("SuisseIntl-Bold");
  font-weight:500 900;
  font-display:swap;
}
:root,:root[lang=ar] {
  --paper:#f8f4ee;
  --cream:#fffdf9;
  --wine:#551a29;
  --wine-deep:#2f151d;
  --line:#e7dcd4;
  --ink:#271d21;
  --muted:#62555a;
  --rose:#efc6b6;
  --wide:1320px;
  --header:68px;
  --font:"Suisse Local",Arial,"IBM Plex Sans Arabic",sans-serif;
  --display:var(--font);
}
:root[lang=ar] {--font:"Suisse Local","IBM Plex Sans Arabic",Arial,sans-serif}
body {
  background:var(--paper);
  font-size:1rem;
}
.topbar {background:#fffdf9f4}
.top-nav > a,.contents-trigger,.language,.search-trigger {font-size:.87rem}
.top-nav .support-trigger {background:transparent}
.top-nav .support-trigger:is(:hover,[aria-expanded=true]) {background:#f1e3dc}
.wordmark b,.mini-header b {
  font-family:var(--font);
  font-weight:700;
  letter-spacing:.075em;
  color:var(--wine);
}
.wordmark > span {font-size:.77rem}
.language-trigger > [data-icon=chevron] svg {width:12px;height:12px}
.language-trigger[aria-expanded=true] > [data-icon=chevron] svg {transform:rotate(180deg)}
.hero.frame {
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  min-height:clamp(410px,38vw,518px);
  border-radius:23px;
  box-shadow:0 22px 44px -33px #391f20bc;
}
.hero-slides,.hero-slide,.hero-slide img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-slides {z-index:-2;overflow:hidden}
.hero-slide {opacity:0;transition:opacity .8s ease}
.hero-slide[data-current] {opacity:1}
.hero-slide img {object-fit:cover;object-position:44% 43%}
.hero::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#24151de8,#24151dbe 36%,#24151d28 64%,#21101718),linear-gradient(0deg,#190e12a1,transparent 49%);
}
[dir=rtl] .hero::after {
  background:linear-gradient(270deg,#24151de8,#24151dbe 36%,#24151d28 64%,#21101718),linear-gradient(0deg,#190e12a1,transparent 49%);
}
.hero-content {
  min-width:0;
  background:none;
  padding:clamp(28px,5.3vw,76px);
  padding-block-end:clamp(64px,6vw,90px);
}
.hero-content::after {display:none}
.hero.frame h1,:lang(ar) .hero.frame h1 {
  font:600 clamp(2.15rem,4.15vw,3.95rem)/1.12 var(--font);
  letter-spacing:-.036em;
  margin-block:15px 12px;
}
:lang(ar) .hero.frame h1 {letter-spacing:-.015em;line-height:1.17}
.hero.frame h1 em {font-style:normal;font-weight:inherit;color:#ffd4bf}
.hero-description {color:#fff4eb;font-size:clamp(.99rem,1.25vw,1.14rem);line-height:1.67}
.hero-image {background:none;min-height:0}
.hero-gallery-preview {width:clamp(105px,12.2vw,169px);inset-block-end:14%;inset-inline-start:auto;inset-inline-end:21%}
.hero-image figcaption {inset-inline-end:14px;inset-block-end:14px}
.hero-controls {
  position:absolute;
  z-index:3;
  inset-inline-start:clamp(22px,5.3vw,76px);
  inset-block-end:15px;
  display:flex;
  gap:4px;
  align-items:center;
  padding:3px;
  border:1px solid #fae4d779;
  border-radius:100px;
  background:#271820cc;
  color:#fff4e8;
  backdrop-filter:blur(10px);
}
.hero-controls button {
  display:grid;
  place-items:center;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:inherit;
}
.hero-controls button:hover {background:#fff3ec28}
.hero-controls svg {width:17px;height:17px}
.hero-prev svg,[dir=rtl] .hero-controls [data-slide-step="1"] svg {transform:scaleX(-1)}
[dir=rtl] .hero-controls .hero-prev svg {transform:none}
.hero-controls .hero-play {border-inline-start:1px solid #ffffff36;border-radius:0 50% 50% 0}
[dir=rtl] .hero-controls .hero-play {border-radius:50% 0 0 50%}
.hero-pagers {display:flex;gap:1px}
.hero-controls .hero-pagers button {min-width:24px}
.hero-pagers button::after {content:'';width:7px;height:7px;border-radius:99px;background:#fae5d298}
.hero-pagers button[aria-pressed=true]::after {width:16px;background:#ffddc9}
.section-heading h2,.showcase-heading h2,.studio-intro h2,.article-head h1,.contact h2,
:lang(ar) .section-heading h2,:lang(ar) .showcase-heading h2,:lang(ar) .studio-intro h2,:lang(ar) .article-head h1 {
  font:600 clamp(1.6rem,3.1vw,2.75rem)/1.15 var(--font);
  letter-spacing:-.02em;
}
.library,.showcase {padding-block-start:clamp(44px,6vw,82px)}
.showcase-heading .eyebrow {font-size:.78rem}
.showcase-description,.section-heading p {font-size:.99rem}
.scene-caption p,.chapter-link p {font-size:.91rem}
.chapter-link {border-radius:12px;min-height:126px}
.article-head {border-radius:17px}
.menu-group h3,.menu-chapter {font-size:.93rem}
.menu-group {background:#fbf6ef}

.showcase-card {
  --stage:#d7c6b3;
  --glow:#f7eee3;
  --stone:#c8a78d;
  --shadow:#34221c65;
}
.showcase-card[data-theme=wine] {--stage:#40242e;--glow:#875c63;--stone:#63313d;--shadow:#160a10aa}
.showcase-card[data-theme=smoke] {--stage:#485051;--glow:#919b95;--stone:#758785;--shadow:#1a292aac}
.showcase-card[data-theme=petal] {--stage:#d7b7aa;--glow:#f5e7df;--stone:#ba9483}
.showcase-card[data-theme=copper] {--stage:#a56f51;--glow:#e4bda2;--stone:#93614b;--shadow:#492a218c}
.showcase-card[data-theme=olive] {--stage:#686d58;--glow:#bcc1a0;--stone:#81866b;--shadow:#363e30a8}
.scene-art {
  background:
    linear-gradient(118deg,#21131722 0 17%,transparent 17.35% 35%,#fff8df36 35.5% 56%,transparent 56.5%),
    linear-gradient(154deg,var(--glow) 0%,var(--stage) 72%);
}
.scene-art::before {
  inset:-19% 14% -20%;
  border:0;
  border-inline-end:1px solid #fff1d487;
  border-radius:49% 49% 0 0;
  background:linear-gradient(155deg,#fff9e741,#fff7e910 55%,#23151c3d);
  transform:rotate(19deg);
}
.scene-art::after {
  inset:64% -10% -37%;
  border-block-start:1px solid #fff6e24d;
  border-radius:50%;
  transform:rotate(-9deg);
  background:linear-gradient(156deg,var(--stone),var(--shadow));
  box-shadow:0 -8px 35px #1d161c24;
}
.scene-menu .scene-art::before {inset:8% 22% 15%;border-radius:51% 51% 8% 9%;transform:rotate(0)}
.scene-expand {color:var(--wine)}
.scene-expand svg {width:17px;height:17px}

.studio.frame {
  padding:0;
  display:block;
  color:var(--ink);
  background:#f5eee8;
  border:1px solid #e2d4ca;
  border-radius:21px;
  overflow:hidden;
  margin-block-end:clamp(48px,7vw,100px);
}
.studio-intro {
  position:relative;
  padding:clamp(22px,3.2vw,40px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 24px;
  border-bottom:1px solid #6d4350;
  color:#fff9ee;
  background:
    linear-gradient(111deg,#2b171e,#4d202e 60%,#603b42),
    var(--wine-deep);
}
.studio-intro > :is(.eyebrow,h2,p) {grid-column:1}
.studio-intro h2 {margin:0}
.studio-intro > p:not(.eyebrow) {max-width:58ch;font-size:.99rem}
.studio-intro .text-link {grid-area:1 / 2 / span 3;align-self:center;margin:0}
.studio-body {
  margin:clamp(12px,2.7vw,34px);
  display:grid;
  grid-template-columns:minmax(250px,.75fr) minmax(0,1fr);
  overflow:clip;
  border:1px solid #e2d5cc;
  border-radius:16px;
  box-shadow:0 17px 35px -29px #3b2029a1;
}
.studio-panel {background:#fffdf9;padding:clamp(12px,2.4vw,30px)}
.studio-stage {
  padding:clamp(12px,2.4vw,30px);
  background:radial-gradient(circle at 52% 27%,#fffbf52b,transparent 48%),
    repeating-linear-gradient(90deg,#73656816 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,#73656816 0 1px,transparent 1px 24px),
    #eee5de;
}
.studio-panel-head {
  gap:9px;
  margin-block-end:14px;
  padding-block-end:8px;
  border-block-end:1px solid #795e5526;
}
.studio-panel-head h3 {font-size:1rem;color:var(--wine-deep)}
.studio .reset {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:4px 7px;
  text-decoration:none;
  font-size:.79rem;
  border-radius:8px;
}
.studio .reset svg {width:15px;height:15px}
.studio .reset:hover {background:#f6ebe4}
.studio .layout-rows li {
  background:#fcf7f1;
  border-color:#e8d9d0;
  gap:5px;
  padding:.35rem;
  min-height:56px;
}
.studio-row-name {display:flex;align-items:center;gap:.48rem;font-size:.89rem}
.drag-handle {
  display:grid;
  place-items:center;
  min-width:18px;
  min-height:36px;
  cursor:grab;
  color:#78515d;
}
.drag-handle:active {cursor:grabbing}
.drag-handle svg {width:16px;height:20px}
.studio-row-icon {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:none;
  border-radius:7px;
  background:#f0e0d6;
  color:var(--wine);
}
.studio .layout-rows .drop-target {border-color:#865263;background:#f0ded7}
.studio .switch button,.studio .row-actions button {min-width:38px;min-height:39px}
.studio .mini-store {
  width:min(100%,410px);
  max-width:100%;
  border:4px solid #453039;
  border-radius:12px;
  box-shadow:0 18px 32px -17px #271521a1;
}
.studio .mini-store[data-device=phone] {width:min(60%,185px);border-radius:18px}
.studio .mini-tile {aspect-ratio:4.3/1}
.studio .mini-store[data-device=phone] .mini-tile {aspect-ratio:2/1}
.mini-header {background:#fffcf5;padding:.58rem .66rem}
.mini-tile[data-tile=benefits] {
  display:grid;
  align-content:center;
  justify-items:center;
  gap:4px;
  color:var(--wine);
  background:#f5e8db;
  text-shadow:none;
}
.mini-tile[data-tile=benefits] span {background:transparent}
.mini-benefit-icons {display:flex;gap:clamp(7px,2vw,20px)}
.mini-benefit-icons svg {width:17px;height:17px}

.contact {
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:start;
  margin-block-end:clamp(48px,7vw,100px);
  border:1px solid #e2d2c9;
  border-radius:21px;
  overflow:hidden;
  background:#fffdf9;
}
.contact-intro {
  padding:clamp(23px,4.4vw,60px);
  align-self:stretch;
  background:radial-gradient(ellipse at 93% 5%,#f7e5d6,transparent 61%),#ede2db;
}
.contact-emblem {
  display:grid;
  place-items:center;
  width:53px;
  height:53px;
  margin-block-end:16px;
  border:1px solid #dbc0b4;
  border-radius:14px;
  background:#fff9f4;
  color:var(--wine);
}
.contact-emblem svg {width:28px;height:28px}
.contact h2 {color:var(--wine-deep)}
.contact-intro > p {margin-block:10px 19px;color:var(--muted)}
.contact-links {display:grid;gap:5px}
.contact-links a {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  color:var(--wine);
  font-size:.93rem;
  overflow-wrap:anywhere;
}
.contact-links a:hover {text-decoration:underline;text-underline-offset:.24em}
.contact-hours {display:flex;align-items:center;gap:8px;font-size:.87rem}
.contact-hours svg {width:17px;height:17px;color:var(--wine)}
.contact-intro .company-home {min-height:44px;font-size:.9rem;color:var(--wine);text-decoration:underline;text-underline-offset:.24em}
.contact-form {padding:clamp(20px,4vw,53px)}
.contact-form fieldset {min-width:0;border:0;margin:0 0 14px;padding:0}
.contact-reasons,.contact-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.contact-reasons legend,.contact-fields label > span {font-size:.91rem;font-weight:600;color:var(--wine-deep);margin-block-end:6px}
.contact-reasons label {position:relative;cursor:pointer}
.contact-reasons input {position:absolute;inset:0;opacity:0;cursor:pointer}
.contact-reasons label > span {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:48px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fbf4ed;
  color:var(--wine);
  font-size:.89rem;
}
.contact-reasons input:checked + span {box-shadow:inset 0 0 0 1px #945868;background:#f2e2da;border-color:#945868}
.contact-reasons input:focus-visible + span {outline:2px solid #a74b64;outline-offset:2px}
.contact-reasons svg {width:19px;height:19px}
.contact-fields label {display:grid;min-width:0}
.contact-wide {grid-column:1/-1}
.contact-fields :is(input,textarea) {
  width:100%;
  min-height:46px;
  border:1px solid #d9c7be;
  border-radius:9px;
  background:#fdf8f2;
  padding:7px 11px;
  font:inherit;
  color:var(--ink);
}
.contact-fields textarea {resize:vertical;min-height:90px}
.contact-submit {display:flex;flex-wrap:wrap;align-items:center;gap:8px 13px;margin-block-start:15px}
.contact-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:48px;
  padding:6px 14px;
  border:0;
  border-radius:9px;
  background:var(--wine);
  color:#fff9ef;
}
.contact-button:hover {background:#713343}
.contact-submit p {font-size:.81rem;color:var(--muted)}
.contact-ticket {display:flex;gap:9px 14px;align-items:center;flex-wrap:wrap;margin:16px 0 20px}
.contact-ticket p {font-size:.89rem;color:var(--muted)}
.contact-compose {background:#f7f0e9;border:1px solid var(--line);border-radius:12px}
.contact-compose summary {cursor:pointer;display:flex;align-items:center;gap:8px;list-style:none;min-height:48px;padding:8px 12px;color:var(--wine)}
.contact-compose summary::-webkit-details-marker {display:none}
.contact-compose summary [data-icon=chevron] {margin-inline-start:auto}
.contact-compose[open] summary [data-icon=chevron] {transform:rotate(180deg)}
.contact-compose > :not(summary) {margin-inline:12px}
.contact-compose .contact-submit {margin-block-end:12px}
.compact-dialog {
  position:fixed;
  inset:var(--menu-top,80px) auto auto var(--menu-left,12px);
  width:min(324px,calc(100vw - 24px));
  margin:0;
  border-radius:13px;
}
.compact-dialog::backdrop {background:#28152125;backdrop-filter:none}
.compact-dialog .dialog-inner {padding:13px}
.compact-dialog .dialog-head {margin-block-end:8px}
.compact-dialog h2 {font-size:1.22rem}
.contact-menu {display:grid;gap:4px}
.contact-menu a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:8px;
  font-size:.95rem;
}
.contact-menu a:is(:hover,[aria-current]) {background:#f4e6df;border-color:#e7d0c5;color:var(--wine)}
#language-options a:not([aria-current]) [data-icon=check] {visibility:hidden}
#whatsapp-launcher {
  display:grid;
  place-items:center;
  position:fixed;
  z-index:9;
  inset-inline-end:22px;
  inset-block-end:22px;
  width:53px;
  height:53px;
  border:1px solid #5c8d76;
  border-radius:16px;
  background:#164635;
  color:#f0fff2;
  box-shadow:0 9px 22px #0c352d4d;
}
#whatsapp-launcher:hover {background:#235b44}
#whatsapp-launcher svg {width:27px;height:27px}
.whatsapp-dialog {
  position:fixed;
  inset:auto;
  inset-inline-end:22px;
  inset-block-end:83px;
  width:min(388px,calc(100vw - 30px));
  margin:0;
  border-radius:16px;
}
.whatsapp-dialog::backdrop {background:#18141b49;backdrop-filter:blur(2px)}
.whatsapp-head {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:13px;
  color:#edf9ec;
  background:linear-gradient(128deg,#103b2d,#29614a);
}
.whatsapp-head .icon-button {background:#ffffff14;color:#f9fff9;border-color:#ffffff4d}
.whatsapp-head .icon-button:hover {background:#ffffff30}
.whatsapp-head h2 {font-size:1.1rem}
.whatsapp-head bdi {font-size:.86rem}
.whatsapp-symbol {display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff19}
.whatsapp-body {padding:15px;background:#eaf0e6}
.whatsapp-greeting {
  padding:10px 12px;
  margin-block-end:11px;
  border:1px solid #d5ded1;
  border-radius:10px;
  border-start-start-radius:1px;
  background:#fffdfa;
  color:#23382c;
}
.whatsapp-options {display:grid;gap:5px}
.whatsapp-options a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:44px;
  padding:5px 10px;
  border-radius:8px;
  background:#d9e8d9;
  color:#173b2b;
  font-weight:600;
}
.whatsapp-options a:hover {background:#cee2cf}

@media(min-width:821px) {
  .footer-inner {padding-inline-end:30px}
}
@media(max-width:1080px) and (min-width:821px) {
  .top-nav > a,.contents-trigger {font-size:.78rem}
}
@media(max-width:820px) {
  :root {--header:64px}
  .hero-gallery-preview {inset-inline-end:12%}
  .contact-intro,.contact-form {padding:22px}
  .compact-dialog {inset:var(--menu-top,72px) auto auto var(--menu-left,12px)}
  #support-dialog {inset:auto 12px calc(68px + env(safe-area-inset-bottom)) auto}
  [dir=rtl] #support-dialog {inset:auto auto calc(68px + env(safe-area-inset-bottom)) 12px}
  #whatsapp-launcher {inset-inline-end:14px;inset-block-end:calc(72px + env(safe-area-inset-bottom))}
  .whatsapp-dialog {inset-inline-end:13px;inset-block-end:calc(132px + env(safe-area-inset-bottom))}
  .drag-handle {display:none}
}
@media(max-width:600px) {
  .hero.frame {display:block;min-height:0;border-radius:17px;padding-block-end:34px}
  .hero-content {padding:25px 21px 0}
  .hero.frame h1,:lang(ar) .hero.frame h1 {font-size:clamp(1.96rem,8vw,2.7rem)}
  .hero.frame .hero-description {max-width:29ch}
  .hero.frame .hero-image {min-height:169px;aspect-ratio:auto}
  .hero-gallery-preview {width:74px;inset-inline-end:20%;inset-block-end:4px}
  .hero-image figcaption {inset-block-end:0;inset-inline-end:7px}
  .demo-link {font-size:.74rem;min-height:38px}
  .hero::after,[dir=rtl] .hero::after {background:linear-gradient(180deg,#21141de3 0%,#2b1820ab 47%,#24171b45 75%,#21131cbf)}
  .hero-slide img {object-position:44% 48%}
  .hero-controls {inset-block-end:9px;inset-inline-start:13px}
  .hero-controls button {min-height:38px;min-width:37px}
  .hero-controls .hero-pagers button {min-width:21px}
  .studio-intro {display:block}
  .studio-intro h2 {margin-block:5px}
  .studio-intro .text-link {margin-block-start:7px}
  .studio-body,.contact {grid-template-columns:minmax(0,1fr)}
  .studio-stage {border-inline-start:0;border-block-start:1px solid #e2d5cc}
  .studio .switch button,.studio .row-actions button {min-width:44px;min-height:44px}
  .contact-fields {grid-template-columns:minmax(0,1fr)}
  .contact-reasons {gap:6px}
}
@media(max-width:360px) {
  .contact-reasons {grid-template-columns:1fr}
  .hero-gallery-preview {inset-inline-end:21%}
}
@media print {.contact,#whatsapp-launcher,.hero-controls,.hero-slides {display:none!important}}