/* Dar Elidrissi — Moroccan editorial edition, November 2026 */
:root{
  --forest:#1a422f;--dark:#02110c;--cream:#f3ebd6;--ink:#09231a;
  --lime:#dbc28e;--sand:#eee3ca;--gold:#ab8a49;--gold-soft:#d7bc81;
  --berry:#7e2729;--line:#d8ceb3;--muted:#566458;
  --font:'Rakkas','Georgia',serif;--body:'DM Sans',Arial,sans-serif;--arabic:'Noto Naskh Arabic',serif;
}
html{scroll-padding-top:95px} body{background:var(--cream);color:var(--ink);font-family:var(--body);overflow-x:clip}
::selection{background:var(--gold-soft);color:var(--dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b79545;outline-offset:4px}
.announcement{background:var(--dark);color:var(--cream);height:33px;font-size:10px;letter-spacing:.18em;font-weight:700}
.ann-star{color:var(--gold-soft);font-size:19px}
.header{min-height:92px;height:92px;background:rgba(243,235,214,.97);border-bottom:1px solid rgba(26,66,47,.14);box-shadow:0 3px 25px #02110c12;backdrop-filter:blur(18px);padding:0 clamp(16px,3vw,55px)}
.brand{gap:10px;flex-shrink:0}
.brand-logo{width:76px;height:76px;display:block;flex:none}
.brand-logo img{width:100%;height:100%;object-fit:contain;display:block;filter:none}
.brand-copy{gap:5px}
.brand-kicker{font:400 21px/1.06 var(--font);letter-spacing:0;color:var(--forest)}
.brand-copy small{font:700 9px/1 var(--body);letter-spacing:.22em;color:#775d31}
.desktop-nav{gap:clamp(12px,1.6vw,28px)}
.desktop-nav a{font:700 clamp(16px,1.33vw,21px)/1.2 var(--body);letter-spacing:-.025em;color:var(--dark);text-transform:none;padding:10px 0}
.desktop-nav a:after{background:var(--gold)}
.header-cta,.lang-switch{border-radius:3px}
.header-cta{font-size:11px;padding:15px 14px;background:var(--forest);color:var(--cream)}
.lang-switch{font-size:12px;border-color:var(--forest);color:var(--forest);padding:11px}
.hero{min-height:610px;height:min(820px,calc(100svh - 125px));background:var(--dark)}
.hero-photo{filter:saturate(.9);background-position:71% 33%}
.hero-shade{background:linear-gradient(90deg,rgba(2,17,12,.95) 0%,rgba(2,17,12,.88) 35%,rgba(2,17,12,.25) 100%)}
.hero:before{content:'';position:absolute;z-index:2;right:-45px;top:-30px;width:clamp(220px,35vw,540px);height:80%;background:url('calligraphy-cream.webp') center/cover no-repeat;opacity:.16;mix-blend-mode:screen;mask-image:linear-gradient(to right,transparent,black 30%,transparent 95%);pointer-events:none}
.hero:after{height:15px;background:linear-gradient(90deg,transparent 5%,var(--gold-soft) 50%,transparent 95%);opacity:.6}
.hero-content{width:min(930px,87vw);left:max(5.5vw,23px)}
.hero h1{font:400 clamp(69px,7.6vw,134px)/.96 var(--font);letter-spacing:-.017em;margin:24px 0 27px;text-wrap:balance}
.hero h1 .outlined{-webkit-text-stroke:1px var(--cream);color:transparent}
.hero h1 .accent{color:var(--gold-soft)}
.hero-bottom p{font-size:17px;line-height:1.65;color:#f4eddc;font-weight:500}
.hero-index{font-size:10px;color:#e1cb9e}
.round-arrow{background:var(--gold-soft);color:var(--dark)}
.ticker{height:52px;background:var(--forest);border:0}
.ticker-track span{font:400 25px/1 var(--font);color:var(--cream);letter-spacing:.02em}
.ticker-track b{color:var(--gold-soft)}
.section-wrap{width:min(1380px,89%)}
.intro{padding-top:78px;padding-bottom:82px;grid-template-columns:21% 1fr;gap:24px;isolation:isolate}
.intro:before{display:none}
.intro h2,.section-heading h2,.collections h2,.experiences h2,.appointment h2,.about h2,.contact h2{font:400 clamp(47px,5.5vw,87px)/1.06 var(--font);letter-spacing:-.01em}
.intro h2 em,.section-heading h2 em,.collections h2 em,.experiences h2 em,.appointment h2 em,.about h2 em,.contact h2 em{font-weight:400;color:var(--forest);font-style:normal}
.intro h2 strong{font-weight:700;color:var(--forest)}
.intro-copy{padding-top:28px;gap:35px;align-items:center}
.intro-copy p,.section-heading p:last-child,.collections-head>p:last-child,.exp-left>p:not(.section-label),.appointment p:not(.section-label),.about-text p,.contact-top>p:last-child{font-family:var(--body);font-size:16px;line-height:1.75;font-weight:500}
.intro-kicker .motif{color:var(--gold);font-size:200px;opacity:.5;font-family:var(--font)}
.embroidered-decoration{position:absolute;z-index:-1;right:-7%;top:1%;width:42%;height:78%;background:url('ornament.webp') right top/contain no-repeat;opacity:.15;mask-image:linear-gradient(90deg,transparent,black 42%,transparent 100%);pointer-events:none}
.section-label,.eyebrow{font:800 11px/1.4 var(--body);letter-spacing:.15em}
.text-link{font:800 11px/1.4 var(--body);letter-spacing:.08em;border-color:var(--forest)}
.services{padding:80px 0 85px;background:var(--cream);isolation:isolate}
.services:before,.services:after{width:75px;background-image:url('textile-side.webp');background-size:100% auto;opacity:.2;mask-image:linear-gradient(90deg,#000,transparent);z-index:-1}
.services:after{mask-image:linear-gradient(-90deg,#000,transparent)}
.section-heading{margin-bottom:35px;gap:45px}
.section-heading p:last-child{max-width:380px}
.services-grid{gap:12px;grid-auto-rows:minmax(300px,31vw)}
.service-card{border-radius:3px;box-shadow:none}
.service-card:before{border-radius:3px}
.service-overlay h3{font:400 clamp(33px,3.3vw,60px)/1.02 var(--font);letter-spacing:0}
.service-overlay p{font-size:14px}
.service-number{color:var(--cream)}
.coming{background:var(--forest)}
.coming-visual strong{font-family:var(--font);letter-spacing:0;font-weight:400;color:var(--cream)}
.statement{background:var(--dark);padding:85px 0;isolation:isolate}
.statement:before{background-image:url('zellige.webp');opacity:.12;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent 0%,black 65%,transparent 100%)}
.statement-type{font:400 clamp(62px,10vw,146px)/1 var(--font);letter-spacing:.01em}
.statement-type span{-webkit-text-stroke:1px var(--gold-soft);color:transparent}
.big-asterisk{color:var(--gold);opacity:.13}
.statement-woven{position:absolute;right:-7%;bottom:-10%;width:37%;height:100%;background:url('embroidery.webp') center/cover;opacity:.13;mask-image:radial-gradient(ellipse at center,#000,transparent 70%)}
.collections{padding:88px 0 92px;isolation:isolate}
.collections:before{display:none}
.collection-ornament{position:absolute;right:-12%;top:-4%;width:46%;height:45%;background:url('calligraphy-cream.webp') center/cover;opacity:.18;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,#000,transparent 75%);z-index:-1}
.collections-head{margin-bottom:38px}
.collections-layout{gap:12px;min-height:540px}
.collection-photo,.collection-caption{border-radius:2px;box-shadow:none}
.collection-photo:after{border-radius:2px}
.collection-caption{background:var(--sand);border:1px solid #d7cbaa}
.collection-caption>span{font-size:90px;color:var(--gold)}
.collection-caption p{font:400 clamp(25px,2.5vw,37px)/1.15 var(--font)}
.experiences{padding:86px 0;background:var(--forest);isolation:isolate}
.experiences:before{content:'';position:absolute;inset:0;background:url('palace.webp') right center/auto 100% no-repeat;opacity:.13;mask-image:linear-gradient(90deg,transparent 45%,black 100%);z-index:-1}
.experiences:after{height:9px;opacity:.3;background-image:url('rug.webp');background-size:auto 70px}
.experiences h2 em{color:var(--gold-soft)}
.exp-item{border-radius:0;border:0;border-top:1px solid #f3ebd655;background:transparent;padding:19px 0}
.exp-item h3{font:400 39px/1.12 var(--font);letter-spacing:0;margin:5px 0}
.exp-item p{font-size:14px}
.btn-light,.solid-button{border-radius:2px;box-shadow:none;background:var(--cream);color:var(--forest)}
.appointment{margin-top:70px;margin-bottom:70px;padding:50px 5%;border-radius:2px;background:var(--sand);border:1px solid var(--line);overflow:hidden}
.appointment:before{content:'';width:22%;background:url('textile-side.webp') left center/cover no-repeat;opacity:.12;mask-image:linear-gradient(90deg,#000,transparent)}
.appointment h2{font-size:clamp(40px,5vw,80px)}
.appointment-mark{color:var(--gold);font-size:110px}
.solid-button{background:var(--forest);color:var(--cream)}
.about{grid-template-columns:1.05fr .95fr;background:var(--cream)}
.about-text,.about-art{border-radius:0}
.about-text{padding:75px max(5.5vw,28px)}
.about-art{background:var(--forest);min-height:510px}
.about-art:before{background:url('embroidery.webp') center/cover;opacity:.15;mask-image:linear-gradient(90deg,transparent,black 45%,transparent)}
.about-graphic{border-color:#dbc18a69}
.about-graphic>span{font:400 clamp(110px,14vw,210px)/1 var(--font);color:var(--cream);letter-spacing:0}
.about-graphic b{color:var(--gold-soft)}
.founders{font:400 36px/1 var(--font)}
.contact{padding:85px 0;background:var(--cream);isolation:isolate}
.contact:before{display:none}
.contact-pattern{position:absolute;right:0;top:3%;width:35%;height:65%;background:url('ornament.webp') right top/cover no-repeat;opacity:.15;mask-image:linear-gradient(90deg,transparent,black 80%);z-index:-1}
.contact-top{margin-bottom:42px}
.contact-form{border-radius:2px;background:#f8f2e3;border:1px solid var(--line);box-shadow:none}
.contact-form:before{background:url('calligraphy-cream.webp') center/cover;opacity:.13}
.contact-form h3{font:400 40px var(--font)}
.contact-info-link strong{font:400 clamp(25px,2.25vw,38px)/1.13 var(--font)}
.base strong{font:400 26px/1.12 var(--font)}
.form-submit{border-radius:2px;background:var(--forest);color:var(--cream)}
.floating-wa{background:var(--forest);color:var(--cream);border:1px solid var(--gold-soft)}
.footer{padding-top:65px;background:var(--dark)}
.footer:before{background:url('calligraphy-cream.webp') right center/50% auto no-repeat;opacity:.1}
.footer-brand img{width:108px;height:108px}
.footer-brand strong{font:400 clamp(30px,3vw,49px)/1 var(--font);letter-spacing:0}
.footer-brand small{font-size:10px}
.footer-links a{font-size:13px}
.footer-bottom{color:#dbd3bf}
/* Door reveal: authentic photo cut into individual working door leaves */
.door-intro[hidden]{display:none!important}
.door-intro{position:fixed;inset:0;background:transparent;z-index:1000;display:grid;place-items:center;overflow:hidden;perspective:1300px;isolation:isolate}
.intro-portal{position:relative;width:min(100vw,calc(100svh * .8));height:100svh;max-height:1200px;transform-style:preserve-3d;box-shadow:0 0 0 100vmax var(--dark)}
.portal-glow{position:absolute;inset:12% 12% 3%;background:radial-gradient(ellipse at center,#e7b56a70,#173327 65%,transparent);z-index:0}
.portal-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:5;pointer-events:none}
.portal-leaf{position:absolute;top:13.5%;height:83.1%;backface-visibility:hidden;transform-style:preserve-3d;z-index:4;will-change:transform;overflow:hidden}
.portal-leaf img{display:block;width:100%;height:100%;object-fit:fill}
.portal-leaf-left{left:10.8%;width:39.2%;transform-origin:left center}
.portal-leaf-right{left:50%;width:38.7%;transform-origin:right center}
.door-intro-wordmark{position:absolute;z-index:7;top:5%;left:50%;transform:translateX(-50%);color:#f9edce;font:400 clamp(24px,4vw,49px)/1 var(--font);white-space:nowrap;text-shadow:0 3px 18px #000a;letter-spacing:.03em;transition:opacity .35s}
.door-intro-wordmark span{font:700 10px var(--body);display:block;text-align:center;letter-spacing:.27em;margin-top:8px}
.skip-intro{position:absolute;right:20px;bottom:25px;z-index:9;border:1px solid #fff8;color:#fff;background:#02110c88;padding:12px 18px;font:700 12px var(--body)}
.door-intro.intro-playing .portal-leaf-left{animation:doorOpenLeft 1.7s cubic-bezier(.25,.7,.2,1) .45s forwards}
.door-intro.intro-playing .portal-leaf-right{animation:doorOpenRight 1.7s cubic-bezier(.25,.7,.2,1) .45s forwards}
.door-intro.intro-playing .door-intro-wordmark{opacity:0;transition-delay:1.2s}
.door-intro.intro-done{opacity:0;pointer-events:none;transition:opacity .32s ease}
@keyframes doorOpenLeft{0%{transform:rotateY(0)}100%{transform:rotateY(-114deg)}}
@keyframes doorOpenRight{0%{transform:rotateY(0)}100%{transform:rotateY(114deg)}}
/* RTL naturally flows via dir=rtl; preserve brand mark positioning */
html[lang=ar] body{font-family:var(--arabic)}
html[lang=ar] :is(h1,h2,h3,.hero h1,.statement-type,.exp-item h3,.service-overlay h3){font-family:var(--arabic);font-weight:700;line-height:1.2;letter-spacing:0}
html[lang=ar] .desktop-nav a,html[lang=ar] .mobile-nav a{font-family:var(--arabic);letter-spacing:0;font-weight:700}
html[lang=ar] .hero h1 .outlined{-webkit-text-stroke:0;color:var(--cream)}
html[lang=ar] .brand-kicker,html[lang=ar] .footer-brand strong{font-family:var(--font)}
@media(max-width:1240px){.brand-kicker{font-size:18px}.brand-logo{width:65px;height:65px}.desktop-nav{gap:13px}.desktop-nav a{font-size:15px}.header-cta{font-size:10px;padding:12px 10px}}
@media(max-width:1040px){.desktop-nav{display:none}.menu-toggle{display:flex}.header-cta{display:none}.mobile-nav{position:fixed;top:125px;left:0;right:0;bottom:0;background:var(--cream);z-index:28;padding:35px 6%;flex-direction:column;gap:20px}.mobile-nav:not([hidden]){display:flex}.mobile-nav a{font:700 36px/1.1 var(--body);letter-spacing:0;color:var(--forest)}.header{height:92px}.menu-toggle span{background:var(--forest)}}
@media(max-width:760px){
 .header{height:76px;min-height:76px;padding:0 16px}.brand-logo{height:55px;width:55px}.brand-kicker{font-size:17px}.brand-copy small{font-size:8px}.mobile-nav{top:109px;gap:19px}.mobile-nav a{font-size:30px}.lang-switch{font-size:10px;padding:8px 9px}
 .hero{min-height:650px;height:calc(100svh - 109px)}.hero-content{width:88%;left:6%;top:51%}.hero-photo{background-position:59% center}.hero-shade{background:linear-gradient(90deg,#02110ccf,#02110c55),linear-gradient(0deg,#02110cbb,transparent 65%)}
 .hero h1{font-size:clamp(53px,11.9vw,83px);line-height:1.03;margin:24px 0}.hero:before{width:68%;opacity:.1}.hero-bottom p{font-size:15px;max-width:240px}
 .intro{padding-top:65px;padding-bottom:66px}.intro h2,.section-heading h2,.collections h2,.experiences h2,.appointment h2,.about h2,.contact h2{font-size:clamp(41px,9vw,65px);line-height:1.09}
 .intro-body{padding-top:20px}.intro-copy{padding-top:15px}.intro-copy p{font-size:15px}.services{padding:65px 0}.section-heading{margin-bottom:25px}.services-grid{grid-auto-rows:290px;gap:8px}.services-grid .large{height:390px}.service-overlay h3{font-size:36px}
 .statement{padding:65px 0}.statement-type{font-size:clamp(53px,10vw,90px);line-height:1.1}
 .collections{padding:65px 0}.collections-layout{min-height:0}.collection-photo{min-height:300px}.collection-caption{min-height:200px}.collection-caption p{font-size:28px}
 .experiences{padding:65px 0}.exp-item h3{font-size:31px}
 .appointment{margin:50px auto;padding:34px 22px}.appointment-mark{font-size:76px}.appointment p:not(.section-label){font-size:15px}
 .about-text{padding:64px 7%}.about-art{min-height:390px}.about-graphic>span{font-size:140px}
 .contact{padding:65px 0}.contact-form{padding:24px}.contact-form h3{font-size:32px}.contact-info-link strong{font-size:27px}
 .footer-brand img{width:83px;height:83px}.footer-brand strong{font-size:31px}
 .door-intro-wordmark{font-size:24px}
}
@media(max-width:430px){.brand-copy{display:none}.hero h1{font-size:12.1vw}.services-grid{grid-template-columns:1fr;grid-auto-rows:340px}.services-grid .large{grid-column:auto;height:auto}.service-overlay h3{font-size:42px}.collections-layout{grid-template-columns:1fr 1fr}.collection-photo{min-height:260px}.collection-caption{min-height:230px}.contact-info-link .email-value{font-size:21px}.footer-brand strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.door-intro{display:none!important}}