/* Lux Travel & Life (16 Oct 2026). Travel media first, consultancy for brands second. */
:root{--ink:#14120f;--ink2:#1d1a16;--paper:#f6f2ea;--paper2:#ece6da;--gold:#b8955a;--gold2:#d4b47c;--mute:#6f675c;--line:rgba(20,18,15,.14);--lineD:rgba(243,239,231,.16);--txtD:#f3efe7;--muteD:rgba(243,239,231,.66)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:300 17px/1.65 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:min(1240px,100% - 32px);margin:0 auto}
.serif{font-family:'Cormorant Garamond',Georgia,serif}
.k{font:500 12px/1.6 Jost,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.k:before{content:"";width:34px;height:1px;background:currentColor;opacity:.8}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.05}
h2{font-size:clamp(38px,5.4vw,68px);margin:22px 0 22px}
h2 em,h1 em{font-style:italic;color:var(--gold)}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--mute);max-width:640px}
section{padding:clamp(80px,11vw,150px) 0}
.dark{background:var(--ink);color:var(--txtD)}
.dark .lede{color:var(--muteD)}
.btn{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 Jost,sans-serif;letter-spacing:.24em;text-transform:uppercase;padding:18px 26px;border:1px solid currentColor;transition:background .3s,color .3s}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.gold:hover{background:#a5844c}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.dark .btn.line:hover{background:var(--txtD);color:var(--ink)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font:500 13px/1 Jost,sans-serif;letter-spacing:.42em;text-transform:uppercase;color:#fff}
.logo b{font-weight:500;color:var(--gold2)}
.nav ul{display:flex;gap:30px;list-style:none}
.nav ul a{font:400 12px/1 Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.nav ul a:hover{color:#fff}
.nav.solid{background:rgba(20,18,15,.94);backdrop-filter:blur(10px);border-color:var(--lineD)}
.menu{display:none;background:none;border:0;color:#fff;font:500 12px/1 Jost;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
@media(max-width:900px){.nav ul{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);padding:8px 16px 18px}.nav ul a{display:block;padding:16px 0;border-bottom:1px solid var(--lineD)}.nav.open ul{display:flex}.menu{display:block}}

/* hero */
.hero{position:relative;min-height:100svh;padding-top:120px !important;display:flex;align-items:flex-end;color:#fff;padding:0 0 clamp(56px,8vw,96px);overflow:hidden;background:#0d0c0a}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,10,.45) 0%,rgba(13,12,10,.05) 35%,rgba(13,12,10,.25) 60%,rgba(13,12,10,.85) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(46px,7vw,100px);margin:26px 0 24px;max-width:1000px}
.hero p{max-width:560px;color:rgba(255,255,255,.82);font-size:clamp(17px,1.5vw,19px)}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero .place{position:absolute;right:max(16px,calc((100% - 1240px)/2));bottom:clamp(56px,8vw,96px);z-index:2;text-align:right;font:400 13px/1.5 Jost;letter-spacing:.08em;color:rgba(255,255,255,.75);transition:opacity .5s}
.hero .place b{display:block;font:italic 400 22px/1.2 'Cormorant Garamond',serif;letter-spacing:0;color:#fff}
@media(max-width:700px){.hero .place{display:none}}

/* figures */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.figs div{padding:34px 24px 0 0}
.figs b{display:block;font:400 clamp(44px,5vw,64px)/1 'Cormorant Garamond',serif}
.figs span{font:500 11px/1.4 Jost;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
@media(max-width:800px){.figs{grid-template-columns:1fr 1fr}.figs div{padding:26px 12px 6px 0}}

/* intro */
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,7vw,110px);align-items:end}
.intro .body p+p{margin-top:18px}
.intro .body p{color:var(--mute)}
@media(max-width:900px){.intro{grid-template-columns:1fr}}

/* stays */
.stays{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:56px}
.stays figure{position:relative;aspect-ratio:3/4.4;overflow:hidden;background:var(--paper2)}
.stays img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.stays figure:hover img{transform:scale(1.05)}
.stays figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 14px;background:linear-gradient(transparent,rgba(13,12,10,.82));color:#fff;font:400 12px/1.4 Jost;letter-spacing:.04em}
.stays figcaption b{display:block;font:italic 400 19px/1.15 'Cormorant Garamond',serif}
@media(max-width:1000px){.stays{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.stays{grid-template-columns:1fr 1fr}}

/* audience */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.bars{margin-top:8px}
.bar{display:grid;grid-template-columns:150px 1fr 50px;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--lineD)}
.bar i{height:2px;background:rgba(243,239,231,.12);position:relative}
.bar i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--gold2)}
.bar b{font:400 26px/1 'Cormorant Garamond',serif;text-align:right}
.bar span{font-size:15px}
.chips{display:flex;gap:40px;margin-top:40px;flex-wrap:wrap}
.chips b{display:block;font:400 34px/1 'Cormorant Garamond',serif}
.chips span{font:500 11px/1.4 Jost;letter-spacing:.22em;text-transform:uppercase;color:var(--muteD)}
@media(max-width:900px){.aud{grid-template-columns:1fr}.bar{grid-template-columns:110px 1fr 44px}}

/* price cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}
.card{border:1px solid var(--line);padding:36px 32px 34px;display:flex;flex-direction:column;background:#fbf8f2}
.card.feat{background:var(--ink);color:var(--txtD);border-color:var(--ink)}
.card .tag{font:500 11px/1 Jost;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.card h3{font-size:32px;margin:18px 0 8px}
.card .price{font:400 46px/1 'Cormorant Garamond',serif;margin:18px 0 4px}
.card .price small{font:400 14px/1 Jost;color:var(--mute);margin-left:6px}
.card.feat .price small{color:var(--muteD)}
.card p{color:var(--mute);font-size:16px}
.card.feat p{color:var(--muteD)}
.card ul{list-style:none;margin:22px 0 0;font-size:15.5px}
.card li{padding:11px 0 11px 22px;border-top:1px solid var(--line);position:relative}
.card.feat li{border-color:var(--lineD)}
.card li:before{content:"";position:absolute;left:2px;top:21px;width:8px;height:1px;background:var(--gold)}
.card .btn{margin-top:auto;align-self:flex-start}
.card .sp{flex:1;min-height:26px}
@media(max-width:1000px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

/* consultancy */
.cons{background:var(--paper2)}
.house{border:1px solid var(--line);background:var(--paper);display:grid;grid-template-rows:auto 1fr}
.house .top{padding:40px 36px 34px;border-bottom:1px solid var(--line)}
.house .top .mark{font:500 13px/1 Jost;letter-spacing:.42em;text-transform:uppercase}
.house .top h3{font-size:clamp(34px,3.4vw,44px);margin:22px 0 12px}
.house .top p{color:var(--mute)}
.house .bot{padding:30px 36px 36px;display:flex;flex-direction:column}
.house dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:15.5px}
.house dt{font:500 11px/1.9 Jost;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.house dd{color:var(--ink)}
.house .price{font:400 50px/1 'Cormorant Garamond',serif;margin:26px 0 6px}
.house .price small{font:400 14px/1 Jost;color:var(--mute);margin-left:6px}
.house .note{font-size:14.5px;color:var(--mute);margin-bottom:26px}
.house.lux{background:var(--ink);color:var(--txtD);border-color:var(--ink)}
.house.lux .top{border-color:var(--lineD)}
.house.lux p,.house.lux .note,.house.lux .price small{color:var(--muteD)}
.house.lux dd{color:var(--txtD)}
.house .links{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.what{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:70px;border-top:1px solid var(--line)}
.what div{padding:30px 26px 0 0}
.what b{font:italic 400 24px/1.2 'Cormorant Garamond',serif;display:block;margin-bottom:10px}
.what p{font-size:15.5px;color:var(--mute)}
@media(max-width:900px){.what{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.what{grid-template-columns:1fr}}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:70px}
.steps li{list-style:none;counter-increment:s;border-top:1px solid var(--ink);padding-top:22px}
.steps li:before{content:"0" counter(s);font:400 15px/1 Jost;letter-spacing:.2em;color:var(--gold)}
.steps b{display:block;font:400 25px/1.15 'Cormorant Garamond',serif;margin:14px 0 8px}
.steps p{font-size:15px;color:var(--mute)}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* pay */
.pay{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.pay div{border-top:1px solid var(--lineD);padding-top:22px}
.pay b{display:block;font:400 24px/1.2 'Cormorant Garamond',serif;margin-bottom:8px}
.pay p{font-size:15px;color:var(--muteD)}
@media(max-width:900px){.pay{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pay{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px)}
.cline{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.cline span{font:500 11px/1.9 Jost;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.cline a{border-bottom:1px solid var(--gold)}
@media(max-width:900px){.contact{grid-template-columns:1fr}.cline{grid-template-columns:1fr;gap:4px}}

/* footer */
footer{background:#0d0c0a;color:var(--muteD);padding:70px 0 40px;font-size:14.5px}
footer .row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .logo{display:inline-block;margin-bottom:18px}
footer nav{display:flex;gap:26px;flex-wrap:wrap}
footer nav a{color:var(--txtD)}
footer .legal{margin-top:46px;padding-top:26px;border-top:1px solid var(--lineD);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.cards{display:flex;gap:8px}
.cards i{font:600 11px/1 Jost;font-style:normal;letter-spacing:.06em;color:var(--ink);background:#f3efe7;border-radius:3px;padding:7px 10px}

/* policy pages */
.doc{padding:150px 0 110px}
.doc .wrap{max-width:820px}
.doc h1{font-size:clamp(44px,6vw,72px);margin:22px 0 14px}
.doc .upd{color:var(--mute);font-size:15px;margin-bottom:46px}
.doc h2{font-size:30px;margin:46px 0 12px}
.doc p,.doc li{color:#3b362f;margin-bottom:12px}
.doc ul{padding-left:20px}
.doc .nav{background:var(--ink)}

.rv{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* desktop hero: the film is vertical (Reels), so it plays at its own shape instead of being stretched */
@media(min-width:901px){
  .hero{align-items:center;background:radial-gradient(90% 80% at 75% 40%,#2a241c 0%,#14120f 55%,#0d0c0a 100%)}
  .hero:after,.hero .poster{display:none}
  .hero video{inset:auto;left:auto;right:max(32px,calc((100% - 1240px)/2));top:118px;bottom:96px;width:auto;height:calc(100% - 214px);aspect-ratio:9/16;object-fit:cover;box-shadow:0 40px 90px rgba(0,0,0,.5)}
  .hero h1{font-size:clamp(48px,5vw,74px);max-width:760px}
  .hero .wrap>*{max-width:min(760px,calc(100% - 46vh))}
  .hero .place{bottom:44px;text-align:right}
  .hero .place b{display:inline;margin-right:10px;font-size:19px}
}
