/* ==========================================================
   HIGH END CARE — صالون العناية الرفيعة · Ar Rawdah, Jeddah
   Iznik cobalt · bole coral · turquoise · Ottoman arch
   ========================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --night:   #0B1B33;
  --night-2: #0F2440;
  --night-3: #16325A;
  --ink:     #071224;

  --cream:   #F6F1E4;
  --cream-2: #CFC7B4;
  --mut:     #8FA0BC;
  --faint:   #4B5F80;

  --coral:   #E2553C;
  --coral-2: #B8402B;
  --turq:    #37A6A6;

  --line:    rgba(246,241,228,.12);
  --line-2:  rgba(246,241,228,.24);

  --ff-d: 'Bodoni Moda', 'Didot', Georgia, serif;
  --ff-b: 'Karla', 'Segoe UI', system-ui, sans-serif;

  --wrp: 1260px;
  --pad: clamp(20px, 5vw, 70px);

  --e:  cubic-bezier(.2,.75,.05,1);
  --e2: cubic-bezier(.34,1.3,.64,1);
}
html[lang="ar"]{
  --ff-d: 'El Messiri', 'Bodoni Moda', serif;
  --ff-b: 'Cairo', 'Karla', system-ui, sans-serif;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--night); color:var(--cream);
  font-family:var(--ff-b); font-size:16px; line-height:1.72; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.lock{ overflow:hidden; }
img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--ff-d); font-weight:400; line-height:1.08; letter-spacing:-.015em; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{
  letter-spacing:0; line-height:1.42; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--coral); color:var(--cream); }
:focus-visible{ outline:2px solid var(--turq); outline-offset:4px; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--night-3); border:2px solid var(--ink); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--coral-2); }

.wrp{ width:100%; max-width:var(--wrp); margin-inline:auto; padding-inline:var(--pad); }
.ico{ width:17px; height:17px; flex:0 0 auto; fill:currentColor; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--coral); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(226,85,60,.7); animation:dot 2.3s infinite; }
@keyframes tiledrift{ to{ background-position:72px 72px } }
@keyframes dot{ 70%{ box-shadow:0 0 0 8px rgba(226,85,60,0) } 100%{ box-shadow:0 0 0 0 rgba(226,85,60,0) } }

.kck{ display:inline-block; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--turq); margin-bottom:20px; }
html[lang="ar"] .kck{ letter-spacing:.12em; text-transform:none; font-size:13px; }

/* Iznik tile wash */
.hero__tile,.sec__tile,.close__tile{
  position:absolute; inset:0; color:var(--cream); opacity:.045; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23F6F1E4' stroke-width='1'%3E%3Cpath d='M36 6 L48 18 L60 6 M36 6 L24 18 L12 6'/%3E%3Crect x='24' y='24' width='24' height='24' transform='rotate(45 36 36)'/%3E%3Crect x='27' y='27' width='18' height='18'/%3E%3Ccircle cx='36' cy='36' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  animation:tiledrift 46s linear infinite;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
}

/* Ottoman arch mask */
.archbox{ overflow:hidden; clip-path:url(#arch); background:var(--night-2); }
.archbox img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.16); opacity:0; transition:transform 1.6s var(--e), opacity 1.1s var(--e); }
.rv.in .archbox img, .archbox img.seen{ transform:scale(1); opacity:1; }

/* ---------- 3. CURTAIN ---------- */
.curt{ position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:grid; place-items:center; transition:opacity .9s var(--e), visibility .9s; }
.curt.gone{ opacity:0; visibility:hidden; }
.curt__in{ display:grid; justify-items:center; gap:20px; color:var(--coral); }
.curt__arch{ width:clamp(80px,17vw,120px); height:auto; }
.curt__arch path{ stroke-dasharray:420; stroke-dashoffset:420;
  animation:draw 1.7s var(--e) .1s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.curt__w{ font-family:'Bodoni Moda',serif; font-size:clamp(15px,3vw,22px); letter-spacing:.32em;
  text-transform:uppercase; color:var(--cream); opacity:0; animation:cin 1s var(--e) .9s forwards; }
@keyframes cin{ to{ opacity:1 } }

/* ---------- 4. PROGRESS ---------- */
.prg{ position:fixed; top:0; inset-inline:0; height:2px; z-index:9990; pointer-events:none; }
.prg i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--turq),var(--coral)); }
[dir="rtl"] .prg i{ margin-inline-start:auto; }

/* ---------- 5. SIDE RAIL ---------- */
.rail{ position:fixed; z-index:80; inset-inline-end:26px; top:50%; translate:0 -50%;
  display:grid; gap:16px; }
.rail a{ display:grid; place-items:center; width:22px; height:22px; position:relative; }
.rail i{ width:7px; height:7px; border:1px solid var(--faint); rotate:45deg;
  transition:background .4s, border-color .4s, scale .4s var(--e2); }
.rail a:hover i, .rail a.on i{ background:var(--coral); border-color:var(--coral); scale:1.25; }
.rail a::after{ content:attr(data-lbl); position:absolute; inset-inline-end:32px; white-space:nowrap;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-2);
  opacity:0; translate:8px 0; transition:.4s var(--e); pointer-events:none; }
.rail a:hover::after{ opacity:1; translate:0 0; }
@media (max-width:1200px){ .rail{ display:none; } }

/* ---------- 6. NAV ---------- */
.nav{ position:fixed; top:0; inset-inline:0; z-index:900; padding-block:22px;
  transition:padding .6s var(--e), background .6s, border-color .6s, backdrop-filter .6s;
  border-bottom:1px solid transparent; }
.nav.stuck{ padding-block:12px; background:rgba(11,27,51,.86); border-bottom-color:var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nav__in{ width:100%; max-width:var(--wrp); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:24px; }

.mk{ display:grid; flex:0 0 auto; line-height:1.15; }
.mk__en{ font-family:'Bodoni Moda',serif; font-size:19px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream); }
.mk__ar{ font-family:'El Messiri',serif; font-size:11px; color:var(--mut); letter-spacing:.04em; }

.nav__l{ display:flex; gap:28px; margin-inline:auto; }
.nav__l a{ position:relative; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-2); transition:color .4s; padding-block:6px; }
html[lang="ar"] .nav__l a{ letter-spacing:.02em; text-transform:none; font-size:14.5px; }
.nav__l a::after{ content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:1px;
  background:var(--coral); transition:width .55s var(--e); }
.nav__l a:hover{ color:var(--cream); }
.nav__l a:hover::after{ width:100%; }

.nav__r{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.lng{ width:32px; height:32px; border:1px solid var(--line-2); font-size:12px; color:var(--cream-2);
  display:grid; place-items:center; transition:.4s; rotate:45deg; }
.lng span{ rotate:-45deg; }
.lng:hover{ border-color:var(--turq); color:var(--turq); }

.brg{ display:none; width:34px; height:34px; flex-direction:column; justify-content:center; gap:5px; padding:0 5px; }
.brg i{ display:block; height:1px; background:var(--cream); transition:.45s var(--e); }
.brg i:nth-child(2){ width:64%; margin-inline-start:auto; }
.brg.on i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.brg.on i:nth-child(2){ opacity:0; }
.brg.on i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- 7. BUTTONS ---------- */
.bt{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border:1px solid var(--line-2); color:var(--cream); overflow:hidden;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  transition:color .5s var(--e), border-color .5s, transform .45s var(--e); }
.bt:hover{ transform:translateY(-2px); }
html[lang="ar"] .bt{ letter-spacing:.03em; text-transform:none; font-size:14.5px; }
.bt::before{ content:''; position:absolute; inset:0; background:var(--cream);
  transform:translateY(101%); transition:transform .55s var(--e); }
.bt > *{ position:relative; z-index:1; }
.bt:hover{ color:var(--ink); border-color:var(--cream); }
.bt:hover::before{ transform:none; }
.bt--sm{ padding:10px 17px; font-size:10.5px; }
.bt--lg{ padding:17px 34px; }
.bt--xl{ padding:21px 46px; font-size:13px; }
.bt--wa{ border-color:#25D366; color:#25D366; }
.bt--wa::before{ background:#25D366; }
.bt--wa:hover{ color:#04140A; border-color:#25D366; }
.bt--bare{ border-color:transparent; color:var(--cream-2); padding-inline:4px; }
.bt--bare::before{ display:none; }
.bt--bare:hover{ color:var(--turq); }

/* pointer-tracked glow */
.glow{ position:absolute; top:0; left:0; width:600px; height:600px; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(55,166,166,.16), rgba(226,85,60,.07) 42%, transparent 68%);
  filter:blur(30px); opacity:.9; }
@media (hover:none),(max-width:900px){ .glow{ display:none; } }

/* ---------- 8. HERO ---------- */
.hero{ position:relative; padding-block:clamp(126px,16vw,180px) 0; overflow:hidden; }
.hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,72px); align-items:center; }
.eyb{ display:inline-flex; align-items:center; gap:11px; font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cream-2); margin-bottom:28px;
  animation:up 1.1s var(--e) .5s both; }
html[lang="ar"] .eyb{ letter-spacing:.04em; text-transform:none; font-size:13.5px; }
@keyframes up{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.hero__h{ font-size:clamp(2.6rem,7.4vw,6rem); font-weight:400; margin-bottom:26px; }
html[lang="ar"] .hero__h{ font-size:clamp(2.1rem,6vw,4.6rem); font-weight:600; }
/* Word-level masks. Never split Arabic per character — it breaks the
   cursive joining and the word renders as disconnected letters. */
.wsplit .wm{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-block:.08em; }
.wsplit .wm > i{ display:inline-block; font-style:normal; transform:translateY(115%);
  transition:transform 1.05s var(--e); transition-delay:calc(var(--i) * 85ms); }
.wsplit.in .wm > i{ transform:none; }
.hero__p{ max-width:52ch; color:var(--cream-2); font-size:clamp(14.5px,1.5vw,17px);
  animation:up 1.1s var(--e) .85s both; }
.hero__act{ display:flex; flex-wrap:wrap; gap:13px; margin-top:36px; animation:up 1.1s var(--e) 1s both; }

.hero__im{ margin:0; }
.hero__im .archbox{ aspect-ratio:3/3.9; }
.hero__im{ animation:float 9s ease-in-out infinite alternate; }
@keyframes float{ from{ transform:translateY(-8px) } to{ transform:translateY(8px) } }

.hero__bar{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,70px); margin-top:clamp(46px,7vw,84px);
  padding-block:26px; border-top:1px solid var(--line); animation:up 1.1s var(--e) 1.15s both; }
.hero__bar span{ display:grid; gap:3px; }
.hero__bar b{ font-family:var(--ff-d); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:400; line-height:1.1; }
.hero__bar em{ font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
html[lang="ar"] .hero__bar em{ letter-spacing:.04em; text-transform:none; font-size:12.5px; }

/* ---------- 9. SECTION ---------- */
.sec{ position:relative; padding-block:clamp(76px,11vw,150px); overflow:hidden; }
.sec--deep{ background:var(--ink); }
.hd{ max-width:740px; margin-bottom:clamp(44px,6vw,78px); }
.hd--c{ margin-inline:auto; text-align:center; }
.hd h2, .story h2, .close h2{ font-size:clamp(1.9rem,4.8vw,3.7rem); }
.hd p{ color:var(--cream-2); margin-top:20px; max-width:60ch; font-size:clamp(14.5px,1.4vw,16.5px); }
.hd--c p{ margin-inline:auto; }

/* ---------- 10. STORY ---------- */
.story{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,80px); align-items:center; }
.story__im{ margin:0; }
.story__im .archbox{ aspect-ratio:3/3.5; }
.story h2{ margin-bottom:24px; }
.story__tx p{ color:var(--cream-2); margin-bottom:18px; max-width:54ch; }
.pts{ margin-top:32px; border-top:1px solid var(--line); }
.pts li{ padding-block:17px; border-bottom:1px solid var(--line); display:grid; gap:4px; }
.pts b{ font-family:var(--ff-d); font-size:19px; font-weight:500; }
html[lang="ar"] .pts b{ font-size:17px; font-weight:600; }
.pts span{ font-size:13.5px; color:var(--mut); }

/* ---------- 11. ACCORDION MENU ---------- */
.acc{ border-top:1px solid var(--line-2); }
.acc__i{ border-bottom:1px solid var(--line-2); }
.acc__b{ width:100%; display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  padding-block:clamp(20px,2.6vw,30px); text-align:start; transition:padding-inline .5s var(--e); }
.acc__b:hover{ padding-inline:8px; }
.acc__n{ font-size:11px; letter-spacing:.16em; color:var(--turq); flex:0 0 auto; }
.acc__t{ font-family:var(--ff-d); font-size:clamp(1.2rem,2.6vw,1.95rem); flex:1 1 auto; }
html[lang="ar"] .acc__t{ font-weight:600; font-size:clamp(1.05rem,2.2vw,1.6rem); }
.acc__c{ font-size:10.5px; letter-spacing:.14em; color:var(--faint); flex:0 0 auto; }
.acc__x{ position:relative; width:15px; height:15px; flex:0 0 auto; }
.acc__x::before,.acc__x::after{ content:''; position:absolute; inset:50% 0 auto 0; height:1px;
  background:var(--cream); transition:transform .5s var(--e); }
.acc__x::after{ transform:rotate(90deg); }
.acc__i[data-open="1"] .acc__x::after{ transform:rotate(0); }
.acc__i[data-open="1"] .acc__t{ color:var(--coral); }

/* height is driven from JS (scrollHeight) rather than a 0fr->1fr grid track:
   the fr interpolation left panels stuck at stale heights in testing. */
.acc__p{ overflow:hidden; height:0; transition:height .55s var(--e); }
.rws li{ display:flex; align-items:baseline; gap:12px; padding-block:13px;
  opacity:0; transform:translateY(10px); transition:opacity .6s var(--e), transform .6s var(--e); }
.acc__i[data-open="1"] .rws li{ opacity:1; transform:none; }
.acc__i[data-open="1"] .rws li:nth-child(1){ transition-delay:.10s }
.acc__i[data-open="1"] .rws li:nth-child(2){ transition-delay:.17s }
.acc__i[data-open="1"] .rws li:nth-child(3){ transition-delay:.24s }
.acc__i[data-open="1"] .rws li:nth-child(4){ transition-delay:.31s }
.rws li:last-child{ padding-bottom:clamp(18px,2.4vw,28px); }
.rw__n{ font-size:15.5px; color:var(--cream); flex:0 1 auto; }
.rw__l{ flex:1 1 auto; border-bottom:1px dotted var(--faint); translate:0 -4px; min-width:14px; }
.rw__p{ display:inline-flex; align-items:baseline; gap:5px; flex:0 0 auto; }
.rw__p b{ font-family:var(--ff-d); font-size:1.35rem; font-weight:500; }
.rw__p i{ font-style:normal; font-size:9.5px; letter-spacing:.14em; color:var(--mut); }
.rw__p--ask{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--turq); }
html[lang="ar"] .rw__p--ask{ letter-spacing:0; text-transform:none; font-size:14px; }
.vat{ margin-top:clamp(30px,4vw,50px); font-size:12.5px; color:var(--mut); max-width:64ch; }

/* ---------- 12. GALLERY ---------- */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.8vw,26px); align-items:end; }
.gi{ margin:0; }
.gi{ transition:transform .8s var(--e); }
.gi:hover{ transform:translateY(-10px); }
.gi .archbox{ aspect-ratio:3/4.1; }
.gi:nth-child(even) .archbox{ aspect-ratio:3/3.4; }

/* ---------- 13. REVIEWS ---------- */
.qs{ columns:3; column-gap:clamp(16px,2.2vw,28px); }
.q{ break-inside:avoid; margin-bottom:clamp(16px,2.2vw,28px);
  padding:clamp(22px,2.5vw,32px); border:1px solid var(--line); background:var(--night); }
.st{ display:block; color:var(--coral); letter-spacing:4px; font-size:11.5px; margin-bottom:15px; }
.q p{ font-family:var(--ff-d); font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.6;
  color:var(--cream); margin-bottom:16px; }
html[lang="ar"] .q p{ font-family:var(--ff-b); font-size:15px; line-height:1.8; }
.qs__more{ display:none; justify-content:center; margin-top:26px; }
.qs__more .bt{ width:100%; }
.q b{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); font-weight:400; }

/* ---------- 14. VISIT ---------- */
.vst{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,54px); align-items:start; }
.blk{ padding-block:22px; border-top:1px solid var(--line); }
.blk:first-child{ border-top:0; padding-top:0; }
.blk__k{ display:block; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--faint); margin-bottom:11px; }
html[lang="ar"] .blk__k{ letter-spacing:.06em; text-transform:none; font-size:12.5px; }
.blk p{ font-size:15.5px; line-height:1.66; color:var(--cream-2); }
.blk small{ display:block; margin-top:9px; font-size:12.5px; color:var(--mut); }
.hrs th{ text-align:start; font-weight:400; font-size:14.5px; color:var(--cream-2);
  padding-block:7px; border-bottom:1px solid var(--line); }
.hrs td{ text-align:end; font-size:14.5px; color:var(--cream); padding-block:7px;
  border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.tel{ font-family:var(--ff-d); font-size:27px; color:var(--cream); transition:color .4s; }
.tel:hover{ color:var(--coral); }
.vst__b{ display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:30px; }
.vst__m{ overflow:hidden; border:1px solid var(--line); }
.vst__m iframe{ width:100%; height:clamp(360px,46vw,540px); border:0;
  filter:invert(.92) hue-rotate(190deg) saturate(.6) contrast(.9); }

/* ---------- 15. CLOSE ---------- */
.close{ position:relative; padding-block:clamp(86px,13vw,180px); text-align:center;
  background:var(--night-2); border-top:1px solid var(--line); overflow:hidden; }
.close__in{ position:relative; }
.close h2{ font-size:clamp(2rem,6vw,4.6rem); margin-bottom:16px; }
.close p{ color:var(--cream-2); margin-bottom:38px; }

/* ---------- 16. FOOTER ---------- */
.ft{ background:var(--ink); border-top:1px solid var(--line); padding-top:clamp(50px,7vw,80px); }
.ft__g{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(26px,4vw,48px); padding-bottom:52px; }
.mk__en--f{ display:block; font-size:22px; margin-bottom:3px; }
.ft__g > div > p{ color:var(--mut); font-size:13.5px; max-width:34ch; margin-top:14px; }
.ft h4{ font-family:var(--ff-b); font-weight:400; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--faint); margin-bottom:17px; }
html[lang="ar"] .ft h4{ letter-spacing:.06em; text-transform:none; font-size:12.5px; }
.ft__g a{ display:block; font-size:14px; color:var(--cream-2); padding-block:5px;
  transition:color .4s, padding-inline-start .4s; }
.ft__g > div > a:hover{ color:var(--coral); padding-inline-start:6px; }
.ft__tel{ font-family:var(--ff-d) !important; font-size:21px !important; color:var(--cream) !important; }
.ft__b{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:22px;
  border-top:1px solid var(--line); font-size:11px; letter-spacing:.08em; color:var(--faint); }
.credit{ flex-basis:100%; text-align:center; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line); opacity:.65; font-size:11px; }
.credit a{ color:var(--turq); transition:opacity .3s; }
.credit a:hover{ opacity:.7; }
html[lang="ar"] .ft__b{ letter-spacing:0; font-size:12.5px; }

/* ---------- 17. DOCK ---------- */
.dock{ position:fixed; z-index:880; bottom:0; inset-inline:0; display:none;
  transform:translateY(101%); transition:transform .6s var(--e); }
.dock.up{ transform:none; }
.dock__a{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 10px; background:var(--cream); color:var(--ink);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.dock__a--wa{ background:#25D366; color:#04140A; }
html[lang="ar"] .dock__a{ letter-spacing:.02em; text-transform:none; font-size:14.5px; }

/* ---------- 18. REVEAL ---------- */
.rv{ opacity:0; transform:translateY(22px); }
.rv.in{ opacity:1; transform:none;
  transition:opacity 1s var(--e) var(--d,0s), transform 1s var(--e) var(--d,0s); }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__im{ order:-1; }
  .hero__im .archbox{ aspect-ratio:16/11; }
  .story{ grid-template-columns:1fr; }
  .story__im{ order:-1; }
  .story__im .archbox{ aspect-ratio:16/10; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .qs{ columns:2; }
  .vst{ grid-template-columns:1fr; }
  .ft__g{ grid-template-columns:1fr 1fr; }
}
/* keep nav controls above the open menu */
.nav .mk, .nav .brand, .nav .logo, .nav__r, .nav__act{ position:relative; z-index:3; }

@media (max-width:900px){
  .nav__l{
    /* The sticky nav gets backdrop-filter, which makes it the containing
       block for position:fixed children — inset:0 would then resolve against
       the ~60px bar, pushing menu links off-screen. Pin to the viewport with
       an explicit height instead. */
    position:fixed; top:0; inset-inline:0; height:100dvh; flex-direction:column; justify-content:center; align-items:center;
    gap:16px; margin:0; background:var(--ink);
    clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--e); pointer-events:none;
  }
  .nav__l.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
  .nav__l a{ font-family:var(--ff-d); font-size:clamp(1.7rem,7vw,2.5rem); letter-spacing:0;
    text-transform:none; color:var(--cream); }
  .brg{ display:flex; position:relative; z-index:2; }
  .nav__r .bt--sm span{ display:none; }
  .nav__r .bt--sm{ padding:10px; }
  .dock{ display:flex; }
  .ft{ padding-bottom:62px; }
}
@media (max-width:640px){
  .gal{ grid-template-columns:1fr; }
  .gi .archbox, .gi:nth-child(even) .archbox{ aspect-ratio:4/4.4; }
  .qs{ columns:1; }
  .ft__g{ grid-template-columns:1fr; }
  .hero__act .bt--lg{ width:100%; }
  .vst__b .bt--lg{ width:100%; }
  .acc__c{ display:none; }
}


@media (max-width:900px){
  .qs__more{ display:flex; }
  .qs .q:nth-child(n+2){ display:none; }
  .qs.open .q{ display:block; }
}

/* ---------- 20. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
  .archbox img{ opacity:1; transform:none; }
  .wsplit .wm > i{ transform:none; }
  .rws li{ opacity:1; transform:none; }
  .hero__im{ animation:none; }
}