:root,:root[lang=ar] {
  --paper:#faf7f2;
  --cream:#fffcf7;
  --line:#e7ded5;
  --wide:1280px;
  --hero-direction:90deg;
}
[dir=rtl] {--hero-direction:270deg}
main {min-height:calc(100svh - var(--header) - 120px)}
.footer-credit {display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--wine);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.footer-credit svg {width:13px;height:13px}
.topbar {background:#fffcf8f5}
.top-nav .contents-trigger {background:transparent}
.top-nav .contents-trigger:is(:hover,[aria-expanded=true]) {background:#f1e3dc}
.top-nav a[aria-current],.mobile-nav a[aria-current] {color:var(--wine);font-weight:700}
.hero.frame {
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  align-items:stretch;
  min-height:clamp(440px,40vw,540px);
  margin-block-start:clamp(14px,2vw,26px);
  border-radius:20px;
  box-shadow:none;
}
.hero-slide img {object-position:50% 47%}
.hero-slide-portrait img {object-position:50% top}
[dir=ltr] .hero-slide img {transform:scaleX(-1)}
.hero::after,[dir=rtl] .hero::after {
  background:
    linear-gradient(var(--hero-direction),#241213d9 0%,#261315ae 31%,#28161646 66%,#24130730 100%),
    linear-gradient(0deg,#201311a6,#20131105 36%);
}
.hero-content {
  align-self:center;
  margin-block:24px 67px;
  margin-inline:clamp(31px,5.35vw,78px) 0;
  padding:0;
  background:none;
  text-shadow:0 2px 20px #24131459;
}
.hero-content .eyebrow {font-size:.79rem;font-weight:600}
.hero.frame h1,:lang(ar) .hero.frame h1 {
  font-size:clamp(2.2rem,4.1vw,3.85rem);
  line-height:1.08;
  margin-block:14px 12px;
}
.hero.frame h1 em {color:#ffdcc2}
.hero-description {font-size:1rem;max-width:35ch}
.hero-actions {margin-block-start:21px}
.hero-image {width:auto;min-width:0}
.hero-image::after {content:none}
.hero-image figcaption {
  background:#241711b8;
  border:1px solid #f1dfc54f;
  inset-inline-end:clamp(15px,3vw,37px);
  inset-block-end:17px;
}
.hero-controls {inset-inline-start:clamp(31px,5.35vw,78px);inset-block-end:17px;border-color:#fae4d75c;background:#241711b8}
.hero-controls .hero-pagers button {min-width:25px}
.hero-devices {
  display:block;
  position:absolute;
  inset-inline-end:12%;
  inset-block-end:14%;
  width:min(83%,460px);
  aspect-ratio:1.55;
  direction:ltr;
  outline-offset:6px;
}
.hero-devices :is(.hero-monitor,.hero-handset) {
  display:block;
  position:absolute;
  overflow:hidden;
  background:#211719;
  box-shadow:0 18px 35px #1c100db3,0 0 0 1px #f6d9bb99;
  transition:translate .25s ease;
}
.hero-devices:hover :is(.hero-monitor,.hero-handset) {translate:0 -4px}
.hero-monitor {
  width:78%;
  left:4%;
  bottom:9%;
  aspect-ratio:1.56;
  border:5px solid #2d2020;
  border-block-start:11px solid #2d2020;
  border-radius:10px;
  rotate:-5deg;
}
.hero-handset {
  width:25%;
  right:5%;
  bottom:0;
  aspect-ratio:390/844;
  border:4px solid #2d2020;
  border-radius:13px;
  rotate:7deg;
}
.hero-image .hero-devices img {position:static;display:block;object-fit:cover;object-position:top;height:100%;animation:none}
.home-paths {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-start:22px;
  border-block:1px solid var(--line);
}
.home-paths a {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:17px clamp(9px,1.8vw,23px);
  min-width:0;
}
.home-paths a + a {border-inline-start:1px solid var(--line)}
.home-paths a:hover {background:#f3eae2}
.home-paths b,.home-paths small {display:block}
.home-paths b {color:var(--wine-deep);font-size:.95rem}
.home-paths small {margin-block-start:3px;color:var(--muted);font-size:.79rem;line-height:1.45}
.home-paths a > [data-icon]:first-child {display:grid;place-items:center;width:39px;height:39px;color:var(--wine);background:#f2e9df;border-radius:50%}
.home-paths a > [data-icon=arrow] svg {width:15px;height:15px;color:var(--wine)}
.library {padding-block:clamp(34px,5vw,62px)}
.chapter-grid {gap:10px}
.chapter-link {border-radius:10px;min-height:105px;padding:16px;background:var(--cream);box-shadow:none}
.chapter-link:first-child {background:#f5eae0;border-color:#e3d3c7}
.chapter-link p {font-size:.83rem}

.showcase,.studio.frame,.contact {margin-block:clamp(20px,3.8vw,53px) clamp(50px,7vw,95px)}
.showcase {padding-block:0}
.showcase-heading {align-items:end;margin-block-end:22px}
.showcase-heading .eyebrow {color:#744534}
.showcase-heading h1,.studio-intro h1,.contact-cover h1 {
  font:600 clamp(1.9rem,3.4vw,3.15rem)/1.14 var(--font);
  letter-spacing:-.025em;
}
.showcase-heading h1 {color:var(--wine-deep);margin-block:6px}
.showcase-description {max-width:56ch;margin-block-start:9px}
.showcase-filters {margin-block-end:15px}
.showcase .showcase-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.showcase .showcase-grid .showcase-card {grid-column:auto;min-width:0;border-radius:13px;background:var(--cream);box-shadow:none}
.showcase .showcase-grid .scene-home {grid-column:span 2}
.showcase-card[data-set=arch],.chapter-article[data-chapter=sections] {--room:url("assets/editorial/set-arch.webp")}
.showcase-card[data-set=velvet],.chapter-article[data-chapter=identity],.chapter-article[data-chapter=integrations] {--room:url("assets/editorial/set-velvet.webp")}
.showcase-card[data-set=stone],.chapter-article[data-chapter=images],.chapter-article[data-chapter=languages] {--room:url("assets/editorial/set-stone.webp")}
.showcase-card[data-set=olive],.chapter-article[data-chapter=catalog] {--room:url("assets/editorial/set-olive.webp")}
.chapter-article[data-chapter=start] {--room:url("assets/editorial/sand.webp")}
.chapter-article[data-chapter=homepage] {--room:url("assets/editorial/linen.webp")}
.chapter-article[data-chapter=help] {--room:url("assets/editorial/contact.webp")}
.showcase-card .scene-art {
  height:clamp(210px,24vw,335px);
  background:linear-gradient(0deg,#1c11122e,transparent 55%),var(--room) center/cover no-repeat,#b5967b;
}
.scene-art::before,.scene-art::after {content:none}
.scene-art .mock-screen {box-shadow:0 14px 25px #221117a0,0 0 0 1px #e8d2c28c}
.scene-art .mock-desktop {width:76%;left:5%;right:auto;bottom:13%;--tilt:-6deg}
.scene-art .mock-mobile {width:28%;right:8%;left:auto;bottom:8%;--tilt:8deg}
.scene-home .scene-art .mock-desktop {width:min(62%,540px);left:10%;bottom:11%;aspect-ratio:1.84}
.scene-home .mock-desktop img {height:100%;object-fit:cover;object-position:top}
.scene-home .scene-art .mock-mobile {width:auto;height:79%;aspect-ratio:390/844;right:15%;bottom:8%}
.scene-product .scene-art .mock-desktop,.scene-quick .scene-art .mock-desktop {width:69%;left:auto;right:7%;bottom:15%;--tilt:7deg}
.scene-product .scene-art .mock-mobile,.scene-quick .scene-art .mock-mobile {left:9%;right:auto;bottom:8%;--tilt:-9deg}
.scene-art[data-device=desktop] .mock-desktop {width:min(80%,480px);aspect-ratio:auto;left:50%;top:50%;bottom:auto;right:auto}
.scene-home .scene-art[data-device=desktop] .mock-desktop {aspect-ratio:1.8}
.scene-art[data-device=mobile] .mock-mobile {width:auto;height:81%;left:50%;top:50%;bottom:auto;right:auto}
.scene-expand {inset:10px 10px auto auto;border:0;background:#fffdf4}
.scene-caption {padding:12px 15px 15px}
.scene-caption h2 {font-size:1.04rem;font-weight:650;color:var(--wine-deep)}
.scene-caption p {font-size:.83rem;line-height:1.5}

.studio.frame {border:0;background:none;overflow:visible}
.studio-intro {
  padding:clamp(21px,4.3vw,52px);
  border-radius:14px;
  background:linear-gradient(90deg,#2c1a14eb,#2d1a13ad),url("assets/editorial/set-arch.webp") center 63%/cover;
}
.studio-intro h1 {grid-column:1;color:var(--cream);margin:0}
.studio-body {
  margin:17px 0 0;
  min-height:0;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:none;
}
.studio-panel {padding:clamp(15px,2.8vw,34px);background:#fffcf7}
.studio-stage {
  padding:clamp(15px,2.8vw,34px);
  background:linear-gradient(#f7e9dbe8,#d8baa776),url("assets/editorial/set-stone.webp") center/cover;
}
.studio-stage .stage-area {min-height:260px;align-content:center}
.studio .layout-rows li {background:#faf5ed;border-color:#e3d6c9}
.studio .layout-rows .drop-target {background:#f0ded7;border-color:#865263}
.studio .mini-store {width:min(100%,430px);box-shadow:0 13px 24px #61423444}
.studio .mini-tile {aspect-ratio:5.6/1;min-height:48px}
.mini-tile[data-tile=banner] {background-image:url("assets/editorial/sand.webp");background-position:32% 32%}
.mini-tile[data-tile=categories] {background-image:url("assets/editorial/linen.webp");background-position:32% 41%}
.mini-tile[data-tile=features] {background-image:url("assets/editorial/wine.webp");background-position:42% 44%}

.reader {padding-block-start:24px}
.article-head {
  padding:clamp(24px,3.5vw,44px);
  min-height:190px;
  display:grid;
  align-content:center;
  border-radius:13px;
  background:linear-gradient(135deg,#291b1ae8,#301e19bf 62%,#3020169c),var(--room) center 43%/cover,#412a27;
}
.article-head h1,:lang(ar) .article-head h1 {font-size:clamp(1.7rem,2.7vw,2.45rem)}
.article-head p {margin-block-start:8px;font-size:.94rem}
.article-head .article-meta {margin-block-end:12px}
.topic h2 {font-size:clamp(1.12rem,2vw,1.4rem)}
.reader .topic {padding-block:clamp(23px,3.2vw,36px)}

.contact {
  grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);
  border-radius:16px;
  align-items:stretch;
  background:#fffcf7;
}
.contact-intro {padding:0;background:#f2e7dc}
.contact-cover {
  min-height:310px;
  display:grid;
  align-content:end;
  gap:9px;
  padding:clamp(20px,3.2vw,43px);
  color:#fff7ef;
  background:linear-gradient(0deg,#281b14f5,#281b14a8 51%,#281b141c 90%),url("assets/editorial/contact.webp") center/cover,#61412f;
}
.contact-cover p {max-width:36ch}
.contact-cover .eyebrow {color:#ffdfbd}
.contact-links {padding:16px clamp(20px,3.2vw,43px) 0;gap:0}
.contact-links a {border-block-end:1px solid #dac9bb;padding-block:8px;gap:11px}
.contact-intro > .contact-hours {margin:0;padding:14px clamp(20px,3.2vw,43px) 19px}
.contact-form {padding:clamp(20px,3.6vw,47px)}
.contact-form h2 {font-size:clamp(1.45rem,2.3vw,2rem);font-weight:650}
.contact-lead {margin-block:6px 19px;color:var(--muted);font-size:.91rem}
.contact-form fieldset {margin-block-end:18px}
.contact-reasons label > span {min-height:55px;padding-inline:11px;font-size:.86rem}
.contact-fields {gap:13px}
.contact-fields :is(input,textarea) {background:#fffdf9;border-radius:7px}
.contact-fields :is(input,textarea):focus {outline:2px solid #934d63;outline-offset:1px}
.contact-submit {gap:8px 16px;margin-block-start:18px}
.contact-submit .text-link {color:var(--wine);min-height:44px}
.wa-mark {width:20px;height:20px;flex:none}
.contact-button {background:#0d5b47}
.contact-button:hover {background:#124838}
#whatsapp-launcher {
  width:53px;
  height:53px;
  border-radius:17px;
  border:1px solid #ffffff45;
  background:#09664f;
  box-shadow:0 10px 26px #11372d50;
}
#whatsapp-launcher:is(:hover,[aria-expanded=true]) {background:#124534}
#whatsapp-launcher .wa-mark {width:25px;height:25px}
.whatsapp-dialog {
  z-index:10;
  width:min(385px,calc(100vw - 28px));
  max-height:min(510px,calc(100dvh - 95px));
  border:1px solid #336c5960;
  border-radius:20px;
  box-shadow:0 16px 55px #112c2363;
  overscroll-behavior:contain;
  overflow:auto;
}
.whatsapp-dialog::backdrop {background:#162b2352}
.whatsapp-head {
  position:sticky;
  inset-block-start:0;
  z-index:1;
  padding:12px 14px;
  background:radial-gradient(ellipse at 100% 0%,#16785f,transparent 68%),#0b4c3b;
}
.whatsapp-head h2 {font-size:1rem;line-height:1.3}
.whatsapp-head a {display:inline-flex;color:#d9f1e5}
.whatsapp-head a:hover {text-decoration:underline}
.whatsapp-head .icon-button {width:44px;height:44px;min-height:44px;border-radius:14px}
.whatsapp-symbol {background:#ffffff17;border:1px solid #ffffff30;border-radius:13px}
.whatsapp-body {
  padding:13px;
  background:radial-gradient(circle at 1px 1px,#779d8c55 1px,transparent 1.4px) 0 0/14px 14px,#e8f1e9;
}
.whatsapp-greeting {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin:0 0 11px;
  padding:11px 12px;
  border-color:#ccdcd2;
  border-radius:14px;
  border-start-start-radius:4px;
  font-size:.89rem;
  line-height:1.45;
}
.whatsapp-welcome {margin-block-end:3px;font-weight:700;color:#0b4234}
.whatsapp-wave {display:grid;place-items:center;width:38px;height:38px;font-size:1.5rem;transform-origin:65% 75%}
.whatsapp-dialog[open] .whatsapp-wave {animation:orzen-wave 1.25s .25s ease-in-out 2}
@keyframes orzen-wave {
  0%,100% {transform:rotate(0)}
  18%,54% {transform:rotate(18deg)}
  36%,72% {transform:rotate(-11deg)}
}
.whatsapp-options {gap:6px}
.whatsapp-options a {
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 16px;
  gap:8px;
  min-height:46px;
  padding:5px 9px;
  border:1px solid #bed6c7;
  border-radius:10px;
  background:#fafffb;
  color:#134332;
  font-size:.88rem;
}
.whatsapp-options a:hover {background:#dceee2}
.whatsapp-options a:first-child {background:#0b5844;color:#fffef4;border-color:#0b5844}
.whatsapp-options a:first-child:hover {background:#104b3b}
.whatsapp-options svg {width:16px;height:16px}
.wa-action-icon {display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#17654d1b}
.whatsapp-options a:first-child .wa-action-icon {background:#ffffff19}
.compact-dialog .contact-menu a {background:#f9f3ed}
.compact-dialog .contact-menu a:is(:hover,[aria-current]) {background:#f1e2d6}

@media(max-width:900px) {
  .hero-content {margin-inline-start:32px}
  .hero-devices {inset-inline-end:10%;width:86%}
  .showcase .showcase-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase .showcase-grid .scene-home {grid-column:1/-1}
  .scene-home .scene-art .mock-desktop {width:min(65%,450px)}
}
@media(max-width:640px) {
  .hero.frame {display:flex;flex-direction:column;min-height:unset;border-radius:13px;padding:0}
  .hero-slide:not(.hero-slide-portrait) img {object-position:50% 40%}
  [dir=ltr] .hero-slide img {transform:none}
  .hero::after,[dir=rtl] .hero::after {
    background:linear-gradient(0deg,#201310f5 0%,#241412dc 27%,#29161599 47%,#22141026 73%,#29151031 100%);
  }
  .hero-content {
    align-self:stretch;
    order:1;
    margin:0 0 69px;
    padding:13px 22px 4px;
  }
  .hero.frame h1,:lang(ar) .hero.frame h1 {font-size:clamp(1.75rem,7.4vw,2.4rem);margin-block:8px}
  .hero.frame h1 :is(span,em) {display:inline}
  .hero.frame .hero-description {max-width:38ch;font-size:.91rem}
  .hero-actions {margin-block-start:12px;gap:7px 13px}
  .hero.frame .hero-image {order:0;min-height:194px;height:clamp(194px,52vw,260px);width:100%;aspect-ratio:auto}
  .hero-devices {width:clamp(165px,52vw,250px);inset-inline-start:auto;inset-inline-end:10%;inset-block-end:19%}
  .hero-monitor {border-width:3px;border-block-start-width:6px;border-radius:7px}
  .hero-handset {border-width:2px;border-radius:7px}
  .hero-image figcaption {inset-inline-end:14px;inset-inline-start:auto;inset-block-end:3px}
  .demo-link {font-size:.69rem;min-height:40px;padding-inline:8px}
  .hero-controls {inset-inline-start:12px;inset-block-end:10px}
  .home-paths {grid-template-columns:1fr;margin-block-start:12px}
  .home-paths a {padding:9px 7px}
  .home-paths a + a {border-inline-start:0;border-block-start:1px solid var(--line)}
  .home-paths a > [data-icon]:first-child {width:34px;height:34px}
  .showcase-heading {align-items:start}
  .showcase .showcase-grid {grid-template-columns:minmax(0,1fr);gap:12px}
  .showcase .showcase-grid[data-filter] .showcase-card {grid-column:1/-1}
  .showcase-card .scene-art {height:clamp(200px,58vw,305px)}
  .scene-home .scene-art .mock-desktop {width:71%;left:7%}
  .studio-intro {display:block}
  .studio-body,.contact {grid-template-columns:minmax(0,1fr)}
  .studio-stage {border-inline-start:0;border-block-start:1px solid var(--line)}
  .studio-stage .stage-area {min-height:235px}
  .contact-cover {min-height:209px}
  .contact-links {padding-block-start:6px}
  .contact-hours {padding-block-start:10px;font-size:.8rem}
  .contact-form {border-block-start:1px solid var(--line)}
  .reader {padding-block-start:13px}
  .whatsapp-dialog {
    inset-inline:14px;
    inset-block-end:calc(124px + env(safe-area-inset-bottom));
    width:auto;
    max-width:420px;
    max-height:calc(100dvh - 140px - env(safe-area-inset-bottom));
    margin-inline:auto;
  }
}
@media(max-width:370px) {
  .hero-devices {inset-inline-end:9%}
  .hero-content {padding-inline:17px}
  .hero .hero-actions .button {padding-inline:10px}
  .contact-reasons {grid-template-columns:1fr}
}
@media(max-height:520px) {
  .whatsapp-dialog {inset-block-end:12px;max-height:calc(100dvh - 24px)}
}
@media(prefers-reduced-motion:reduce) {
  .hero-slide,.hero-devices :is(.hero-monitor,.hero-handset) {transition:none}
  .whatsapp-dialog[open] .whatsapp-wave {animation:none}
}
@media print {
  .home-paths {display:none}
  .article-head,.hero-content {background:white;color:black}
}