/* ==============================================================
   MAISON NOIRE / EDITION 02 — ART DIRECTION + MOTION SYSTEM
   Progressive enhancements, local assets, no external dependencies.
   ============================================================= */
:root {
  --mx-accent: #cda66d;
  --mx-accent-soft: #f0d5a3;
  --mx-ink: #152330;
  --mx-ease: cubic-bezier(.16,1,.3,1);
  --mx-border: rgba(142,114,77,.25);
  --mx-shadow: 0 30px 70px rgba(26,31,34,.12);
}
html {scroll-padding-top:105px;}
body {overflow-x:clip;}
#main {min-height:50vh;view-transition-name:page-main;}
.site-header {view-transition-name:site-header;isolation:isolate;}
.site-footer {view-transition-name:site-footer;}
::selection {background:#c6a675;color:#16232f;}

/* Thin gold indicator connects scroll position with the page. */
.reading-progress {
  position:fixed;top:0;inset-inline:0;height:3px;z-index:150;
  pointer-events:none;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#bd8e52,#f8db9c,#c29658);
  box-shadow:0 0 15px #d2ae73a6;will-change:transform;
}
[dir="rtl"] .reading-progress {transform-origin:right center;}
.site-header {transition:box-shadow .4s ease,background .4s ease,border-color .3s ease;}
.site-header.is-scrolled {box-shadow:0 13px 38px rgba(8,14,21,.24);}
.header-inner {position:relative;}
.site-navigation>a {padding-block:8px;transition:color .25s ease;}
.site-navigation>a::before {
  content:"";position:absolute;inset-inline-start:0;inset-inline-end:100%;bottom:-15px;height:1px;
  background:linear-gradient(90deg,#b99762,#f8d8a6);transition:inset-inline-end .4s var(--mx-ease);
}
.site-navigation>a:hover::before,.site-navigation>a[aria-current="page"]::before {inset-inline-end:0;}
.site-navigation>a[aria-current="page"]::after {height:1px;bottom:-15px;}
.brand img.mym-brand-mark {transition:transform .45s var(--mx-ease),filter .35s ease!important;}
.brand:hover img.mym-brand-mark {transform:rotate(-7deg) scale(1.05);filter:drop-shadow(0 0 8px #ebcf9860)!important;}
.language-switch>a {transition:color .2s ease,transform .2s ease;display:inline-block;}
.language-switch>a:hover {transform:translateY(-2px);}
.theme-toggle {transition:background .25s ease,transform .42s var(--mx-ease),border-color .3s ease,box-shadow .3s ease;}
.theme-toggle:hover {box-shadow:0 0 0 5px rgba(216,179,114,.13);transform:rotate(28deg) scale(1.06);}

/* Buttons: magnetic-feeling lift, moving light edge, animated circular action. */
.btn {isolation:isolate;overflow:hidden;transform:translateZ(0);box-shadow:0 10px 24px rgba(9,19,28,.07);}
.btn::before {
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.30) 43%,transparent 69%);
  transform:translateX(-150%) skewX(-20deg);transition:transform .78s var(--mx-ease);pointer-events:none;
}
.btn:hover::before {transform:translateX(150%) skewX(-20deg);}
.btn:hover {transform:translateY(-4px);box-shadow:0 17px 38px rgba(9,19,28,.17);}
.btn:active {transform:translateY(-1px) scale(.985);transition-duration:.12s;}
.btn .arr {position:relative;isolation:isolate;flex-shrink:0;transition:transform .42s var(--mx-ease),background .3s ease,color .3s ease;}
.btn:hover .arr {transform:rotate(45deg) scale(1.04);}
.btn-gold {background:linear-gradient(120deg,#edcf9a 0%,#d7b078 55%,#e7c792 100%);color:#172431;border-color:#e5c48e;}
.btn-gold:hover {background:linear-gradient(120deg,#f9e1b6,#e9c48c);color:#14212d;}
.btn-whatsapp {background:linear-gradient(110deg,#256f52,#1d5743);border-color:#347c5c;color:#fff;}
.btn-whatsapp:hover {background:linear-gradient(110deg,#2b8060,#21533e);border-color:#419671;}
.btn-whatsapp>span[aria-hidden] {display:grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;transition:transform .3s var(--mx-ease);}
.btn-whatsapp:hover>span[aria-hidden] {transform:rotate(45deg);}
.luxury-header-cta {min-height:45px;}
.text-link {position:relative;transition:color .24s ease,gap .35s var(--mx-ease);}
.text-link:hover {gap:25px;}
.text-link .arr {transition:transform .4s var(--mx-ease),background .3s ease,color .3s ease;}
.text-link:hover .arr {transform:rotate(45deg);background:#c4a06d;color:#111f2b;}

/* Hero — contemporary editorial composition, soft halo and subtle photo motion. */
.home-hero {isolation:isolate;}
.home-hero::after {
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(57vw,780px);aspect-ratio:1;inset-inline-start:-19%;top:-31%;border-radius:50%;
  background:radial-gradient(circle,rgba(209,172,113,.12),rgba(191,148,86,.035) 36%,transparent 68%);
  animation:mxHalo 14s ease-in-out infinite alternate;
}
.home-hero-layout {position:relative;z-index:1;}
.home-hero h1 {text-shadow:0 12px 50px rgba(5,10,17,.12);}
.home-hero-content .eyebrow {letter-spacing:.28em;}
.home-hero h1,.page-hero h1 {text-wrap:balance;}
.home-hero-content {animation:mxHeroIn .85s var(--mx-ease) both;}
.hero-footnote {animation:mxHeroIn 1.1s .14s var(--mx-ease) both;}
.hero-image {isolation:isolate;overflow:hidden;background:linear-gradient(0deg,#071523bd,transparent 58%),url('/assets/img/marrakech.jpg') center/cover no-repeat;}
.hero-image::after {
  content:"";inset:0;top:0;right:0;left:0;position:absolute;z-index:0;
  background:linear-gradient(0deg,rgba(6,16,26,.55),transparent 58%),url('/assets/img/marrakech.jpg') center/cover no-repeat;
  transform:scale(1.06);animation:mxPhotoBreath 20s ease-in-out infinite alternate;
}
.hero-image::before {animation:mxSparkle 8s ease-in-out infinite;}
.hero-image .image-border,.hero-image .hero-image-caption {z-index:2;}
.hero-action-dock {backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.hero-action-dock::after {content:"";height:1px;position:absolute;top:-3px;inset-inline-start:0;width:42%;background:#fbe6bd;box-shadow:0 0 14px #d5ad70;}
.hero-scrolldown .scroll-line {transform-origin:top;animation:mxScrollCue 2.8s ease-in-out infinite;}
.page-hero {isolation:isolate;overflow:hidden;}
.page-hero::after {
  content:"";position:absolute;width:420px;height:420px;pointer-events:none;
  border:1px solid rgba(221,184,128,.1);border-radius:50%;
  left:-200px;top:-220px;box-shadow:0 0 0 100px rgba(212,177,119,.018);
}
.page-hero-copy {position:relative;z-index:1;animation:mxHeroIn .8s var(--mx-ease) both;}
.page-hero-visual {animation:mxHeroVisual 1s .09s var(--mx-ease) both;}
.page-hero-visual img {transition:transform 1.1s var(--mx-ease),filter .7s ease;}
.page-hero-visual:hover img {transform:scale(1.035);filter:saturate(.96);}

/* Pointer-lit cards feel tactile without custom cursor tracking overlays. */
.service-card::after,.numbered-card::before {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(203,162,96,.12),transparent 75%);
  transition:opacity .35s ease;
}
.service-card:hover::after,.numbered-card:hover::before {opacity:1;}
.service-card>*,.model-card>*,.numbered-card>* {position:relative;z-index:1;}
/* Unified spacing grid and elegant card treatments. */
.section {position:relative;}
.section-heading {gap:30px;}
.section-heading h2 {text-wrap:balance;max-width:900px;}
.section-heading .eyebrow {margin-bottom:15px;}
.services-grid,.projects-grid,.destination-grid {align-items:stretch;}
.service-card,.project-card,.numbered-card,.model-card,.destination-card {
  position:relative;isolation:isolate;transition:transform .5s var(--mx-ease),box-shadow .5s var(--mx-ease),border-color .3s ease;
}
.service-card::before,.numbered-card::after,.model-card::after {
  content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:2px;
  background:linear-gradient(90deg,#a47a40,#f2d4a0);transition:width .6s var(--mx-ease);pointer-events:none;
}
.service-card:hover::before,.numbered-card:hover::after,.model-card:hover::after {width:100%;}
.service-card:hover,.project-card:hover,.numbered-card:hover,.model-card:hover,.destination-card:hover {
  transform:translateY(-7px);box-shadow:0 25px 58px rgba(21,30,39,.12);
}
.service-card {display:flex;flex-direction:column;align-items:flex-start;}
.service-card p {flex:1;}
.service-card .card-arrow {margin-top:auto;align-self:flex-end;display:grid;place-items:center;width:41px;height:41px;border:1px solid rgba(190,153,99,.6);border-radius:50%;transition:transform .35s var(--mx-ease),background .3s ease,color .3s ease;}
.service-card:hover .card-arrow {transform:rotate(45deg);background:#c8a46e;color:#182631;}
.service-glyph {display:inline-block;transition:transform .7s var(--mx-ease),color .25s ease;}
.service-card:hover .service-glyph {transform:rotate(-18deg) scale(1.2);color:#d4ae73;}
.numbered-card,.model-card {height:100%;}
.numbered-card:hover .number {transform:translateY(-4px);}
.numbered-card .number {display:inline-block;transition:transform .4s var(--mx-ease);}
.project-card {overflow:hidden;}
.project-img,.destination-image,.city-tile,.feature-art,.about-art {overflow:hidden;}
.project-img img,.destination-image img,.city-tile img,.feature-art img,.about-art img {
  transition:transform 1s var(--mx-ease),filter .7s ease;
}
.project-card:hover .project-img img,.destination-card:hover .destination-image img,.city-tile:hover img,.feature-art:hover img,.about-art:hover img {transform:scale(1.07);}
.project-card:hover .project-img img,.destination-card:hover .destination-image img {filter:saturate(1.15);}
.city-tile {transition:transform .5s var(--mx-ease),box-shadow .5s ease;}
.city-tile:hover {transform:translateY(-6px);box-shadow:0 23px 34px rgba(16,28,37,.22);}
.city-tile b {transition:transform .35s var(--mx-ease),color .3s ease;}
.city-tile:hover b {transform:translate(3px,-3px);color:#fff0cb;}
.art-badge {transition:transform .7s var(--mx-ease);}
.about-art:hover .art-badge {transform:rotate(7deg);}
.tags span,.mission-cloud span,.capability {transition:transform .28s var(--mx-ease),border-color .28s ease,background .28s ease;}
.mission-cloud span:hover,.capability:hover {transform:translateY(-3px);border-color:#bb965b;}
.cta-band {isolation:isolate;}
.cta-band .btn {min-width:210px;}
.filter-bar {display:flex;gap:9px;flex-wrap:wrap;}
.filter-btn {min-height:45px;transition:transform .2s var(--mx-ease),background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;}
.filter-btn:hover {transform:translateY(-2px);}
.filter-btn.is-active {box-shadow:0 7px 18px rgba(26,37,46,.15);}
.service-card[hidden] {display:none!important;}

/* Forms: clear hierarchy and decisive action areas. */
.contact-form {border-radius:12px;overflow:hidden;}
.field label {font-size:12px;font-weight:750;letter-spacing:.045em;}
.field input,.field select,.field textarea {width:100%;border-radius:7px;transition:border-color .24s ease,box-shadow .24s ease,background .24s ease;}
.field input:hover,.field select:hover,.field textarea:hover {border-color:#ad9a7d;}
.field input:focus,.field select:focus,.field textarea:focus {outline:none;box-shadow:0 0 0 4px rgba(196,162,111,.2);}
.consent input {accent-color:#a7804b;}
.contact-submit-actions {padding-top:7px;}
.contact-submit-actions .btn {justify-content:space-between;min-height:60px;}
.whatsapp-number-link {transition:transform .3s var(--mx-ease),color .2s ease;}
.whatsapp-number-link:hover {transform:translateX(4px);}
[dir="rtl"] .whatsapp-number-link:hover {transform:translateX(-4px);}
.form-status:not(:empty) {animation:mxHeroIn .4s var(--mx-ease) both;}

/* Content arrives naturally as readers scroll; nothing hidden without JS. */
body.js-motion [data-reveal] {
  opacity:0;transform:translate3d(0,30px,0);transition:opacity .75s var(--mx-ease),transform .75s var(--mx-ease);
  transition-delay:var(--stagger,0ms);
}
body.js-motion [data-reveal].is-visible {opacity:1;transform:translate3d(0,0,0);}
body.js-motion .service-card[data-reveal]:hover,
body.js-motion .project-card[data-reveal]:hover,
body.js-motion .numbered-card[data-reveal]:hover,
body.js-motion .model-card[data-reveal]:hover,
body.js-motion .destination-card[data-reveal]:hover,
body.js-motion .city-tile[data-reveal]:hover {transform:translateY(-7px);}
body.is-navigating .reading-progress {height:4px;box-shadow:0 0 22px #f4d09a;}
body.is-navigating:not(.supports-page-transitions) #main {opacity:.82;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;}
#main:focus {outline:none;}
.reading-progress::after {content:"";position:absolute;inset:0;opacity:0;background:#ffecc8;transform:translateX(-100%);}
body.is-navigating .reading-progress::after {opacity:.8;animation:mxLoading 1.15s ease-in-out infinite;}

/* Native View Transitions provide a page-to-page editorial dissolve. */
@keyframes mxLoading {to {transform:translateX(100%);}}
@keyframes mxOldPage {to {opacity:0;transform:translate3d(0,-20px,0) scale(.99);filter:blur(3px);}}
@keyframes mxNewPage {from {opacity:0;transform:translate3d(0,30px,0) scale(1.008);filter:blur(4px);}to {opacity:1;transform:none;filter:blur(0);}}
@keyframes mxHeroIn {from {opacity:0;transform:translate3d(0,26px,0);}to {opacity:1;transform:none;}}
@keyframes mxHeroVisual {from {opacity:.4;transform:translate3d(25px,0,0) scale(.97);}to {opacity:1;transform:none;}}
@keyframes mxPhotoBreath {from {transform:scale(1.06);}to {transform:scale(1.17) translate3d(-1%,1%,0);}}
@keyframes mxHalo {from {transform:translate3d(-3%,0,0);}to {transform:translate3d(11%,5%,0);}}
@keyframes mxSparkle {0%,100% {opacity:.9;transform:rotate(0);}50% {opacity:.5;transform:rotate(15deg);}}
@keyframes mxScrollCue {0%,100% {transform:scaleY(.5);opacity:.4;}50% {transform:scaleY(1);opacity:1;}}
@media (prefers-reduced-motion:no-preference) {
  ::view-transition-old(page-main) {animation:.3s ease-in both mxOldPage;}
  ::view-transition-new(page-main) {animation:.65s var(--mx-ease) both mxNewPage;}
  ::view-transition-old(site-header),::view-transition-new(site-header),
  ::view-transition-old(site-footer),::view-transition-new(site-footer) {animation-duration:.22s;}
  ::view-transition-old(root),::view-transition-new(root) {animation:none;}
}

/* Dark-mode surfaces retain contrast and the same interaction language. */
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .project-card:hover,
html[data-theme="dark"] .numbered-card:hover,
html[data-theme="dark"] .model-card:hover,
html[data-theme="dark"] .destination-card:hover {box-shadow:0 25px 56px rgba(0,0,0,.28);border-color:#bb995f;}
html[data-theme="dark"] .contact-form {background:var(--theme-dark-card);}
html[data-theme="dark"] .field input:hover,html[data-theme="dark"] .field select:hover,html[data-theme="dark"] .field textarea:hover {border-color:#b79868;}
html[data-theme="dark"] .btn-whatsapp {background:linear-gradient(110deg,#277354,#22583f);color:#fff;border-color:#3e8767;}
html[data-theme="dark"] .btn-whatsapp:hover {background:linear-gradient(110deg,#358c65,#27704e);color:#fff;}
html[data-theme="dark"] .text-link:hover .arr {color:#14202b;}
html[data-theme="dark"] .service-card:hover .card-arrow {color:#16232f;}

/* Responsiveness for wide screens, tablets, phones and Arabic RTL. */
@media(max-width:1260px) {
  .site-navigation>a::before {display:none;}
  .site-navigation>a[aria-current="page"]::after {display:none;}
  .site-navigation.is-open {animation:mxHeroIn .25s var(--mx-ease) both;}
  .menu-toggle {border:1px solid rgba(216,185,133,.4);border-radius:50%;width:44px;height:44px;}
  .menu-toggle:hover {background:rgba(222,184,127,.09);}
  .site-navigation.is-open>a {transition:color .2s,padding-inline-start .25s var(--mx-ease);}
  .site-navigation.is-open>a:hover {padding-inline-start:9px;}
}
@media(max-width:980px) {
  .section {padding-block:clamp(70px,9vw,102px);}
  .home-hero-layout {gap:15px 0;}
  .hero-action-dock {width:92%;}
  .section-heading {align-items:flex-start;}
}
@media(max-width:680px) {
  html {scroll-padding-top:77px;}
  .container {width:calc(100% - 36px);}
  .site-header .header-inner {min-height:72px;}
  .hero-action-dock {width:calc(100% - 12px);padding:19px 17px;}
  .hero-action-dock .hero-buttons {flex-direction:column;align-items:stretch;}
  .hero-action-dock .hero-buttons .btn {width:100%;flex:unset;min-height:57px;justify-content:space-between;}
  .section-heading h2 {max-width:100%;}
  .service-card {min-height:0;}
  .service-card p {margin-bottom:24px;}
  .city-grid,.projects-grid,.destination-grid {gap:13px;}
  .filter-bar {gap:7px;}
  .filter-btn {padding-inline:15px;font-size:11px;}
  .contact-form {border-radius:10px;}
  .cta-band .btn {width:100%;justify-content:space-between;}
  .btn-whatsapp {max-width:100%;}
  .hero-image::after {animation-duration:27s;}
  .reading-progress {height:2px;}
}
@media(max-width:390px) {
  .home-hero h1 {font-size:clamp(40px,11vw,51px);}
  .home-hero-content .eyebrow {letter-spacing:.18em;}
  .page-hero h1 {font-size:clamp(40px,11vw,54px);}
  .hero-action-dock {width:100%;}
  .site-header .brand .brand-name {font-size:21px;}
}
[dir="rtl"] .btn::before {transform:translateX(150%) skewX(20deg);}
[dir="rtl"] .btn:hover::before {transform:translateX(-150%) skewX(20deg);}
[dir="rtl"] .page-hero-visual {animation-name:mxHeroIn;}
[dir="rtl"] .section-heading,[dir="rtl"] .contact-side {text-align:start;}
[dir="rtl"] .btn,[dir="rtl"] .text-link {direction:rtl;}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  .home-hero-content,.hero-footnote,.page-hero-copy,.page-hero-visual,
  .hero-image::before,.hero-image::after,.home-hero::after,.hero-scrolldown .scroll-line {animation:none!important;}
  body.js-motion [data-reveal] {opacity:1!important;transform:none!important;}
  ::view-transition-old(*),::view-transition-new(*) {animation-duration:.01ms!important;}
}