﻿
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}}

/* services: scroll-driven passport */
.services{overflow:clip}
.pp-track{height:240vh;position:relative;margin-top:0}
.pp-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.pp-stage::before{content:"";position:absolute;width:min(620px,90vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(212,180,131,.22),transparent 68%);pointer-events:none}
.pp-track .passport-wrap{position:relative}
.pp-track .pp-stamp svg{width:46px;height:46px}

.pp-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;width:100%;padding-top:40px}
.pp-copy .sec-title{max-width:14ch}
.pp-col{display:flex;align-items:center;justify-content:center;min-width:0;height:100%}
.pp-stage::before{inset-inline-end:-6%;inset-inline-start:auto}
@media(max-width:991px){
  .pp-in{grid-template-columns:1fr;gap:14px;padding-top:64px;align-content:start}
  .pp-copy .lead-p{display:none}
  .pp-copy .sec-title{max-width:none;font-size:1.9rem}
}

/* 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}


/* ===========================================================
   BLUE THEME: pale sky grounds built on the logo's shield blue
   =========================================================== */
html[data-theme=light]{--stone:#e1eefa;--stone-2:#cfe4f6;--stone-3:#f3f9fe;--navy:#14365a;--navy-2:#285a8c;--blue:#a6d4f8;--blue-d:#3d7fbd;--ink:#1b3552}
html[data-theme=light] ::selection{background:var(--navy);color:#fff}
html[data-theme=light] .progress i{background:linear-gradient(90deg,var(--blue-d),var(--blue));box-shadow:0 0 10px rgba(61,127,189,.5)}
html[data-theme=light] .loader-seal circle{stroke:var(--blue-d)}
html[data-theme=light] .loader-text{color:var(--navy)}
html[data-theme=light] .paw-cursor{color:var(--blue-d)}

html[data-theme=light] .nav.scrolled{background:rgba(225,238,250,.9);border-bottom:1px solid rgba(20,54,90,.12)}
html[data-theme=light] .nav .brand img{box-shadow:0 0 0 1px var(--blue-d)}
html[data-theme=light] .nav .brand b{color:var(--navy)}
html[data-theme=light] .nav .brand small{color:var(--blue-d)}
html[data-theme=light] .nav-links a{color:var(--navy)}
html[data-theme=light] .nav-links a::after{background:var(--blue-d)}
html[data-theme=light] .lang-btn,html[data-theme=light] .theme-btn{border-color:var(--navy);color:var(--navy)}
html[data-theme=light] .lang-btn:hover,html[data-theme=light] .theme-btn:hover{background:var(--navy);color:#fff}
html[data-theme=light] .burger{color:var(--navy)}
@media(max-width:991px){html[data-theme=light] .nav-links{background:rgba(243,249,254,.98);border-bottom:1px solid rgba(20,54,90,.15)}}

html[data-theme=light] .btn-gold{background:linear-gradient(120deg,var(--bur-d),var(--bur) 50%,var(--bur-d));background-size:200% 100%;color:var(--gold-l);border-color:var(--bur);box-shadow:0 8px 24px rgba(122,15,30,.22)}
html[data-theme=light] .btn-gold:hover{color:#fff;box-shadow:0 12px 32px rgba(122,15,30,.34)}
html[data-theme=light] .btn-ghost{color:var(--navy);border-color:var(--navy)}
html[data-theme=light] .btn-ghost:hover{background:var(--navy);color:#fff}

html[data-theme=light] .hero2{background:radial-gradient(ellipse at 50% 15%,#fff 0%,var(--stone-3) 30%,var(--stone) 78%);color:var(--ink)}
html[data-theme=light] .hero2-word{color:var(--navy)}
html[data-theme=light] .hero2-copy .kick{color:var(--blue-d)}
html[data-theme=light] .hero2-copy h1{color:var(--navy)}
html[data-theme=light] .h-rev a:hover{color:var(--blue-d)}

html[data-theme=light] .about,html[data-theme=light] .journey,html[data-theme=light] .light-sec{background:var(--stone-3)}
html[data-theme=light] .about::before{background-image:radial-gradient(rgba(20,54,90,.08) 1px,transparent 1px)}
html[data-theme=light] .light-sec .eyebrow,html[data-theme=light] .about .eyebrow,html[data-theme=light] .journey .eyebrow,html[data-theme=light] .why .eyebrow{color:var(--blue-d)}
html[data-theme=light] .light-sec .sec-title,html[data-theme=light] .about .sec-title,html[data-theme=light] .journey .sec-title,html[data-theme=light] .why .sec-title{color:var(--navy)}
html[data-theme=light] .vs .ring{color:var(--navy-2)}
html[data-theme=light] .vs .ring svg text{fill:var(--navy-2)}
html[data-theme=light] .vs .ring .core{border-color:var(--navy-2)}
html[data-theme=light] .vs:hover .core{background:var(--navy);color:var(--blue)}
html[data-theme=light] .vs h4{color:var(--navy)}
html[data-theme=light] .stat{border-inline-end-color:rgba(20,54,90,.15)}
html[data-theme=light] .stat b{color:var(--navy)}
html[data-theme=light] .j-line{stroke:var(--navy-2)}
html[data-theme=light] .j-paw{fill:var(--navy-2)}
html[data-theme=light] .j-num{color:var(--blue-d)}
html[data-theme=light] .j-step h3{color:var(--navy)}
html[data-theme=light] .j-node{border-color:rgba(40,90,140,.4);color:var(--navy-2)}
html[data-theme=light] .values{border-top-color:rgba(20,54,90,.22)}
html[data-theme=light] .val{border-bottom-color:rgba(20,54,90,.18)}
html[data-theme=light] .val .vn{color:var(--blue-d)}
html[data-theme=light] .val h3{color:var(--navy)}
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] .pull{border-inline-start-color:var(--blue-d);color:var(--navy)}
html[data-theme=light] .pola figcaption{color:var(--navy)}
html[data-theme=light] .pola{box-shadow:0 26px 50px -18px rgba(20,54,90,.4)}
html[data-theme=light] .pola::before{background:rgba(166,212,248,.75)}

html[data-theme=light] .visit{background:radial-gradient(ellipse at 80% 100%,var(--stone-3),var(--stone-2) 65%)}
html[data-theme=light] .visit .sec-title{color:var(--navy)!important}
html[data-theme=light] .visit .eyebrow{color:var(--blue-d)}
html[data-theme=light] .ticket{box-shadow:0 40px 90px -34px rgba(20,54,90,.5)}
html[data-theme=light] .ticket .l{background:linear-gradient(150deg,#fff,#e8f3fc);color:var(--navy)}
html[data-theme=light] .ticket .l h3{color:var(--navy)}
html[data-theme=light] .fld label{color:var(--navy-2)}
html[data-theme=light] .fld input,html[data-theme=light] .fld select{border-bottom-color:rgba(20,54,90,.4);color:var(--navy)}
html[data-theme=light] .fld input:focus,html[data-theme=light] .fld select:focus{border-color:var(--blue-d)}
html[data-theme=light] .wa-hint{border-color:rgba(20,54,90,.35);background:rgba(61,127,189,.07);color:var(--navy)}
html[data-theme=light] .wa-hint svg,html[data-theme=light] .wa-hint b{color:var(--navy-2)}

/* why: five cards, 3 + 2 */
.why-grid{grid-template-columns:repeat(6,1fr)}
.why-grid .id-card{grid-column:span 2}
.why-grid .id-card:nth-child(n+4){grid-column:span 3}
@media(max-width:991px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid .id-card,.why-grid .id-card:nth-child(n+4){grid-column:auto}
  .why-grid .id-card:last-child{grid-column:1/-1}
}
@media(max-width:575px){.why-grid{grid-template-columns:1fr}.why-grid .id-card:last-child{grid-column:auto}}

/* ===========================================================
   GALLERY + 3D LIGHTBOX
   =========================================================== */
.gallery{background:var(--stone-3);overflow:hidden}
.gallery .eyebrow{color:var(--blue-d)}
.gallery .sec-title{color:var(--navy)}
.gal-head{margin-bottom:56px}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:350px auto;gap:24px;perspective:1600px}
.gal-item{margin:0;min-height:0}
.gal-item{grid-column:span 2}
.gal-item:nth-child(4),.gal-item:nth-child(5){grid-column:span 3}
.gal-btn{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:16px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:0 18px 40px -22px rgba(20,54,90,.55);transition:transform .6s var(--ease),box-shadow .6s var(--ease);transform-style:preserve-3d;transform-origin:50% 100%}
.gal-btn img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal-btn:hover,.gal-btn:focus-visible{transform:translateY(-8px) rotateX(5deg) rotateY(-4deg);box-shadow:0 34px 60px -24px rgba(20,54,90,.65)}
.gal-btn:hover img{transform:scale(1.06)}
.gal-btn:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px}
.gal-btn.is-open{visibility:hidden}
.gal-cap{position:absolute;inset-inline:0;bottom:0;padding:48px 20px 16px;text-align:start;color:#fff;font-weight:500;font-size:.95rem;letter-spacing:.02em;background:linear-gradient(transparent,rgba(12,36,62,.82));transform:translateY(55%);opacity:0;transition:.5s var(--ease)}
.gal-btn:hover .gal-cap,.gal-btn:focus-visible .gal-cap{transform:none;opacity:1}
.gal-zoom{position:absolute;top:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;transform:scale(.6);opacity:0;transition:.4s var(--ease)}
.gal-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gal-btn:hover .gal-zoom,.gal-btn:focus-visible .gal-zoom{transform:none;opacity:1}
@media(hover:none){.gal-cap{transform:none;opacity:1}}
.gal-item:nth-child(2) img{object-position:34% 50%}
.gal-item:nth-child(n+4) .gal-btn{height:auto}
.gal-item:nth-child(n+4) img{height:auto;object-fit:initial}
@media(max-width:991px){
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:auto;gap:18px}
  .gal-item:nth-child(n){grid-column:auto;grid-row:auto}
  .gal-item:nth-child(4){grid-column:1/-1}
  .gal-btn{height:auto}.gal-btn img{height:auto;object-fit:initial}
}
@media(max-width:575px){.gal-grid{grid-template-columns:1fr}.gal-item:nth-child(4){grid-column:auto}}

.lb{position:fixed;inset:0;z-index:9000;display:none;perspective:1900px}
.lb.on{display:block}
.lb-bg{position:absolute;inset:0;background:rgba(9,28,50,.86);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .6s}
.lb.show .lb-bg{opacity:1}
.lb-stage{perspective:2200px;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 70px 40px;pointer-events:none}
.lb-cap{margin-top:22px;color:#fff;font-size:1.05rem;letter-spacing:.04em;text-align:center;min-height:1.6em;opacity:0;transform:translateY(14px);transition:.6s .35s var(--ease)}
.lb.show .lb-cap,.lb.show .lb-count{opacity:1;transform:none}
.lb-count{margin-top:6px;color:rgba(255,255,255,.6);font-size:.8rem;letter-spacing:.3em;opacity:0;transition:.6s .45s}
.lb-btn{position:absolute;z-index:3;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transition:background .3s,opacity .5s .3s,transform .3s}
.lb.show .lb-btn{opacity:1}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-x{top:20px;inset-inline-end:20px}
.lb-prev,.lb-next{top:50%;margin-top:-25px}
.lb-prev{left:18px}.lb-next{right:18px}
@media(max-width:767px){
  .lb-stage{padding:70px 14px 30px}
  .lb-prev,.lb-next{top:auto;bottom:22px;margin:0}
  .lb-prev{left:calc(50% - 64px)}.lb-next{right:calc(50% - 64px)}
  .lb-count{margin-bottom:56px}
}
@media(prefers-reduced-motion:reduce){.gal-btn,.gal-btn img,.gal-cap,.gal-zoom{transition:none}}

/* 3D photo card: a real slab with thickness, front, back and edges */
.lb-card{margin:0;position:relative;transform-style:preserve-3d;will-change:transform;pointer-events:auto;visibility:hidden}
.lb-tilt{position:relative;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lb-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px}
.lb-front{position:relative;background:#fff;padding:10px;transform:translateZ(8px);box-shadow:0 60px 110px -34px rgba(0,0,0,.7);overflow:hidden}
.lb-front img{display:block;max-width:min(86vw,1150px);max-height:66vh;width:auto;height:auto;border-radius:5px}
.lb-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.3),transparent 55%);opacity:0;transition:opacity .3s}
.lb-tilt:hover .lb-glare{opacity:1}
.lb-back{position:absolute;inset:0;transform:rotateY(180deg) translateZ(8px);background:linear-gradient(145deg,#1f5282,#0d2a47);display:flex;align-items:center;justify-content:center;color:var(--gold);box-shadow:inset 0 0 0 10px #12365a,inset 0 0 0 11px rgba(212,180,131,.55)}
.lb-back svg{width:84px;height:84px;opacity:.9}
.lb-edge{position:absolute;background:linear-gradient(90deg,#f4f8fc,#aebfd2 55%,#8ea3ba);pointer-events:none}
.lb-edge.e-r,.lb-edge.e-l{top:12px;bottom:12px;width:16px;transform:rotateY(90deg)}
.lb-edge.e-r{right:-8px}.lb-edge.e-l{left:-8px}
.lb-edge.e-t,.lb-edge.e-b{left:12px;right:12px;height:16px;transform:rotateX(90deg);background:linear-gradient(180deg,#f4f8fc,#aebfd2 55%,#8ea3ba)}
.lb-edge.e-t{top:-8px}.lb-edge.e-b{bottom:-8px}

/* hero: two pets that swap */
.hero2-art{right:0}
.hero2-art .pet{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;opacity:0;transform:translateY(46px) scale(.95);filter:blur(7px);transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter 1s var(--ease);pointer-events:none;will-change:transform,opacity}
.hero2-art .pet.on{opacity:1;transform:none;filter:none}
.hero2-art .pet.first{animation:artIn 1s .9s both}
.hero2-art .pet img{position:static;display:block;width:auto;height:100%;max-width:100%;object-fit:contain;animation:none;transform:none}
.hero2-art .pet-a{padding-right:3vw}
.hero2-art .pet-c{padding-right:5vw}
.hero2-art .pet-c img{height:112%}
@media(max-width:991px){.hero2-art .pet-c{padding-right:0}.hero2-art .pet-c img{height:100%}}
.hero-arrow{position:absolute;top:46%;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(20,54,90,.25);background:rgba(255,255,255,.78);color:var(--navy);display:grid;place-items:center;cursor:pointer;pointer-events:auto;z-index:3;backdrop-filter:blur(6px);box-shadow:0 8px 22px rgba(20,54,90,.16);transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.hero-arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:scale(1.08)}
.hero-arrow:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px}
.ha-l{left:-8px}.ha-r{right:-8px}
.hero-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:10px;z-index:3;pointer-events:auto}
.hero-dots button{width:10px;height:10px;padding:0;border-radius:99px;border:0;background:rgba(20,54,90,.28);cursor:pointer;transition:width .35s var(--ease),background .25s}
.hero-dots button.on{width:30px;background:var(--navy)}
.hero-dots button:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px}
html[data-theme=dark] .hero-arrow{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
html[data-theme=dark] .hero-arrow:hover{background:#fff;color:var(--navy)}
html[data-theme=dark] .hero-dots button{background:rgba(255,255,255,.35)}
html[data-theme=dark] .hero-dots button.on{background:#fff}
@media(max-width:991px){.hero2-art .pet{justify-content:center}.hero2-art .pet-a{padding-right:0}}
@media(prefers-reduced-motion:reduce){.hero2-art .pet{transition:opacity .3s;transform:none;filter:none}}
