﻿
html,body{overflow-x:clip}
@media(max-width:991px){.hero-cap.s{inset-inline-end:88px}}
.ticket>*{min-width:0}
.fld input,.fld select{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:575px){
  .ticket .row2{grid-template-columns:1fr}
  .ticket .l h3{font-size:1.9rem}
}

.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--gold-l);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;padding:0;flex:none}
.theme-btn:hover{background:var(--gold);color:var(--bur-dd)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-sun{display:inline}.theme-btn .i-moon{display:none}
html[data-theme=light] .theme-btn .i-sun{display:none}
html[data-theme=light] .theme-btn .i-moon{display:inline}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s}

html[data-theme=light]{--stone:#ece4d2;--stone-2:#e3d8c0;--stone-3:#f6f1e4}
html[data-theme=light] body{background:var(--stone);color:var(--ink)}
html[data-theme=light] ::selection{background:var(--bur);color:var(--gold-l)}
html[data-theme=light] .grain{opacity:.05;mix-blend-mode:multiply}
html[data-theme=light] .foil{background-image:linear-gradient(100deg,#7a0f1e 0%,#b8924d 30%,#7a0f1e 55%,#c9a24b 80%,#7a0f1e 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
html[data-theme=light] .progress i{background:linear-gradient(90deg,var(--bur),var(--gold-d));box-shadow:0 0 10px rgba(184,146,77,.6)}

html[data-theme=light] #loader{background:radial-gradient(circle at 50% 45%,var(--stone-3) 0%,var(--stone-2) 80%)}
html[data-theme=light] .loader-seal circle{stroke:var(--bur)}
html[data-theme=light] .loader-text{color:var(--bur)}
html[data-theme=light] .paw-cursor{color:var(--gold-d);filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}

html[data-theme=light] .nav.scrolled{background:rgba(236,228,210,.88);border-bottom:1px solid rgba(122,15,30,.15)}
html[data-theme=light] .nav .brand img{box-shadow:0 0 0 1px var(--bur)}
html[data-theme=light] .nav .brand b{color:var(--bur)}
html[data-theme=light] .nav .brand small{color:var(--gold-d)}
html[data-theme=light] .nav-links a{color:var(--bur-d)}
html[data-theme=light] .nav-links a::after{background:var(--bur)}
html[data-theme=light] .lang-btn,html[data-theme=light] .theme-btn{border-color:var(--bur);color:var(--bur)}
html[data-theme=light] .lang-btn:hover,html[data-theme=light] .theme-btn:hover{background:var(--bur);color:var(--gold-l)}
html[data-theme=light] .burger{color:var(--bur)}
@media(max-width:991px){html[data-theme=light] .nav-links{background:rgba(246,241,228,.98);border-bottom:1px solid rgba(122,15,30,.2)}}

html[data-theme=light] .btn-gold{border-color:var(--gold-d);box-shadow:0 8px 24px rgba(122,15,30,.16)}
html[data-theme=light] .btn-gold:hover{box-shadow:0 12px 32px rgba(122,15,30,.28)}
html[data-theme=light] .btn-ghost{color:var(--bur);border-color:var(--bur)}
html[data-theme=light] .btn-ghost:hover{background:var(--bur);color:var(--gold-l)}

html[data-theme=light] .hero-track{background:radial-gradient(ellipse at 50% 30%,var(--stone-3) 0%,var(--stone) 72%)}
html[data-theme=light] .hero-stage::before{background:radial-gradient(circle 420px at var(--mx) var(--my),rgba(212,180,131,.5),transparent 70%)}
html[data-theme=light] .hero-giant{-webkit-text-stroke:3px rgba(122,15,30,.4);color:rgba(122,15,30,.04);font-weight:800}
html[data-theme=light] .hero-cap{color:var(--ink)}
html[data-theme=light] .hero-cap .kick{color:var(--gold-d)}
html[data-theme=light] .hero-cap h1{color:var(--bur)}
html[data-theme=light] .scroll-hint{color:var(--bur)}
html[data-theme=light] .scroll-hint i{background:linear-gradient(var(--bur),transparent)}
html[data-theme=light] .open-btn{border-color:var(--bur);color:var(--bur)}
html[data-theme=light] .open-btn:hover{background:rgba(122,15,30,.08)}
html[data-theme=light] .pp-shadow{background:radial-gradient(ellipse,rgba(74,10,20,.45),transparent 70%)}
html[data-theme=light] .pp-front{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 8px 0 14px -6px rgba(0,0,0,.55),12px 20px 40px rgba(74,10,20,.35)}

html[data-theme=light] .ribbon{background:linear-gradient(90deg,var(--bur-d),var(--bur),var(--bur-d));color:var(--gold-l);box-shadow:0 10px 36px rgba(74,10,20,.25)}

html[data-theme=light] .about,html[data-theme=light] .journey,html[data-theme=light] .light-sec{background:var(--stone-3)}

html[data-theme=light] .why.dark-sec{background:radial-gradient(ellipse at 20% 0%,var(--stone-3) 0%,var(--stone-2) 70%);color:var(--ink)}
html[data-theme=light] .why .eyebrow{color:var(--gold-d)}
html[data-theme=light] .why .sec-title{color:var(--bur)}
html[data-theme=light] .services .foil{background-image:linear-gradient(100deg,#b8924d 0%,#f6e6bd 28%,#c9a24b 50%,#f6e6bd 72%,#b8924d 100%)}
html[data-theme=light] .j-node{background:var(--stone-3)}

html[data-theme=light] .id-card{background:linear-gradient(150deg,var(--bur),var(--bur-d));color:var(--cream);box-shadow:0 24px 50px -22px rgba(74,10,20,.6)}
html[data-theme=light] .id-card::before{background:repeating-linear-gradient(45deg,rgba(212,180,131,.07) 0 1px,transparent 1px 8px)}
html[data-theme=light] .id-card h3{color:var(--gold-l)}
html[data-theme=light] .id-card .idn{color:var(--gold)}
html[data-theme=light] .id-card .holo{mix-blend-mode:overlay;opacity:.5}

html[data-theme=light] .values{border-top-color:rgba(122,15,30,.25)}
html[data-theme=light] .val{border-bottom-color:rgba(122,15,30,.2)}
html[data-theme=light] .val .vn{color:var(--gold-d)}
html[data-theme=light] .val h3{color:var(--bur)}
html[data-theme=light] .val p{color:var(--ink)}
html[data-theme=light] .val:hover h3,html[data-theme=light] .val:hover p,html[data-theme=light] .val:hover .vn{color:var(--bur-dd)}

html[data-theme=light] .showcase{background:var(--stone)}
html[data-theme=light] .wall::after{background:linear-gradient(180deg,rgba(42,5,13,.8),rgba(42,5,13,.15) 38%,rgba(42,5,13,.15) 60%,var(--stone) 100%)}
html[data-theme=light] .mock{box-shadow:0 40px 90px -30px rgba(74,10,20,.5),0 0 0 1px rgba(122,15,30,.25)}
html[data-theme=light] .sw{color:var(--bur-d);border-color:rgba(122,15,30,.3);background:rgba(255,255,255,.55)}
html[data-theme=light] .pola{box-shadow:0 26px 50px -18px rgba(74,10,20,.35)}

html[data-theme=light] .visit{background:radial-gradient(ellipse at 80% 100%,var(--stone-3),var(--stone-2) 65%);color:var(--ink)}
html[data-theme=light] .visit .sec-title{color:var(--bur)!important}
html[data-theme=light] .ticket::before,html[data-theme=light] .ticket::after{background:var(--stone-2)}
html[data-theme=light] .ticket{box-shadow:0 40px 90px -34px rgba(74,10,20,.55)}

html[data-theme=light] .foot{background:var(--bur-d)}

/* passport: image cover, no text */
.pp-front{padding:0;background:#4a0a14}
.pp-front::before,.pp-front::after{display:none}
.pp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.pp-fields div{height:14px;border-bottom:1.5px solid rgba(122,15,30,.35);margin-bottom:16px}
.pp-lines{position:relative;z-index:1;margin-top:26px}
.pp-lines i{display:block;height:1px;background:rgba(122,15,30,.3);margin-bottom:22px}
.pp-stamp svg{width:46px;height:46px;opacity:.8}
.pp-inside .ins svg{margin:0}

/* hero v2: simple, dropping letters */
.hero2{position:relative;min-height:100vh;padding:92px 0 56px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#5c0c19 0%,var(--bur-dd) 72%);color:var(--cream)}
.hero2-in{width:100%;padding-inline:max(16px,3vw)}
.hero2-word{display:flex;justify-content:space-between;margin:0;font-family:var(--f-en-display)!important;font-size:clamp(2.7rem,14.4vw,17rem);font-weight:800;line-height:.9;letter-spacing:0;color:var(--gold-l);direction:ltr;user-select:none}
.hero2-word .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero2-word i{display:block;font-style:normal;transform:translateY(-115%);opacity:0}
body.ready .hero2-word i{animation:letterDrop .9s cubic-bezier(.22,1.25,.4,1) forwards;animation-delay:calc(.15s + var(--i) * .09s)}
@keyframes letterDrop{0%{transform:translateY(-115%);opacity:0}25%{opacity:1}100%{transform:translateY(0);opacity:1}}
.hero2-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:center;margin-top:clamp(24px,4vw,56px)}
.hero2-copy{max-width:640px}
.hero2-copy .kick{display:block;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
html[lang=ar] .hero2-copy .kick{letter-spacing:.04em;font-size:.95rem}
.hero2-copy h1{font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.08;margin:0 0 16px;color:var(--cream)}
.hero2-copy p{font-size:1.02rem;line-height:1.7;opacity:.85;margin:0 0 16px;max-width:560px}
.h-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.85rem;opacity:.85;margin-bottom:22px}
.h-meta span{display:inline-flex;align-items:center;gap:8px}
.h-meta svg,.hero2-copy .btns svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero2-copy .btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hero2-copy .btns a{display:inline-flex;align-items:center;gap:10px}
.h-link{display:inline-block;color:inherit;text-decoration:underline;text-underline-offset:4px;font-size:.92rem;margin-bottom:20px}
.h-link b{display:inline-block;transition:transform .3s}
.h-link:hover b{transform:translateX(5px)}
html[dir=rtl] .h-link b{transform:scaleX(-1)}
html[dir=rtl] .h-link:hover b{transform:scaleX(-1) translateX(5px)}
.h-rev{display:flex;align-items:center;gap:10px;font-size:.92rem;flex-wrap:wrap}
.h-rev .stars{color:var(--gold);letter-spacing:.12em}
.h-rev a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.h-rev a:hover{color:var(--gold)}
@media(max-width:991px){
  .hero2{align-items:flex-start;padding-top:84px}
  .hero2-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:575px){.hero2-copy .btns a{flex:1 1 100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.hero2-word i{transform:none;opacity:1;animation:none!important}}

html[data-theme=light] .hero2{background:radial-gradient(ellipse at 50% 20%,var(--stone-3) 0%,var(--stone) 74%);color:var(--ink)}
html[data-theme=light] .hero2-word{color:var(--bur)}
html[data-theme=light] .hero2-copy .kick{color:var(--gold-d)}
html[data-theme=light] .hero2-copy h1{color:var(--bur)}
html[data-theme=light] .h-rev .stars{color:var(--gold-d)}
html[data-theme=light] .h-rev a:hover{color:var(--bur)}

/* hero art: pet photo on a soft circle, sitting on the bottom edge */
.hero2-grid{grid-template-columns:minmax(0,1fr)}
.hero2-art{position:absolute;right:3vw;bottom:0;height:min(64vh,36vw);aspect-ratio:1200/1006;z-index:1;pointer-events:none}
.art-glow{display:none}
.hero2-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;animation:artIn 1s .9s both cubic-bezier(.2,.8,.2,1)}
@keyframes artIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.hero2-copy,.hero2-word{position:relative;z-index:2}
@media(max-width:991px){
  .hero2{padding-bottom:0}
  .hero2-art{position:relative;right:auto;bottom:auto;height:auto;width:min(340px,80vw);margin:26px auto 0}
}
@media(prefers-reduced-motion:reduce){.hero2-art img{animation:none}}

/* fonts */
:root{--f-en-display:'Inter','Segoe UI',system-ui,sans-serif;--f-en-body:'Roboto','Segoe UI',system-ui,sans-serif}
h1,h2,h3,h4,.display{font-weight:700;letter-spacing:-.02em}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,html[lang=ar] .display{letter-spacing:0}
.hero2-word{font-size:clamp(2.4rem,12.6vw,15rem);font-weight:800;letter-spacing:-.03em}
.nav .brand b{font-weight:700}
.pp-welcome,.pola figcaption,.pp-inside .ins{font-style:normal}

