:root { --black:#222222; --ink-deep:#0a0a08; --primary:#ffc85a; --secondary-color:#db4a3c; --white:#fff; } 
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {background: var(--white); margin:0; color:var(--black);  font-family: 'DM Sans', sans-serif; } 
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
.m-0{
    margin: 0px;
}
.mb-0{
    margin-bottom: 0px;
} 
.lh{
    line-height: 26px;
}
.pt-0{
padding-top: 0px !important; 
}
.main-logo{
width: auto;
height: 80px;
object-fit: cover;
}
.announcement { background:var(--black); color:var(--white); font-size:12px; letter-spacing:.05em; text-align:center; padding:10px 20px; }
.announcement a { color:#f6d681; margin-left:12px; font-weight:700; }

.ate-hm-banner {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    align-content: center;
}

.ate-hm-banner .banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.ate-hm-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:#0000002e;
    z-index: 1;
}

.ate-hm-banner .hero-content {
    position: relative;
    z-index: 2;
}
.hero-content h1{
    color: var(--white);    
}
.ate-hm-banner .scroll-note {
    position: relative;
    z-index: 2;
}

/*.hero:after { content:""; position:absolute; inset:0; z-index:0; background:#1817171f;} */
.nav { position:relative; z-index:1; max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:25px;padding: 10px 0px; }

.site-nav-bar { position:sticky; top:0; z-index:50; background:rgba(17,41,54,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); }
.site-nav { max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 34px; }
.site-nav-left { display:flex; align-items:center; gap:44px; }
.site-nav-links { display:flex; align-items:center; gap:26px; font-size:13.5px; }
.site-nav-links a { color:var(--white); opacity:.9; }
.site-nav-links a:hover { color:var(--primary); opacity:1; }
.site-nav-right { display:flex; align-items:center; gap:18px; }
.site-nav-search { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:var(--white); border:1px solid rgba(255,255,255,.3); transition:border-color .15s,color .15s; }
.site-nav-search:hover { border-color:var(--primary); color:var(--primary); }
.site-nav-phone { display:flex; align-items:center; gap:7px; color:var(--white); font-size:13px; font-weight:600; white-space:nowrap; }
.site-nav-phone svg { color:var(--primary); }
.site-nav-lang { border:1px solid rgba(255,255,255,.25); border-radius:6px; }
.site-nav-cta { min-height:38px; padding:0 18px; font-size:13px; }
.site-nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:20px; background:transparent; border:0; cursor:pointer; padding:0; }
.site-nav-toggle span { display:block; height:2px; background:var(--white); border-radius:2px; }
@media (max-width:900px) {
  .site-nav-links,.site-nav-phone,.site-nav-lang { display:none; }
  .site-nav-toggle { display:flex; }
  .site-nav-bar.mobile-open .site-nav-links,
  .site-nav-bar.mobile-open .site-nav-phone,
  .site-nav-bar.mobile-open .site-nav-lang {
    display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start;
    background:rgba(17,41,54,.97); padding:16px 20px; gap:14px; border-top:1px solid rgba(255,255,255,.08);
  }
  .site-nav-bar.mobile-open .site-nav-lang { width:auto; }
}
@media (max-width:550px) { .site-nav { padding:12px 20px; } .site-nav-cta { padding:0 14px; font-size:12px; } }
.brand { display:flex; align-items:center; gap:12px; color:var(--white); min-width:max-content; }
.brand-mark { width:36px; height:36px; border:1.5px solid var(--primary); border-radius:50%; display:grid; place-items:center; color:var(--primary); font-size:22px; font-family:"math",serif; }
.brand strong { font-size:15px; letter-spacing:.12em; text-transform:uppercase; display:block; }
.brand small { display:block; font-size:9px; letter-spacing:.21em; color:#eed18c; margin-top:2px; } 
.nav-links { display:flex; align-items:center; gap:29px; font-size:13px;color: var(--white) }
.nav-links a {
font-size: 14px;
color: var(--white);
font-weight: 300;
position: relative;
text-decoration: none !important; 
color: inherit;
}

.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 2px;
background: #f4ce75;
transition: width 0.3s ease;
}

.nav-links a:hover {
color: #f4ce75;
}

.nav-links a:hover::after {
width: 100%;
}

/* ===== Dropdown Menu ===== */
.nav-links .dropdown-menu a::after {
content: none;
}
.nav-links .has-dropdown {
    position: relative;
}


.nav-links .has-dropdown > a {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.nav-links .has-dropdown > a .caret {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.nav-links .has-dropdown.open > a .caret {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    background: var(--white);
    border: 1px solid #ddd;
   border-top: 4px solid var(--primary);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); 

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition: opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0.2s ease;

    pointer-events: none;
    z-index: 999;
}

.has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(10);  
    pointer-events: auto;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--black);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;

    transition: background 0.2s ease,
                color 0.2s ease;
}

.dropdown-menu a:hover {
    color: var(--white); 
    background-color: var(--secondary-color);
}


/* ---- end dropdown menu ---- */

.nav-actions { display:flex; gap:14px; align-items:center; font-size:13px; }
.lang { border:0; color:var(--white); background:transparent; padding:8px; }
nav .outline-button{
    background: var(--primary);
    color: var(--ink-deep);
    border-radius: 25px;
    border:none;
    font-weight: 300;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;

    }
    nav .outline-button:hover,
    .hero-cta .gold-button:hover{
    background: var(--white);
    color: var(--black);
    } 
    .hero-cta .outline-button:hover{
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
    }
.outline-button,.gold-button { display:inline-flex; justify-content:center; align-items:center; min-height:43px; padding:0 19px; border:1px solid rgba(255,255,255,.7); color:var(--white); background:transparent; font-weight:400; cursor:pointer; }
.gold-button { border-color:var(--primary); background:var(--primary); color: var(--ink-deep);}
.menu { display:none; background:transparent; color:var(--white); border:0; font-size:24px; }
.hero-content { position:relative;  z-index: revert-layer; max-width:1280px; margin:0 auto; padding:180px 34px 32px; } 
.eyebrow { color:var(--secondary-color); text-transform:uppercase; letter-spacing:.19em; font-size:11px; font-weight:700; }
h1 { font-family:"math",Georgia,serif; font-weight:500; font-size:clamp(48px,4.5vw,88px); line-height:.98; max-width:720px; margin:18px 0 25px; }
.hero-text { font-size:17px; line-height:1.65; max-width:500px; color:rgba(255,255,255,.88); margin:0; }
.hero-cta { margin-top:33px; display:flex; gap:13px; }
.hero-cta .gold-button { min-height:50px; }

.booking { position:relative; z-index:3; max-width:1210px; margin:-52px auto 0; padding:0 34px; }
.booking-box { background:var(--white); box-shadow:0 22px 60px rgba(23,35,50,.18); border-top:3px solid var(--primary); display:grid; grid-template-columns:repeat(4,1fr) auto; align-items:stretch; }
.booking-head { display:none; }
.field { padding:20px 24px; min-width:0; border-left:1px solid var(--line); }
.field:first-child { border-left:0; }
.field label { display:block; color:#8a94a0; font-size:10px; text-transform:uppercase; letter-spacing:.11em; margin-bottom:8px; font-weight:700; }
.field input, .field select { appearance:none; width:100%; border:0; outline:0; background:transparent; font-weight:600; color:var(--black); font-size:15px; cursor:pointer; }
.search-button { border:0; background:var(--black); color:var(--white); padding:0 40px; cursor:pointer; font-weight:700; font-size:15px; letter-spacing:.02em; }
.search-button:hover { background:var(--ink-deep); }
.booking-note { display:none; } 
.intro-prose-col h3{
font-size: 21px;
font-weight: 400;
margin-bottom: 0;
} 
@media(max-width:860px){ .booking { margin-top:0; padding:22px; } .booking-box { grid-template-columns:1fr 1fr; } .field:nth-child(odd){ border-left:0; } .search-button { grid-column:1 / -1; min-height:56px; } }
.scroll-note { position:absolute; z-index:1; bottom:120px; right:40px; font-size:10px; text-transform:uppercase; letter-spacing:.18em; writing-mode:vertical-rl; display:flex; gap:10px; align-items:center; }
.scroll-note:before { content:""; height:52px; width:1px; background:var(--white); }
main { overflow:hidden; } 
.intro { padding:30px 34px 30px; max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:5%; }
.intro-prose-col h2 {line-height: 62px;letter-spacing: 0.5px;}
.intro-prose-col p { text-align:justify; color:#3f4d5a; font-size:16px; line-height:1.75; margin:0 0 20px; }
.intro-prose-col p:last-child { margin-bottom:0; }
.intro-prose-img { width:100%; height:340px; object-fit:cover; margin-bottom:20px; display:block; }
h2 { font-family:"math",Georgia,serif; color:var(--black); font-size:clamp(36px,4vw,56px); font-weight:500; letter-spacing:-.035em; line-height:1.04; margin:13px 0 0; }
.intro p {     
    color: var(--black);
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
text-align: justify;} 
.expert-prose { max-width:820px; margin:0 auto; padding:0 34px 110px; }
.expert-prose p { color:#3f4d5a; font-size:17px; line-height:1.85; margin:0 0 22px; }
.expert-prose p:last-child { margin-bottom:0; }
.expert-prose .lead { font-family:"math",Georgia,serif; font-size:22px; font-style:italic; color:var(--black); line-height:1.5; margin-bottom:30px; }
.expert-prose .signoff { font-weight:600; color:var(--black); }
.destinations { background:#ece8e2; padding:88px 34px 100px; }
.section-head { max-width:1210px; margin:0 auto 25px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-head h2 { margin-top:13px; }
.text-link {   
color: var(--black);
font-size: 14px;
font-weight: 600;
border-bottom: 1px solid var(--primary);
padding-bottom: 7px;
white-space: nowrap; }
.card-grid { max-width:1210px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr .92fr; gap:20px; }
.destination { min-height:440px; position:relative; overflow:hidden; color:var(--white); display:flex; align-items:flex-end; padding:30px; background-position:center; background-size:cover; }
.destination:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(8,15,25,.8)); transition:background .25s; }
.destination:hover:before { background:linear-gradient(180deg,rgba(20,20,15,.05),rgba(8,15,25,.91)); }
.destination > div { position:relative; }
.destination:nth-child(1) { background-image:url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=84'); }
.destination:nth-child(2) { background-image:url('https://images.unsplash.com/photo-1473116763249-2faaef81ccda?auto=format&fit=crop&w=1200&q=84'); }
.destination:nth-child(3) { background-image:url('https://images.unsplash.com/photo-1530789253388-582c481c54b0?auto=format&fit=crop&w=1200&q=84'); }
.destination .number { color:#e6be63; font-size:12px; font-weight:700; letter-spacing:.14em; }
.destination h3 { font:500 35px/1.1 "math",Georgia,serif; margin:10px 0; }
.destination p { margin:0; max-width:250px; font-size:13px; color:rgba(255,255,255,.82); line-height:1.5; }
.trending { padding:106px 34px 113px; max-width:1280px; margin:auto; }  
.trend-grid { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:20px; margin-top:38px; }
.trend-card { min-height:400px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:25px; color:var(--white); background-position:center; background-size:cover;}
.trend-card:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,18,30,.5) 0%,rgba(10,14,21,.08) 45%,rgba(10,14,21,.84)); }
.trend-card > * { position:relative; } 
.trend-card:nth-child(1) { background-image:url('https://images.unsplash.com/photo-1493552152660-f915ab47ae9d?auto=format&fit=crop&w=1250&q=84'); }
.trend-card:nth-child(2) { background-image:url('https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=84'); }
.trend-card:nth-child(3) { background-image:url('https://images.unsplash.com/photo-1484291470158-b8f8d608850d?auto=format&fit=crop&w=900&q=84'); }
.trend-label { align-self:flex-start; padding:7px 10px; background:rgba(255,255,255,.94); color:var(--black); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.trend-card h3 { font:500 35px/1.04 "math",Georgia,serif; margin:0 0 11px; }
.trend-card p { font-size:13px; margin:0; color:rgba(255,255,255,.83); line-height:1.55; max-width:310px; }
.trend-card .arrow { 
color: var(--primary);
display: block;
margin-top: 19px;
font-weight: 500;
font-size: 14px; }
.islands { padding:40px 34px 40px; }
.islands-grid { max-width:1210px; margin:38px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.islands-grid .trend-card:nth-child(1) {
background-image: url('/img/Ross Island.png');
}

.islands-grid .trend-card:nth-child(2) {
background-image: url('/img/hav_1.jpg');
}

.islands-grid .trend-card:nth-child(3) {
background-image: url('/img/North Bay.png');
}

.islands-grid .trend-card:nth-child(4) {
background-image: url('/img/nei_1.jpg');
}

.islands-grid .trend-card:nth-child(5) {
background-image: url('/img/Baratang.png');
}

.islands-grid .trend-card:nth-child(6) {
background-image: url('/img/Jolley Bouy.png');
}
@media(max-width:900px){ .islands-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .islands-grid { grid-template-columns:1fr; } }
.adventure { 
    background: #fff9eb;
    /*background:#f1ede8;*/
    padding:40px 40px; }
.adventure-inner { max-width:1210px; margin:auto; }
.adventure-lead { display:grid; grid-template-columns:.9fr 1.1fr; gap:12%; align-items:end; margin-bottom:42px; }
.adventure-lead p { max-width:460px; color:var(--black); line-height:1.75; margin:0; }
.adventure-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.adventure-card { min-height:435px; position:relative; overflow:hidden; padding:24px; display:flex; align-items:flex-end; color:var(--white); background-position:center; background-size:cover; }
.adventure-card:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,11,20,.06),rgba(12,9,16,.82)); transition:background .25s; }
.adventure-card:hover:before { background:linear-gradient(180deg,rgba(20,20,15,.18),rgba(12,9,16,.9)); }
.adventure-card > div { position:relative; }
.adventure-card:nth-child(1) { background-image:url('/img/sd_5.webp'); }
.adventure-card:nth-child(2) { background-image:url('https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=84'); }
.adventure-card:nth-child(3) { background-image:url('https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?auto=format&fit=crop&w=1000&q=84'); }
.adventure-icon { height:34px; width:34px; border:1px solid rgba(255,255,255,.72); display:grid; place-items:center; margin-bottom:17px; color:#f1ca76; font-size:16px; }
.adventure-card h3 { font:500 31px/1.05 "math",Georgia,serif; margin:0 0 9px; }
.adventure-card p { font-size:13px; color:rgba(255,255,255,.84); margin:0; line-height:1.52; }
.adventure-card .arrow { color: var(--primary);
display: block;
margin-top: 19px;
font-weight: 500;
font-size: 14px;}
.care-strip { background:var(--black); color:var(--white); padding:33px 34px; }
.care-inner { max-width:1210px; margin:auto; display:grid; grid-template-columns:1.2fr repeat(3,1fr); align-items:center; gap:28px; }
.care-intro { font:500 25px/1.12 "math",Georgia,serif; color:var(--white); }
.care-item { border-left:1px solid rgba(255,255,255,.22); padding-left:22px; }
.care-item strong { display:block; color:#edcb79; font-size:12px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:6px; }
.care-item span { font-size:12px; line-height:1.48; color:rgba(255,255,255,.75); }
.packages { 
    /*padding:96px 34px 104px; */
    padding-top: 95px;
}
.packages-grid { max-width:1210px; margin:38px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } 
.package-card { background:#d9d9d938; overflow:hidden; display:flex; flex-direction:column;}
.package-media { height:210px; position:relative; background-position:center; background-size:cover; }
.package-media:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,15,25,.55)); }
.package-tag { position:absolute; z-index:1; top:14px; left:14px; background:var(--primary); border-radius: 15px; color: var(--black);font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; }
.package-body { padding:15px; display:flex; flex-direction:column; flex:1; }
.package-duration {font-weight: 600;font-size: 12px; color: var(--black);
margin-bottom: 7px; }
.package-card h3 { font:500 21px/1.15; color:var(--black); margin:0px 0 15px; }
.package-card p { font-size:13px; color: var(--black); line-height:1.6; margin:0 0 15px; text-align: justify;}
.package-foot { margin-top:auto; display:flex; align-items:end; justify-content:space-between; gap:14px;border-top: 1px solid #ccc; padding-top: 15px;margin-top: 15px; } 
.package-price { color:var(--black); font-size:13px;flex: 1; }
.package-price b { display:block; font-size:25px; font-weight:700; color:var(--black) }
.package-price small { color:var(--black); font-size:13px; }
.package-btn { background: var(--secondary-color);color:var(--white); font-size:12px; font-weight:700; padding:11px 18px; white-space:nowrap; } 
.package-btn:hover { background:var(--ink-deep); }
@media(max-width:900px){ .packages-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .packages-grid { grid-template-columns:1fr; } }
.stays { padding:0px 34px; max-width:1280px; margin:auto; }

.stay-copy { padding:72px clamp(32px,6vw,86px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.stay-copy h2 { margin-top:13px; color: var(--ink-deep);} 
.stay-copy p { color: var(--black); line-height:1.72; max-width:500px; text-align: justify; } 
.stay-meta {color: var(--secondary-color);font-size:11px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; margin-bottom:12px; }  
.journal-stories { padding:106px 34px 112px; background:var(--white); }
.stories-inner { max-width:1210px; margin:auto; }
.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:29px; } 
.story { display:block; color:var(--black); }
.story-image { height:236px; background-size:cover; background-position:center; margin-bottom:18px; overflow:hidden; }
.story:nth-child(1) .story-image { background-image:url('/img/hb_2HQ.webp'); } 
.story:nth-child(2) .story-image { background-image:url('/img/ferry-2.webp'); } 
.story:nth-child(3) .story-image { background-image:url('/img/sb_banner_image.webp'); }
.story .category { color:var(--secondary-color); font-size:10px; letter-spacing:.15em; font-weight:700; text-transform:uppercase; } 
.story h3 { font:500 20px/1.18 "math",Georgia,serif; color:var(--black); margin:9px 0 9px; }
.story p { margin:0; color:#64717a; font-size:13px; line-height:1.6; max-width:335px; }
.story:hover h3 { text-decoration:underline; text-decoration-color:#d7a84b; text-underline-offset:5px; }
.experience { padding:107px 34px; max-width:1280px; margin:auto; display:grid; grid-template-columns:1.03fr .97fr; gap:78px; align-items:start; }
.image-stack { min-height:600px; position:relative; overflow:hidden; }
.image-stack .full {  inset:0; width:100%; height:100%; object-fit:cover; }
.image-caption { position:absolute; left:26px; bottom:26px; right:26px; z-index:1; color:var(--white); font-family:"math",serif; font-size:22px; line-height:1.3; text-shadow:0 2px 18px rgba(0,0,0,.5); }
.experience p { color:var(--black); line-height:1.75; margin:20px 0; max-width:520px; }
.reasons { display:grid; grid-template-columns:1fr 1fr; gap:26px 34px; margin-top:34px; }
.reason { border-top:1px solid var(--line); padding-top:16px; }
.reason b { color:var(--black); display:block; font-size:15px; margin-bottom:8px; line-height:1.25; }
.reason span { font-size:13px; line-height:1.6; color:#687680;  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.journal { background:var(--black); color:var(--white); padding:80px 34px; text-align:center; }
.journal h2 { color:var(--white); margin:12px auto 15px; max-width:640px;font-size: 2.5rem; }
.journal p { color:rgba(255,255,255,.76); max-width:510px; line-height:1.65; margin:0 auto 27px; }
.journal form { max-width:480px; margin:auto; display:flex; border-bottom:1px solid rgba(255,255,255,.55); }
.journal input { flex:1; border:0; outline:0; padding:13px 0; color:var(--white); background:transparent; }
.journal input::placeholder { color:rgba(255,255,255,.62); }
.journal button { background:transparent; border:0; color:#f2ce74; cursor:pointer; font-weight:700; }
footer { background:#e3e3e3; color: var(--black); padding:54px 34px 22px; }
.footer-main { max-width:1210px; margin:auto; display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:15px; }
.footer-main .brand { margin-bottom:16px; }
footer p {
font-size: 0.9rem;
padding-right: 35px;
line-height: 1.7; 
margin: 0; }
footer h4 {color: var(--black);
text-transform: uppercase;
margin: 4px 0 16px;
border-bottom: 1px dashed #cbcbcb;
display: inline-block;
padding-bottom: 3px; }
footer a {
display: block;
font-size: 0.9rem;
margin-bottom: 15px; }
footer a:focus-visible {
outline: 2px solid var(--secondary-color);
outline-offset: 3px;
}
  .footer-links.dot a {
position: relative;
padding-left: 18px;
}

.footer-links.dot a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 7px;
height: 7px;
background: var(--secondary-color);
border-radius: 50%;
transform: translateY(-50%);
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-links li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size:0.9rem;
margin-bottom: 15px; 
}
.footer-links li:last-child{
margin-bottom: 0px;
}
footer a:last-child {
margin-bottom: 0px;}
.footer-bottom {
max-width: 1210px;
margin: 43px auto 0;
padding-top: 19px;
border-top: 1px solid rgb(197 197 197);
font-size: 11px;
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 6px;
}
.footer-bottom span {
font-size: 0.9rem;
font-weight: 500;
padding-right: 5px;
}
.footer-bottom span + span::before {
content: "|";
margin-right: 5px;
color: #999;
}
.ate-line{
color: var(--secondary-color);
font-weight: 600;
}

/* ==========================================================
   RESPONSIVE FIXES — merged in (see notes above)
   ========================================================== */
@media (max-width:850px) {
.nav-links,.nav-actions { display:none; }
.menu { display:block; }
.nav.open .nav-links {
    position:absolute; z-index:5; top:95px; right:22px; display:flex;
    flex-direction:column; align-items:stretch; min-width:220px;
    padding:22px; background:var(--black);
}
.hero { min-height:778px; }
.hero-content { padding-top:90px; }
.hero-content { padding-right:34px; } /* fixed: was 355px, leftover from an absolutely-positioned booking widget */
.booking { right:auto; top:auto; width:auto; } /* fixed: .booking is position:relative, so right/top never applied — removed to avoid confusion */
.intro,.intro-prose,.experience,.adventure-lead { grid-template-columns:1fr; gap:36px; }
.reasons{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.card-grid,.trend-grid { grid-template-columns:1fr 1fr; }
.destination:first-child,.trend-card:first-child { grid-column:1/-1; min-height:400px; }
.experience { padding-top:80px; }
.adventure-grid { grid-template-columns:1fr 1fr; }
.adventure-card:last-child { grid-column:1/-1; }
.care-inner { grid-template-columns:1fr 1fr; }
.care-intro { grid-column:1/-1; }
.stay-feature { grid-template-columns:1fr; }
.stay-image { min-height:430px; }
.story-grid { grid-template-columns:1fr 1fr; }
.story:last-child { grid-column:1/-1; max-width:50%; }

/* new: shrink the card headlines and logo as cards/nav get tighter */
.destination h3,
.trend-card h3,
.adventure-card h3 { font-size:28px; }
.logo { height:60px; }
/* new: soften the image-stack step before it hits the 550px value below */
.image-stack { min-height:480px; }

   /* Dropdown inside open mobile menu — White Theme */
.nav.open .has-dropdown .dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: var(--white);
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 8px 0;
margin-top: 6px;
display: none;
pointer-events: auto;
}

.nav.open .has-dropdown.open .dropdown-menu {
display: block;
}

/* Dropdown links */
.nav.open .dropdown-menu a {
display: block;
padding: 10px 16px;
color: var(--black);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}

.nav.open .dropdown-menu a:hover {
background: var(--secondary-color);
color: #000;
}

@media (max-width:650px) { .hero-content { padding:75px 20px 32px; z-index: revert-layer; } .booking { position:relative; top:auto; right:auto; width:auto; margin:0 20px; } }
@media (max-width:550px) {
    .announcement { font-size:10px;        
    display: flex;
    flex-direction: column; }
    .nav { padding:20px; }
    .hero-content,
    .intro,
    .destinations,
    .trending,
    .adventure,
    .experience,
    .journal-stories,
    .stays {
        padding: 20px; /* Modern CSS */
    }        .care-strip { padding-left:20px; padding-right:20px; }
    .adventure,.islands { padding-left:20px; padding-right:20px; } /* new: bring these two sections in line with everything else at this breakpoint */
    .hero { background-position:58% center; }
    h1 { font-size:40px; }
    .hero-text { font-size:15px; }
    .booking-box { padding:21px 20px 19px; }
    .field { padding:14px 0; }
    .scroll-note { display:none; }
    .intro-prose-col h2 {
        line-height: 40px;}
    .intro { padding-top:30px; padding-bottom:30px; }
    .card-grid,.trend-grid,.adventure-grid,.story-grid,.care-inner { grid-template-columns:1fr; }
    .destination:first-child,.trend-card:first-child,.adventure-card:last-child,.story:last-child { grid-column:auto; max-width:none; }
    .destination,.trend-card,.adventure-card { min-height:355px; }
    .care-item { border-left:0; border-top:1px solid rgba(255,255,255,.22); padding:15px 0 0; }
    .image-stack { min-height:420px; }
    .experience { padding-bottom:20px; }
    .image-caption { font-size:17px; }
    .stay-copy { padding:48px 28px; }
    .story-image { height:255px; }
    .footer-main { grid-template-columns:1fr 1fr; }
    .footer-main > :first-child { grid-column:1/-1; }
    .footer-bottom { flex-direction:column; }

    /* new: further shrink logo and card headlines, and give the
       fixed-height intro image some relief on narrow phones */
    .logo { height:48px; }
    .destination h3,
    .trend-card h3,
    .adventure-card h3 { font-size:24px; }
    .intro-prose-img { height:220px; }
    p,
    .intro p{
     font-size:0.92rem;
    }
    #packages .sign-pck,
    .ate-sign .lh{
        padding: 0px 20px;
    }
    .ate-hm-banner{
        align-content: center;
    } 
    .ate-sign{
        padding-top: 50px;
    }
    .footer-bottom span{
        text-align: center;
        font-size: 0.875rem;
    }
    .footer-bottom span + span::before{ 
        content: none;
    }
    .main-logo{
height: 60px;
}
      .packages-grid {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding: 0 15px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

.packages-grid::-webkit-scrollbar {
    display: none;
}

.package-card {
    flex: 0 0 90%;   /* 2 cards + part of 3rd */ 
    scroll-snap-align: start;
}
    .section-head{align-items: start; flex-direction: column;}
      .section-head h2{font-size:23px; } 
}

}

/* new: single-column fallback for the reasons grid on very small phones,
   since each item's copy is line-clamped to 4 lines and gets tight in 2 columns */
@media (max-width:420px) {
.reasons {
    grid-template-columns: 1fr;
    gap: 20px;
}
}

.webkit-line{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
text-overflow:ellipsis;
}
.pck-duration{ 
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #ffc85a;
}
.logo{
height:80px;
}