:root{
    --deep:#0B3B3C;
    --teal:#12615F;
    --tealLight:#1E8583;
    --sand:#F4ECD8;
    --sandDeep:#E9DCBB;
    --ink:#122320;
    --coral:#FF7A56;
    --coralDark:#E85F3B;
    --gold:#E3A73E;
    --white:#FFFEFB;
    --line: rgba(11,59,60,0.14);
    --shadow: 0 18px 40px -20px rgba(11,59,60,0.35);
    --radius: 6px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{overflow-x:hidden;max-width:100%;}
  body{
    margin:0;
    background:var(--sand);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    color:var(--deep);
    margin:0 0 .4em;
    font-weight:600;
    line-height:1.12;
    letter-spacing:-0.01em;
  }
  p{margin:0 0 1em;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{padding:104px 0;position:relative;}
  .eyebrow-free{margin-top:0;}
  ::selection{background:var(--coral);color:var(--white);}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 28px;
    border-radius:3px;
    font-weight:600;
    font-size:15.5px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn-coral{background:var(--coral);color:var(--white);  width:auto !important;max-width:max-content !important;padding:12px 18px !important;}
  .btn-coral:hover{background:var(--coralDark);transform:translateY(-2px);}
  .btn-outline{border-color:rgba(255,254,251,0.55);color:var(--white);}
  .btn-outline:hover{background:rgba(255,254,251,0.12);transform:translateY(-2px);}
  .btn-line{border-color:var(--deep);color:var(--deep);margin-top: 20px;}
  .btn-line:hover{background:var(--coral);color:var(--white);border-color: var(--coral);}
  .btn-sm{padding:11px 70px;font-size:14px;margin-left: auto;margin-right: auto;}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:60;
    background:var(--white);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--deep);transform:translateX(-15px);}
  .logo-mark{
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  flex:none;
  
}

.logo-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
  .nav-links{display:flex;gap:34px;align-items:center;}
  .nav-links a{font-size:15px;font-weight:500;color:var(--ink);padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s, color .2s;}
  .nav-links a:hover{border-color:var(--coral);color:var(--deep);}
  .nav-right{display:flex;align-items:center;gap:18px;}
  .nav-phone{font-weight:600;font-size:14.5px;color:var(--deep);white-space:nowrap;}
  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--deep);margin:5px 0;}

  /* ---------- Hero ---------- */
.hero{
  background-image:
    linear-gradient(
      90deg,
      rgba(11,59,60,0.85) 0%,
      rgba(11,59,60,0.65) 35%,
      rgba(11,59,60,0.20) 65%,
      rgba(11,59,60,0.05) 100%
    ),
    url('img/hero.jpeg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  color:var(--white);
  padding:76px 0 0;
  overflow:hidden;
  position:relative;
}
  .hero .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;position:relative;z-index:2;margin-bottom: 60px;}
  .kicker-tag{
    display:inline-flex;align-items:center;gap:8px;
    margin-bottom:22px;
  }
  .kicker-tag::before{content:"";width:7px;height:7px;background:var(--gold);border-radius:50%;}
  .hero h1{font-size:clamp(46px,4.6vw,54px);color:var(--white);max-width:12ch;margin-bottom: 71px;margin-top: 30px;}
  .hero-sub{font-size:18px;color:rgb(250, 250, 247);max-width:46ch;margin-bottom:70px;}
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
  .hero-stats{display:flex;gap:0;border-top:1px solid rgba(251, 251, 250, 0.18);padding-top:26px;}
  .hero-stats div{flex:1;padding-right:18px;}
  .hero-stats strong{display:block;font-family:'Fraunces',serif;font-size:26px;color:var(--gold);}
  .hero-stats span{font-size:13px;color:rgba(247, 242, 242, 0.994);}

  /* ---------- Owner's Commitment ---------- */

.owner{
  background:var(--white);
  padding:90px 0;
}

.owner-wrap{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:70px;
  align-items:center;
}

.owner-photo{
  height:380px;
  position:relative;
  border-radius:5px;
  z-index:1;
}

.owner-photo::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:var(--sandDeep);
  border-radius:5px;
  top:18px;
  left:18px;
  z-index:-1;
}

.owner-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:5px;
}

.owner-content{
  max-width:620px;
}

.owner-content .head-tag{
  margin-bottom:12px;
}

.owner-content h2{
  font-size:clamp(30px,3.4vw,42px);
  margin-bottom:24px;
}

.owner-quote{
  font-size:17px;
  line-height:1.8;
  color:rgba(18,35,32,0.72);
  margin-bottom:28px;
}

.owner-info{
  padding-left:18px;
  border-left:3px solid var(--coral);
}

.owner-info strong{
  display:block;
  font-family:'Fraunces',serif;
  font-size:20px;
  color:var(--deep);
  margin-bottom:3px;
}

.owner-info span{
  font-size:14px;
  color:rgba(18,35,32,0.58);
}

  /* ---------- Section headings ---------- */
  .head-row{max-width:940px;margin-bottom:56px;margin-top:-30px;margin-left:auto;margin-right:auto;text-align:center;}
  .head-row.center{margin-left:auto;margin-right:auto;text-align:center;}
  .head-row h2{font-size:clamp(28px,3.4vw,40px);}
  .head-tag{color:var(--coralDark);font-weight:600;font-size:14.5px;margin-bottom:10px;display:block;}
  .head-desc{color:rgba(18,35,32,0.72);font-size:16.5px;}

  /* ---------- Services ---------- */
  .services{background:var(--white);}
  .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
  .service-card{background:var(--white);padding:38px 34px;transition:background .2s;}
  .service-card:hover{background:var(--sand);}
  .service-icon{width:46px;height:46px;margin-bottom:22px;color:var(--teal);}
  .service-card h3{font-size:19px;margin-bottom:10px;}
  .service-card p{font-size:15px;color:rgba(18,35,32,0.68);margin-bottom:0;}

  /* ---------- Fleet ---------- */
  .fleet{background:#F9FAFC}
  .fleet-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .fleet-card{
    background:var(--white);
    border-radius:5px;
    overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 4px 4px rgba(11,59,60,0.12);
    transition:transform .25s ease, box-shadow .25s ease; 
  }

  .fleet-visual{
  height:200px;
  position:relative;
  overflow:hidden;
}

.fleet-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(11,59,60,0.18);
}

.fleet-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
  .fleet-visual svg{width:96px;height:96px;color:var(--sand);opacity:.95;}
  .fleet-badge{
    position:absolute;top:12px;left:12px;
    background:var(--coral);color:var(--white);
    font-size:11.5px;font-weight:700;letter-spacing:.02em;
    padding:4px 10px;border-radius:2px;
  }
  .fleet-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column;}
  .fleet-body h3{font-size:18px;margin-bottom:4px;}
  .fleet-meta{font-size:13.5px;color:rgba(18,35,32,0.6);margin-bottom:16px;}
  .fleet-price{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:14px;margin-top:auto;margin-bottom:16px;}
  .fleet-price .label{font-size:12.5px;color:rgba(18,35,32,0.55);}
  .fleet-price .amount{font-family:'Fraunces',serif;font-size:20px;color:var(--deep);font-weight:600;}
  .fleet-cta{align-self:flex-start;}

  /* ---------- Packages ---------- */
  .packages{background:var(--deep);color:var(--white);}
  .packages h2{color:var(--white);}
  .packages .head-desc{color:rgba(255,254,251,0.72);}
  .packages .head-tag{color:var(--gold);}
  .pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .pkg-card{
    background:rgba(255,254,251,0.05);
    border:1px solid rgba(255,254,251,0.14);
    border-radius:4px;
    padding:28px 22px;
    transition:background .2s, border-color .2s;
  }
  .pkg-card:hover{background:rgba(255,254,251,0.09);border-color:rgba(255,254,251,0.3);}
  .pkg-days{font-family:'Fraunces',serif;font-size:30px;color:var(--gold);margin-bottom:8px;}
  .pkg-card h3{color:var(--white);font-size:17.5px;margin-bottom:10px;}
  .pkg-card p{font-size:14px;color:rgba(255,254,251,0.68);margin-bottom:18px;}
  .pkg-card a{font-size:14px;font-weight:600;color:var(--white);border-bottom:1.5px solid var(--coral);padding-bottom:2px;}

  /* ---------- Why ---------- */
  .why{background:var(--white);}
  .why .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;}
  .why-stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin-top:36px;}
  .why-stats .num{font-family:'Fraunces',serif;font-size:38px;color:var(--coralDark);}
  .why-stats .lbl{font-size:13.5px;color:rgba(18,35,32,0.62);}
  .why-list{display:flex;flex-direction:column;gap:26px;}
  .why-item{display:flex;gap:18px;padding-bottom:26px;border-bottom:1px solid var(--line);}
  .why-item:last-child{border-bottom:none;padding-bottom:0;}
  .why-num{font-family:'Fraunces',serif;font-size:22px;color:var(--tealLight);flex:none;width:38px;}
  .why-item h3{font-size:17.5px;margin-bottom:6px;}
  .why-item p{font-size:14.5px;color:rgba(18,35,32,0.68);margin:0;}

  /* ---------- Testimonials ---------- */
  .testi{background:#F9FAFC;}
  .testi-track{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .testi-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:4px;
    padding:30px 28px;
    display:flex;flex-direction:column;
  }
  .testi-quote{font-size:15px;color:rgba(18,35,32,0.82);margin-bottom:22px;flex:1;}
  .testi-who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px;}
  .testi-avatar{width:38px;height:38px;border-radius:50%;background:var(--teal);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;}
  .testi-who strong{display:block;font-size:14.5px;color:var(--deep);}
  .testi-who span{font-size:12.5px;color:rgba(18,35,32,0.55);}

  /* ---------- Gallery ---------- */
  .gallery{background:var(--white);}

  .gallery-grid{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding-bottom:10px;

  /* Scrollbar */
  scrollbar-width:thin;
  scrollbar-color:var(--teal) transparent;
}

.gallery-grid::-webkit-scrollbar{
  height:6px;
}

.gallery-grid::-webkit-scrollbar-track{
  background:transparent;
}

.gallery-grid::-webkit-scrollbar-thumb{
  background:var(--teal);
  border-radius:10px;
}
  .gallery-tile{
  flex:0 0 260px;
  height:330px;
  border-radius:4px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:18px;
  color:var(--white);

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  transition:transform .25s ease, box-shadow .25s ease;
}

.gallery-tile::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;
  background:linear-gradient(
    to bottom,
    rgba(11,59,60,0),
    rgba(11,59,60,0.55)
  );
  z-index:1;
}
  .gallery-tile span{position:relative;
  z-index:2;
  font-size:14.5px;
  font-weight:600;
  font-family:'Fraunces',serif;
  color:var(--white);

}

.gallery-tile:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:10px 18px 35px -12px rgba(0, 0, 0, 0.45);
  z-index:2;
}

  /* ---------- GUEST ---------- */

  .guest{
  padding-top:1f0px;background:#F9FAFC;
}
.guest-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}

.guest-grid .gallery-tile{
  width:100%;
  height:280px;
  padding:0;
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:7px;
  background:none;
  display:block;
}

.guest-grid .gallery-tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}

.guest-grid .gallery-tile:hover img{
  transform:scale(1.06);
}

  /* ---------- FAQ ---------- */
  .faq{background:var(--white);}
  .faq .wrap{max-width:820px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 4px;cursor:pointer;
    font-family:'Fraunces',serif;font-size:18px;color:var(--deep);
  }
  .faq-q .plus{font-size:22px;color:var(--coral);transition:transform .25s;flex:none;margin-left:20px;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .faq-a p{font-size:15px;color:rgba(18,35,32,0.7);padding:0 4px 22px;margin:0;}

  /* ---------- Contact ---------- */
  .contact{background:var(--deep);color:var(--white);}
  .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
  .contact .head-tag{color:var(--gold);}
  .contact h2{color:var(--white);}
  .contact-desc{color:rgba(255,254,251,0.72);margin-bottom:34px;max-width:44ch;}
  .contact-list{display:flex;flex-direction:column;gap:22px;}
  .contact-list li{display:flex;gap:16px;list-style:none;align-items:flex-start;}
  .contact-list .ic{width:20px;height:20px;color:var(--gold);flex:none;margin-top:3px;}
  .contact-list strong{display:block;font-size:13px;color:rgba(255,254,251,0.6);margin-bottom:2px;font-weight:500;}
  .contact-list span, .contact-list a{font-size:16px;font-weight:500;}
  .contact-form{background:rgba(255,254,251,0.05);border:1px solid rgba(255,254,251,0.15);padding:34px;border-radius:4px;}
  .contact-form h3{color:var(--white);font-size:19px;margin-bottom:20px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  .form-row.full{grid-template-columns:1fr;}
  .contact-form input, .contact-form select, .contact-form textarea{
    width:100%;background:rgba(255,254,251,0.08);border:1px solid rgba(255,254,251,0.2);
    color:var(--white);padding:12px 14px;border-radius:3px;font-family:'Inter',sans-serif;font-size:14.5px;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{color:rgba(255,254,251,0.45);}
  .contact-form textarea{resize:vertical;min-height:80px;}
  .contact-form .btn{width:100%;justify-content:center;margin-top:6px;}

  /* ---------- Footer ---------- */
  footer{background:#082726;color:rgba(255,254,251,0.72);padding:64px 0 28px;}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,254,251,0.1);}
  .foot-logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--white);margin-bottom:14px;}
  .foot-about p{font-size:14.5px;max-width:32ch;}
  .foot-social{display:flex;gap:12px;margin-top:18px;}
  .foot-social a{width:34px;height:34px;border:1px solid rgba(255,254,251,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .foot-social svg{width:15px;height:15px;}
  footer h4{color:var(--white);font-size:14px;font-family:'Inter',sans-serif;font-weight:600;margin-bottom:18px;}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  footer ul a{font-size:14.5px;color:rgba(255,254,251,0.68);}
  footer ul a:hover{color:var(--gold);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;flex-wrap:wrap;gap:12px;}

  /* ---------- WA float ---------- */
  .wa-float{
    position:fixed;bottom:24px;right:24px;z-index:70;
    background:var(--coral);color:var(--white);
    width:58px;height:58px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 28px -8px rgba(232,95,59,0.6);
  }
  .wa-float svg{width:27px;height:27px;}

  /* ---------- Responsive ---------- */
  @media(max-width:980px){
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .fleet-scroll{grid-template-columns:repeat(2,1fr);}
    .pkg-grid{grid-template-columns:repeat(2,1fr);}
    .testi-track{grid-template-columns:repeat(2,1fr);}
    .gallery-grid{grid-template-columns:repeat(3,1fr);}
    .why .wrap, .contact .wrap{grid-template-columns:1fr;gap:44px;}
    .hero .wrap{grid-template-columns:1fr;}
    .hero-art{height:300px;order:-1;}
    .foot-top{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:700px){
    .wrap{padding:0 20px;}
    section{padding:64px 0;}
    .nav{padding:14px 0;}
    .logo{font-size:16.5px;gap:8px;}
    .logo-mark{width:30px;height:30px;}
    .nav-links, .nav-phone, .nav-right .btn{display:none;}
    .nav-toggle{display:block;}
    .nav-links a{padding:12px 4px;border-bottom:1px solid var(--line);width:100%;}
    .nav-links a:last-child{border-bottom:none;}
    .hero{padding-top:56px;}
    .hero h1{max-width:none;}
    .hero-cta{margin-bottom:40px;}
    .hero-cta .btn{flex:1 1 auto;justify-content:center;}
    .hero-art{height:230px;}
    .service-grid{grid-template-columns:1fr;}
    .fleet-scroll{grid-template-columns:1fr;}
    .pkg-grid{grid-template-columns:1fr;}
    .testi-track{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-tile:nth-child(1),.gallery-tile:nth-child(6){grid-row:span 1;}
    .form-row{grid-template-columns:1fr;}
    .foot-top{grid-template-columns:1fr;gap:32px;}
    .hero-stats{flex-wrap:wrap;row-gap:20px;}
    .hero-stats div{flex:1 1 45%;padding-right:0;}
    .contact-form{padding:24px 20px;}
    .why .wrap, .contact .wrap{gap:36px;}
  }
  @media(max-width:480px){
    .wrap{padding:0 16px;}
    section{padding:52px 0;}
    .hero h1{font-size:30px;}
    .hero-sub{font-size:16px;}
    .btn{padding:13px 20px;font-size:14.5px;}
    .head-row h2{font-size:26px;}
    .head-desc{font-size:15px;}
    .why-stats{grid-template-columns:1fr 1fr;gap:20px;}
    .gallery-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .testi-card, .fleet-body, .pkg-card{padding:22px 20px;}
    .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
    .wa-float{width:50px;height:50px;bottom:16px;right:16px;}
    .wa-float svg{width:23px;height:23px;}
  }