/* =============================================================
   HANANE CENTER — "Nuit" design layer (v1.2)
   Loads after style.css + wp.css. Re-maps the legacy tokens to the
   dark palette (inner pages inherit it) and styles the new
   header / home / footer components (prefixed .n-).
   Mobile-first; desktop at 900px.
   ============================================================= */

:root{
  --n-bg:#0D0B09; --n-bg2:#15120F; --n-bg3:#1C1814;
  --n-ink:#F2EBDF; --n-text:#D6CCBC; --n-mute:#9A9082;
  --n-line:rgba(242,235,223,.12); --n-gold:#CDAE78; --n-gold2:#B8955C;
  --n-hdr:76px; --n-pad:20px;

  /* legacy tokens → Nuit */
  --tadelakt:var(--n-bg); --tadelakt-2:var(--n-bg2); --sand:var(--n-bg2);
  --oud:#181410; --oud-2:var(--n-bg3); --espresso:var(--n-text); --ink:var(--n-ink);
  --muted:var(--n-mute); --muted-2:#6E665B;
  --line:var(--n-line); --line-soft:rgba(242,235,223,.07); --line-gold:rgba(205,174,120,.4);
  --gold:var(--n-gold); --gold-deep:var(--n-gold2); --gold-light:#E2C99A;
  --cream-on-dark:var(--n-ink); --muted-on-dark:var(--n-mute);
  --f-display:"Familjen Grotesk",system-ui,sans-serif; --f-accent:"Familjen Grotesk",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:18px; --arch:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 18px 48px rgba(0,0,0,.45);
  --shadow-gold:0 14px 34px rgba(0,0,0,.45);
}

body{background:var(--n-bg);color:var(--n-text);font-weight:400;letter-spacing:0;line-height:1.65}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em}
::selection{background:var(--n-gold);color:#17120A}
.wrap{padding-inline:var(--n-pad)}

/* ---------- shared atoms ---------- */
.n-d{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;color:var(--n-ink)}
.n-d i{color:var(--n-gold);font-style:normal}
.n-k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--n-gold);font-weight:600;margin:0}
.n-h2{font-size:clamp(32px,7vw,56px);line-height:1;margin-top:14px}
.n-p{color:#BDB3A3;margin-top:22px}
.n-mute{color:var(--n-mute)}
.n-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--n-gold);font-weight:600;font-size:14px}
.n-link svg{width:16px;height:16px;transition:transform .3s}.n-link:hover svg{transform:translateX(4px)}
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:99px;font-weight:600;font-size:15px;line-height:1;white-space:nowrap;transition:transform .25s,background .25s,color .25s}
.n-btn svg{width:18px;height:18px;flex:none}
.n-btn--gold{background:var(--n-gold);color:#17120A}
.n-btn--gold:hover{background:#DCC08D;transform:translateY(-1px)}
.n-btn--glass{background:rgba(242,235,223,.08);color:var(--n-ink);border:1px solid var(--n-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.n-btn--glass:hover{background:rgba(242,235,223,.14)}
.n-btn--sm{height:42px;padding:0 20px;font-size:14px}
.n-hide-m{display:none!important}

/* legacy buttons on inner pages → Nuit pills */
.btn{border-radius:99px;font-family:var(--f-body);letter-spacing:.02em;text-transform:none;font-size:15px;font-weight:600}
.btn--gold{--bg:var(--n-gold);--fg:#17120A}
.btn--gold::before{background:#DCC08D}
.btn--ghost{--fg:var(--n-ink);border-color:var(--n-line)}
.btn--ghost::before{background:rgba(242,235,223,.12)}
.btn--ghost:hover{color:var(--n-ink)}
.btn:hover{box-shadow:none}

/* ---------- header ---------- */
.site-header.n-hdr{position:fixed;inset:0 0 auto;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s;box-shadow:none}
.site-header.n-hdr.scrolled,body:not(.n-overlay) .site-header.n-hdr{background:rgba(13,11,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--n-line)}
body.n-overlay .site-header.n-hdr:not(.scrolled){background:linear-gradient(180deg,rgba(13,11,9,.6),rgba(13,11,9,0))}
.n-hdr__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--n-hdr)}
.n-brand{display:flex;align-items:center;flex:none}
.n-brand__img{height:48px;width:auto}
.n-brand__img.is-custom{filter:brightness(0) invert(1)}
.n-nav{display:none}
.n-hdr__actions{display:flex;align-items:center;gap:10px}
.n-menu{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--n-line);background:rgba(13,11,9,.25);color:var(--n-ink);font:600 13px var(--f-body);cursor:pointer}
.n-menu svg{width:18px;height:18px}
.nav__toggle.is-open svg{color:var(--n-gold)}
body:not(.n-overlay) main{padding-top:var(--n-hdr)}

/* language dropdown */
.lang-switch{position:relative;display:inline-flex;flex:none}
.lang-switch__cur{display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:99px;border:1px solid var(--n-line);background:rgba(13,11,9,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--n-ink);font:600 12px var(--f-body);letter-spacing:.08em;cursor:pointer}
.lang-switch__cur:hover{border-color:rgba(205,174,120,.5)}
.lang-switch__cur svg{width:16px;height:16px}
.lang-switch__cur .chev{width:13px;height:13px;opacity:.7;color:inherit;transition:transform .25s}
.lang-switch.open .chev{transform:rotate(180deg)}
.lang-switch__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:196px;list-style:none;margin:0;padding:6px;border-radius:14px;background:#17130F;border:1px solid var(--n-line);box-shadow:0 20px 50px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;z-index:80}
.lang-switch:hover .lang-switch__menu{opacity:0;visibility:hidden} /* click/tap only — no hover flicker */
.lang-switch.open .lang-switch__menu{opacity:1;visibility:visible;transform:none}
.lang-switch__menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;font-size:14px;color:var(--n-text)}
.lang-switch__menu a:hover{background:rgba(242,235,223,.06);color:var(--n-ink)}
.lang-switch__menu b{font-size:11px;letter-spacing:.1em;color:var(--n-gold);width:20px;font-weight:700}
.lang-switch__menu .ok{width:15px;height:15px;margin-left:auto;color:var(--n-gold)}
.lang-switch__menu a[aria-current]{color:var(--n-ink)}
.n-foot .lang-switch__menu{top:auto;bottom:calc(100% + 8px);right:auto;left:0}

/* mobile drawer */
.mmenu{top:100%;left:var(--n-pad);right:var(--n-pad);background:#15120F;border:1px solid var(--n-line);border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.6);max-height:calc(100dvh - var(--n-hdr) - 16px)}
.mnav{padding:.5rem 1.1rem}
.mnav a,.mnav__toggle{color:var(--n-ink);font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.02em;text-transform:none;border-color:var(--n-line)}
.mnav a[aria-current="page"],.mnav a:hover{color:var(--n-gold)}
.mnav__sub a{font-family:var(--f-body);font-size:15px;color:var(--n-text)}
.mmenu__cta{display:grid;gap:8px;padding:1rem 1.1rem 1.2rem}
.scrim{background:rgba(0,0,0,.55)}

/* ---------- hero ---------- */
.n-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--n-bg)}
.n-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05) brightness(.8)}
.n-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,9,.55) 0%,rgba(13,11,9,0) 30%,rgba(13,11,9,.2) 55%,var(--n-bg) 100%)}
.n-hero__in{position:relative;z-index:1;width:100%;padding-top:calc(var(--n-hdr) + 40px);padding-bottom:64px}
.n-hero h1{font-size:clamp(40px,11vw,84px);line-height:.98;margin:14px 0 18px;color:var(--n-ink)}
.n-hero__lead{max-width:36ch;color:#D6CCBC;font-size:17px;margin:0}
.n-hero__ctas{display:grid;gap:10px;margin-top:26px}

/* ticker */
.n-ticker{border-block:1px solid var(--n-line);overflow:hidden;white-space:nowrap}
.n-ticker>div{display:inline-block;padding:16px 0;animation:n-t 42s linear infinite}
.n-ticker span{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--n-mute);margin:0 22px}
.n-ticker b{font-family:var(--f-body);font-style:normal;color:var(--n-gold);font-size:13px;font-weight:600;margin-left:18px}
@keyframes n-t{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.n-ticker>div{animation:none}}

/* sections */
.n-sec{padding:96px 0}
.n-sec--flush{padding-top:56px}
.n-bg2{background:var(--n-bg2)}
.n-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.n-head .n-link{margin-top:0}

/* service cards */
.n-cards{display:grid;gap:14px;margin-top:44px}
.n-card{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--n-bg2);color:var(--n-ink)}
.n-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.72);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.n-card:hover img{transform:scale(1.04)}
.n-card__c{position:absolute;inset:auto 0 0;padding:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;background:linear-gradient(transparent,rgba(13,11,9,.88))}
.n-card h3{font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.03em;color:var(--n-ink)}
.n-card small{color:#CFC5B5;font-size:13px}
.n-card__p{font-size:13px;color:var(--n-gold);text-align:right;white-space:nowrap}
.n-card__n{position:absolute;top:18px;left:22px;font-size:12px;color:#CFC5B5;letter-spacing:.2em}

/* story */
.n-split{display:grid;gap:40px;align-items:center}
.n-split>img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;filter:saturate(.75);width:100%}
.n-nums{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border-top:1px solid var(--n-line)}
.n-nums div{padding-top:18px}
.n-nums b{font-family:var(--f-display);font-weight:700;font-size:34px;letter-spacing:-.03em;color:var(--n-gold);display:block;line-height:1}
.n-nums span{font-size:12px;color:var(--n-mute)}

/* short price list */
.n-price{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--n-line)}
.n-price a{display:flex;align-items:baseline;gap:12px;padding:20px 0;border-bottom:1px solid var(--n-line);color:inherit}
.n-price a:hover b{color:var(--n-gold)}
.n-price b{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--n-ink);transition:color .2s}
.n-price small{display:block;color:var(--n-mute);font-size:13px}
.n-price em{flex:1;border-bottom:1px dotted #4A433A;transform:translateY(-6px)}
.n-price span{color:var(--n-gold);font-size:15px;white-space:nowrap}

/* CTA */
.n-cta{position:relative;overflow:hidden;border-radius:24px;margin:0 var(--n-pad);padding:72px 24px;text-align:center}
.n-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4) saturate(.6)}
.n-cta>*:not(img){position:relative}
.n-cta h2{font-size:clamp(36px,8vw,68px);line-height:1;margin:14px 0 26px}

/* ---------- footer ---------- */
.n-foot{padding:64px 0 88px;color:var(--n-mute);font-size:14px;border-top:1px solid var(--n-line)}
.n-foot__g{display:grid;gap:32px}
.n-foot h4{color:var(--n-ink);font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:.06em;margin-bottom:12px}
.n-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.n-foot a:hover{color:var(--n-gold)}
.n-foot address{font-style:normal}
.n-foot__brand .n-brand__img{height:54px}
.n-foot__brand p{margin:16px 0 0;max-width:30ch}
.n-social{display:flex;gap:8px;margin-top:18px}
.n-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--n-line);display:grid;place-items:center;color:var(--n-ink)}
.n-social svg{width:16px;height:16px}
.n-foot__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--n-line);font-size:13px}

/* mobile booking bar */
/* compact WhatsApp button (mobile) */
.n-wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:55;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .2s}
.n-wa:active{transform:scale(.94)}
.n-wa svg{width:28px;height:28px}
.floaties{display:none}

/* ---------- inner pages (legacy components on the dark palette) ---------- */
.banner{min-height:62svh;display:flex;align-items:flex-end;text-align:left;padding:calc(var(--n-hdr) + 48px) 0 56px}
.banner::after{background:linear-gradient(180deg,rgba(13,11,9,.55),rgba(13,11,9,.15) 40%,var(--n-bg))}
.banner__in{width:100%}
.banner .eyebrow{justify-content:flex-start}
.banner h1{font-size:clamp(40px,10vw,80px);line-height:1;font-weight:700}
.eyebrow{font-family:var(--f-body);font-size:11px;letter-spacing:.22em;font-weight:600;color:var(--n-gold)}
.eyebrow .khatim,.khatim{display:none}
.h-md,.h-lg{font-weight:700;font-size:clamp(28px,5.5vw,44px);line-height:1.05}
.accent-it{font-style:normal;color:var(--n-gold)}
.section-head--center{text-align:left;margin-inline:0}
.eyebrow--center{justify-content:flex-start}
.bg-sand,.bg-cream2{background:var(--n-bg2)}
.bg-oud{background:var(--n-bg3)}
.split__deco,.hero__zellige,.ornament{display:none}
.split__stat{background:var(--n-gold);color:#17120A}
.split__stat b,.split__stat span{color:#17120A}
.trio{gap:14px;background:none;border:0}
.trio__item{background:var(--n-bg2);border:1px solid var(--n-line);border-radius:18px;text-align:left}
.trio__ic{background:var(--n-bg3);margin-left:0}
.svc-card,.post-card,.faq__item,.info-card,.form{background:var(--n-bg2);border-color:var(--n-line)}
.post-card__date{background:var(--n-bg);color:var(--n-ink)}
.menu-block{background:transparent}
.price-item{border-color:var(--n-line)}
.price-item:hover{background:rgba(242,235,223,.03)}
.price-item__name{font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--n-ink)}
.price-item__price .amt{color:var(--n-gold)}
.field input,.field select,.field textarea,.form input,.form textarea,.form select{background:var(--n-bg);border-color:var(--n-line);color:var(--n-ink)}
.cta-band{border-radius:24px;margin:0 var(--n-pad) 96px;overflow:hidden}
.cta-band__bg{filter:brightness(.4) saturate(.6)}
.cta-band h2{font-weight:700;font-size:clamp(32px,7vw,56px)}
.seo-section{background:var(--n-bg2)}
.entry-content{color:#C7BDAD}
.entry-content h2,.entry-content h3{color:var(--n-ink);font-weight:700}
.entry-content h2{font-size:clamp(26px,5vw,40px);line-height:1.08}
.entry-content strong{color:var(--n-ink);font-weight:600}
.entry-content a{color:var(--n-gold)}
.entry-content li::marker{color:var(--n-gold)}
.faq__q{color:var(--n-ink);font-family:var(--f-display);font-size:17px;font-weight:700;letter-spacing:-.01em}
.crumbs,.crumbs a,.rank-math-breadcrumb,.rank-math-breadcrumb a{color:#CFC5B5}
.map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.4)}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{--n-pad:48px;--n-hdr:92px}
  .n-hide-m{display:inline-flex!important}
  .n-brand__img{height:58px}
  .n-nav{display:block}
  .n-nav .nav__menu{display:flex;gap:30px;list-style:none;margin:0;padding:0}
  .n-nav .nav__menu a{font-size:14px;color:#CFC5B5;padding:6px 0;position:relative}
  .n-nav .nav__menu a:hover,.n-nav .nav__menu a[aria-current="page"]{color:var(--n-ink)}
  .n-nav .nav__menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--n-gold)}
  .n-menu,.mmenu,.scrim{display:none!important}
  .n-hero__in{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding-bottom:72px}
  .n-hero__ctas{grid-auto-flow:column}
  .n-cards{grid-template-columns:repeat(4,1fr)}
  .n-card:nth-child(even){transform:translateY(48px)}
  .n-split{grid-template-columns:1fr 1fr;gap:96px}
  .n-pg{display:grid;grid-template-columns:1fr 1.3fr;gap:96px;align-items:start}
  .n-price{margin-top:0}
  .n-foot__g{grid-template-columns:2fr 1fr 1fr 1fr}
  .n-wa{display:none}
  .n-foot{padding-bottom:48px}
  .banner{min-height:66vh;padding-bottom:72px}
}
@media (min-width:900px) and (max-width:1100px){
  .n-nav .nav__menu{gap:20px}
}

/* inline 4-col grids in legacy templates → 2 cols on phones */
@media (max-width:899px){
  .trio[style*="repeat(4"]{grid-template-columns:1fr 1fr!important}
}

/* desktop polish */
.n-nav .nav__menu a{text-transform:none;letter-spacing:0;font-weight:500}
.n-nav .nav__menu a::after{display:none}
.n-nav .nav__menu a[aria-current="page"]::after{display:block}
.banner .crumbs,.banner .rank-math-breadcrumb{justify-content:flex-start;text-align:left}
@media (min-width:900px){
  .n-hero h1{font-size:clamp(64px,5.8vw,84px)}
}
.n-nav .nav__menu a[aria-current="page"]::after{width:auto;left:0;right:0}

/* language switcher flags */
.lang-switch .flag{display:block;width:20px;height:14px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(242,235,223,.18)}
.lang-switch__cur{gap:8px;padding:0 12px 0 10px}
.lang-switch__menu .flag{width:22px;height:15px}

/* =============================================================
   Button system v1.4 — one look for .n-btn and legacy .btn
   ============================================================= */
.n-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:99px;font-family:var(--f-body);font-size:15px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.btn::before{display:none}
.btn svg,.n-btn svg{width:18px;height:18px;flex:none}
.btn:hover,.n-btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--n-gold);color:#17120A;border:0}
.btn--gold:hover{background:#DCC08D;color:#17120A}
.btn--ghost{background:rgba(242,235,223,.06);color:var(--n-ink);border:1px solid var(--n-line)}
.btn--ghost:hover{background:rgba(242,235,223,.12);color:var(--n-ink);border-color:rgba(242,235,223,.22)}
.btn--sm{height:42px;padding:0 18px;font-size:14px}

/* two-line button: small label over the main value */
.n-btn--stack{height:60px;padding:0 24px 0 8px;gap:12px;justify-content:flex-start}
.n-btn__ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(23,18,10,.12)}
.n-btn--glass .n-btn__ic{background:rgba(242,235,223,.08);color:var(--n-gold)}
.n-btn__ic svg{width:20px;height:20px}
.n-btn__t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.n-btn__t small{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.n-btn__t b{font-size:16px;font-weight:700;letter-spacing:-.005em;font-variant-numeric:tabular-nums}

/* button rows */
.n-ctas{display:flex;flex-wrap:wrap;gap:10px}
.n-ctas--center{justify-content:center}
.btn-row{gap:10px}

/* phones: every paired row stacks full-width, labels never wrap */
@media (max-width:600px){
  .n-ctas,.btn-row{flex-direction:column;align-items:stretch}
  .n-ctas>.n-btn,.btn-row>.btn,.btn-row>.n-btn{width:100%}
  .n-btn--stack{justify-content:flex-start}
  .n-hero__ctas .n-btn{width:100%}
  .cta-band .n-ctas,.n-cta .n-ctas{max-width:340px;margin-inline:auto}
}
.mmenu__cta .n-btn{width:100%}