/* ============================================================
   AMORA HOLIDAY HOMES — Dubai
   Palette: Black #0D0D0D · Charcoal #1A1A1A · Gold #D4AF37
            Warm White #FBFAF7 · Light Grey #E6E6E6
   Type:    Playfair Display (headings) · Poppins (body)
   ============================================================ */

:root{
  --black:#0D0D0D; --charcoal:#1A1A1A; --charcoal-2:#242424;
  --gold:#D4AF37; --gold-lt:#E3C766; --gold-dp:#A8862A;
  --white:#FBFAF7; --white-2:#F4F1EA; --grey:#E6E6E6;
  --text:#1A1A1A; --text-12:#5F5F5F; --text-3:#8A8A8A; --text-2: #141414;
  --line:#E6E2D8; --line-dk:rgba(255,255,255,.14);
  --disp:'Playfair Display',Georgia,serif;
  --body:'Poppins',system-ui,-apple-system,sans-serif;
  --max:1300px;
  --shadow:0 20px 50px rgba(13,13,13,.10);
  --shadow-lg:0 30px 70px rgba(13,13,13,.16);
  /* rounded, Airbnb-style corners */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:100px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:var(--body);font-weight:300;color:var(--text);background:var(--white);
  line-height:1.75;font-size:15.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:var(--body);cursor:pointer}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 36px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.18;letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;z-index:999;background:var(--gold);color:var(--black);
  padding:14px 22px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:16px;top:16px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ---------- type helpers ---------- */
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600}
.eyebrow.lt{color:var(--gold)}
.rule{width:56px;height:1px;background:var(--gold);margin-top:18px}
h2.big{font-size:clamp(30px,3.6vw,46px);margin-top:16px}
.sub{color:var(--text-2);max-width:540px;margin-top:18px;font-size:15px}
.sub a{border-bottom:1px solid var(--gold)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;flex-wrap:wrap;margin-bottom:52px}
section.blk{padding:110px 0}
@media(max-width:700px){section.blk{padding:74px 0}.wrap{padding:0 22px}}
.fine{font-size:12.5px;color:var(--text-3);margin-top:16px}
.prose p{margin-bottom:16px;color:var(--text-2)}
.prose p b{color:var(--text);font-weight:500}
.prose a{border-bottom:1px solid var(--gold)}
.dark-blk{background:var(--black);color:#fff}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- buttons ---------- */
.btn-gold{display:inline-block;background:var(--gold);color:var(--black);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;padding:16px 32px;border:1px solid var(--gold);
  border-radius:var(--r-pill);transition:background .3s,border-color .3s,transform .25s}
.btn-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt);transform:translateY(-2px)}
.btn-out{display:inline-block;background:none;color:#fff;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding:16px 32px;border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
  transition:background .3s,color .3s,border-color .3s}
.btn-out:hover{background:#fff;color:var(--black);border-color:#fff}
.btn-dark{display:inline-block;background:var(--black);color:#fff;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding:15px 28px;border:1px solid var(--black);border-radius:var(--r-pill);
  transition:background .3s,color .3s,border-color .3s;text-align:center}
.btn-dark:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.btn-ghost{display:inline-block;background:none;color:var(--text);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding:15px 28px;border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color .3s,background .3s}
.btn-ghost:hover{border-color:var(--gold);background:var(--white-2)}
.txt-link{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--text);
  display:inline-flex;align-items:center;gap:10px;transition:gap .3s,color .3s}
.txt-link::after{content:'→';color:var(--gold)}
.txt-link:hover{gap:16px;color:var(--gold-dp)}
.txt-link.lt{color:#fff}

/* ---------- logo ---------- */
.logo{display:flex;flex-direction:column;align-items:center;flex:none}
.logo .mark{width:38px;height:30px;margin-bottom:5px}
.logo .name{font-family:var(--body);font-weight:300;font-size:17px;letter-spacing:.42em;line-height:1;padding-left:.42em}
.logo .liv{display:flex;align-items:center;gap:7px;margin-top:5px}
.logo .liv i{width:14px;height:1px;background:var(--gold);display:block}
.logo .liv span{font-size:7px;letter-spacing:.36em;color:var(--gold);font-weight:400;padding-left:.36em;white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{background:var(--black);color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:20px}
.topbar a:hover{color:var(--gold)}
.topbar .r{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.langs{display:flex;gap:12px;align-items:center}
.langs a.on{color:var(--gold);border-bottom:1px solid var(--gold)}
.langs .soon{color:rgba(255,255,255,.28);cursor:not-allowed;position:relative}
.langs .soon::after{content:'soon';position:absolute;left:50%;transform:translateX(-50%);top:-16px;
  font-size:8px;letter-spacing:.1em;color:var(--gold-dp);opacity:0;transition:opacity .25s;white-space:nowrap}
.langs .soon:hover::after{opacity:1}
@media(max-width:900px){.topbar .l{display:none}}
@media(max-width:640px){.topbar .r a:nth-child(2){display:none}.topbar .wrap{justify-content:center}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:200;background:rgba(13,13,13,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-dk)}
.hd{display:flex;align-items:center;justify-content:space-between;height:92px;gap:20px}
header .logo{color:#fff}
nav.main{display:flex;gap:28px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:300}
nav.main a{position:relative;padding:7px 0;white-space:nowrap}
nav.main a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .35s cubic-bezier(.2,.7,.2,1)}
nav.main a:hover{color:#fff}
nav.main a:hover::after,nav.main a:focus-visible::after,nav.main a.active::after{width:100%}
nav.main a.active{color:#fff}
.hda{display:flex;align-items:center;gap:16px;flex:none}
.signin{color:rgba(255,255,255,.8);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:300}
.signin:hover{color:var(--gold)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.28);color:#fff;width:44px;height:44px;
  font-size:16px;border-radius:var(--r-sm)}
@media(max-width:1280px){nav.main{display:none}.burger{display:block}.signin{display:none}}
@media(max-width:560px){.hda .btn-gold{display:none}.hd{height:78px}}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:300;background:var(--black);transform:translateX(100%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:30px;overflow-y:auto}
.drawer.open{transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.drawer .logo{color:#fff;align-items:flex-start}
.drawer .x{background:none;border:1px solid rgba(255,255,255,.24);color:#fff;width:44px;height:44px;font-size:17px;border-radius:var(--r-sm)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-family:var(--disp);font-size:25px;color:#fff;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer nav a:hover{color:var(--gold)}
.drawer .acts{margin-top:30px;display:grid;gap:11px}
.drawer .acts .dbtn{border:1px solid rgba(255,255,255,.24);color:#fff;padding:15px;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;background:none;font-weight:300;text-align:center;border-radius:var(--r-pill)}
.drawer .acts .dbtn:hover{border-color:var(--gold);color:var(--gold)}
.drawer .langs{margin-top:26px;justify-content:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider{position:relative;overflow:hidden;background:var(--black);min-height:min(78vh,720px)}
@media(max-width:760px){.hero-slider{min-height:580px}}
.hero-slider .slides{position:relative;min-height:inherit}
.slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 1.1s;pointer-events:none}
.slide.on{opacity:1;visibility:visible;pointer-events:auto;position:relative}
.slide-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12)}
.slide.on .slide-img{transform:scale(1);transition:transform 8.5s cubic-bezier(.2,.5,.3,1)}
.slide-veil{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.68) 40%,rgba(13,13,13,.26) 70%,rgba(13,13,13,.55) 100%),
  linear-gradient(180deg,rgba(13,13,13,.5) 0%,transparent 30%,rgba(13,13,13,.78) 100%)}
.slide-in{position:relative;z-index:3;color:#fff;padding:132px 0 172px;max-width:700px}
@media(max-width:760px){.slide-in{padding:98px 0 148px}}
.slide h1{font-size:clamp(36px,5.4vw,70px);margin:22px 0 0;color:#fff;line-height:1.14}
.slide h1 .l{display:block;overflow:hidden}
.slide h1 .l i{display:block;font-style:normal;transform:translateY(108%)}
.slide.on h1 .l i{animation:rise 1.05s cubic-bezier(.16,.9,.2,1) .18s forwards}
.slide.on h1 .l:nth-child(2) i{animation-delay:.3s}
@keyframes rise{to{transform:none}}
.slide h1 em{font-style:italic;color:var(--gold-lt)}
.slide .eyebrow,.slide .lede,.slide .hero-cta{opacity:0;transform:translateY(18px)}
.slide.on .eyebrow{animation:fadeUp .8s ease .1s forwards}
.slide.on .lede{animation:fadeUp .8s ease .5s forwards}
.slide.on .hero-cta{animation:fadeUp .8s ease .66s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.slide .lede{margin-top:22px;max-width:460px;color:rgba(255,255,255,.82);font-size:16px}
.slide .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-slider .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:54px;height:54px;
  border:1px solid rgba(255,255,255,.3);background:rgba(13,13,13,.28);backdrop-filter:blur(8px);color:#fff;
  font-size:17px;border-radius:50%;transition:background .3s,border-color .3s,color .3s}
.hero-slider .nav:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.hero-slider .prev{left:26px}.hero-slider .next{right:26px}
@media(max-width:1000px){.hero-slider .nav{display:none}}
.slider-foot{position:absolute;left:0;right:0;bottom:36px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:24px}
.dots{display:flex;gap:14px}
.dot{background:none;border:none;padding:10px 0;display:flex;align-items:center}
.dot .bar{display:block;width:54px;height:2px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;border-radius:2px}
.dot .fill{position:absolute;inset:0;width:0;background:var(--gold);border-radius:2px}
.dot.on .fill{animation:dotFill var(--slide-dur,7s) linear forwards}
.hero-slider.paused .dot.on .fill{animation-play-state:paused}
@keyframes dotFill{to{width:100%}}
.dot:hover .bar{background:rgba(255,255,255,.5)}
.counter{color:#fff;font-family:var(--disp);font-size:14px;letter-spacing:.1em}
.counter b{font-weight:500;font-size:20px}.counter span{color:rgba(255,255,255,.5)}
@media(max-width:640px){.slider-foot{bottom:24px;justify-content:center}.counter{display:none}.dot .bar{width:36px}}
@media(prefers-reduced-motion:reduce){
  .slide.on .slide-img{transform:none}
  .slide h1 .l i,.slide .eyebrow,.slide .lede,.slide .hero-cta{opacity:1;transform:none;animation:none}
  .dot.on .fill{width:100%;animation:none}}

/* ---------- banner (inner pages) ---------- */
.banner{position:relative;min-height:400px;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.banner-img{position:absolute;inset:0;background-size:cover;background-position:center}
.banner-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.78) 0%,rgba(13,13,13,.34) 45%,rgba(13,13,13,.93) 100%)}
.banner-in{position:relative;z-index:3;color:#fff;padding:90px 0 56px}
.banner h1{font-size:clamp(32px,4.6vw,58px);color:#fff;margin-top:18px}
.banner h1 em{font-style:italic;color:var(--gold-lt)}
.banner p{margin-top:16px;max-width:540px;color:rgba(255,255,255,.78);font-size:15.5px}
.crumbs{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:22px}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--gold)}
.crumbs.dark{color:var(--text-3)}
.crumbs.dark a:hover,.crumbs.dark span{color:var(--gold-dp)}

/* ---------- trust bar ---------- */
.trustbar{position:relative;z-index:4;background:rgba(13,13,13,.9);border-top:1px solid var(--line-dk);margin-top:-1px}
.trustbar .g{display:grid;grid-template-columns:repeat(4,1fr)}
.trustbar .i{display:flex;align-items:center;gap:16px;padding:26px 24px;border-left:1px solid var(--line-dk);color:#fff}
.trustbar .i:first-child{border-left:none;padding-left:0}
.trustbar svg{width:28px;height:28px;color:var(--gold);flex:none}
.trustbar b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.trustbar span{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.5}
@media(max-width:980px){.trustbar .g{grid-template-columns:1fr 1fr}.trustbar .i:nth-child(3){border-left:none;padding-left:0}
  .trustbar .i:nth-child(3),.trustbar .i:nth-child(4){border-top:1px solid var(--line-dk)}}
@media(max-width:560px){.trustbar .g{grid-template-columns:1fr}.trustbar .i{border-left:none;padding-left:0;border-top:1px solid var(--line-dk)}
  .trustbar .i:first-child{border-top:none}}

/* ---------- search ---------- */
.searchband{background:var(--white-2);border-bottom:1px solid var(--line)}
.searchband .wrap{padding-top:44px;padding-bottom:44px}
.search{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  display:grid;grid-template-columns:1.3fr 1fr 1fr .95fr auto;box-shadow:var(--shadow);overflow:hidden}
.search .f{padding:18px 28px;border-right:1px solid var(--line);text-align:left}
.search label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dp);font-weight:500;display:block;margin-bottom:4px}
.search select,.search input{border:none;background:none;font-family:var(--body);font-size:14.5px;color:var(--text);width:100%;font-weight:300}
.search select:focus,.search input:focus{outline:none}
.search .go{background:var(--gold);color:var(--black);border:none;padding:0 46px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;transition:background .3s,color .3s}
.search .go:hover{background:var(--black);color:#fff}
@media(max-width:900px){.search{grid-template-columns:1fr 1fr;border-radius:var(--r-lg)}
  .search .f{border-bottom:1px solid var(--line)}.search .go{grid-column:1/-1;padding:20px}}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.chip{font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);background:#fff;
  color:var(--text-2);padding:9px 18px;font-weight:300;border-radius:var(--r-pill);
  transition:border-color .3s,color .3s,background .3s;display:inline-block}
.chip:hover,.chip.on{border-color:var(--gold);color:var(--black);background:var(--white-2)}
.chip b{color:var(--gold-dp);font-weight:500;margin-left:7px}

/* ---------- property cards (Airbnb-style rounded) ---------- */
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:1000px){.props{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.props{grid-template-columns:1fr}}
.prop{position:relative;background:transparent;transition:transform .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.prop:hover{transform:translateY(-6px)}
.prop-art{position:relative;aspect-ratio:20/19;overflow:hidden;background:var(--charcoal);border-radius:var(--r-lg)}
.prop-art .fill{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.prop:hover .prop-art .fill{transform:scale(1.06)}
.tag{position:absolute;top:14px;left:14px;z-index:2;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--black);background:#fff;padding:7px 14px;font-weight:500;border-radius:var(--r-pill);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.save{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border:none;border-radius:50%;
  background:rgba(13,13,13,.3);backdrop-filter:blur(6px);color:#fff;font-size:16px;line-height:1;
  transition:color .3s,transform .25s,background .3s}
.save:hover{transform:scale(1.1);background:rgba(13,13,13,.5)}
.save.on{color:var(--gold)}
.prop-body{padding:18px 4px 0;display:flex;flex-direction:column;flex:1}
.prop .loc{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dp);font-weight:500}
.prop .loc a:hover{border-bottom:1px solid var(--gold)}
.prop h3{font-size:21px;margin:8px 0 10px}
.prop h3 a:hover{color:var(--gold-dp)}
.spec{display:flex;flex-wrap:wrap;margin-bottom:14px}
.spec div{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:0 11px;border-left:1px solid var(--line)}
.spec div:first-child{padding-left:0;border-left:none}
.prop .pf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.prop .price span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.prop .price b{font-family:var(--disp);font-size:23px;font-weight:500;display:block;line-height:1.2}
.prop .price i{font-style:normal;font-size:11.5px;color:var(--text-3)}
.prop .rate{font-size:12px;color:var(--text-2)}
.prop .rate::before{content:'★';color:var(--gold);margin-right:6px}

/* ---------- values ---------- */
.values{background:var(--white-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.values .g{display:grid;grid-template-columns:repeat(6,1fr)}
.values .v{padding:44px 18px;text-align:center;border-left:1px solid var(--line);transition:background .4s}
.values .v:first-child{border-left:none}
.values .v:hover{background:#fff}
.values svg{width:32px;height:32px;color:var(--gold-dp);margin:0 auto 16px}
.values b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
@media(max-width:1000px){.values .g{grid-template-columns:repeat(3,1fr)}.values .v:nth-child(4){border-left:none}
  .values .v:nth-child(n+4){border-top:1px solid var(--line)}}
@media(max-width:600px){.values .g{grid-template-columns:1fr 1fr}.values .v:nth-child(odd){border-left:none}
  .values .v:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- location rail ---------- */
.rail{display:flex;gap:22px;overflow-x:auto;padding:0 36px 16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.loc{position:relative;flex:0 0 290px;height:400px;scroll-snap-align:start;overflow:hidden;border-radius:var(--r-lg);
  display:flex;align-items:flex-end;padding:28px;transition:transform .45s;background:var(--charcoal)}
.loc:hover{transform:translateY(-6px)}
.loc .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.05s cubic-bezier(.2,.7,.2,1)}
.loc:hover .bg{transform:scale(1.08)}
.loc::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(13,13,13,.9));z-index:1}
.loc .in{position:relative;z-index:2;color:#fff}
.loc h3{font-size:24px;color:#fff}
.loc .c{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:7px}
.railbar{display:flex;align-items:center;gap:12px;margin-top:28px}
.arrow{width:46px;height:46px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:15px;
  border-radius:50%;transition:border-color .3s,background .3s}
.arrow:hover{border-color:var(--gold);background:var(--white-2)}
.railbar .hint{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}

/* ---------- Amora Circle ---------- */
.circle{background:var(--black);color:#fff;position:relative;overflow:hidden;padding:112px 0}
.circle::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 18% 8%,rgba(212,175,55,.14),transparent 62%)}
.circle .watermark{position:absolute;right:-4%;top:50%;transform:translateY(-50%);height:130%;opacity:.04;pointer-events:none}
.circle .wrap{position:relative}
.circle h2.big{color:#fff}
.circle h2 em{font-style:italic;color:var(--gold)}
.circle .sub{color:rgba(255,255,255,.6)}
.welcome{display:inline-flex;align-items:center;gap:16px;margin-top:26px;border:1px solid var(--gold);
  padding:14px 26px;background:rgba(212,175,55,.08);border-radius:var(--r-pill)}
.welcome b{font-family:var(--disp);font-size:22px;color:var(--gold-lt)}
.welcome span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:300}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
@media(max-width:1000px){.tiers{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid rgba(255,255,255,.13);padding:32px 28px;position:relative;border-radius:var(--r);
  transition:border-color .4s,transform .4s,background .4s}
.tier:hover{transform:translateY(-6px);border-color:var(--gold);background:rgba(255,255,255,.02)}
.tier .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.tier .nm{font-family:var(--disp);font-size:25px;color:#fff}
.tier .medal{width:32px;height:32px}
.tier .req{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.tier ul{list-style:none;display:grid;gap:11px}
.tier li{font-size:13.5px;color:rgba(255,255,255,.78);display:flex;gap:11px;line-height:1.6;font-weight:300}
.tier li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);margin-top:9px;flex:none}
.tier li b{color:#fff;font-weight:500}
.tier.hl{background:linear-gradient(180deg,rgba(212,175,55,.13),rgba(212,175,55,.02));border-color:var(--gold)}
.tier .flag{position:absolute;top:-11px;left:26px;background:var(--gold);color:var(--black);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:5px 14px;border-radius:var(--r-pill)}
.circle-foot{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:46px}
.circle-foot .note{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ---------- experiences ---------- */
.exp-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.exp-g{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.exp-g{grid-template-columns:1fr!important}}
.exp{position:relative;aspect-ratio:3/3.7;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;color:#fff;background:var(--charcoal);border-radius:var(--r-lg);transition:transform .45s}
.exp:hover{transform:translateY(-6px)}
.exp .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.05s cubic-bezier(.2,.7,.2,1)}
.exp:hover .bg{transform:scale(1.08)}
.exp::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(13,13,13,.9))}
.exp h3,.exp span{position:relative;z-index:2}
.exp h3{font-size:21px;color:#fff}
.exp span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:7px;display:block}

/* ---------- reviews ---------- */
.revs{background:var(--white-2);padding:100px 0;overflow:hidden;border-top:1px solid var(--line)}
.rmar{display:flex;gap:24px;width:max-content;animation:slide 66s linear infinite}
.revs:hover .rmar{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.rev{width:420px;background:#fff;padding:38px 34px;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--r)}
.rev .s{color:var(--gold);letter-spacing:5px;font-size:13px}
.rev blockquote{font-family:var(--disp);font-size:19px;line-height:1.55;margin:18px 0 22px;font-style:italic}
.rev .who b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:block;font-weight:500}
.rev .who span{font-size:12.5px;color:var(--text-2);display:block}
.rev .src{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);margin-top:7px}

/* ---------- owners / calculator ---------- */
.own{background:#fff;padding:112px 0}
.own .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:76px;align-items:center}
@media(max-width:1000px){.own .wrap{grid-template-columns:1fr;gap:48px}}
.own h2{font-size:clamp(30px,3.6vw,46px);margin:16px 0}
.own h2 em{font-style:italic;color:var(--gold-dp)}
.own ul{list-style:none;margin-top:30px}
.own li{display:flex;gap:18px;padding:15px 0;border-top:1px solid var(--line);font-size:14.5px}
.own li:last-child{border-bottom:1px solid var(--line)}
.own li i{font-style:normal;color:var(--gold-dp);font-size:11px;letter-spacing:.16em;padding-top:5px;font-weight:500}
.calc{border:1px solid var(--line);background:var(--white-2);padding:42px 38px;border-radius:var(--r-lg)}
.calc h3{font-size:25px}
.calc .n{font-size:13px;color:var(--text-2);margin:8px 0 26px}
.calc .r{margin-bottom:18px}
.calc label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);font-weight:500;display:block;margin-bottom:8px}
.calc select{width:100%;background:#fff;border:1px solid var(--line);color:var(--text);padding:14px 15px;
  font-family:var(--body);font-size:14.5px;font-weight:300;border-radius:var(--r-sm)}
.calc select:focus{outline:none;border-color:var(--gold)}
.out{overflow:hidden;max-height:0;transition:max-height .55s cubic-bezier(.2,.7,.2,1)}
.out.show{max-height:240px}
.out-in{margin:22px 0;padding:22px 24px;border-left:2px solid var(--gold);background:#fff;border-radius:0 var(--r-sm) var(--r-sm) 0}
.out b{font-family:var(--disp);font-size:32px;font-weight:500;display:block;line-height:1.15}
.out span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);display:block;margin-top:8px}
.calc .btn-dark{width:100%}
.calc-fine{font-size:11.5px;color:var(--text-3);margin-top:14px;line-height:1.6}

/* ---------- blog ---------- */
.jr{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:900px){.jr{grid-template-columns:1fr;gap:44px}}
.post-art{aspect-ratio:16/10;overflow:hidden;position:relative;margin-bottom:20px;background:var(--charcoal);border-radius:var(--r-lg)}
.post-art .fill{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.05s cubic-bezier(.2,.7,.2,1)}
.post:hover .post-art .fill{transform:scale(1.07)}
.post .cat{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);font-weight:500}
.post h3{font-size:21px;margin:10px 0;line-height:1.35}
.post:hover h3{color:var(--gold-dp)}
.post .m{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* ---------- newsletter ---------- */
.nl{background:var(--charcoal);color:#fff;padding:88px 0}
.nl .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.nl .wrap{grid-template-columns:1fr;gap:30px}}
.nl h2{font-size:clamp(25px,3vw,36px);color:#fff;margin-top:16px}
.nl-note{font-size:12.5px;color:rgba(255,255,255,.45);margin-top:12px}
.nlf label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:12px}
.nl-row{display:flex;gap:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-pill);overflow:hidden;transition:border-color .3s}
.nl-row:focus-within{border-color:var(--gold)}
.nl-row input{flex:1;min-width:0;border:none;background:none;padding:17px 24px;font-family:var(--body);
  font-size:15px;color:#fff;font-weight:300}
.nl-row input::placeholder{color:rgba(255,255,255,.42)}
.nl-row input:focus{outline:none}
.nl-row button{background:var(--gold);border:none;color:var(--black);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;padding:0 30px;white-space:nowrap;transition:background .3s}
.nl-row button:hover{background:var(--gold-lt)}
@media(max-width:480px){.nl-row{flex-direction:column;border-radius:var(--r)}
  .nl-row input{text-align:center}.nl-row button{padding:16px}}
.form-msg{margin-top:14px;color:var(--gold);font-size:13.5px}

/* ---------- footer ---------- */
footer{background:var(--black);color:rgba(255,255,255,.55);font-size:13.5px}
.fm{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:44px;padding:78px 0 52px}
@media(max-width:1000px){.fm{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fm{grid-template-columns:1fr}}
.fb .logo{align-items:flex-start;color:#fff}
.fb p{margin-top:22px;font-size:13px;line-height:1.85;max-width:290px}
.fadr{margin-top:20px;font-style:normal;font-size:13px;line-height:1.9}
.fadr a:hover{color:var(--gold)}
.fb .soc{display:flex;gap:12px;margin-top:22px}
.fb .soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;
  justify-content:center;border-radius:50%;transition:border-color .3s,color .3s,background .3s}
.fb .soc a:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.08)}
.fb .soc svg{width:16px;height:16px}
footer h4{color:#fff;font-family:var(--body);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;margin-bottom:22px}
footer ul{list-style:none;display:grid;gap:11px}
footer ul a{font-size:13px;font-weight:300;transition:color .3s}
footer ul a:hover{color:var(--gold)}
.lic{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;text-align:center;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;line-height:2}
.lic b{color:var(--gold);font-weight:500}
.fbase{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:12px}
.fbase .lg{display:flex;gap:22px;flex-wrap:wrap}
.fbase a:hover{color:var(--gold)}

/* ---------- floating ---------- */
.top{position:fixed;right:26px;bottom:26px;z-index:180;width:50px;height:50px;border:1px solid var(--line);
  background:#fff;color:var(--text);opacity:0;pointer-events:none;border-radius:50%;
  transition:opacity .35s,transform .35s;transform:translateY(12px);box-shadow:0 10px 28px rgba(13,13,13,.14)}
.top.show{opacity:1;pointer-events:auto;transform:none}
.top:hover{background:var(--gold);border-color:var(--gold)}
.wa{position:fixed;right:26px;bottom:88px;z-index:180;width:52px;height:52px;background:var(--gold);color:var(--black);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  box-shadow:0 10px 28px rgba(13,13,13,.24);transition:background .3s,transform .25s}
.wa:hover{background:var(--gold-lt);transform:scale(1.06)}
.wa svg{width:25px;height:25px}
@media(max-width:600px){.wa{right:18px;bottom:78px;width:48px;height:48px}.top{right:18px;bottom:20px;width:46px;height:46px}}

/* ============================================================
   PAGE-SPECIFIC
   ============================================================ */

/* properties listing */
.listing{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start}
@media(max-width:1000px){.listing{grid-template-columns:1fr}}
.filters{border:1px solid var(--line);padding:28px 26px;position:sticky;top:120px;background:#fff;border-radius:var(--r-lg)}
@media(max-width:1000px){.filters{position:static}}
.filters h4{font-family:var(--body);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;margin-bottom:16px}
.fgroup{padding:20px 0;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:none;padding-top:0}
.flab{display:block;margin-bottom:10px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);font-weight:500}
.fgroup label{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:5px 0;color:var(--text-2);cursor:pointer}
.fgroup input[type=checkbox]{accent-color:var(--gold);width:15px;height:15px}
.fgroup select{width:100%;padding:11px 12px;border:1px solid var(--line);font-family:var(--body);font-size:13.5px;background:#fff;border-radius:var(--r-sm)}
.fgroup input[type=range]{width:100%;accent-color:var(--gold)}
.frange{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3)}
.results-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.results-bar .count{font-size:13.5px;color:var(--text-2)}
.results-bar .count b{color:var(--text);font-weight:500}
.results-bar select{padding:11px 16px;border:1px solid var(--line);font-family:var(--body);font-size:13px;background:#fff;border-radius:var(--r-pill)}
.props.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.props.two{grid-template-columns:1fr}}
.pager{display:flex;gap:8px;justify-content:center;margin-top:56px}
.pager a{width:44px;height:44px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:13.5px;border-radius:50%}
.pager a.on,.pager a:hover{border-color:var(--gold);background:var(--gold);color:var(--black)}

/* property detail */
.pd-top{padding:34px 0 0}
.pd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:16px}
.pd-head h1{font-size:clamp(28px,3.8vw,46px);margin-top:12px}
.pd-meta{margin-top:10px;font-size:13.5px;color:var(--text-2)}
.pd-meta .st{color:var(--gold)}
.pd-acts{display:flex;gap:12px}
.pd-body{padding:0 0 100px}

/* ✦ Airbnb-style rounded gallery */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:10px;
  margin-top:30px;border-radius:var(--r-lg);overflow:hidden}
.gallery .gi{background-size:cover;background-position:center;background-color:var(--charcoal);
  position:relative;overflow:hidden;transition:filter .35s}
.gallery .gi:hover{filter:brightness(.9)}
.gallery .gi:first-child{grid-row:1/3}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr;grid-template-rows:220px 120px;border-radius:var(--r)}
  .gallery .gi:first-child{grid-column:1/3;grid-row:1}.gallery .gi:nth-child(n+4){display:none}}
.gallery .more-photos{position:absolute;right:14px;bottom:14px;background:#fff;color:var(--black);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;border-radius:var(--r-pill);
  box-shadow:0 3px 12px rgba(0,0,0,.2);font-weight:500}
.detail{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start;margin-top:52px}
@media(max-width:1000px){.detail{grid-template-columns:1fr;gap:40px}}
.booking{border:1px solid var(--line);padding:30px 28px;position:sticky;top:120px;background:#fff;
  box-shadow:var(--shadow);border-radius:var(--r-lg)}
@media(max-width:1000px){.booking{position:static}}
.booking .amt{font-family:var(--disp);font-size:30px;font-weight:500}
.booking .amt small{font-family:var(--body);font-size:12.5px;color:var(--text-3);font-weight:300}
.bk-rate{font-size:12.5px;color:var(--text-2);margin-top:6px}
.bk-rate .st{color:var(--gold)}
.booking .dates{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin:22px 0 0;
  border-radius:var(--r-sm) var(--r-sm) 0 0;overflow:hidden}
.booking .dates > div{padding:14px}
.booking .dates > div:first-child{border-right:1px solid var(--line)}
.booking .dates label,.booking .guests label{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dp);font-weight:500;display:block;margin-bottom:4px}
.booking .dates input,.booking .guests select{border:none;background:none;font-family:var(--body);font-size:13.5px;width:100%;font-weight:300}
.booking .dates input:focus,.booking .guests select:focus{outline:none}
.booking .guests{border:1px solid var(--line);border-top:none;padding:14px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.booking .lines{margin:22px 0;font-size:13.5px}
.booking .lines div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;color:var(--text-2)}
.booking .lines div.tot{border-top:1px solid var(--line);margin-top:10px;padding-top:14px;color:var(--text);font-weight:500;font-size:15px}
.booking .btn-gold{width:100%;text-align:center}
.booking .note{font-size:11.5px;color:var(--text-3);text-align:center;margin-top:12px}
.bk-circle{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;font-size:13px;color:var(--text-2)}
.bk-circle b{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:8px;font-weight:500}
.bk-circle a,.bk-help a{border-bottom:1px solid var(--gold)}
.bk-help{margin-top:16px;font-size:12.5px;color:var(--text-3)}
.dsec{padding:34px 0;border-top:1px solid var(--line)}
.dsec:first-child{border-top:none;padding-top:0}
.dsec h2{font-size:26px;margin-bottom:18px}
.dsec p{color:var(--text-2);margin-bottom:14px}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
@media(max-width:600px){.amen{grid-template-columns:1fr}}
.amen div{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-2)}
.amen svg{width:19px;height:19px;color:var(--gold-dp);flex:none}
.hilite{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-top:22px;
  border-radius:var(--r);overflow:hidden}
.hilite div{padding:22px 18px;text-align:center;border-left:1px solid var(--line)}
.hilite div:first-child{border-left:none}
.hilite b{display:block;font-family:var(--disp);font-size:22px;font-weight:500}
.hilite span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
@media(max-width:600px){.hilite{grid-template-columns:1fr 1fr}.hilite div:nth-child(3){border-left:none}
  .hilite div:nth-child(n+3){border-top:1px solid var(--line)}}
.rev-list{display:grid;gap:22px}
.rev-list > div{border-left:2px solid var(--gold);padding-left:20px}
.rev-list .s{color:var(--gold);letter-spacing:4px;font-size:12px}
.rev-list p{margin-top:10px;font-style:italic;font-family:var(--disp);font-size:17px;color:var(--text)}
.rev-list .by{font-size:12.5px;color:var(--text-2);margin-top:10px}

/* location page */
.loc-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:start}
@media(max-width:960px){.loc-grid{grid-template-columns:1fr;gap:40px}}
.lsub{font-size:22px;margin:34px 0 14px}
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;font-size:14.5px;color:var(--text-2);line-height:1.6}
.ticks li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:10px}
.lfacts{border:1px solid var(--line);background:var(--white-2);padding:32px 30px;border-radius:var(--r-lg);position:sticky;top:120px}
@media(max-width:960px){.lfacts{position:static}}
.lfacts h3{font-size:21px;margin-bottom:18px}
.lrow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-2)}
.lrow b{color:var(--text);font-weight:500;text-align:right}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.steps > div{padding:34px 26px;border-left:1px solid var(--line);background:#fff}
.steps > div:first-child{border-left:none}
.steps .no{font-family:var(--disp);font-size:34px;color:var(--gold);line-height:1}
.steps h3{font-size:18px;margin:14px 0 8px}
.steps p{font-size:13.5px;color:var(--text-2)}

/* tables */
.ptable{width:100%;border-collapse:collapse;margin-top:28px;font-size:14px;min-width:640px}
.ptable th,.ptable td{padding:16px 18px;border:1px solid var(--line);text-align:left}
.ptable th{background:var(--white-2);font-family:var(--body);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.ptable td{color:var(--text-2)}
.ptable td:first-child{color:var(--text)}
.ptable td a{border-bottom:1px solid var(--gold)}

/* faq */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 0;font-family:var(--disp);font-size:19px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-family:var(--body);font-size:20px;font-weight:300;flex:none}
.faq details[open] summary::after{content:'–'}
.faq p{padding:0 0 24px;color:var(--text-2);font-size:14.5px;max-width:72ch}
.faq p a{border-bottom:1px solid var(--gold)}

/* founders */
.founders{display:grid;gap:34px}
.founder{display:grid;grid-template-columns:340px 1fr;gap:46px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;background:#fff}
@media(max-width:840px){.founder{grid-template-columns:1fr;gap:26px;padding:26px}}
.founder-photo{aspect-ratio:4/4.4;background:var(--white-2);border:1px dashed var(--line);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center}
.ph-note{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}
.founder-txt h3{font-size:clamp(28px,3vw,38px);margin-top:12px}
.founder-txt p{margin-top:22px;color:var(--text-2);font-size:15.5px;max-width:58ch}
.todo{color:var(--gold-dp);font-style:italic}

/* careers */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.roles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.roles{grid-template-columns:1fr}}
.role{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;background:#fff;transition:transform .4s,box-shadow .4s}
.role:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.role h3{font-size:21px}
.rmeta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);margin:8px 0 14px}
.role p{font-size:14px;color:var(--text-2);margin-bottom:20px}

/* login */
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:900px){.login-grid{grid-template-columns:1fr}}
.lcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 40px;background:#fff}
.lcard h2{font-size:28px;margin-top:12px}
.lcard > p{margin-top:20px;color:var(--text-2);font-size:14.5px}
.lcard.dark{background:var(--black);color:#fff;border-color:rgba(255,255,255,.14)}
.lcard.dark h2{color:#fff}
.lcard.dark > p{color:rgba(255,255,255,.65)}
.lcard.dark .field label{color:var(--gold)}
.lcard.dark .field input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#fff}
.lalt{margin-top:20px;font-size:13px;color:var(--text-3)}
.lcard.dark .lalt{color:rgba(255,255,255,.5)}
.lalt a{border-bottom:1px solid var(--gold)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px}}
.field{margin-bottom:20px}
.field label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);font-weight:500;display:block;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);padding:14px 16px;
  font-family:var(--body);font-size:14.5px;font-weight:300;background:#fff;color:var(--text);border-radius:var(--r-sm)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.cinfo{border:1px solid var(--line);padding:34px 32px;background:var(--white-2);border-radius:var(--r-lg)}
.cinfo .row{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.cinfo .row:first-of-type{border-top:none;padding-top:0}
.cinfo svg{width:20px;height:20px;color:var(--gold-dp);flex:none;margin-top:4px}
.cinfo b{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:4px}
.cinfo span{font-size:14px;color:var(--text-2)}
.cinfo a:hover{color:var(--gold-dp);border-bottom:1px solid var(--gold)}
.cinfo.dark{background:var(--black);border-color:rgba(255,255,255,.14);margin-top:24px}
.cinfo.dark p{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.9}

/* legal */
.legal{max-width:820px}
.legal .upd{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin-bottom:34px}
.legal h2{font-size:24px;margin:36px 0 14px}
.legal .ticks{margin:14px 0}



/* New */
.rules-g, .rules-light {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 48px;
}
.rule-card {
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--r);
    padding: 28px 24px;
    transition: .4s;
}
.rule-card .rno {
    font-family: var(--disp);
    font-size: 28px;
    color: var(--gold);
    line-height: 1;
}
.rule-card h3 {
    font-size: 19px;
    margin: 12px 0 8px;
    color: #fff;
}
.rule-card p {
    font-size: 13.5px;
    color: #ffffffb8;
    line-height: 1.7;
}
.wcalc-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: center;
}
.wcalc {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow);
}
.wcalc label {
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-dp);
    font-weight: 500;
    display: block;
    margin-bottom: 12px;
}
.wcalc input[type=range] {
    width: 100%;
    accent-color: var(--gold);
}
.wc-amt {
    font-family: var(--disp);
    font-size: 32px;
    font-weight: 500;
    color:black;
    margin: 14px 0 20px;
}
.wc-fine {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 14px;
}
.wc-rows div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--text-2);
}

/* sitemap */
.smgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
@media(max-width:1000px){.smgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.smgrid{grid-template-columns:1fr}}
.smcol h3{font-size:19px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--gold)}
.smcol ul{list-style:none;display:grid;gap:10px}
.smcol a{font-size:14px;color:var(--text-2)}
.smcol a:hover{color:var(--gold-dp)}

@media(max-width:600px){
.drawer .logo {
    color: #fff;
    align-items: flex-start;
    width:100%;
}
}
/* =========================================
   PHOTO TOUR MODAL
========================================= */

.gallery-modal {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: none;

  background: #fff;

  overflow-y: auto;
}

.gallery-modal.active {
  display: block;
}


/* =========================================
   PHOTO TOUR
========================================= */

.photo-tour {
  width: 100%;
  min-height: 100vh;

  background: #fff;

  padding: 0 100px 80px;
}


/* =========================================
   HEADER
========================================= */

.photo-tour-header {
  position: sticky;
  top: 0;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 20px 0;

  background: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.photo-tour-header h2 {
  margin: 0;

  color: #222;

  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
}


/* =========================================
   CLOSE
========================================= */

.gallery-close {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #ddd;
  border-radius: 50%;

  background: #fff;

  color: #222;

  font-size: 28px;
  line-height: 1;

  cursor: pointer;

  transition: 0.2s ease;
}

.gallery-close:hover {
  background: #222;
  color: #fff;
}


/* =========================================
   CATEGORY GRID
========================================= */

.photo-tour-categories {
  display: flex;
  flex-wrap: wrap;

  gap: 18px;

  padding: 18px 0 55px;
}

.tour-category {
  width: 184px;

  display: flex;
  flex-direction: column;

  gap: 8px;

  text-decoration: none;

  color: #222;
}

.tour-category img {
  width: 184px;
  height: 122px;

  display: block;

  object-fit: cover;

  border-radius: 0;

  transition: 0.2s ease;
}

.tour-category:hover img {
  opacity: 0.8;
}

.tour-category span {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
}


/* =========================================
   PHOTO SECTIONS
========================================= */

.photo-tour-sections {
  width: 100%;

  margin: 0 auto;
}


/* =========================================
   EACH SECTION
========================================= */

.tour-section {
  width: 100%;

  display: grid;

  /*
     LEFT      GAP      RIGHT
     28%       7%       58%
  */
  grid-template-columns: 28% 58%;

  column-gap: 7%;

  align-items: start;

  margin: 0;

  padding: 0 0 100px;

  scroll-margin-top: 100px;
}


/* =========================================
   LEFT INFORMATION

   THIS IS STICKY
========================================= */

.tour-section-info {
  position: sticky;

  top: 105px;

  align-self: start;

  height: fit-content;

  padding-top: 2px;

  z-index: 5;
}

.tour-section-info h3 {
  margin: 0 0 5px;

  color: #222;

  font-size: 20px;

  line-height: 1.3;

  font-weight: 600;
}

.tour-section-info p {
  margin: 0;

  color: #777;

  font-size: 12px;

  line-height: 1.3;
}


/* =========================================
   RIGHT IMAGE AREA
========================================= */

.tour-section-images {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 4px;

  align-items: start;
}


/* =========================================
   IMAGES
========================================= */

.tour-section-images img {
  width: 100%;

  display: block;

  min-width: 0;

  height: auto;

  object-fit: cover;

  margin: 0;

  background: #f5f5f5;
}


/* =========================================
   IMAGE PATTERN

   IMAGE 1  = FULL
   IMAGE 2  = HALF
   IMAGE 3  = HALF
   IMAGE 4  = FULL
   IMAGE 5  = HALF
   IMAGE 6  = HALF
   IMAGE 7  = FULL
   ...
========================================= */

.tour-section-images img:nth-child(3n + 1) {
  grid-column: 1 / -1;
}


/* =========================================
   OPTIONAL IMAGE ASPECT RATIOS
========================================= */

/* Full-width images */

.tour-section-images img:nth-child(3n + 1) {
  aspect-ratio: 1.55 / 1;

  object-fit: cover;
}


/* Half-width images */

.tour-section-images img:not(:nth-child(3n + 1)) {
  aspect-ratio: 1.55 / 1;

  object-fit: cover;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .photo-tour {
    padding: 0 20px 50px;
  }


  /* HEADER */

  .photo-tour-header {
    padding: 16px 0;
  }

  .photo-tour-header h2 {
    font-size: 24px;
  }


  /* CATEGORIES */

  .photo-tour-categories {
    flex-wrap: nowrap;

    overflow-x: auto;

    padding: 15px 0 35px;

    gap: 12px;

    scrollbar-width: none;
  }

  .photo-tour-categories::-webkit-scrollbar {
    display: none;
  }

  .tour-category {
    flex: 0 0 145px;

    width: 145px;
  }

  .tour-category img {
    width: 145px;
    height: 96px;
  }

  .tour-category span {
    font-size: 15px;
  }


  /* SECTIONS */

  .tour-section {
    display: block;

    padding: 0 0 60px;

    scroll-margin-top: 80px;
  }


  /* STICKY TITLE */

  .tour-section-info {
    position: sticky;

    top: 73px;

    margin-bottom: 18px;

    padding: 12px 0;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 10;
  }

  .tour-section-info h3 {
    font-size: 18px;
  }

  .tour-section-info p {
    font-size: 12px;
  }


  /* IMAGES */

  .tour-section-images {
    gap: 3px;
  }

  .tour-section-images img {
    border-radius: 3px;
  }
}