/* EXP-3 — the approved experience-page design (artifact 3bNJ8mV4E6ZWzgy4mB6Rbp),
   ported as-is and scoped to .ve-exp so the theme header and footer are untouched.
   The sample's own topbar, site header and footer rules are dropped. */

/* The villaexperience.com system, measured from the live homepage, stories and the Akumal microsite on 18 Oct 2026.
   Ivory ground, navy ink, clay pills, terracotta ink, Cormorant Garamond display with blush italics, Jost text. One deliberate light look, as on the live site. */
.ve-exp{
  --ivory:#fdf8f5; --ivory-2:#f4ede8; --sand:#ebe1d6; --white:#fff;
  --ink:#1a2142; --ink-soft:rgba(26,33,66,.68); --ink-faint:rgba(26,33,66,.45);
  --line:#e8ddd4; --gold:#a87d6a; --gold-ink:#7a5b4d; --gold-lt:#e3c9bd; --clay:#cfa190; --blush:#e7c9bb; --warm-dk:#2a241e;
  --shadow:0 18px 50px -22px rgba(26,33,66,.28); --shadow-lg:0 30px 80px -30px rgba(26,33,66,.38);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --script:"Allura","Cormorant Garamond",cursive;
  /* chart */
  --sea:#eef0f1; --contour:#3d5a80; --shallow:#e2eaee; --land:#f3eadf; --coast:#1a2142; --grat:#1a2142; --paper:#fdf8f5;
  color-scheme:light;
}
.ve-exp *{box-sizing:border-box;margin:0;padding:0}
.ve-exp{scroll-behavior:smooth}
.ve-exp{font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased}
.ve-exp img, .ve-exp video{max-width:100%;display:block}
.ve-exp a{color:inherit;text-decoration:none}
.ve-exp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ve-exp :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ve-exp .wrap{max-width:1200px;margin:0 auto;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.ve-exp .pad{padding-block:110px}.ve-exp .pad-sm{padding-block:84px}
.ve-exp .eyebrow{display:inline-block;font:400 12px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-ink)}
.ve-exp .eyebrow.light{color:var(--gold-lt)}
.ve-exp h1, .ve-exp h2, .ve-exp h3, .ve-exp h4{font-family:var(--serif);font-weight:400;color:var(--ink);text-wrap:balance}
.ve-exp h2{font-size:clamp(32px,4.2vw,50px);line-height:1.12;letter-spacing:.005em}
.ve-exp h2 em, .ve-exp h1 em{font-style:italic}
.ve-exp h3{font-size:26px;font-weight:500;line-height:1.15}
.ve-exp .sec-head{max-width:760px}.ve-exp .sec-head.center{margin:0 auto;text-align:center}
.ve-exp .sec-head h2{margin-top:14px}.ve-exp .sec-head p{color:var(--ink-soft);margin-top:18px;font-size:18px}
.ve-exp .rule{width:56px;height:1px;background:var(--gold);margin:26px auto 0}
.ve-exp .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons, as on the live site */
.ve-exp .pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:17px 30px;border-radius:999px;transition:all .4s var(--ease);white-space:nowrap}
.ve-exp .pill.clay{background:var(--clay);color:var(--ink)}.ve-exp .pill.clay:hover{background:var(--ink);color:#fff}
.ve-exp .pill.navy{background:var(--ink);color:#fff}.ve-exp .pill.navy:hover{background:var(--gold-ink)}
.ve-exp .pill.ghost{border:1px solid rgba(26,33,66,.35);color:var(--ink)}.ve-exp .pill.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ve-exp .pill.ghost-light{border:1px solid rgba(255,255,255,.7);color:#fff}.ve-exp .pill.ghost-light:hover{background:#fff;color:var(--ink)}
.ve-exp .textlink{font:500 11.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);border-bottom:1px solid var(--gold-lt);padding-bottom:3px;transition:border-color .3s}
.ve-exp .textlink:hover{border-color:var(--gold-ink)}

/* hero */
.ve-exp .hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--warm-dk)}
.ve-exp .hero video, .ve-exp .hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ve-exp .hero .kb{animation:kb 22s var(--ease) forwards;transform-origin:60% 50%}@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.ve-exp .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,21,17,.42) 0%,rgba(26,21,17,.1) 28%,rgba(26,21,17,.35) 55%,rgba(26,21,17,.82) 100%),linear-gradient(90deg,rgba(26,21,17,.45),rgba(26,21,17,0) 60%);z-index:1}
@media (max-width:760px){.ve-exp .hero::after{background:linear-gradient(180deg,rgba(26,21,17,.55),rgba(26,21,17,.45) 40%,rgba(26,21,17,.85))}}
.ve-exp .hero .inner{position:relative;z-index:2;width:100%;padding-block:150px 150px}
.ve-exp .hero .eyebrow{color:#fff;opacity:.9;margin-bottom:22px}
.ve-exp .hero h1{color:#fff;font-size:clamp(54px,8.4vw,112px);line-height:.98;letter-spacing:-.01em;max-width:980px}
.ve-exp .hero h1 em{display:block;color:var(--blush);font-size:.62em;line-height:1.1;margin-top:10px}
.ve-exp .hero .sub{max-width:620px;font-size:clamp(17px,1.8vw,20px);line-height:1.7;margin:26px 0 34px;color:rgba(255,255,255,.92)}
.ve-exp .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.ve-exp .specs{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);background:linear-gradient(0deg,rgba(38,32,26,.62),rgba(38,32,26,.2))}
.ve-exp .specs .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-block:20px}
.ve-exp .spec{display:flex;gap:14px;align-items:center;padding-inline:18px;border-left:1px solid rgba(255,255,255,.16);min-width:0}
.ve-exp .spec:first-child{border-left:0;padding-left:0}
.ve-exp .spec .ico{width:26px;height:26px;color:var(--blush)}
.ve-exp .spec b{display:block;font:400 22px/1.1 var(--serif);color:#fff}
.ve-exp .spec span{display:block;font:400 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:3px}
@media (max-width:980px){.ve-exp .specs{position:relative;background:var(--warm-dk)}.ve-exp .specs .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}.ve-exp .spec{border-left:0;padding-left:0}.ve-exp .hero .inner{padding-block:130px 60px}.ve-exp .hero{flex-direction:column;align-items:stretch;justify-content:flex-end}}
.ve-exp .crumbs{font-size:13px;color:var(--ink-faint);padding-block:22px 0;letter-spacing:.02em}
.ve-exp .crumbs a:hover{color:var(--gold-ink)}

/* intro split */
.ve-exp .split{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center}
.ve-exp .split .txt p{color:var(--ink-soft);margin-top:20px}
.ve-exp .split .txt p.lead{font-size:19px;color:var(--ink);}
.ve-exp .split .txt p.lead::first-letter{font-family:var(--serif);float:left;font-size:78px;line-height:.82;padding:8px 12px 0 0;color:var(--gold-ink)}
.ve-exp .img-frame{position:relative;z-index:0}
.ve-exp .img-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow-lg)}
.ve-exp .img-frame::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--gold);z-index:-1}
.ve-exp .intro-fig figcaption{margin-top:40px;font:italic 400 17px/1.5 var(--serif);color:var(--ink-soft);padding-left:2px}
.ve-exp .quote-inline{border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin-top:30px}
.ve-exp .quote-inline p{font:italic 400 23px/1.45 var(--serif);color:var(--ink)!important;margin:0!important}
@media (max-width:900px){.ve-exp .split{grid-template-columns:1fr;gap:56px}.ve-exp .img-frame::before{inset:14px -14px -14px 14px}}

/* options */
.ve-exp .alt{background:var(--ivory-2)}
.ve-exp .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:26px;margin-top:60px;align-items:stretch}
.ve-exp .opt{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .5s var(--ease),transform .5s var(--ease);position:relative}
.ve-exp .opt:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.ve-exp .opt .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.ve-exp .opt .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ve-exp .opt:hover .ph img{transform:scale(1.05)}
.ve-exp .opt .flag{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(253,248,245,.95);color:var(--gold-ink);font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:9px 12px}
.ve-exp .opt .flag .ico{width:14px;height:14px}
.ve-exp .opt .bd{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.ve-exp .opt .kind{font:400 10.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink)}
.ve-exp .opt h3{margin-top:10px;font-size:27px}
.ve-exp .opt .meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.ve-exp .opt .meta span{display:inline-flex;align-items:center;gap:7px}
.ve-exp .opt .meta .ico{width:17px;height:17px;color:var(--gold)}
.ve-exp .opt ul{list-style:none;margin-top:16px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);display:grid;gap:9px}
.ve-exp .opt li{display:flex;gap:10px}
.ve-exp .opt li .ico{width:15px;height:15px;color:var(--gold);margin-top:3px}
.ve-exp .opt .note{font-size:13.5px;color:var(--ink-faint);margin-top:14px;font-style:italic}
.ve-exp .opt .foot{margin-top:auto;padding-top:24px}
.ve-exp .opt .price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}
.ve-exp .opt .price b{font:400 24px var(--serif)}
.ve-exp .opt .price small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.ve-exp .opt .acts{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ve-exp .opt .pill{padding:15px 24px}
.ve-exp .opt .op{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:18px}
.ve-exp .disclose{text-align:center;font-size:13px;color:var(--ink-faint);margin-top:38px}
.ve-exp .groupnote{max-width:760px;margin:46px auto 0;text-align:center;font:italic 400 21px/1.5 var(--serif);color:var(--ink)}

/* film */
.ve-exp .film-band{background:var(--warm-dk);color:#fff}
.ve-exp .film-band .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:60px;align-items:center}
.ve-exp .film{position:relative;display:block;overflow:hidden;cursor:pointer;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);width:100%}
.ve-exp .film img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .9s var(--ease),filter .5s}
.ve-exp .film::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(26,21,17,.08),rgba(26,21,17,.35));transition:background .5s}
.ve-exp .film .play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff}
.ve-exp .film .ring{width:86px;height:86px;border:1px solid rgba(255,255,255,.85);border-radius:50%;display:grid;place-items:center;background:rgba(26,33,66,.34);backdrop-filter:blur(3px);transition:transform .45s var(--ease),background .45s}
.ve-exp .film .ring svg{width:22px;height:22px;fill:#fff;margin-left:4px}
.ve-exp .film .play span{font:400 11.5px var(--sans);letter-spacing:.3em;text-transform:uppercase}
.ve-exp .film:hover img{transform:scale(1.035);filter:brightness(1.05)}.ve-exp .film:hover .ring{transform:scale(1.08);background:var(--ink)}
.ve-exp .film-band h2{color:#fff}.ve-exp .film-band p{color:rgba(255,255,255,.75);margin-top:18px}
.ve-exp .film-band .credit{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);margin-top:26px}
@media (max-width:900px){.ve-exp .film-band .wrap{grid-template-columns:1fr;gap:34px}}

/* day */
.ve-exp .steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:64px;position:relative}
.ve-exp .steps::before{content:"";position:absolute;left:calc(100%/var(--n)/2);right:calc(100%/var(--n)/2);top:36px;height:1px;background:var(--gold)}
.ve-exp .step{text-align:center;padding-inline:12px;position:relative}
.ve-exp .step .dot{width:72px;height:72px;margin:0 auto;border-radius:50%;background:var(--ivory);border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold-ink);position:relative;z-index:1}
.ve-exp .step .dot .ico{width:28px;height:28px}
.ve-exp .step .no{display:block;font:italic 400 18px var(--serif);color:var(--gold);margin-top:18px}
.ve-exp .step h4{font-size:23px;font-weight:500;margin-top:4px}
.ve-exp .step p{font-size:14.5px;color:var(--ink-soft);margin-top:6px;line-height:1.55}
.ve-exp .steps-note{text-align:center;font-size:13px;color:var(--ink-faint);margin-top:40px}
@media (max-width:820px){.ve-exp .steps{grid-template-columns:1fr;gap:30px}.ve-exp .steps::before{left:36px;right:auto;top:36px;bottom:36px;width:1px;height:auto}.ve-exp .step{display:grid;grid-template-columns:72px 1fr;gap:20px;text-align:left;align-items:start;padding:0}.ve-exp .step .dot{margin:0}.ve-exp .step .no{margin-top:4px}}

/* chart */
.ve-exp .chartwrap{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:start;margin-top:60px}
.ve-exp .chart-mat{background:var(--white);padding:18px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.ve-exp .chart-svg{width:100%;height:auto;display:block}
.ve-exp .chart-svg .tick{font:400 9.5px var(--sans);letter-spacing:.12em;fill:var(--gold-ink)}
.ve-exp .chart-svg .town{font:italic 500 15px var(--serif);fill:var(--ink)}
.ve-exp .chart-svg .bay{font:italic 400 36px var(--serif);fill:var(--ink);opacity:.5;letter-spacing:.03em}
.ve-exp .chart-svg .ocean{font:400 11px var(--sans);letter-spacing:.55em;fill:var(--ink);opacity:.4}
.ve-exp .chart-svg .isl{font:italic 500 18px var(--serif);fill:var(--ink)}
.ve-exp .chart-svg .rosen{font:500 13px var(--serif);fill:var(--ink)}
.ve-exp .chart-svg .mk-l{font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;fill:var(--ink)}
.ve-exp .chart-svg .route{fill:none;stroke:var(--gold-ink);stroke-width:2.2;stroke-dasharray:2 7;stroke-linecap:round;transition:opacity .5s}
.ve-exp .chart-svg .route.off{opacity:.15}
.ve-exp .chart-cap{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.ve-exp .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.ve-exp .chip{font:400 11.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:11px 16px;border:1px solid var(--line);background:var(--white);color:var(--ink-soft);transition:all .3s}
.ve-exp .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ve-exp .legend{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.ve-exp .legend li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.ve-exp .legend .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold-ink);background:var(--white)}
.ve-exp .legend .ic .ico{width:19px;height:19px}
.ve-exp .legend b{display:block;font:500 20px/1.2 var(--serif)}
.ve-exp .legend div>span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.ve-exp .fromvilla{margin-top:30px;padding:26px 28px;background:var(--white);border:1px solid var(--line)}
.ve-exp .fromvilla label{display:block;font:400 10.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.ve-exp .select{position:relative}
.ve-exp .select select{appearance:none;width:100%;font:400 22px var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:4px 30px 8px 0;cursor:pointer}
.ve-exp .select::after{content:"";position:absolute;right:4px;top:12px;width:9px;height:9px;border-right:1.2px solid var(--ink);border-bottom:1.2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.ve-exp .fromvilla p{margin-top:16px;font-size:15px;color:var(--ink-soft);line-height:1.6}
.ve-exp .fromvilla p b{font-weight:500;color:var(--ink)}
@media (max-width:980px){.ve-exp .chartwrap{grid-template-columns:1fr}}

/* gallery */
.ve-exp .ggrid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:12px;margin-top:60px}
.ve-exp .ggrid button{position:relative;overflow:hidden;cursor:zoom-in;padding:0}
.ve-exp .ggrid button:nth-child(1){grid-column:span 4;grid-row:span 3}
.ve-exp .ggrid button:nth-child(2){grid-column:span 2;grid-row:span 2}
.ve-exp .ggrid button:nth-child(3){grid-column:span 2;grid-row:span 1}
.ve-exp .ggrid button:nth-child(4), .ve-exp .ggrid button:nth-child(5), .ve-exp .ggrid button:nth-child(6){grid-column:span 2;grid-row:span 2}
.ve-exp .ggrid button:nth-child(7){grid-column:span 3;grid-row:span 2}
.ve-exp .ggrid button:nth-child(8){grid-column:span 3;grid-row:span 2}
.ve-exp .ggrid button:nth-child(9){display:none}
.ve-exp .ggrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ve-exp .ggrid button::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(26,21,17,.6));opacity:0;transition:opacity .5s}
.ve-exp .ggrid .gc{position:absolute;left:18px;right:18px;bottom:14px;z-index:2;color:#fff;text-align:left;font:italic 400 19px/1.3 var(--serif);opacity:0;transform:translateY(8px);transition:all .5s var(--ease)}
.ve-exp .ggrid button:hover img{transform:scale(1.04)}.ve-exp .ggrid button:hover::after, .ve-exp .ggrid button:hover .gc{opacity:1;transform:none}
.ve-exp .gmore{text-align:center;margin-top:34px}
@media (max-width:760px){.ve-exp .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.ve-exp .ggrid button:nth-child(n){grid-column:span 1;grid-row:span 1}.ve-exp .ggrid button:nth-child(1){grid-column:span 2;grid-row:span 2}.ve-exp .ggrid button:nth-child(9){display:block}.ve-exp .ggrid .gc{display:none}}

/* season */
.ve-exp .months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ve-exp .m{padding:22px 4px 20px;text-align:center;border-left:1px solid var(--line);position:relative}
.ve-exp .m:first-child{border-left:0}
.ve-exp .m b{display:block;font:400 22px var(--serif);color:var(--ink-faint)}
.ve-exp .m .ico{width:24px;height:24px;margin:10px auto 0;color:transparent}
.ve-exp .m.on{background:var(--ink)}.ve-exp .m.on b{color:#fff}.ve-exp .m.on .ico{color:var(--blush)}
.ve-exp .m.sp{background:var(--clay)}.ve-exp .m.sp b{color:var(--ink)}.ve-exp .m.sp .ico{color:var(--ink)}
.ve-exp .m i{display:block;font:normal 400 9.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;margin-top:6px;color:transparent}
.ve-exp .m.on i{color:rgba(255,255,255,.75)}.ve-exp .m.sp i{color:var(--ink)}
.ve-exp .mlegend{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;margin-top:22px;font-size:13.5px;color:var(--ink-soft)}
.ve-exp .mlegend span{display:inline-flex;align-items:center;gap:10px}
.ve-exp .mlegend span::before{content:"";width:12px;height:12px;background:var(--ink)}
.ve-exp .mlegend span.sp::before{background:var(--clay)}
@media (max-width:760px){.ve-exp .months{grid-template-columns:repeat(6,minmax(0,1fr))}.ve-exp .m:nth-child(7){border-left:0}.ve-exp .m:nth-child(n+7){border-top:1px solid var(--line)}}

/* good to know */
.ve-exp .gtk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:60px}
.ve-exp .gtk div{text-align:center}
.ve-exp .gtk .ic{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold-ink)}
.ve-exp .gtk .ic .ico{width:26px;height:26px}
.ve-exp .gtk h4{font-size:22px;font-weight:500}
.ve-exp .gtk p{font-size:15px;color:var(--ink-soft);margin-top:8px;line-height:1.6}
@media (max-width:900px){.ve-exp .gtk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ve-exp .gtk{grid-template-columns:1fr}}

/* our take */
.ve-exp .take{background:var(--ivory-2);position:relative;overflow:hidden}
.ve-exp .take .shell{position:absolute;right:-60px;bottom:-70px;width:340px;opacity:.07}
.ve-exp .take .wrap{max-width:900px;text-align:center;position:relative}
.ve-exp .take blockquote{font:italic 400 clamp(26px,3.2vw,36px)/1.42 var(--serif);color:var(--ink);margin-top:26px}
.ve-exp .take .sig{margin-top:34px}
.ve-exp .take .sig .name{display:block;width:330px;max-width:80%;height:auto;margin:0 auto}
.ve-exp .take .sig .role{display:block;font:400 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px}
.ve-exp .take .pair{margin-top:40px;padding-top:26px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-soft)}
.ve-exp .take .pair a{color:var(--gold-ink);border-bottom:1px solid var(--gold-lt)}
.ve-exp .draftnote{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:18px}

/* faq */
.ve-exp .faq{max-width:820px;margin:56px auto 0;border-top:1px solid var(--line)}
.ve-exp .faq details{border-bottom:1px solid var(--line)}
.ve-exp .faq summary{list-style:none;cursor:pointer;padding:26px 50px 26px 0;font:400 24px/1.3 var(--serif);position:relative}
.ve-exp .faq summary::-webkit-details-marker{display:none}
.ve-exp .faq summary::after{content:"";position:absolute;right:8px;top:34px;width:11px;height:11px;border-right:1.2px solid var(--gold-ink);border-bottom:1.2px solid var(--gold-ink);transform:rotate(45deg);transition:transform .35s var(--ease)}
.ve-exp .faq details[open] summary::after{transform:rotate(-135deg);top:40px}
.ve-exp .faq p{color:var(--ink-soft);padding:0 50px 28px 0;max-width:720px}

/* concierge band */
.ve-exp .cband{background:var(--ink);color:#fff;text-align:center}
.ve-exp .cband h2{color:#fff}.ve-exp .cband h2 em{color:var(--blush)}
.ve-exp .cband p{color:rgba(255,255,255,.75);max-width:620px;margin:20px auto 0}
.ve-exp .cband .cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:36px}

/* pairs */
.ve-exp .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:60px}
.ve-exp .card{display:block}
.ve-exp .card .im{overflow:hidden;aspect-ratio:4/5}
.ve-exp .card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ve-exp .card:hover img{transform:scale(1.05)}
.ve-exp .card .eyebrow{margin-top:22px;font-size:10.5px}
.ve-exp .card h3{margin-top:8px;font-size:28px}
.ve-exp .card p{font-size:15px;color:var(--ink-soft);margin-top:6px}
.ve-exp .card .textlink{display:inline-block;margin-top:16px}
@media (max-width:900px){.ve-exp .cards{grid-template-columns:1fr 1fr}}@media (max-width:600px){.ve-exp .cards{grid-template-columns:1fr}}

/* lightboxes (Akumal component, extended with a title and description) */
.ve-exp .lb{position:fixed;inset:0;background:rgba(32,27,22,.96);z-index:200;display:none;align-items:center;justify-content:center;padding:40px 90px}
.ve-exp .lb.open{display:flex}
.ve-exp .lb-fig{display:flex;flex-direction:column;align-items:center;max-width:min(1280px,100%)}
.ve-exp .lb-media img{max-width:100%;max-height:72vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);transition:opacity .3s var(--ease)}
.ve-exp .lb-media video{width:min(1200px,84vw);max-height:74vh;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ve-exp .lb-cap{margin-top:22px;text-align:center;max-width:760px;padding:0 16px}
.ve-exp .lb-cap h3{color:#fff;font:400 30px/1.15 var(--serif)}
.ve-exp .lb-cap p{font:italic 400 19px/1.45 var(--serif);color:rgba(253,248,245,.82);margin-top:8px}
.ve-exp .lb-cap .cnt{display:block;margin-top:12px;font:400 10.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lt)}
.ve-exp .lb-thumbs{display:flex;gap:8px;margin-top:22px;justify-content:center;flex-wrap:wrap}
.ve-exp .lb-thumbs button{width:62px;height:42px;overflow:hidden;opacity:.45;transition:opacity .3s;outline-offset:2px}
.ve-exp .lb-thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 1px var(--gold-lt)}
.ve-exp .lb-thumbs img{width:100%;height:100%;object-fit:cover}
.ve-exp .lb .x{position:absolute;top:22px;right:28px;width:48px;height:48px;display:grid;place-items:center;color:#fff;opacity:.85}
.ve-exp .lb .x svg{width:22px;height:22px;stroke:#fff;stroke-width:1.2}
.ve-exp .lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;transition:all .3s}
.ve-exp .lb .nav:hover{background:#fff;color:var(--ink)}
.ve-exp .lb .nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.3}
.ve-exp .lb .prev{left:24px}.ve-exp .lb .next{right:24px}
html.lb-lock{overflow:hidden}
@media (max-width:760px){.ve-exp .lb{padding:60px 14px 90px}.ve-exp .lb .nav{top:auto;bottom:18px;transform:none;width:48px;height:48px}.ve-exp .lb .prev{left:calc(50% - 60px)}.ve-exp .lb .next{right:calc(50% - 60px)}.ve-exp .lb-thumbs{display:none}.ve-exp .lb-cap h3{font-size:24px}.ve-exp .lb-cap p{font-size:16px}}

/* mobile booking bar */
.ve-exp .sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:14px;background:rgba(253,248,245,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px max(18px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
.ve-exp .sticky .t{font:400 20px/1.1 var(--serif)}.ve-exp .sticky .t small{display:block;font:400 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.ve-exp .sticky .pill{padding:14px 22px}
@media (max-width:760px){.ve-exp .sticky{display:flex}.ve-exp footer{padding-bottom:70px}}
@media (max-width:760px){.ve-exp .pad{padding-block:80px}.ve-exp .pad-sm{padding-block:64px}.ve-exp .wrap{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}}
@media (prefers-reduced-motion:reduce){.ve-exp *{transition:none!important;animation:none!important}}


/* ---- film lightbox: the villa-microsite component (microsite-components-v2), scoped ---- */
.ve-exp .vlb{position:fixed;inset:0;background:rgba(26,21,17,.96);z-index:210;display:none;align-items:center;justify-content:center;padding:40px}
.ve-exp .vlb.open{display:flex}
.ve-exp .vlb-fig{margin:0;max-width:1180px;width:100%}
.ve-exp .vlb video{width:100%;height:auto;max-height:78vh;background:#000;display:block;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ve-exp .vlb figcaption{margin-top:14px;text-align:center;font-family:var(--serif);font-size:20px;font-style:italic;color:var(--ivory)}
.ve-exp .vlb .x{position:absolute;top:22px;right:28px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;font-size:34px;font-family:serif;line-height:1;cursor:pointer}
.ve-exp .vlb .x:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
html.vlb-lock{overflow:hidden}
@media(max-width:640px){.ve-exp .vlb{padding:16px}.ve-exp .vlb figcaption{font-size:16px}.ve-exp .vlb .x{top:8px;right:10px}}

/* ---- the real theme footer sits outside .ve-exp, so the mobile reserve bar needs room here ---- */
@media (max-width:760px){body.ve-exp-page{padding-bottom:72px}}

/* ---- breadcrumb: four levels, the current page last ---- */
.ve-exp .crumbs a{border-bottom:1px solid transparent}
.ve-exp .crumbs a:hover{border-color:var(--gold-lt)}
.ve-exp .crumbs [aria-current="page"]{color:var(--ink-soft)}

/* ---- concierge line under the reserve pills ---- */
.ve-exp .conciergeline{text-align:center;font-size:13.5px;color:var(--ink-faint);margin-top:30px}

/* ---- a page with no film band must leave no empty space; nothing to do but omit the section ---- */

/* ---- chart route groups (server-rendered; the chips toggle .off) ---- */
.ve-exp .chart-svg .rt{transition:opacity .5s}
.ve-exp .chart-svg .rt.off .route{opacity:.15}
.ve-exp .chart-svg .rt.off .boat{display:none}
@media (prefers-reduced-motion:reduce){.ve-exp .chart-svg .boat{display:none}}

/* ---- images that get their shape from aspect-ratio ----
   The sample's markup had no width/height attributes. Ours does (it must: every image
   carries its intrinsic size), and a specified height beats aspect-ratio on a replaced
   element, so these three say height:auto and let the ratio decide. */
.ve-exp .film img{height:auto}
.ve-exp .img-frame img{height:auto}
.ve-exp .opt .ph img,.ve-exp .card img,.ve-exp .ggrid img,.ve-exp .hero .poster{height:100%}

/* ===================================================================
   Theme isolation.
   wprentals styles bare elements (p, li, h4, blockquote …). Those rules beat the
   container-level inheritance the approved sample relies on, which changed the line
   height, the body size and put a terracotta bar down the "Our take" quote. These put
   the sample's own values back. Every component rule below carries more class
   specificity, so nothing the design sets is affected.
   =================================================================== */
.ve-exp p,.ve-exp li,.ve-exp span,.ve-exp div,.ve-exp figure,.ve-exp figcaption,
.ve-exp blockquote,.ve-exp summary,.ve-exp label,.ve-exp b,.ve-exp i,.ve-exp em,
.ve-exp small,.ve-exp a,.ve-exp button,.ve-exp select,.ve-exp ul,.ve-exp ol{
  font-family:inherit;font-size:inherit;line-height:inherit}
.ve-exp h4{line-height:inherit}
.ve-exp blockquote{border:0;padding:0;background:none;quotes:none}
.ve-exp blockquote::before,.ve-exp blockquote::after{content:none}
.ve-exp ul,.ve-exp ol,.ve-exp li{list-style:none}