:root{--blue:#163f78;--ink:#0b0b0b;--text:#0c2b5f;--line:#e7e9ef;--bg:#f3f4f6;--link:#0869ff}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{text-decoration:none}
.container{width:min(1390px,calc(100% - 48px));margin:0 auto}

body, body *, body *::before, body *::after{
  text-shadow:none !important;
  backdrop-filter:none !important;
}
.feature-card::before,.feature-card::after,.card-body::before,.card-body::after,.hero::before,.hero::after,.hero__bg::before,.hero__bg::after{
  content:none !important;
  display:none !important;
}

.site-header{background:#fff;border-bottom:1px solid var(--line)}
.site-header__inner{min-height:60px;display:flex;align-items:center;justify-content:center;gap:56px}
.site-branding a{color:#111;font-size:28px;font-weight:400;line-height:1;letter-spacing:-.02em}
.desktop-nav{flex:0 1 auto}
.desktop-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:34px}
.desktop-nav__item{position:relative}
.desktop-nav__link{display:inline-flex;align-items:center;gap:7px;color:#111;font-size:19px;font-weight:400;padding:8px 0}
.desktop-nav__caret{font-size:12px;color:#666}
.desktop-nav__dropdown{display:none;list-style:none;margin:0;padding:8px 0;position:absolute;left:0;top:100%;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.08);z-index:50}
.desktop-nav__dropdown li a{display:block;padding:10px 14px;color:#222;font-size:14px}
.desktop-nav__dropdown li a:hover{background:#f5f7fb}
.desktop-nav__item.has-dropdown:hover>.desktop-nav__dropdown,.desktop-nav__item.has-dropdown:focus-within>.desktop-nav__dropdown{display:block}
.desktop-nav__item:nth-last-child(-n+3) .desktop-nav__dropdown{left:auto;right:0}

.mobile-menu-button{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer}
.mobile-menu-button span{display:block;width:28px;height:3px;background:#111;border-radius:3px;margin:5px 0}
.mobile-panel{display:none;background:#fff;border-top:1px solid var(--line)}
.mobile-panel[hidden]{display:none!important}
.mobile-panel.is-open{display:block}
.mobile-nav__list{list-style:none;margin:0;padding:8px 24px 18px}
.mobile-nav__item{border-bottom:1px solid #eef2f7}
.mobile-nav__toggle,.mobile-nav__single{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:15px 0;color:#222;font-size:18px;text-align:left}
.mobile-nav__submenu{list-style:none;padding:0 0 12px 14px;margin:0}
.mobile-nav__submenu li a{display:block;padding:8px 0;color:#35517c}

.hero{position:relative;height:740px;overflow:visible;background:none}
.hero__bg{position:absolute;inset:0;background:url('../images/hero-beach.jpg') left center/cover no-repeat}
.hero__content{position:relative;z-index:2;text-align:center;padding-top:62px;background:none}
.hero__content h1{margin:0 auto;max-width:760px;font-size:66px;line-height:1.06;font-weight:400;letter-spacing:-.04em;color:#000}
.hero__content p{margin:18px auto 0;max-width:870px;font-size:32px;line-height:1.32;font-weight:400;color:#000}

.cards-wrap{position:relative;z-index:3;margin-top:-390px;padding-bottom:0;background:none}
.cards-grid{width:min(85%,1280px);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch;background:none}
.feature-card{background:#fff;border:1px solid #e5e8ef;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 14px 28px rgba(20,40,70,.14);transition:transform .2s ease,box-shadow .2s ease}
.feature-card:hover{transform:translateY(-10px) scale(1.015);box-shadow:0 22px 42px rgba(20,40,70,.22)}
.feature-card img{width:100%;height:190px;object-fit:cover;object-position:center center;background:#fff}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;background:#fff}
.card-body h2{margin:0 0 16px;color:var(--blue);font-size:28px;line-height:1.08;font-weight:800;text-align:center;letter-spacing:-.02em}
.card-body p{flex:1;margin:0 0 20px;color:#0f3470;font-size:18px;line-height:1.5;text-align:center}
.card-body a{margin-top:auto;display:block;text-align:center;color:var(--link);font-size:19px;font-weight:500}

.site-footer{padding:32px 0 26px;background:#f2f3f5}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;width:min(930px,100%);margin:0 auto 28px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-col h2{margin:0 0 2px;color:var(--blue);font-size:20px;font-weight:800}
.footer-col a{color:#123a7a;font-size:17px;font-weight:400}
.footer-copy{text-align:center;color:#111;font-size:16px}

.page-content{padding:40px 0}

@media (max-width: 1200px){
  .site-header__inner{gap:28px}
  .desktop-nav__list{gap:18px}
  .desktop-nav__link{font-size:16px}
  .hero{height:650px}
  .hero__content h1{font-size:54px}
  .hero__content p{font-size:24px}
  .cards-wrap{margin-top:-330px}
  .cards-grid{width:min(92%,1280px)}
}

@media (max-width: 900px){
  .container{width:min(100%,calc(100% - 24px))}
  .desktop-nav{display:none}
  .mobile-menu-button{display:block}
  .site-header__inner{min-height:56px;justify-content:space-between;gap:12px}
  .site-branding a{font-size:22px}
  .hero{height:auto;min-height:320px;padding-bottom:24px}
  .hero__bg{background-position:left center}
  .hero__content{padding-top:30px}
  .hero__content h1{font-size:36px;max-width:100%}
  .hero__content p{font-size:18px;max-width:100%}
  .cards-wrap{margin-top:0;padding:18px 0;background:#f3f4f6}
  .cards-grid{grid-template-columns:1fr;gap:16px;width:min(100%,560px)}
  .feature-card{box-shadow:none;border-radius:14px}
  .feature-card:hover{transform:none;box-shadow:none}
  .feature-card img{height:180px}
  .card-body h2{font-size:24px}
  .card-body p{font-size:16px}
  .card-body a{font-size:16px}
  .footer-grid{grid-template-columns:1fr;gap:22px;width:min(360px,100%)}
  .footer-col{align-items:center}
  .footer-col h2{font-size:18px}
  .footer-col a,.footer-copy{font-size:14px}
}


/* v5.1: 3D realistic drawing hero + 3D animated cards on all devices */
.hero__bg{
  background-image:url('../images/hero-beach.jpg') !important;
  background-position:left center !important;
  background-size:cover !important;
}

.cards-grid{
  perspective:1200px !important;
}

.feature-card{
  border-radius:22px !important;
  box-shadow:
    0 18px 36px rgba(20,40,70,.18),
    0 6px 14px rgba(20,40,70,.12) !important;
  transform:translateZ(0) rotateX(0deg);
  transition:transform .22s ease, box-shadow .22s ease !important;
}

.feature-card:hover{
  transform:translateY(-10px) scale(1.018) rotateX(2deg) !important;
  box-shadow:
    0 28px 54px rgba(20,40,70,.26),
    0 10px 20px rgba(20,40,70,.16) !important;
}

.card-body{
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fc 100%) !important;
}

@media (max-width:900px){
  .feature-card{
    box-shadow:
      0 14px 28px rgba(20,40,70,.16),
      0 5px 12px rgba(20,40,70,.10) !important;
    transform:translateZ(0);
  }
  .feature-card:active{
    transform:translateY(-5px) scale(1.01) !important;
    box-shadow:
      0 20px 36px rgba(20,40,70,.20),
      0 7px 16px rgba(20,40,70,.12) !important;
  }
}


/* v5.2: more realistic 3D painted beach + mobile overlap/equal spacing */
.hero__bg{
  background-image:url('../images/hero-beach.jpg') !important;
  background-position:left center !important;
  background-size:cover !important;
}
@media (max-width:900px){
  .hero{
    min-height:360px !important;
    padding-bottom:0 !important;
  }
  .cards-wrap{
    margin-top:-72px !important;
    padding-top:0 !important;
    background:transparent !important;
  }
  .cards-grid{
    gap:16px !important;
  }
  .feature-card{
    box-shadow:
      0 14px 28px rgba(20,40,70,.16),
      0 5px 12px rgba(20,40,70,.10) !important;
    border-radius:18px !important;
    transition:transform .2s ease, box-shadow .2s ease !important;
  }
  .feature-card:hover,
  .feature-card:active{
    transform:translateY(-5px) scale(1.01) !important;
    box-shadow:
      0 20px 36px rgba(20,40,70,.20),
      0 7px 16px rgba(20,40,70,.12) !important;
  }
}


/* v29 mobile-only adjustment: move hero text down closer to first card */
@media (max-width:900px){
  .hero__content{
    padding-top:120px !important;
  }
}


/* v31: tighter hero-to-card spacing, premium 3D cards, better dropdowns, SEO/page-speed polish */

/* desktop: tighter hero-to-cards gap */
.cards-wrap{
  margin-top:-410px !important;
}

/* premium 3D card animation */
.cards-grid{
  perspective:1400px !important;
  transform-style:preserve-3d;
}
.feature-card{
  will-change:transform, box-shadow;
  transform:translateZ(0) rotateX(0deg);
  transform-origin:center bottom;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease !important;
}
.feature-card:hover{
  transform:translateY(-12px) scale(1.018) rotateX(2.4deg) !important;
  box-shadow:
    0 26px 54px rgba(20,40,70,.25),
    0 10px 22px rgba(20,40,70,.14) !important;
  border-color:#d7ddea !important;
}
.feature-card img{
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.feature-card:hover img{
  transform:scale(1.035);
}

/* dropdown UX: smoother hover, right-edge safe */
.desktop-nav__dropdown{
  display:block !important;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  pointer-events:none;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease !important;
}
.desktop-nav__item.has-dropdown:hover>.desktop-nav__dropdown,
.desktop-nav__item.has-dropdown:focus-within>.desktop-nav__dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.desktop-nav__item:nth-last-child(-n+3) .desktop-nav__dropdown{
  left:auto !important;
  right:0 !important;
}

/* rendering/page-speed */
.hero__bg{
  contain:paint;
}
.feature-card{
  content-visibility:auto;
  contain-intrinsic-size:360px 420px;
}

/* mobile: keep mobile-only background, exact 20% overlap, equal spacing */
@media (max-width:900px){
  .hero__bg{
    background-image:url('../images/hero-mobile.jpg') !important;
  }
  .hero{
    min-height:360px !important;
  }
  .hero__content{
    padding-top:118px !important;
  }
  .cards-wrap{
    margin-top:-72px !important;
    padding-top:0 !important;
    background:transparent !important;
  }
  .cards-grid{
    gap:16px !important;
  }
  .feature-card{
    box-shadow:
      0 14px 28px rgba(20,40,70,.16),
      0 5px 12px rgba(20,40,70,.10) !important;
    transform:translateZ(0);
    transition:
      transform .22s cubic-bezier(.2,.8,.2,1),
      box-shadow .22s cubic-bezier(.2,.8,.2,1) !important;
  }
  .feature-card:active{
    transform:translateY(-6px) scale(1.012) !important;
    box-shadow:
      0 20px 36px rgba(20,40,70,.20),
      0 7px 16px rgba(20,40,70,.12) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .feature-card,
  .feature-card img,
  .desktop-nav__dropdown{
    transition:none !important;
  }
  .feature-card:hover,
  .feature-card:active{
    transform:none !important;
  }
}


/* v32: mobile Travel card image fix + 4-column desktop footer */

/* Desktop footer: 4 aligned columns */
.site-footer .footer-grid{
  grid-template-columns:repeat(4,1fr) !important;
  width:min(1120px,100%) !important;
  gap:44px !important;
}

/* Mobile footer: 2 columns — Destinations/Planning, Resources/Information */
@media (max-width:900px){
  .site-footer .footer-grid{
    grid-template-columns:repeat(2,1fr) !important;
    width:min(100%,420px) !important;
    gap:24px 28px !important;
    align-items:start !important;
  }
  .site-footer .footer-col{
    align-items:center !important;
    text-align:center !important;
  }

  /* Mobile-only Travel card photo fix */
  .cards-grid .feature-card:nth-child(4) img{
    content:url('../images/card-travel-mobile.jpg') !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}