:root{
--void:#0A1319; /* near-black, navy family */
--void-2:#0E1A22;
--navy:#1A3A4A;
--paper:#F4F1EB;
--paper-2:#EAE4DA;
--gold:#C8862A;
--gold-lite:#E8B268;
--ink:#14232B;
--ink-soft:#4A6470;
--mute:#8FA3AC;
--line:rgba(255,255,255,.14);
--display:'Cormorant Garamond',Georgia,serif;
--body:'Jost',-apple-system,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body.jlt{background:var(--void);color:#EFEAE1;font-family:var(--body);font-weight:300;font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.jlt img{max-width:100%;display:block}
.jlt a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
/* ---- display type: big, tight, stacked ---- */
.d{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.028em;line-height:.87;text-transform:uppercase}
.d--xl{font-size:clamp(40px,8.4vw,112px)}
.d--lg{font-size:clamp(34px,6.4vw,84px)}
.d--md{font-size:clamp(32px,5vw,60px)}
.d i{font-style:italic;text-transform:none;color:var(--gold-lite);letter-spacing:-.02em}
.hero .d--xl{white-space:nowrap}
@media(max-width:700px){.hero .d--xl{white-space:normal}}
.eyebrow{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 20px;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:90px}
.lede{font-size:19px;color:#B9C6CD;max-width:54ch;margin:22px 0 0;line-height:1.62}
.dark .lede{color:#B9C6CD}
.light{background:var(--paper);color:var(--ink)}
.light .lede{color:#3A5460}
.light .eyebrow{color:#8A5D12}
.light .eyebrow::after{background:rgba(20,35,43,.16)}
/* ---- reveal ---- */
.reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
/* ---- hero ---- */
.hero{position:relative;min-height:100svh;min-height:calc(100svh - var(--wpbar,0px));display:flex;flex-direction:column;overflow:hidden;background:var(--void)}
.hero__bg{position:absolute;inset:0;background:var(--hero,var(--navy)) center/cover no-repeat;transform:scale(1.08);animation:push 34s ease-in-out infinite alternate}
@keyframes push{from{transform:scale(1.08)}to{transform:scale(1.2) translate3d(0,-2%,0)}}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,19,25,.82) 0%,rgba(10,19,25,.18) 42%,rgba(10,19,25,.94) 100%)}
.hero__in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;max-width:1240px;margin:0 auto;width:100%;padding:30px 28px 36px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand b{font-weight:400;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#CBD8DE;transition:color .3s}
.nav ul a:hover{color:var(--gold-lite)}
.hero__mid{padding:clamp(24px,4vh,52px) 0 clamp(22px,3.5vh,40px);max-width:none}
.hero .d--xl{color:#fff}
.hero__sub{font-size:16.5px;color:#C6D2D8;max-width:44ch;margin:26px 0 0;letter-spacing:.01em}
.bar{display:flex;flex-wrap:wrap;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.bar a{flex:1 1 150px;background:rgba(10,19,25,.46);padding:17px 20px;display:flex;flex-direction:column;gap:4px;transition:background .35s}
.bar a:hover{background:rgba(200,134,42,.92)}
.bar a:hover b,.bar a:hover span{color:#0A1319}
.bar b{font-weight:400;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lite);transition:color .35s}
.bar span{font-size:15px;color:#EDF2F4;transition:color .35s}
/* ---- sections ---- */
section{padding:clamp(88px,13vw,168px) 0;position:relative}
.dark{background:var(--void)}
.dark--2{background:var(--void-2)}
/* index markers — a real sequence, so numbering means something */
.idx{position:absolute;top:clamp(88px,13vw,168px);right:28px;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.28)}
.light .idx{color:rgba(20,35,43,.3)}
/* ---- statement block ---- */
.statement{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:end}
@media(max-width:860px){.statement{grid-template-columns:1fr}}
/* ---- three ways ---- */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;margin-top:64px;border-top:1px solid var(--line)}
.way{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:38px 32px 42px;display:flex;flex-direction:column;gap:12px;transition:background .4s}
.way:last-child{border-right:none}
.way:hover{background:rgba(255,255,255,.035)}
.way b{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);font-weight:400;line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.way span{font-size:15px;color:#A9B9C1;line-height:1.62}
.way em{font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.light .way{border-color:rgba(20,35,43,.14)}
.light .way span{color:#3A5460}
.light .ways{border-color:rgba(20,35,43,.14)}
/* ---- tiles ---- */
/* auto-fill, not auto-fit: a lone tile keeps its column width instead of
stretching across the whole row, so /weddings/ matches /villas/. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:60px}
.tiles--tall .tile{aspect-ratio:3/4.1}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:4/3.2;background:var(--void-2)}
.tile__img{position:absolute;inset:0;background-position:center;background-size:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile__img{transform:scale(1.07)}
.tile__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,19,25,0) 34%,rgba(10,19,25,.9) 100%)}
.tile__body{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 28px;display:flex;flex-direction:column;gap:6px}
.tile__eyebrow{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lite)}
.tile__title{font-family:var(--display);font-size:clamp(23px,2.6vw,31px);line-height:1.04;color:#fff;letter-spacing:-.02em}
.tile__price{font-size:14px;color:#D6E0E5;margin-top:4px}
.tile__price em{font-style:normal;font-size:11.5px;color:#8FA3AC;letter-spacing:.06em}
.empty{margin-top:52px;border:1px solid var(--line);padding:34px;color:var(--mute);font-size:15px}
.light .empty{border-color:rgba(20,35,43,.16)}
/* ---- cta ---- */
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:52px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lite);border-bottom:1px solid rgba(200,134,42,.45);padding-bottom:9px;transition:color .3s,border-color .3s,gap .3s}
.cta:hover{color:#fff;border-color:#fff;gap:20px}
.light .cta{color:#8A5D12;border-color:rgba(138,93,18,.45)}
.light .cta:hover{color:var(--ink);border-color:var(--ink)}
/* ---- footer ---- */
.foot{background:#060C11;color:#80939E;padding:clamp(56px,8vw,104px) 0 42px;border-top:1px solid var(--line)}
.foot{color:#80939E}
.foot__mark{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#E7E1D6;
font-size:clamp(30px,8.1vw,116px);line-height:.92;letter-spacing:.02em;white-space:nowrap;
display:flex;justify-content:space-between;gap:.06em}
.foot__mark span{display:block}
.foot__rule{border:0;height:1px;background:rgba(255,255,255,.16);margin:clamp(26px,4vw,46px) 0 clamp(38px,6vw,72px)}
.foot__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}.foot__pitch{grid-column:1/-1}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot__pitch h3{font-family:var(--display);font-weight:400;text-transform:none;color:#EFEAE1;
font-size:clamp(27px,3.4vw,42px);line-height:1.08;letter-spacing:-.015em;margin:0 0 26px}
.foot__act{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:420px;
padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.24);transition:border-color .3s}
.foot__act:hover{border-color:var(--gold-lite)}
.foot__act span{font-size:15px;color:#9EAFB8;transition:color .3s}
.foot__act:hover span{color:#EFEAE1}
.foot__act svg{flex:none;transition:transform .3s}
.foot__act:hover svg{transform:translateX(6px)}
.foot h4{font-family:var(--body);font-weight:400;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
color:var(--gold);margin:0 0 18px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot ul a{font-size:15px;color:#9EAFB8;transition:color .3s}
.foot ul a:hover{color:var(--gold-lite)}
.foot__menus{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:560px){.foot__menus{grid-template-columns:1fr 1fr}}
.foot__block{margin-bottom:32px}
.foot__block:last-child{margin-bottom:0}
.foot__block p{margin:0;font-size:15px;color:#9EAFB8;line-height:1.6}
.foot__block a{color:#9EAFB8}
.foot__block a:hover{color:var(--gold-lite)}
.foot__base{margin-top:clamp(48px,7vw,86px);padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px;letter-spacing:.04em;color:#6A7E89}
.foot__base a{color:#6A7E89}
.foot__base a:hover{color:var(--gold-lite)}
@media (max-width:760px){
.nav ul{display:none}
.hero__mid{padding:34px 0 30px;max-width:none}
.idx{display:none}
}
@media (prefers-reduced-motion:reduce){
.hero__bg{animation:none}
.reveal{opacity:1;transform:none;transition:none}
.tile__img{transition:none}
html{scroll-behavior:auto}
}
/* ---- shared chrome (nav lifted out of the hero) ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#0A1319;padding:12px 20px;z-index:99}
.skip:focus{left:16px;top:16px}
.nav-shell{background:var(--void);border-bottom:1px solid var(--line);position:relative;z-index:20}
.nav-shell .nav{max-width:1240px;margin:0 auto;padding:22px 28px}
.jlt-has-hero .nav-shell{background:transparent;border-bottom:none;position:absolute;left:0;right:0;top:0}
.jlt-has-hero .nav-shell .nav{padding:30px 28px}
.jlt-has-hero .hero{padding-top:0}
/* inner-page hero (no full-bleed art): compact banner */
.phero{background:var(--void-2);border-bottom:1px solid var(--line);padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px)}
.phero .lede{margin-top:20px}
:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px}
/* hero content must clear the overlaid nav */
.jlt-has-hero .hero__in{padding-top:clamp(100px,13vh,138px)}
/* ---- transfers ---- */
.rule{width:58px;height:1px;background:var(--gold);border:0;margin:0 0 22px}
.routes{display:flex;flex-direction:column;margin-top:52px;border-top:1px solid var(--line)}
.route{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;
padding:26px 4px;border-bottom:1px solid var(--line);transition:padding-left .35s,background .35s}
.route:hover{padding-left:16px;background:rgba(255,255,255,.035)}
.light .route,.light .routes{border-color:rgba(20,35,43,.14)}
.light .route:hover{background:rgba(20,35,43,.04)}
.route__main{display:flex;flex-direction:column;gap:5px}
.route__name{font-family:var(--display);font-size:clamp(22px,2.7vw,32px);line-height:1.08;letter-spacing:-.02em;color:#EFEAE1}
.light .route__name{color:var(--ink)}
.route__meta{font-size:13.5px;color:var(--mute);letter-spacing:.02em}
.route__facts{display:flex;align-items:baseline;gap:26px;white-space:nowrap}
.route__time{font-size:13.5px;color:var(--mute)}
.route__price{font-family:var(--display);font-size:26px;color:var(--gold-lite)}
.fineprint{margin-top:26px;font-size:13px;color:var(--mute);max-width:62ch}
.answer{margin:26px 0 0;max-width:60ch;font-size:18px;line-height:1.62;color:#CBD8DE;
border-left:2px solid var(--gold);padding-left:20px}
.light .answer{color:#3A5460}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
border:1px solid var(--line);margin-top:38px}
.facts div{background:var(--void-2);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.facts b{font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.facts span{font-size:16px;color:#EFEAE1}
.notes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.notes li{position:relative;padding-left:22px;font-size:16px;color:#B9C6CD;line-height:1.6}
.notes li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold)}
.byline{margin-top:44px;font-size:13px;color:var(--mute);font-style:italic}
/* ---- enquiry form ---- */
.enq-wrap{margin-top:52px;max-width:760px}
.enq__hp{position:absolute;left:-9999px}
.enq__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.enq label{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.enq label span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.enq input,.enq textarea,.enq select{font-family:var(--body);font-size:16px;font-weight:300;color:#EFEAE1;
background:transparent;border:0;border-bottom:1px solid var(--line);padding:11px 2px;border-radius:0}
.light .enq input,.light .enq textarea,.light .enq select{color:var(--ink);border-bottom-color:rgba(20,35,43,.4)}
.enq input:focus,.enq textarea:focus,.enq select:focus{outline:none;border-bottom-color:var(--gold)}
.enq button{margin-top:14px;background:var(--gold);color:#0A1319;border:0;padding:16px 40px;
font-family:var(--body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.enq button:hover{background:var(--gold-lite)}
.enq button[disabled]{opacity:.55;cursor:default}
.enq__msg{margin:18px 0 0;font-size:15px;min-height:1.2em}
.enq__msg.ok{color:var(--gold-lite)}
.enq__msg.err{color:#E0836F}
/* ---- select control ---- */
.enq select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;
background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 2px center;background-size:12px 8px}
.light .enq select{background-image:url("data:image/svg+xml;utf8,")}
.enq select option{color:#14232B;background:#F4F1EB}
/* ---- legibility on paper: gold and mute are too pale on a cream ground ---- */
.light .enq label span{color:#8A5D12}
.light .enq input::placeholder,.light .enq textarea::placeholder{color:rgba(20,35,43,.45)}
.light .enq input[type=date]{color:var(--ink)}
.light .byline{color:#4A6470}
.light .notes li{color:#3A5460}
.light .enq__msg.ok{color:#14232B}
.light .enq__msg.err{color:#A03A22}
/* ---- location hub ---- */
.hero--short{min-height:min(62svh,540px)}
.hero--short .hero__in{justify-content:flex-end;padding-bottom:clamp(38px,6vh,64px)}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;margin-top:52px;
border-top:1px solid rgba(20,35,43,.14)}
.area{border-bottom:1px solid rgba(20,35,43,.14);border-right:1px solid rgba(20,35,43,.14);
padding:30px 28px 34px;display:flex;flex-direction:column;gap:10px}
.area:last-child{border-right:none}
.area b{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.5vw,28px);line-height:1.1;letter-spacing:-.02em}
.area span{font-size:15px;color:var(--ink-soft);line-height:1.62}
.dark .areas,.dark--2 .areas{border-top-color:var(--line)}
.dark .area,.dark--2 .area{border-color:var(--line)}
.dark .area span,.dark--2 .area span{color:#A9B9C1}
/* ---- guides ---- */
.glist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin-top:46px;border-top:1px solid var(--line)}
.light .glist{border-top-color:rgba(20,35,43,.14)}
.gitem{display:flex;flex-direction:column;gap:6px;padding:26px 26px 30px;
border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background .35s,padding-left .35s}
.light .gitem{border-color:rgba(20,35,43,.14)}
a.gitem:hover{background:rgba(255,255,255,.04);padding-left:34px}
.light a.gitem:hover{background:rgba(20,35,43,.04)}
.gitem__name{font-family:var(--display);font-size:clamp(22px,2.5vw,29px);line-height:1.08;letter-spacing:-.02em}
.gitem__meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.gitem--off{opacity:.45}
.gitem--off .gitem__meta{color:var(--mute)}
/* ---- article body ---- */
.article{max-width:none}
.art-block{max-width:66ch;margin:0 0 clamp(38px,5vw,62px)}
.art-block:last-of-type{margin-bottom:0}
.art-block h2{margin-bottom:16px}
.art-block p{font-size:17.5px;line-height:1.74;color:#B9C6CD;margin:0}
.light .art-block p{color:#3A5460}
/* ---- verified data table ---- */
.vtable{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
background:rgba(20,35,43,.14);border:1px solid rgba(20,35,43,.14);margin-top:44px}
.vtable div{background:var(--paper);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.vtable b{font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9A6A18}
.vtable span{font-size:18px;color:var(--ink)}
/* ---- reviews ---- */
.sample-note{border:1px solid var(--gold);border-left-width:3px;background:rgba(200,134,42,.08);padding:22px 24px}
.sample-note b{display:block;font-weight:400;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lite);margin-bottom:9px}
.sample-note p{margin:0;font-size:15px;color:#B9C6CD;max-width:70ch}
.sample-note code{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--gold-lite)}
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:48px}
.rev{margin:0;background:var(--void);border:1px solid var(--line);padding:30px 28px 26px;display:flex;flex-direction:column;gap:16px}
.rev--sample{border-style:dashed;opacity:.82}
.rev__stars{color:var(--gold);letter-spacing:.18em;font-size:15px}
.rev__stars .off{color:rgba(255,255,255,.22)}
.rev blockquote{margin:0;font-family:var(--display);font-size:clamp(19px,2.1vw,23px);line-height:1.34;color:#EFEAE1;letter-spacing:-.01em}
.rev figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.rev figcaption b{font-weight:400;font-size:15px;color:#EFEAE1}
.rev figcaption span{font-size:13px;color:var(--mute)}
.rev figcaption em{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:5px}
/* ---- brand mark ---- */
.brand__mark{width:42px;height:42px;border-radius:50%;flex:none;display:block}
.jlt-has-hero .brand__mark{box-shadow:0 0 0 1px rgba(255,255,255,.22)}
/* ---- dropdown menu ---- */
.navtoggle,.burger{display:none}
.menu>ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.menu>ul>li{position:relative}
.menu>ul>li>a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#CBD8DE;transition:color .3s;padding:14px 0;display:block}
.menu>ul>li>a:hover{color:var(--gold-lite)}
.sub{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:max-content;
background:var(--void);border:1px solid var(--line);opacity:0;visibility:hidden;
transition:opacity .28s,transform .28s,visibility .28s;z-index:40;box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.menu>ul>li.has-sub:hover .sub,.menu>ul>li.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub__in{display:flex;gap:36px;padding:26px 30px}
.sub__col h4{font-family:var(--body);font-weight:400;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.sub__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sub__col a{font-size:14.5px;color:#B9C6CD;white-space:nowrap;transition:color .25s}
.sub__col a:hover{color:var(--gold-lite)}
@media (max-width:980px){
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;cursor:pointer;margin-left:auto}
.burger span{display:block;height:1.5px;background:#EFEAE1;transition:transform .3s,opacity .3s}
.navtoggle:checked~.burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navtoggle:checked~.burger span:nth-child(2){opacity:0}
.navtoggle:checked~.burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav{flex-wrap:wrap}
.menu{flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .4s ease}
.navtoggle:checked~.menu{max-height:80vh;overflow-y:auto}
.menu>ul{flex-direction:column;align-items:stretch;gap:0;padding:14px 0 20px}
.menu>ul>li>a{padding:13px 0;border-bottom:1px solid var(--line)}
.sub{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:0;box-shadow:none}
.sub__in{flex-direction:column;gap:16px;padding:12px 0 12px 16px}
.sub__col a{white-space:normal}
}
.foot__logo{width:64px;height:64px;border-radius:50%;display:block;margin:0 0 30px}
/* ---- logo lockups ---- */
.brand__logo{height:46px;width:auto;display:block}
.foot__brand{display:flex;justify-content:center;margin:0 0 12px}
.foot__brand img{width:min(300px,62vw);height:auto;display:block}
.foot__mark{display:none}
@media (max-width:980px){.brand__logo{height:38px}}
@media (max-width:520px){.brand__logo{height:32px}}
/* dropdowns near the right edge anchor right, or they push the page sideways */
@media (min-width:981px){
.menu>ul>li:nth-last-child(-n+3) .sub{left:auto;right:0;transform:translate(0,10px)}
.menu>ul>li:nth-last-child(-n+3).has-sub:hover .sub,
.menu>ul>li:nth-last-child(-n+3).has-sub:focus-within .sub{transform:translate(0,0)}
.sub{max-width:min(560px,92vw)}
.sub__col a{white-space:normal}
}
/* =========================================================
Header bar / footer ground / logo scale
========================================================= */
/* Footer ground */
.foot{background:#1E2A40}
/* Solid header bar everywhere EXCEPT the home page, which keeps the
transparent nav overlaid on the full-bleed hero. */
.nav-shell{background:#1E2A40;position:relative;border-bottom:1px solid rgba(255,255,255,.10)}
body.home .nav-shell{background:transparent;position:absolute;left:0;right:0;top:0;border-bottom:none}
/* the overlay clearance only applies where the nav actually overlays */
.jlt-has-hero .hero__in{padding-top:30px}
body.home .hero__in{padding-top:clamp(100px,13vh,138px)}
body.home .nav-shell .nav{padding:30px 28px}
/* Logo, 50% larger */
.brand__logo{height:69px}
@media (max-width:980px){.brand__logo{height:57px}}
@media (max-width:520px){.brand__logo{height:48px}}
/* the larger logo makes the overlaid nav taller — give the headline room */
body.home .hero__in{padding-top:clamp(132px,17vh,176px)}
@media (max-width:980px){body.home .hero__in{padding-top:clamp(112px,15vh,150px)}}
/* inner pages that have a hero image still get the solid bar —
this has to outrank the earlier .jlt-has-hero rule */
body:not(.home).jlt-has-hero .nav-shell{
background:#1E2A40;position:relative;border-bottom:1px solid rgba(255,255,255,.10)}
body:not(.home).jlt-has-hero .nav-shell .nav{padding:22px 28px}
body:not(.home).jlt-has-hero .hero__in{padding-top:30px}
/* =========================================================
Article blocks — heading left, body right.
Was: 66ch of text hugging the left edge of a 1184px container,
which read as a broken layout rather than a measure.
========================================================= */
@media (min-width:900px){
.art-block{
display:grid;
grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
gap:clamp(32px,5vw,72px);
align-items:start;
max-width:none;
}
.art-block h2{margin-bottom:0;position:sticky;top:28px}
.art-block p{max-width:62ch;margin:0}
.article .byline{margin-left:0}
}
/* keep the single-column stack under 900px, but stop the text hugging */
@media (max-width:899px){
.art-block{max-width:66ch}
}
/* =========================================================
Banner heroes on inner pages
========================================================= */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero .wrap{position:relative;z-index:2}
.phero--img{background:var(--void-2)}
.phero--img::before{content:"";position:absolute;inset:0;z-index:0;
background:var(--hero) center/cover no-repeat;transform:scale(1.04)}
.phero--img::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(10,19,25,.86) 0%,rgba(10,19,25,.62) 45%,rgba(10,19,25,.93) 100%)}
.phero--img,.phero--img .lede,.phero--img .answer{color:#EFEAE1}
.phero--img .answer{color:#CBD8DE}
.phero--img .eyebrow{color:var(--gold-lite)}
.phero--img .eyebrow::after{background:rgba(255,255,255,.2)}
.phero--img h1{color:#fff}
/* =========================================================
Single listing
========================================================= */
.listing{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,68px);align-items:start}
@media (max-width:900px){.listing{grid-template-columns:1fr}}
.listing__copy{font-size:17.5px;line-height:1.74;color:#B9C6CD;max-width:64ch}
.listing__copy h2,.listing__copy h3{font-family:var(--display);font-weight:400;color:#EFEAE1;
font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.02em;margin:34px 0 12px}
.listing__copy p{margin:0 0 16px}
.listing__copy ul{margin:0 0 16px;padding-left:1.1em}
.bookbox{position:sticky;top:24px;border:1px solid var(--line);background:var(--void-2);padding:28px 26px 30px;
display:flex;flex-direction:column;gap:14px}
.bookbox__price{font-family:var(--display);font-size:38px;line-height:1;color:var(--gold-lite);margin:0}
.bookbox__price em{font-style:normal;font-family:var(--body);font-size:12.5px;color:var(--mute);letter-spacing:.04em}
.bookbox__note{margin:0;font-size:14.5px;color:#A9B9C1;line-height:1.6}
.bookbox__cta{display:block;text-align:center;background:var(--gold);color:#0A1319;padding:15px 20px;
font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:background .3s}
.bookbox__cta:hover{background:var(--gold-lite)}
.bookbox__alt{font-size:13px;color:var(--mute);text-align:center;transition:color .3s}
.bookbox__alt:hover{color:var(--gold-lite)}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:44px}
.gal__item span{display:block;aspect-ratio:4/3;background-position:center;background-size:cover;
transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gal__item{overflow:hidden;display:block}
.gal__item:hover span{transform:scale(1.06)}
.map{width:100%;height:min(420px,52vh);border:1px solid var(--line);margin-top:38px;display:block;filter:grayscale(.25) contrast(1.05)}
/* ---- gallery lightbox ---- */
.gal__item{cursor:zoom-in}
.lbox{position:fixed;inset:0;z-index:9999;background:rgba(8,15,20,.97);
display:flex;align-items:center;justify-content:center;
opacity:0;transition:opacity .22s ease;overscroll-behavior:contain}
.lbox.is-open{opacity:1}
.lbox__stage{margin:0;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:14px}
.lbox__img{max-width:92vw;max-height:78vh;width:auto;height:auto;object-fit:contain;
display:block;border-radius:2px;box-shadow:0 30px 90px rgba(0,0,0,.6);
opacity:0;transition:opacity .18s ease}
.lbox__img.is-ready{opacity:1}
.lbox__cap{margin:0;font-family:var(--body);font-size:13px;font-weight:300;
letter-spacing:.04em;color:#B9C6CD;text-align:center;max-width:60ch}
.lbox__count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);margin:0;
font-family:var(--body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lite)}
.lbox__close,.lbox__nav{position:absolute;background:transparent;border:0;cursor:pointer;
color:#EFEAE1;font-family:var(--body);line-height:1;padding:0;
transition:color .2s ease,background .2s ease}
.lbox__close{top:20px;right:24px;font-size:38px;width:48px;height:48px}
.lbox__nav{top:50%;transform:translateY(-50%);font-size:46px;width:64px;height:72px;
border-radius:2px}
.lbox__nav--prev{left:12px}
.lbox__nav--next{right:12px}
.lbox__close:hover,.lbox__nav:hover{color:var(--gold-lite);background:rgba(255,255,255,.06)}
.lbox__close:focus-visible,.lbox__nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body.lbox-open{overflow:hidden}
@media (max-width:700px){
.lbox__nav{font-size:34px;width:46px;height:60px}
.lbox__nav--prev{left:2px} .lbox__nav--next{right:2px}
.lbox__img{max-height:70vh}
.lbox__cap{font-size:12px;padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
.lbox,.lbox__img{transition:none}
}
/* ---- villa index: filters ---- */
.vfilter{display:flex;flex-wrap:wrap;gap:26px 34px;align-items:flex-start;
padding:0 0 30px;border-bottom:1px solid var(--line);margin-bottom:40px}
.vfilter__group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vfilter__label{font-family:var(--body);font-size:10px;letter-spacing:.24em;
text-transform:uppercase;color:var(--gold);margin-right:6px}
.vchip{font-family:var(--body);font-size:12px;font-weight:300;letter-spacing:.06em;
color:#B9C6CD;background:transparent;border:1px solid var(--line);
padding:8px 15px;border-radius:2px;cursor:pointer;transition:all .22s ease}
.vchip:hover{color:#EFEAE1;border-color:rgba(255,255,255,.34)}
.vchip.is-on{color:#0A1319;background:var(--gold);border-color:var(--gold)}
.vchip:focus-visible{outline:2px solid var(--gold-lite);outline-offset:2px}
.vfilter__count{margin:0;flex:1 1 100%;font-family:var(--body);font-size:12px;
letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.vcard{display:contents}
.vcard[hidden]{display:none}
.light .vchip{color:#3A5460;border-color:rgba(20,35,43,.2)}
.light .vchip:hover{color:var(--ink);border-color:rgba(20,35,43,.45)}
.light .vchip.is-on{color:#0A1319;background:var(--gold);border-color:var(--gold)}
.light .vfilter__label{color:#8A5D12}
@media (max-width:700px){
.vfilter{gap:18px 20px}
.vfilter__group{gap:6px}
.vchip{font-size:11px;padding:7px 12px}
}
/* ---- team ---- */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:14px;
margin-top:52px;align-items:start}
.team__card{position:relative;margin:0;overflow:hidden;border-radius:2px;
aspect-ratio:338/615;background:var(--void-2)}
.team__img{position:absolute;inset:0;background-size:cover;background-position:50% 8%;
filter:grayscale(1) contrast(1.02);transition:filter .5s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.team__card:hover .team__img,.team__card:focus-within .team__img{filter:grayscale(0);transform:scale(1.045)}
.team__scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(10,19,25,.9) 0%,rgba(10,19,25,.3) 36%,rgba(10,19,25,0) 62%)}
.team__body{position:absolute;left:0;right:0;bottom:0;padding:18px 15px}
.team__name{display:block;font-family:var(--display);font-weight:400;font-size:22px;
line-height:1.04;letter-spacing:-.015em;color:#EFEAE1}
.team__role{display:block;margin-top:7px;font-family:var(--body);font-weight:300;font-size:9.5px;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite)}
.light .team__card{background:var(--paper-2)}
@media (max-width:620px){
.team{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
.team__name{font-size:18px}
.team__role{font-size:9px;letter-spacing:.16em}
.team__body{padding:13px 11px}
}
@media (prefers-reduced-motion:reduce){
.team__img{transition:none}
.team__card:hover .team__img{transform:none}
}
/* =========================================================================
MOBILE NAV (<=980px) — deliberately static.
Earlier versions animated the panel with max-height and injected +/- toggle
buttons. The animation left rows laid out but unpainted in Safari, and the
injected buttons leaked into the desktop nav when their hiding rule was lost.
Both failure modes are gone because neither mechanism exists any more: every
section is simply open, as plain blocks. Longer to scroll, impossible to
break.
====================================================================== */
.subtog{display:none !important}
@media (max-width:980px){
.menu{
flex-basis:100%;box-sizing:content-box;
margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px;
background:#1E2A40;
border-top:1px solid rgba(255,255,255,.10);
max-height:0;overflow:hidden}
.navtoggle:checked~.menu{max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.menu>ul{display:block;width:100%;box-sizing:border-box;margin:0;padding:10px 0 18px}
.menu>ul>li{display:block;width:100%;box-sizing:border-box;position:relative}
.menu>ul>li>a{
display:block;padding:14px 0;
border-bottom:1px solid var(--line);
font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#CBD8DE}
/* panels: always open, plain blocks */
.menu>ul>li.has-sub .sub{
display:block;
position:static;width:100%;box-sizing:border-box;
min-width:0;max-width:100%;max-height:none;
margin:0;padding:0;
background:transparent;border:0;box-shadow:none;
transform:none;opacity:1;visibility:visible;overflow:visible;transition:none}
.sub__in{display:block;width:100%;box-sizing:border-box;margin:0;padding:2px 0 10px}
.sub__col{display:block;width:100%;box-sizing:border-box;margin:0;padding:0}
.sub__col h4{
margin:14px 0 2px;font-size:9.5px;letter-spacing:.24em;
text-transform:uppercase;color:var(--gold)}
.sub__col ul{display:block;width:100%;margin:0;padding:0;list-style:none}
.sub__col li{display:block;width:100%}
.menu .sub__col a{
display:block;width:auto;
padding:11px 0 11px 14px;
font-size:14px;line-height:1.35;letter-spacing:.02em;text-transform:none;
color:#D7E0E5;white-space:normal;
border-bottom:1px solid rgba(255,255,255,.07)}
.menu .sub__col a:hover{color:var(--gold-lite)}
}
/* ---- attribution ---- */
.foot__waggle{
border-top:1px solid rgba(255,255,255,.16);
margin-top:clamp(30px,5vw,52px);
padding-top:clamp(26px,4vw,40px);
display:flex;justify-content:center}
.waggle{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none}
.waggle__eyebrow{
font-family:var(--body);font-size:9.5px;font-weight:500;
letter-spacing:.24em;text-transform:uppercase;color:#6E828D;
transition:color .3s ease}
.waggle__logo{height:4.5rem;width:auto;display:block;opacity:.85;transition:opacity .3s ease}
.waggle:hover .waggle__eyebrow{color:#8FA3AC}
.waggle:hover .waggle__logo{opacity:1}
@media (max-width:560px){
.waggle__logo{height:3.6rem}
.waggle__eyebrow{font-size:9px;letter-spacing:.2em}
}
/* ---- embedded video ---- */
.vid{position:relative;aspect-ratio:16/9;width:100%;margin-top:44px;
background:var(--void-2);border:1px solid var(--line);overflow:hidden}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}