/* 
Away at Last Styles
Updated: April 2026
Notes:
- Header moved to style.css
- Homepage layout in home.css
*/

     :root{
      --navy:#18344a;
      --blue:#2f6e8f;
      --sky:#eef7fb;
      --sand:#f7f0e6;
      --text:#243441;
      --muted:#667784;
      --white:#ffffff;
      --border:#dde8ee;
      --shadow:0 10px 28px rgba(24,52,74,0.12);
      --radius:18px;
      --max:1100px;
    }

    *{box-sizing:border-box;}

    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--text);
      background:#f8fbfd;
      line-height:1.6;
    }

    img{
      max-width:100%;
      display:block;
      border-radius:14px;
    }

    a{
      color:var(--blue);
      text-decoration:none;
    }
    
    /* this is new */
    
    .btn-primary:hover,
.btn-secondary:hover {
  background:rgba(255,255,255,0.30);
}

    a:hover{
      text-decoration:underline;
    }

    .wrap{
      width:min(var(--max), calc(100% - 32px));
      margin:0 auto;
    }
    

    .hero{
      padding:28px 0 18px;
      background:linear-gradient(180deg, var(--sky) 0%, #ffffff 100%);
    }
    
    .home-hero {
  background:
    linear-gradient(rgba(16,36,52,0.18), rgba(16,36,52,0.06)),
    url('../images/gallery/hero/hero-image1.jpg') center center / cover no-repeat;
}
    

 
    .eyebrow{
      display:inline-block;
      font-size:0.80rem;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.08em;
      background:rgba(255,255,255,0.16);
      padding:6px 11px;
      border-radius:999px;
      margin-bottom:12px;
    }

    h1{
      margin:0 0 12px;
      font-size:clamp(2rem, 4vw, 3.5rem);
      line-height:1.08;
    }
    

    .hero-content p{
  font-size:1rem;
  margin-bottom:16px;
}

   
    
    .hero-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content: center;   /* ← ADD THIS */
}

    .btn{
      display:inline-block;
      padding:12px 18px;
      border-radius:999px;
      font-weight:700;
    }
    
   
    .btn-primary {
  background:rgba(255,255,255,0.18);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.35);
}

    .btn-secondary{
      background:rgba(255,255,255,0.14);
      color:#ffffff;
      border:1px solid rgba(255,255,255,0.28);
    }

    section{
      padding:54px 0;
    }

    .section-head{
      max-width:760px;
      margin-bottom:22px;
    }

    .section-head h2{
      margin:0 0 10px;
      color:var(--navy);
      font-size:2rem;
      line-height:1.15;
    }

    .section-head p{
      margin:0;
      color:var(--muted);
    }

    .three-col{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:22px;
    }

    .two-col{
      display:grid;
      grid-template-columns:1.15fr 0.85fr;
      gap:24px;
      align-items:center;
    }

    .gallery{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:18px;
    }

    .card{
      background:#ffffff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:24px;
    }

    .card h3{
      margin:0 0 10px;
      color:var(--navy);
      font-size:1.2rem;
    }

    .card p{
      margin:0;
    }

    .feature-image img,
    .gallery img{
      width:100%;
      height:100%;
      object-fit:cover;
      box-shadow:var(--shadow);
    }

    .quote-box{
      background:linear-gradient(135deg, var(--navy), #295e7f);
      color:#fff;
      border-radius:24px;
      padding:34px;
      box-shadow:var(--shadow);
    }

    .quote-box blockquote{
      margin:0;
      font-size:1.5rem;
      font-weight:700;
      line-height:1.35;
    }

    .quote-box p{
      margin:14px 0 0;
      color:rgba(255,255,255,0.82);
    }

   /*
   .footer{
      border-top:1px solid var(--border);
      background:#ffffff;
      color:var(--muted);
      /*
      padding:28px 0 40px;
      */
      padding: 14px 0 18px;
      font-size:0.95rem;
    }
   */
   

 
 @media (max-width: 900px){
  .three-col,
  .gallery{
    grid-template-columns:repeat(2, 1fr);
  }

  .two-col{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .three-col,
  .two-col,
  .gallery{
    grid-template-columns:1fr;
  }
}

.wave-video-section {
  margin: 20px 0;
  padding: 10px 0;
}

.wave-video-wrap {
  position: relative;
  height: 360px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.wave-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wave-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.wave-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.15);
}

@media (max-width: 640px) {
  .wave-video-wrap {
    height: 220px;
  }
}
    
/* this is the new wave css specs
.wave-video-section {
  padding: 20px 0;
}

.wave-video-section .wrap {
  padding: 0;
}

.wave-video-wrap {
  line-height: 0;
}

.wave-video {
  display: block;
  width: 100%;
  height: auto;
}

*/

/* remove the old wave css completely   

.wave-video-section {
  margin: 40px 0;
  padding: 20px 0;
}

.wave-video-wrap {
  position: relative;
  height: 360px;
  line-height: 0;
  border-radius: 24px;
  
  display: block;
  width: 100%;
  height: auto;
  
  
  overflow: hidden;
  box-shadow: var(--shadow);
}

.wave-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  
  display: block;
  width: 100%;
  height: auto;
  
  object-fit: cover;
  transform: translate(-50%, -50%);
}


.wave-overlay {
  position: absolute;
  /* Just added this one line to tame down the text 
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  padding: 20px;
}




/*




/* subtle dark overlay for readability */
.wave-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
}


    @media (max-width: 640px) {
  .wave-video-wrap {
    height: 220px;   /* try 200–240 range */
  }
}  

      .brand img{
        height:46px;
      }

      .hero{
        padding-top:18px;
      }

      .hero-box{
        min-height:260px;
        /*------THIS PINK DID NOTHING VISUAL SO IT HAS TO BE OVER WRITTEN--*/
        /*border: 22px dotted pink;*/
      }

      .hero-content{
        padding:20px;
      }

      h1{
        font-size:2rem;
      }

      section{
        padding:42px 0;
      }
    }


@media (max-width: 640px) {
  .three-col {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .three-col .card {
    width: 100%;
    max-width: 100%;
    padding: 16px 18px;
  }

  .card h3 {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  .card p {
    font-size: 0.92rem;
    line-height: 1.4;
  }
}

@media screen and (max-width: 640px) {
  .three-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .three-col .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
  }
}

/* ===== HOMEPAGE TABLET / PHONE OVERRIDES ===== */

/* iPad / tablet */
@media (max-width: 900px) {
  .three-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .two-col {
    grid-template-columns: 1fr !important;
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

/* iPhone */
@media (max-width: 640px) {
  .three-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .two-col {
    grid-template-columns: 1fr !important;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .gallery img {
    height: 140px;
    object-fit: cover;
  }