/* Riad Dar El Mahja — main stylesheet
   Direction: Riad × Apple — calm, generous, aligned; riad identity kept (serif, terracotta, zellige teal). */

/* ---------- Tokens ---------- */
:root{
  /* palette (brand) */
  --night:#0f1d22; --teal:#1f5c5c; --zellige:#2a8a86; --peach:#e9b48f; --gold:#c9a25b; --terra:#ad5833;
  /* semantic — light */
  --bg:#fbf7f0; --bg-alt:#f4ece0; --surface:#fbf7f0;
  --text:#14110f; --text-2:#6d655c; --line:rgba(20,17,15,.12);
  --accent:var(--terra); --accent-ink:#a5502c; --on-accent:#fbf7f0;
  /* always-dark sections */
  --on-dark:#fbf7f0; --on-dark-2:rgba(251,247,240,.72); --line-dark:rgba(251,247,240,.14);

  /* type */
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
  --fs-label:.75rem; --fs-sm:.875rem; --fs-body:1.0625rem;
  --fs-lead:clamp(1.375rem,2vw,1.75rem);
  --fs-h3:clamp(1.75rem,3vw,2.5rem);
  --fs-h2:clamp(2.5rem,5.5vw,4.75rem);
  --fs-display:clamp(3.5rem,10vw,9.5rem);
  --track-label:.24em;

  /* space — 8px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section:clamp(96px,11vw,144px);
  --container:1240px; --gutter:clamp(16px,4vw,32px);

  /* shape */
  --r-sm:12px; --r-md:20px; --r-pill:999px;
  --r-arch:999px 999px var(--r-md) var(--r-md);

  /* elevation */
  --shadow-1:0 1px 2px rgba(15,29,34,.05),0 12px 32px -12px rgba(15,29,34,.18);
  --shadow-2:0 2px 4px rgba(15,29,34,.05),0 24px 56px -20px rgba(15,29,34,.3);

  /* motion */
  --ease:cubic-bezier(.2,.7,.1,1); --dur:.3s; --dur-slow:.8s;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12191b; --bg-alt:#172124; --surface:#1b2629;
    --text:#f3ede3; --text-2:#a9a097; --line:rgba(255,255,255,.1);
    --accent-ink:#e0956c;
    --shadow-1:0 0 0 1px rgba(255,255,255,.05),0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-2:0 0 0 1px rgba(255,255,255,.06),0 24px 56px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
section{position:relative}
.wrap{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h1 em,h2 em{font-style:italic;color:var(--accent-ink)}
p{text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s3);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-ink)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow+h2,.eyebrow+h1{margin-top:var(--s5)}

/* dark sections share one treatment */
.hero,.exp,.priv,.contact{color:var(--on-dark)}
:is(.hero,.exp,.contact) .eyebrow{color:var(--gold)}
.priv .eyebrow{color:var(--peach)}
:is(.hero,.exp,.priv,.contact) h2 em,.hero h1 em{color:var(--peach)}

/* buttons — one shape (pill), sentence case */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border:0;border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur),color var(--dur),border-color var(--dur)}
.btn:active{transform:scale(.98)}
.btn svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-gold:hover{background:#d6b273}
.btn-line{border:1px solid currentColor;background:none}
.btn-line:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- Loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--night);display:grid;place-items:center;clip-path:inset(0);transition:clip-path 1.2s var(--ease) .2s}
#loader.done{clip-path:inset(0 0 100% 0)}
#loader .lmark{width:120px;height:120px;object-fit:contain;animation:spin 6s linear infinite}
#loader p{position:absolute;bottom:12%;color:var(--gold);font:italic 1.25rem var(--serif);letter-spacing:.05em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Nav ---------- */
nav{position:fixed;top:0;inset-inline:0;z-index:50;padding:var(--s5) 0;color:var(--on-dark);transition:padding .5s var(--ease),color .4s,transform .5s var(--ease)}
nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:var(--s2) var(--s2) var(--s2) var(--s5);border-radius:var(--r-pill);border:1px solid transparent;transition:background .5s,border-color .5s,box-shadow .5s,width .6s var(--ease)}
nav.solid{padding:var(--s3) 0;color:var(--text)}
nav.solid .wrap{width:min(1160px,100% - 24px);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-color:var(--line);box-shadow:var(--shadow-1)}
nav.hide{transform:translateY(-120%)}
.progress{position:absolute;left:var(--s6);right:var(--s6);bottom:-1px;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .4s}
nav.solid .progress{opacity:1}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}

.logo{display:flex;align-items:center;gap:var(--s3);font:1.45rem/1 var(--serif);white-space:nowrap}
.logo span{display:flex;flex-direction:column}
.logo .mark{width:40px;height:40px;object-fit:contain;transition:transform 1s var(--ease)}
.logo:hover .mark{transform:rotate(90deg)}
.logo small{margin-top:var(--s1);font:600 .625rem var(--sans);letter-spacing:.32em;text-transform:uppercase;opacity:.7}

.links{position:relative;display:flex;gap:var(--s1);padding:var(--s1);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:500}
.links a{position:relative;z-index:1;padding:var(--s2) var(--s4);border-radius:var(--r-pill);opacity:.82;transition:color var(--dur),opacity var(--dur)}
.links a:hover{opacity:1}
.links a.active{color:var(--on-dark);opacity:1}
.pill{position:absolute;top:var(--s1);bottom:var(--s1);left:0;width:0;border-radius:var(--r-pill);background:var(--teal);opacity:0;transition:transform .55s var(--ease),width .55s var(--ease),opacity var(--dur)}

.navcta{display:flex;align-items:center;gap:var(--s3)}
.navcta .tel{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:500;font-variant-numeric:tabular-nums}
.navcta .tel i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;opacity:.7}
.navcta .tel i svg{width:14px;height:14px}
.navcta .btn{min-height:44px;padding:0 var(--s5)}
.burger{display:none;min-width:44px;min-height:44px;background:none;border:0;cursor:pointer}

.lang{display:flex;gap:2px;font-size:var(--fs-label);font-weight:600;letter-spacing:.08em}
.lang a{padding:var(--s2);border-radius:var(--r-pill);opacity:.6;transition:opacity var(--dur),background var(--dur)}
.lang a:hover{opacity:1}
.lang a[aria-current]{opacity:1;background:rgba(201,162,91,.22)}

.drawer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;gap:var(--s4);padding:var(--s6);background:var(--night);color:var(--on-dark);clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .8s var(--ease)}
.drawer.open{clip-path:circle(150% at calc(100% - 40px) 40px)}
.drawer>a{font:2.5rem/1.2 var(--serif)}
.drawer>button{position:absolute;top:var(--s5);right:var(--s5);width:48px;height:48px;background:none;border:0;font-size:2rem;cursor:pointer}
.lang-drawer{margin-top:var(--s5);font-size:1rem}
.lang-drawer a{padding:var(--s2) var(--s4)}

@media(max-width:1100px){.navcta .tel span{display:none}}
@media(max-width:960px){.links,.navcta .tel{display:none}.burger{display:block}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--night)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{transform:scale(1.15);filter:brightness(.55) saturate(1.1);transition:transform 2.4s var(--ease)}
.loaded .hero-bg img{transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,29,34,.55) 0%,transparent 35%,rgba(15,29,34,.9) 100%)}
.hero-arch{position:absolute;right:6%;top:14%;z-index:2;width:min(30vw,380px);aspect-ratio:3/4.3;padding:10px;border:1px solid rgba(201,162,91,.5);border-radius:999px 999px 0 0;overflow:hidden}
.hero-arch .in{width:100%;height:100%;border-radius:999px 999px 0 0;overflow:hidden}
.hero-arch img{transform:scale(1.3)}
.hero-content{position:relative;z-index:3;padding-bottom:max(var(--s9),12vh)}
.hero h1{font-size:var(--fs-display);line-height:.9}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:inline-block;transform:translateY(110%);transition:transform 1.4s var(--ease)}
.loaded .hero h1 .line span{transform:none}
.loaded .hero h1 .line:nth-child(2) span{transition-delay:.12s}
.hero-sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s6);margin-top:var(--s6)}
.hero-sub p{max-width:440px;color:var(--on-dark-2)}
.scroll-cue{position:absolute;left:50%;bottom:var(--s5);z-index:3;width:1px;height:56px;background:rgba(251,247,240,.25);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;inset:0;background:var(--gold);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@media(max-width:860px){.hero-arch{display:none}}

/* ---------- Booking ---------- */
.booking{position:relative;z-index:5;margin-top:-48px}
.booking form{display:grid;grid-template-columns:repeat(4,1fr) auto;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.booking label{min-width:0;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4) var(--s5);border-right:1px solid var(--line);cursor:pointer;transition:background var(--dur)}
.booking label:focus-within{background:color-mix(in srgb,var(--teal) 7%,transparent)}
.booking label span{font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.booking input,.booking select{width:100%;min-width:0;border:0;background:none;font-size:1.0625rem;font-weight:500;color:var(--text)}
.booking button{padding:0 var(--s6);border:0;background:var(--teal);color:var(--on-dark);font-size:.9375rem;font-weight:600;cursor:pointer;transition:background var(--dur)}
.booking button:hover{background:color-mix(in srgb,var(--teal) 85%,black)}
@media(max-width:860px){
  .booking form{grid-template-columns:1fr 1fr}
  .booking label{border-bottom:1px solid var(--line)}
  .booking label:nth-child(2n){border-right:0}
  .booking button{grid-column:1/-1;min-height:56px}
}

/* ---------- Marquee ---------- */
.marquee{padding:var(--s8) 0 var(--s5);overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;gap:var(--s7);font:italic clamp(2rem,4vw,3.25rem) var(--serif);color:var(--zellige);animation:mq 60s linear infinite}
.marquee .track span{display:inline-flex;align-items:center;gap:var(--s7)}
.marquee .track span::after{content:"✦";font-style:normal;font-size:.5em;color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Intro ---------- */
.intro{padding:var(--s8) 0 var(--section)}
.intro .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s9);align-items:center}
.intro-imgs{position:relative;height:640px}
.intro-imgs .a{position:absolute;left:0;top:0;width:68%;height:82%;border-radius:var(--r-arch);overflow:hidden}
.intro-imgs .b{position:absolute;right:0;bottom:0;width:46%;height:52%;border:10px solid var(--bg);border-radius:var(--r-md);overflow:hidden}
.intro-imgs .seal{position:absolute;right:8%;top:6%;width:128px;height:128px}
.intro p.lead{margin:var(--s5) 0;font:var(--fs-lead)/1.35 var(--serif);color:var(--text)}
.intro p{color:var(--text-2)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.facts b{display:block;font:400 2.75rem/1 var(--serif);color:var(--zellige);font-variant-numeric:tabular-nums}
.facts small{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
@media(max-width:960px){.intro .grid{grid-template-columns:1fr;gap:var(--s7)}.intro-imgs{height:480px}}

/* ---------- Rituals ---------- */
.exp{padding:var(--section) 0;background:var(--night)}
.exp .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s6);margin-bottom:var(--s8)}
.exp .head p{max-width:380px;color:var(--on-dark-2)}
.exp-list{display:grid}
.exp-item{display:grid;grid-template-columns:80px 1fr 1.1fr;gap:var(--s6);align-items:center;padding:var(--s6) 0;border-top:1px solid var(--line-dark)}
.exp-item:last-child{border-bottom:1px solid var(--line-dark)}
.exp-item .n{font:italic 1.375rem var(--serif);color:var(--gold)}
.exp-item h3{font-size:clamp(2rem,4vw,3.5rem);transition:transform .6s var(--ease),color .4s}
.exp-item p{max-width:420px;color:var(--on-dark-2)}
.exp-item:hover h3{transform:translateX(8px);color:var(--peach)}
.exp-item .thumb{display:none}
.exp-float{position:fixed;z-index:40;width:300px;height:380px;border-radius:var(--r-arch);overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity var(--dur),transform .5s var(--ease)}
.exp-float.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:860px){
  .exp-item{grid-template-columns:1fr;gap:var(--s3)}
  .exp-item .thumb{display:block;width:100%;height:200px;margin-bottom:var(--s2);border-radius:var(--r-arch)}
  .exp-float{display:none}
}

/* ---------- Rooms ---------- */
.rooms{padding:var(--section) 0 var(--s8);background:var(--bg-alt)}
.rooms .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s5);margin-bottom:var(--s7)}
.rail{display:flex;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s2) max(var(--gutter),calc((100% - var(--container))/2)) var(--s8);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.room{flex:0 0 min(420px,84vw);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-1);transition:transform .5s var(--ease),box-shadow .5s}
.room:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.room .ph{position:relative;height:320px;overflow:hidden}
.room .ph img{transition:transform 1.4s var(--ease)}
.room:hover .ph img{transform:scale(1.05)}
.room .tag{position:absolute;top:var(--s4);left:var(--s4);padding:var(--s1) var(--s3);border-radius:var(--r-pill);background:rgba(251,247,240,.92);color:var(--night);font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.room .bd{flex:1;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5)}
.room h3{font-size:2.25rem}
.room p{font-size:.9375rem;color:var(--text-2)}
.room ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto}
.room li{padding:var(--s1) var(--s3);border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-label)}
.room .ft{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--fs-sm)}
.room .ft a{display:flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:600;color:var(--accent-ink)}
.rail-ctrl{display:flex;gap:var(--s3)}
.rail-ctrl button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.2rem;cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}
.rail-ctrl button:hover{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------- Spa ---------- */
.spa{padding:var(--section) 0;background:linear-gradient(180deg,var(--bg-alt),var(--bg))}
.spa .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
.spa .grid>.rv:first-child{padding-top:var(--s5)}
.spa-visual{position:sticky;top:112px;height:78vh;border-radius:var(--r-arch);overflow:hidden}
.spa-visual img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.spa-visual img.on{opacity:1;transform:none}
.spa-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(15,29,34,.6))}
.spa-visual .cap{position:absolute;left:var(--s5);bottom:var(--s5);z-index:2;font:italic 1.25rem var(--serif);color:var(--on-dark)}
.spa-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s4);opacity:.3;transition:opacity .6s}
.spa-step.on{opacity:1}
.spa-step .k{font:italic 1.25rem var(--serif);color:var(--accent-ink)}
.spa-step h3{font-size:clamp(2.25rem,3.6vw,3.25rem)}
.spa-step p{max-width:460px;color:var(--text-2)}
@media(max-width:960px){.spa .grid{grid-template-columns:1fr;gap:var(--s6)}.spa-visual{position:relative;top:0;height:60vh}.spa-step{min-height:auto;padding:var(--s6) 0;opacity:1}}

/* ---------- Privatisation ---------- */
.priv{padding:var(--section) 0;background:var(--teal);overflow:hidden}
.priv .zel{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M40 0l11.7 28.3L80 40 51.7 51.7 40 80 28.3 51.7 0 40l28.3-11.7z'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3C/g%3E%3C/svg%3E")}
.priv .grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s9);align-items:center}
.priv .lede{max-width:520px;margin-top:var(--s5);color:var(--on-dark-2)}
.priv .big{font:clamp(7rem,16vw,15rem)/.8 var(--serif);color:var(--gold)}
.priv .big small{display:block;margin-top:var(--s4);font:600 var(--fs-label) var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-dark)}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6);margin:var(--s7) 0}
.perks div{padding-top:var(--s4);border-top:1px solid rgba(251,247,240,.25)}
.perks b{display:block;margin-bottom:var(--s1);font:500 1.5rem var(--serif)}
.perks p{font-size:.9375rem;color:var(--on-dark-2)}
.perks i{font-style:normal;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:#f3cfb3}
.priv-imgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);height:620px;margin-top:var(--s7)}
.priv-imgs div{border-radius:var(--r-md);overflow:hidden}
.priv-imgs div:first-child{grid-row:span 2;border-radius:var(--r-arch)}
@media(max-width:960px){.priv .grid{grid-template-columns:1fr;gap:var(--s7)}.priv-imgs{height:460px}.perks{grid-template-columns:1fr}}

/* ---------- Reviews ---------- */
.reviews{padding:var(--section) 0;text-align:center}
.stars{margin:var(--s5) 0;font-size:1rem;letter-spacing:.3em;color:var(--accent-ink)}
.quote{position:relative;max-width:920px;min-height:290px;margin:0 auto}
.quote blockquote{position:absolute;inset:0;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
.quote blockquote.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .8s .3s,transform .8s .3s var(--ease)}
.quote p{font:clamp(1.625rem,3.2vw,2.625rem)/1.25 var(--serif)}
.quote cite{display:block;margin-top:var(--s5);font-style:normal;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-2)}
.dots{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s6)}
.dots button{position:relative;width:36px;height:44px;border:0;background:none;cursor:pointer;transition:width .4s var(--ease)}
.dots button::before{content:"";position:absolute;inset-inline:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--line);transition:background var(--dur)}
.dots button.on{width:60px}
.dots button.on::before{background:var(--accent)}
@media(max-width:600px){.quote{min-height:380px}}

/* ---------- Contact ---------- */
.contact{padding:var(--section) 0 0;background:var(--night);overflow:hidden}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9)}
.contact .info{display:grid;gap:var(--s6);margin-top:var(--s7)}
.contact .info span{display:block;margin-bottom:var(--s2);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold)}
.contact .info a,.contact .info p{font:1.625rem/1.25 var(--serif)}
.contact .info a:hover{color:var(--peach)}
.contact .info .btn{justify-self:start;font:600 .9375rem var(--sans)}
.route{list-style:none;counter-reset:s;display:grid;gap:var(--s3);margin-top:var(--s3)}
.route li{counter-increment:s;display:flex;gap:var(--s4);font-size:.9375rem;color:var(--on-dark-2)}
.route li::before{content:counter(s,decimal-leading-zero);font:italic 1rem var(--serif);color:var(--gold)}
.cform{align-self:start;display:grid;gap:var(--s5);padding:var(--s7);background:rgba(251,247,240,.04);border:1px solid var(--line-dark);border-radius:var(--r-md)}
.cform h3{font-size:2.25rem}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.cform .btn{justify-self:start}
.cform .msg{min-height:1.2em;font-size:.9375rem;color:var(--on-dark-2)}
.cform .msg[data-state=ok]{color:#9fd8c6}
.cform .msg[data-state=err]{color:#f4b199}
.cform .msg a{text-decoration:underline}
.field [aria-invalid]{border-bottom:2px solid #f4b199}
.field [aria-invalid]+label{color:#f4b199}
.btn[aria-busy]::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn[aria-busy] svg{display:none}
.field{position:relative}
.field input,.field textarea{width:100%;padding:var(--s5) 0 var(--s2);background:none;border:0;border-bottom:1px solid rgba(251,247,240,.25);color:var(--on-dark);font-size:1rem;resize:none;transition:border-color var(--dur)}
.field input:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--gold)}
.field label{position:absolute;left:0;top:var(--s5);font-size:1rem;color:rgba(251,247,240,.6);pointer-events:none;transition:all var(--dur) var(--ease)}
.field :is(input,textarea):is(:focus,:not(:placeholder-shown))+label{top:0;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media(max-width:960px){.contact .grid{grid-template-columns:1fr;gap:var(--s7)}.cform{padding:var(--s6) var(--s5)}.cform .row{grid-template-columns:1fr}}

/* map */
.map{position:relative;height:440px;margin-top:var(--s9);border:1px solid var(--line-dark);border-radius:var(--r-md);overflow:hidden}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.15);transition:filter .6s}
.map:hover iframe{filter:none}
.map-card{position:absolute;left:var(--s5);bottom:var(--s5);max-width:320px;display:grid;gap:var(--s3);padding:var(--s5);background:rgba(15,29,34,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-dark);border-radius:var(--r-sm);color:var(--on-dark)}
.map-k{font:1.625rem/1 var(--serif)}
.map-card p{font-size:.9375rem;color:var(--on-dark-2)}
.map-card .btn{justify-self:start;min-height:44px}
@media(max-width:600px){.map{height:auto;display:flex;flex-direction:column;margin-top:var(--s8)}.map iframe{height:300px}.map-card{position:static;max-width:none;border:0;border-top:1px solid var(--line-dark);border-radius:0}}

/* giant wordmark + footer */
.giant{margin-top:var(--s10);padding-bottom:.18em;overflow:hidden;font:clamp(4rem,17vw,17rem)/.8 var(--serif);white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(201,162,91,.4);user-select:none}
footer{padding:var(--s5) 0;border-top:1px solid var(--line-dark);background:var(--night);font-size:var(--fs-sm);color:rgba(251,247,240,.6)}
footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s5);padding-right:96px}
footer a{transition:color var(--dur)}
footer a:hover{color:var(--gold)}
footer .l{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s5)}
footer .l span{opacity:.7}
.credit{display:inline-flex;align-items:center;gap:var(--s2)}
.credit-k::after{content:" ·"}
.credit-n{color:rgba(251,247,240,.88);transition:color var(--dur)}
.credit svg{width:12px;height:12px;opacity:.6;transition:transform var(--dur) var(--ease),opacity var(--dur)}
.credit:hover .credit-n,.credit:hover svg{color:var(--gold);opacity:1}
.credit:hover svg{transform:translate(2px,-2px)}
@media(max-width:960px){footer .wrap{grid-template-columns:1fr;justify-items:start;gap:var(--s3);padding-right:88px}footer .l{justify-content:flex-start}}

/* floating book */
.fab{position:fixed;right:var(--s5);bottom:var(--s5);z-index:45;width:88px;height:88px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-2);transform:scale(0);transition:transform .6s var(--ease)}
.fab.show{transform:scale(1)}
.fab svg{position:absolute;inset:0;animation:spin 24s linear infinite}
.fab b{font-size:1.375rem}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.clip{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.clip.in{clip-path:inset(0)}
html:not(.js) .rv,html:not(.js) .clip{opacity:1;transform:none;clip-path:none}
html:not(.js) #loader{display:none}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:is(.hero,.exp,.priv,.contact,.drawer,footer,nav:not(.solid)) :focus-visible{outline-color:var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.clip{opacity:1;transform:none;clip-path:none}}

/* ---------- Phone ---------- */
@media(max-width:600px){
  nav .wrap{padding-left:var(--s4)}
  .logo{font-size:1.15rem}
  .logo .mark{width:32px;height:32px}
  .logo small{letter-spacing:.22em}
  .navcta{gap:var(--s2)}
  .navcta .lang{display:none}
  .navcta .btn{padding:0 var(--s4);font-size:var(--fs-sm)}
  .fab{right:var(--s4);bottom:var(--s4);width:72px;height:72px}
  .facts b{font-size:2.25rem}
  nav .wrap{gap:var(--s3)}
  .logo{min-width:0;gap:var(--s2)}
}
@media(max-width:400px){.logo small{display:none}.navcta .btn{padding:0 var(--s3)}}