:root{
    --bg:#f6fbff;          /* beachy white */
    --card:#ffffff;
    --text:#0b1220;        /* black-ish */
    --muted:#4b5b73;
    --blue:#0ea5e9;        /* sky/ocean */
    --blue2:#1d4ed8;       /* deep blue */
    --border: rgba(15,23,42,.10);
    --shadow: 0 18px 50px rgba(2, 24, 56, .10);
    --radius: 18px;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background:
      radial-gradient(1100px 600px at 20% 0%, rgba(14,165,233,.18), transparent 60%),
      radial-gradient(900px 500px at 80% 10%, rgba(29,78,216,.12), transparent 55%),
      var(--bg);
    color: var(--text);
    line-height:1.55;
  }
  
  a{color:inherit;text-decoration:none}
  .container{max-width:1100px;margin:0 auto;padding:0 18px}
  
  /* NAV */
  .nav{
    position:sticky;top:0;z-index:50;
    background: rgba(246,251,255,.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0; gap:14px;
  }
  .brand{display:flex;align-items:center;gap:12px}
  .brand img,
  .navbar-logo{
    width: clamp(60px, 8vw, 86px);
    height: clamp(60px, 8vw, 86px);
    object-fit:contain;
    flex-shrink:0;
  }
  .brand .title{
    font-weight: 900;
    letter-spacing: .2px;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.1;
  }
  .brand .subtitle{font-size:12px;color:var(--muted);margin-top:2px}
  
  .links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .links a{font-size:14px;color:var(--muted)}
  .links a:hover{color: var(--text)}
  
  /* BUTTONS */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;border-radius:14px;
    border:1px solid var(--border);
    background: #fff;
    color: var(--text);
    transition: transform .15s ease, box-shadow .15s ease, border .15s ease;
    cursor:pointer;
  }
  .btn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,24,56,.10)}
  .btn.primary{
    border: 1px solid rgba(14,165,233,.55);
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: #fff;
  }
  .btn.primary:hover{transform: translateY(-2px); box-shadow: 0 16px 32px rgba(2,24,56,.18)}
  .btn.facebook{
    border: 1px solid #1877f2;
    background:#1877f2;
    color:#fff;
    font-weight:700;
  }
  .btn.facebook:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(24,119,242,.28);
    border-color:#166fe5;
    background:#166fe5;
  }
  .btn.ghost{
    background: rgba(14,165,233,.08);
    border: 1px solid rgba(14,165,233,.22);
    color: var(--text);
  }
  .btn.small{padding:8px 12px;border-radius:12px;font-size:13px}
  
  /* HERO */
  .hero{padding:44px 0 18px}
  .hero-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:18px;
    align-items:stretch;
  }
  .card{
    background: rgba(255,255,255,.88);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:22px;
    box-shadow: var(--shadow);
  }
  .hero-card{
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
      radial-gradient(900px 400px at 10% 20%, rgba(14,165,233,.25), transparent 60%),
      radial-gradient(700px 300px at 90% 30%, rgba(29,78,216,.18), transparent 55%);
    border:1px solid rgba(14,165,233,.18);
  }
  h1{
    margin:0;
    font-size:44px;
    line-height:1.05;
    letter-spacing:-.6px;
  }
  .lead{color:var(--muted);font-size:16px;margin:14px 0 18px;max-width:65ch}

  /* JUNE PROMOTIONS */
  .june-promo{
    padding:32px 0 18px;
  }
  .june-promo-shell{
    overflow:hidden;
    border-radius: calc(var(--radius) + 6px);
    border:1px solid rgba(255,255,255,.48);
    background:
      linear-gradient(135deg, #062237 0%, #0b6a8f 58%, #f4b84a 100%);
    box-shadow: 0 28px 70px rgba(2,24,56,.22);
    color:#fff;
  }
  .june-promo-grid{
    display:grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap:22px;
    align-items:stretch;
    padding:24px;
  }
  .june-promo-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
  }
  .promo-kicker{
    width:max-content;
    max-width:100%;
    margin-bottom:12px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:rgba(255,255,255,.92);
    font-size:13px;
    font-weight:800;
  }
  .june-promo h1{
    margin:0;
    max-width:12ch;
    font-size:clamp(34px, 5vw, 58px);
    line-height:1.02;
    letter-spacing:0;
  }
  .june-promo .lead{
    color:rgba(255,255,255,.9);
    font-size:18px;
    max-width:54ch;
  }
  .promo-savings{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
    max-width:520px;
    margin:2px 0 18px;
  }
  .promo-savings div{
    min-width:0;
    padding:14px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:16px;
    background:rgba(255,255,255,.12);
  }
  .promo-savings span{
    display:block;
    margin-bottom:4px;
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
  }
  .promo-savings strong{
    display:block;
    font-size:clamp(24px, 3vw, 34px);
    line-height:1;
  }
  .promo-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }
  .june-promo .btn.primary{
    border-color:transparent;
    background:#fff;
    color:#062237;
    font-weight:900;
  }
  .june-promo .btn.ghost{
    border-color:rgba(255,255,255,.36);
    background:rgba(255,255,255,.12);
    color:#fff;
  }
  .airport-promo{
    max-width:620px;
    padding:16px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:16px;
    background:rgba(6,34,55,.32);
  }
  .airport-promo h2{
    margin:0 0 6px;
    color:#fff;
    font-size:22px;
    line-height:1.15;
  }
  .airport-promo p{
    margin:0 0 10px;
    color:rgba(255,255,255,.86);
  }
  .promo-text-link{
    color:#fff;
    font-size:14px;
    font-weight:900;
    text-decoration:underline;
    text-underline-offset:4px;
  }
  .june-promo-media{
    display:grid;
    align-content:center;
    gap:10px;
    min-width:0;
  }
  .promo-video-frame{
    overflow:hidden;
    min-height:390px;
    aspect-ratio: 4 / 5;
    border:1px solid rgba(255,255,255,.34);
    border-radius:20px;
    background:#062237;
    box-shadow: 0 24px 52px rgba(2,24,56,.24);
  }
  .promo-video,
  .promo-mini-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#062237;
  }
  .media-caption{
    color:rgba(255,255,255,.86);
    font-size:13px;
    font-weight:800;
    text-align:center;
  }
  .promo-video-strip{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    padding:0 24px 24px;
  }
  .promo-mini{
    display:grid;
    grid-template-columns:128px minmax(0, 1fr);
    gap:12px;
    align-items:center;
    padding:10px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:16px;
    background:rgba(255,255,255,.12);
  }
  .promo-mini-video{
    min-height:92px;
    aspect-ratio: 4 / 3;
    overflow:hidden;
    border-radius:12px;
  }
  .promo-mini p{
    margin:0;
    color:rgba(255,255,255,.88);
    font-weight:800;
  }
  .transport-heading{
    margin:0;
    font-size:44px;
    line-height:1.05;
    letter-spacing:0;
  }
  
  /* TRUST BADGES */
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
  .badge{
    font-size:13px;
    color: var(--text);
    border:1px solid rgba(14,165,233,.18);
    background: rgba(14,165,233,.07);
    padding:8px 10px;
    border-radius:999px;
  }
  
  /* SECTIONS */
  .section{padding:22px 0}
  .section h2{margin:0 0 10px;font-size:22px;letter-spacing:-.3px}
  .section p{color:var(--muted);margin:0 0 16px}
  
  /* GRIDS */
  .grid3{display:grid;grid-template-columns: repeat(3, 1fr);gap:14px}
  .item{
    border-radius: 16px;
    border:1px solid var(--border);
    background: #fff;
    padding:16px;
    box-shadow: 0 10px 26px rgba(2,24,56,.06);
  }
  .item h3{margin:0 0 6px;font-size:16px}
  .item p{margin:0;color:var(--muted);font-size:14px}
  
  .split{display:grid;grid-template-columns: 1fr 1fr;gap:14px}
  
  /* GALLERY */
  .gallery{display:grid;grid-template-columns: repeat(3, 1fr);gap:10px}
  .ph{
    border-radius: 16px;
    border:1px solid var(--border);
    background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(255,255,255,1));
    overflow:hidden;
    min-height:160px;
    display:flex;align-items:center;justify-content:center;
    color: rgba(11,18,32,.55);
    font-size:13px;
  }
  .ph img{width:100%;height:100%;object-fit:cover;display:block}

  /* REVIEWS */
  .reviews-card{display:grid;gap:14px}
  .review-slide{min-height:140px}
  .review-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .review-name{font-weight:800}
  .review-text{margin:8px 0 0;color:var(--muted)}
  .reviews-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .reviews-dots{display:flex;align-items:center;gap:6px}
  .reviews-dot{
    width:10px;
    height:10px;
    padding:0;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(14,165,233,.18);
    cursor:pointer;
  }
  .reviews-dot.active{
    background: var(--blue);
    border-color: rgba(14,165,233,.55);
  }
  
  /* FOOTER */
  .footer{
    padding:26px 0 40px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
  }
  .site-footer{
    padding:26px 0 40px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
  }
  .site-footer p{margin:0}
  .footer-social{
    margin-top:10px;
    font-size:13px;
  }
  .footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:6px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid #1877f2;
    background:#1877f2;
    color:#fff;
    font-weight:700;
    text-decoration:none;
  }
  .footer-social a:hover{
    border-color:#166fe5;
    background:#166fe5;
  }
  
  /* MOBILE */
  @media (max-width: 900px){
    .june-promo{padding-top:24px}
    .june-promo-grid{grid-template-columns:1fr;padding:18px}
    .june-promo h1{max-width:15ch}
    .promo-video-frame{min-height:310px;aspect-ratio: 16 / 10}
    .promo-video-strip{
      grid-template-columns:1fr 1fr;
      padding:0 18px 18px;
    }
    .promo-mini{grid-template-columns:1fr}
    .promo-mini-video{min-height:180px;aspect-ratio: 16 / 9}
    .hero-grid{grid-template-columns:1fr}
    h1{font-size:38px}
    .transport-heading{font-size:38px}
    .grid3{grid-template-columns:1fr}
    .split{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr 1fr}
  }
 /* Pinnacle watermark (clean version) */
.made-by{
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: var(--muted);
  }
  
  .made-by a{
    font-weight: 700;
    color: #6d28d9; /* tasteful purple */
    text-decoration: none;
    transition: color .15s ease, text-decoration .15s ease;
  }
  
  .made-by a:hover{
    color: #4c1d95;
    text-decoration: underline;
  }
  /* Stars + review form */
.stars{
    font-size: 18px;
    letter-spacing: 2px;
    color: #f59e0b; /* gold stars */
    user-select:none;
  }
  
  .field .label{
    display:block;
    font-weight:700;
    margin-bottom:6px;
  }
  
  .req{ color:#dc2626; font-weight:900; }
  
  input[type="text"], textarea{
    width:100%;
    padding:11px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    outline: none;
    font-size: 14px;
  }
  input[type="text"]:focus, textarea:focus{
    border-color: rgba(14,165,233,.55);
    box-shadow: 0 0 0 4px rgba(14,165,233,.14);
  }
  
  /* Clickable star rating */
  .rating{
    display:flex;
    flex-direction: row-reverse;
    justify-content:flex-end;
    gap:6px;
  }
  .rating input{ display:none; }
  .rating label{
    font-size: 26px;
    color: rgba(245,158,11,.25);
    cursor:pointer;
    transition: transform .12s ease, color .12s ease;
    line-height:1;
  }
  .rating label:hover{ transform: translateY(-1px); }
  .rating input:checked ~ label,
  .rating label:hover,
  .rating label:hover ~ label{
    color: #f59e0b;
  }
  
/* =========================
   Mobile layout fixes only
   ========================= */
   @media (max-width: 720px) {

    /* Make header/nav stop doing weird wraps */
    .container.nav,
    .nav {
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }
  
    .brand {
      flex: 1 1 100%;
      min-width: 0;
    }
  
    .menu {
      flex: 1 1 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      justify-content: center;
    }
  
    .menu a {
      white-space: nowrap;
    }
  
    .actions {
      flex: 1 1 100%;
      display: flex;
      justify-content: center;
      gap: 10px;
    }
  
    /* Contact section: make cards stack and fit */
    .contact-grid,
    .contact-cards,
    .contact-options,
    .contact-row {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
  
    /* Make any "card" style element stop overflowing */
    .contact-card,
    .contact-box,
    .contact-panel,
    .card {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
  
    /* Prevent long text/links from pushing layout sideways */
    .contact-card *,
    .contact-box *,
    .contact-panel * {
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
  
    /* Buttons inside contact area should fit */
    .contact-card button,
    .contact-card a,
    .contact-box button,
    .contact-box a {
      width: 100%;
    }
  
    /* If you have 3 mini cards (WhatsApp/Phone/Email), this makes them equal */
    .contact-card .mini,
    .contact-card .contact-mini,
    .contact-mini {
      width: 100% !important;
    }
  
    /* Just in case the whole page is getting horizontal scroll */
    html, body {
      overflow-x: hidden;
    }
  }
  /* =========================
   REAL Mobile fixes (nav + contact)
   ========================= */
@media (max-width: 720px){
  .june-promo{
    padding-top:18px;
  }

  .june-promo-grid{
    padding:16px;
  }

  .june-promo h1{
    max-width:100%;
    font-size:clamp(30px, 9vw, 40px);
  }

  .june-promo .lead{
    font-size:16px;
  }

  .promo-savings,
  .promo-video-strip{
    grid-template-columns:1fr;
  }

  .promo-actions .btn{
    width:100%;
  }

  .promo-video-frame{
    min-height:260px;
    aspect-ratio: 4 / 3;
    border-radius:16px;
  }

  .promo-mini-video{
    min-height:170px;
  }

  .airport-promo{
    padding:14px;
  }

  .airport-promo h2{
    font-size:19px;
  }

  /* NAV: stack brand + links cleanly */
  .nav-inner{
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .brand{
    width: 100%;
    justify-content: center;
    text-align: left;
  }

  .links{
    width: 100%;
    justify-content: center;
    gap: 12px;
  }

  .links a{
    white-space: nowrap;
  }

  /* CONTACT: override the inline 3-column style */
  #contact .grid3{
    grid-template-columns: 1fr !important;
  }

  /* Make sure the contact card never overflows */
  #contact .card{
    padding: 16px;
  }

  #contact .item{
    width: 100%;
  }

  /* Buttons inside contact section should fit */
  #contact .btn{
    width: 100%;
  }

  html, body{
    overflow-x: hidden;
  }
}
/* ===== Mobile fix: Contact section layout ===== */
@media (max-width: 900px){
  .grid3.contact-grid{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .grid3.contact-grid .item{
    width: 100%;
  }

  /* Prevent long email/strings from overflowing */
  .grid3.contact-grid .item p,
  .grid3.contact-grid .item a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}