/* =========================================================
   TRAVELÉR — Beyond the Ordinary
   ========================================================= */

/* Self-hosted fallback for the cursive/script brand font — guarantees the
   handwritten "script" style renders even if Google Fonts can't be reached
   (offline, blocked network, ad-blockers, etc). */
@font-face{
  font-family:"Dancing Script";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/dancing-script-latin-600-normal.woff2") format("woff2"),
      url("../fonts/dancing-script-latin-600-normal.woff") format("woff");
}
@font-face{
  font-family:"Dancing Script";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/dancing-script-latin-700-normal.woff2") format("woff2"),
      url("../fonts/dancing-script-latin-700-normal.woff") format("woff");
}

:root{
  --bg:        #131311;
  --bg-2:      #17161200;
  --panel:     #1a1815;
  --panel-2:   #191713;
  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.06);
  --gold:      #f7b31d;
  --gold-2:    #ffc93c;
  --gold-deep: #d99400;
  --cream:     #efe9dd;
  --white:     #ffffff;
  --muted:     #a49c8d;
  --muted-2:   #8f8677;
  --radius:    26px;
  --maxw:      1260px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --script:"Dancing Script", "Segoe Script", cursive;
  --sans:  "Poppins", "Segoe UI", system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--cream);
  font-family:var(--sans); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.section{ padding:52px 0; }
.gold{ color:var(--gold); }
.disp{ font-family:var(--serif); font-weight:700; letter-spacing:.2px; }
.script{ font-family:var(--script); font-weight:700; color:var(--gold); line-height:.9; }
.muted-p{ color:var(--muted); }

/* ---------- Kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--gold); font-weight:600; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px;
}
.gold-kicker{ font-size:.72rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:600; font-size:.9rem;
  border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, background .2s, box-shadow .2s, border-color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.pill-arrow{ padding:7px 7px 7px 22px; }
.btn-gold{ background:var(--gold); color:#1a1408; }
.btn-gold:hover{ background:var(--gold-2); box-shadow:0 10px 26px rgba(247,179,29,.28); }
.btn-dark{ background:#201e19; color:var(--cream); border-color:rgba(255,255,255,.14); }
.btn-dark:hover{ background:#272420; }
.arrow-circle{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:50%; background:#17130a; color:var(--gold);
  font-size:1rem; line-height:1; flex:none;
}
.btn-gold .arrow-circle{ background:#1a1408; color:var(--gold); }
.arrow-circle.light{ background:#100f0c; color:var(--cream); }
.arrow-circle.gold{ background:var(--gold); color:#1a1408; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(19,19,17,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-plane{ color:var(--gold); transform:rotate(-8deg); }
.brand-word{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--sans); font-weight:700; font-size:1.35rem; letter-spacing:.14em; color:var(--white); }
.brand-tag{ font-size:.56rem; letter-spacing:.34em; color:var(--muted); margin-top:4px; }
.main-nav{ flex:1; display:flex; justify-content:center; }
.nav-list{ list-style:none; display:flex; align-items:center; gap:24px; margin:0; padding:0; }
.nav-list a{ font-size:.88rem; font-weight:400; color:#d7d1c5; position:relative; padding:6px 0; white-space:nowrap; transition:color .2s; }
.nav-list a:hover{ color:var(--white); }
.nav-list a.active{ color:var(--gold); }
.nav-list a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); border-radius:2px; }
.header-cta{ margin-left:0; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--cream); border-radius:2px; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:30px 0 10px; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:20px; align-items:center; }
.hero-copy{ padding-right:10px; position:relative; }
/* decorative flourishes */
.doodle-trail{ position:absolute; left:-4px; top:-40px; color:var(--gold); opacity:.85; }
.doodle-sparkle{ position:absolute; right:6%; top:22px; color:var(--gold); }
.hero-title{
  font-family:var(--serif); font-weight:700; color:var(--white);
  font-size:clamp(2.7rem,4.7vw,4.35rem); line-height:1.04; margin:6px 0 20px; letter-spacing:.4px;
}
.hero-title .script{ display:block; font-size:1.16em; margin-top:2px; }
.hero-sub{ color:#c9c2b4; font-size:1.02rem; max-width:430px; margin:0 0 30px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }

/* Trustpilot */
.trust{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tp{ display:inline-flex; align-items:center; gap:6px; font-size:.95rem; color:var(--white); }
.tp-stars{ display:inline-flex; gap:3px; }
.tp-stars i{ width:19px; height:19px; background:#00b67a; display:inline-block; position:relative;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z'/></svg>") center/86% no-repeat #00b67a;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z'/></svg>") center/86% no-repeat; border-radius:3px; }
.tp-stars i::before{ content:""; position:absolute; inset:0; background:#00b67a; }
.tp-stars i.half{ background:linear-gradient(90deg,#00b67a 55%, #2c3a35 55%); }
.tp-note{ color:var(--muted); font-size:.85rem; width:100%; margin-top:2px; }

/* Hero visual + globe */
.hero-visual{ position:relative; width:100%; max-width:720px; margin-left:auto; aspect-ratio:1; }
.collage-stack{ position:absolute; inset:0; filter:drop-shadow(0 20px 50px rgba(0,0,0,.5)); }
.petal{ position:absolute; object-fit:contain; transform-origin:center;
  transition:transform .32s cubic-bezier(.22,1,.36,1), filter .32s ease; cursor:pointer; }
.petal:hover{ transform:scale(1.09); z-index:6;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6)) brightness(1.06); }
.globe-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:41.5%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(circle, #191713 0%, #0e0d0b 78%),
    #0e0d0b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 10px rgba(19,19,17,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.globe-core::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:7px 7px;
  -webkit-mask:radial-gradient(circle,#000 60%, transparent 72%);
  mask:radial-gradient(circle,#000 60%, transparent 72%);
}
.gc-line{ position:relative; margin:0; color:#efe9dd; letter-spacing:.15em; font-size:clamp(12px,1.15vw,17px); font-weight:300; }
.gc-wide{ position:relative; font-size:clamp(34px,3.3vw,52px); margin:4px 0 0; padding-bottom:6px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'><path d='M4 5 Q40 1 60 4 T116 4' fill='none' stroke='%23f7b31d' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center bottom/68% 6px; }
.gc-plane{ position:absolute; right:11%; bottom:23%; opacity:.9; }

/* ---------- Category strip ---------- */
.categories{ padding-top:34px; }
.cat-panel{
  display:grid; grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,#181612,#151310);
  padding:34px 10px;
}
.cat-item{ text-align:center; padding:6px 22px; position:relative; }
.cat-item + .cat-item::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line); }
.cat-icon{ display:inline-grid; place-items:center; width:60px; height:60px; border-radius:50%;
  background:#100f0c; color:var(--gold); border:1px solid rgba(247,179,29,.18); margin-bottom:16px; }
.cat-item h3{ font-family:var(--serif); font-weight:600; font-size:1.28rem; color:var(--white); margin:0 0 10px; }
.cat-item p{ color:var(--muted); font-size:.82rem; line-height:1.55; margin:0; }

/* ---------- Signature Escapes ---------- */
.escapes-grid{ display:grid; grid-template-columns:.72fr 2.28fr; gap:34px; align-items:center; }
.escapes-copy h2{ font-size:clamp(2rem,3.4vw,2.9rem); color:var(--white); margin:2px 0 16px; line-height:1.06; }
.escapes-copy .script{ display:inline-block; font-size:1.25em; }
.underline{ position:relative; }
.underline::after{ content:""; position:absolute; left:2%; right:2%; bottom:-2px; height:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'><path d='M2 8 Q60 2 100 6 T198 5' fill='none' stroke='%23f7b31d' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center/100% 100%; }
.escapes-copy .muted-p{ font-size:.92rem; max-width:230px; margin:0 0 24px; }

.escapes-carousel{ position:relative; }
.carousel-nav{ position:absolute; right:2px; top:-58px; display:flex; gap:10px; }
.cbtn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:#161410; color:var(--gold); cursor:pointer; font-size:1rem; transition:.2s; }
.cbtn:hover{ background:var(--gold); color:#1a1408; }
.cbtn[data-dir="-1"]{ color:var(--cream); }
.cards{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*18px)/4);
  gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none; }
.cards::-webkit-scrollbar{ display:none; }
.dcard{ position:relative; border-radius:20px; overflow:hidden; scroll-snap-align:start;
  aspect-ratio:3/4.5; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.dcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.dcard:hover img{ transform:scale(1.06); }
.dcard::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,7,.9) 0%, rgba(8,8,7,.25) 42%, transparent 68%); }
.dcard-body{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:16px 16px 18px; }
.dcard-body h3{ font-family:var(--serif); font-weight:700; color:#fff; font-size:1.3rem; margin:0 0 3px; }
.dcard-body p{ color:#d7cfc0; font-size:.76rem; margin:0; }
.dcard .arrow-circle{ width:38px; height:38px; }

/* ---------- Why book ---------- */
.why-panel{ border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,#181612,#141210);
  display:grid; grid-template-columns:1.05fr 2.25fr; gap:40px; padding:46px 48px; align-items:center; }
.why-head{ position:relative; }
.why-head::after{ content:""; position:absolute; right:-20px; top:-6px; bottom:-6px; width:1px; background:var(--line); }
.why-head h2{ font-size:clamp(1.65rem,2.4vw,2.1rem); color:var(--white); line-height:1.22; margin:2px 0 0; white-space:nowrap; }
.underline2{ position:relative; }
.underline2::after{ content:""; position:absolute; left:0; right:8%; bottom:-8px; height:9px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'><path d='M2 7 Q60 1 100 5 T198 5' fill='none' stroke='%23f7b31d' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center/100% 100%; }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.why-item{ text-align:center; padding:0 20px; position:relative; }
.why-item + .why-item::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--line); }
.why-icon{ display:inline-grid; place-items:center; color:var(--gold); margin-bottom:14px; position:relative; }
.badge24{ position:absolute; inset:0; display:grid; place-items:center; font-size:.66rem; font-weight:700; font-style:normal; }
.why-item h3{ font-family:var(--serif); font-weight:600; color:var(--white); font-size:1rem; margin:0 0 8px; }
.why-item p{ color:var(--muted); font-size:.8rem; line-height:1.55; margin:0; }

/* ---------- CTA banner ---------- */
.cta-banner{ position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,#181612,#141210); border:1px solid var(--line);
  display:grid; grid-template-columns:1.1fr 1.1fr .95fr; align-items:center;
  min-height:210px; }
.cta-gold-block{ position:absolute; left:-40px; top:0; bottom:0; width:150px;
  background:var(--gold); border-radius:0 130px 130px 0 / 0 50% 50% 0; }
.cta-text{ position:relative; z-index:2; padding:24px 10px 24px 138px; }
.cta-text h2{ margin:0; display:flex; flex-direction:column; }
.cta-script{ font-size:2.7rem; color:var(--gold); line-height:.86; margin-bottom:2px; }
.cta-disp{ font-size:1.85rem; color:var(--white); font-weight:700; }
.cta-mid{ position:relative; z-index:2; padding:24px 30px; border-left:1px solid var(--line); }
.cta-mid p{ color:#cfc8ba; font-size:.92rem; margin:0 0 18px; max-width:270px; }
.cta-photo{ position:relative; height:100%; min-height:210px; }
.cta-photo::before{ content:""; position:absolute; left:-46px; top:-12px; bottom:-12px; width:92px; z-index:2;
  border-radius:50%; border:3px solid var(--gold); border-right-color:transparent;
  box-shadow:-1px 0 0 var(--gold); }
.cta-photo img{ width:100%; height:100%; object-fit:cover; }
.cta-mid #contact{ scroll-margin-top:100px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line-soft); margin-top:20px; padding-top:46px; background:#100f0d; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; gap:30px; padding-bottom:34px; }
.foot-blurb{ color:var(--muted); font-size:.86rem; max-width:230px; margin:18px 0 18px; }
.socials{ display:flex; gap:10px; }
.socials a{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:#1a1814; color:var(--gold); border:1px solid var(--line); transition:.2s; }
.socials a:hover{ background:var(--gold); color:#1a1408; }
.foot-col h4{ font-family:var(--serif); font-weight:600; color:var(--white); font-size:1rem; margin:0 0 16px; }
.foot-col a{ display:block; color:var(--muted); font-size:.86rem; margin-bottom:11px; transition:color .2s; }
.foot-col a:hover{ color:var(--gold); }
.foot-contact p{ display:flex; align-items:flex-start; gap:10px; color:#cfc8ba; font-size:.86rem; margin:0 0 15px; }
.foot-contact a{ color:#cfc8ba; text-decoration:none; font-weight:600; transition:color .2s; }
.foot-contact a:hover{ color:var(--gold); }
.foot-contact .fc-ic{ color:var(--gold); }
.fc-ic{ color:var(--gold); margin-top:2px; flex:none; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line-soft); padding-top:20px; padding-bottom:24px; }
.footer-bottom p{ margin:0; color:var(--muted-2); font-size:.82rem; }
.heart{ color:var(--gold); }

/* ---------- Responsive ---------- */
/* Header nav collapses to the hamburger a bit earlier than the content
   breakpoints below (1049px, not 900px) — the full nav-list + CTA button
   needs ~1048px of room and would otherwise overflow between 901-1049px
   (this exact gap hits iPad-landscape/1024px viewports). */
@media(max-width:1049px){
  .main-nav{ position:fixed; inset:78px 0 auto 0; background:#141210; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s; margin:0; }
  .main-nav.open{ max-height:340px; }
  .nav-list{ flex-direction:column; gap:0; padding:8px 0; }
  .nav-list li{ width:100%; }
  .nav-list a{ display:block; padding:12px 40px; }
  .nav-toggle{ display:flex; order:3; }
  .header-cta{ display:none; }
}
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ text-align:center; }
  .hero-actions,.trust,.kicker{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .cat-panel{ grid-template-columns:repeat(2,1fr); gap:24px 0; }
  .cat-item + .cat-item::before{ display:none; }
  .escapes-grid{ grid-template-columns:1fr; }
  .escapes-copy .muted-p{ max-width:none; }
  .carousel-nav{ position:static; margin-bottom:16px; }
  .cards{ grid-auto-columns:76%; }
  .why-panel{ grid-template-columns:1fr; gap:26px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); gap:26px 0; }
  .why-item + .why-item::before{ display:none; }
  .cta-banner{ grid-template-columns:1fr; }
  .cta-gold-block{ display:none; }
  .cta-text{ padding:26px 26px 6px; background:var(--gold); }
  .cta-disp{ color:#1a1408; }
  .cta-mid{ border-left:0; }
  .cta-photo{ min-height:180px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  .container{ padding:0 22px; }
  .cat-panel{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gc-line{ font-size:2.6vw; }
  .gc-wide{ font-size:9vw; }
  .footer-bottom{ flex-direction:column; gap:8px; }
}

/* Hero background image — faint overlay, dark base stays prominent */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:url("../images/cta-beach.png") center/cover no-repeat;
  opacity:.20;
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }

/* Wordmark logo — sits in the bar, vertically centered */
.site-header .brand{ display:flex; align-items:center; flex:none; }
.brand-shield{ height:50px; width:auto; }

/* Footer wordmark logo */
.foot-logo img{ height:52px; width:auto; margin-bottom:4px; }

/* =========================================================
   HERO → ADVISOR TRANSITION
   The cream tide washes over the hero photo, so the image
   runs unbroken into the next section.
   ========================================================= */
/* 170 image px of a 1717px-wide plate = 9.9% of the viewport width.
   Keeping this exact ratio makes the wave band and the advisor section's
   background render the SAME image at the SAME scale, so they join seamlessly. */
:root{ --hero-wave-h:9.9vw; }
.hero{ padding-bottom:calc(var(--hero-wave-h) + 18px); }

.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px;
  z-index:3; line-height:0; pointer-events:none;
}
.hero-wave__svg{
  display:block; width:100%; height:var(--hero-wave-h);
}