/*
Theme Name: postcardsfromanywheretravel
Author: Rehan Latif
Author URI: http://mrehanlatif.com
Description: Personalized Travel Agent Theme
Version: 1.0
*/

:root{
  --cream:      #F8F4EF;
  --beige-nav:  #DCCDBD;
  --tan:        #DCCDBD;
  --periwinkle: #A9D2D3;
  --white:      #FFFFFF;
  --navy:       #163E52;
  --navy-deep:  #163E52;
  --sky:        #5FAFC4;
  --coral:      #D96B5F;
  --yellow:     #FFF3B8;
  --ink-soft:   #5B6472;
  --gray:       #9AA0A6;

  --font-display: "Playfair Display", Georgia, serif;
  --font-hand:    "Beau Rivage", cursive;
  --font-body:    "Montserrat", -apple-system, sans-serif;
  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--cream); color:var(--navy); font-family:var(--font-body); font-weight:300; line-height:1.7; -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; color:inherit; }
p{ margin:0; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; color:var(--navy); }
.script{ font-family:var(--font-hand); font-weight:400; }
.italic{ font-style:italic; font-weight:500; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
section{ padding:88px 0; }
.uppercase-tight{ text-transform:uppercase; letter-spacing:2px; }

.placeholder{
  background: repeating-linear-gradient(45deg, #EDE4CE, #EDE4CE 10px, #E3D6B4 10px, #E3D6B4 20px);
  border:1.5px dashed #B79B67; color:#6E5A38; font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px; border-radius:0;
}

.btn{ display:inline-block; padding:15px 34px; font-weight:500; font-size:12px; letter-spacing:2px; text-transform:uppercase; border:1.5px solid transparent; cursor:pointer; transition:all .25s ease; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(22,62,82,.22); }
.btn-navy{ background:var(--navy); color:var(--white); }
.btn-navy:hover{ background:var(--coral); }
.btn-outline{ background:transparent; border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-outline.white{ border-color:var(--white); color:var(--white); }
.btn-outline.white:hover{ background:var(--white); color:var(--navy); }

/* ===================== SCROLL-REVEAL ANIMATION SYSTEM ===================== */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1), transform 1.2s cubic-bezier(0.25,1,0.5,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-group > *{ opacity:0; transform:translateY(40px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1), transform 1.2s cubic-bezier(0.25,1,0.5,1); }
.reveal-group.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-group.is-visible > *:nth-child(1){ transition-delay:.1s; }
.reveal-group.is-visible > *:nth-child(2){ transition-delay:.25s; }
.reveal-group.is-visible > *:nth-child(3){ transition-delay:.4s; }
.reveal-group.is-visible > *:nth-child(4){ transition-delay:.55s; }
.reveal-group.is-visible > *:nth-child(5){ transition-delay:.7s; }
.reveal-group.is-visible > *:nth-child(6){ transition-delay:.85s; }

.reveal-zoom { opacity:0; transform:scale(1.08); transition:opacity 1.5s cubic-bezier(0.25,1,0.5,1), transform 1.5s cubic-bezier(0.25,1,0.5,1); }
.reveal-zoom.is-visible { opacity:1; transform:scale(1); }
.reveal-group.is-visible > .reveal-zoom { transform:scale(1); opacity:1; }

/* card / photo hover motion */
.wander-card{ transition:transform .35s ease, box-shadow .35s ease; }
.wander-card:hover{ transform:translateY(-8px); box-shadow:0 18px 32px rgba(22,62,82,.14); }
.stamp-photo{ transition:transform .35s ease; }
.stamp-photo:hover{ transform:rotate(-3deg) scale(1.06); }
.group-box{ overflow:hidden; display:block; position:relative; text-decoration:none; }
.group-box .placeholder{ transition:transform .7s ease; aspect-ratio:16/7; }
.group-box:hover .placeholder, .group-box:hover .group-hero-img { transform:scale(1.05); }
.group-box-overlay{ transition:background .4s ease; position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(180deg, rgba(22,40,63,.15) 0%, rgba(22,40,63,.65) 100%); color:var(--white); padding:24px; }
.group-box-overlay h3{ color:var(--white); font-size:28px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.group-box-overlay p{ font-size:14.5px; color:#E4E9F0; max-width:460px; margin-bottom:22px; font-weight:300; }
@media(min-width:640px){ .group-box-overlay h3{ font-size:34px; } }
.testi-card .film-strip{ transition:transform .35s ease; }
.testi-card .film-strip:hover{ transform:rotate(-3deg) scale(1.04); }
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--navy); transition:width .3s ease; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

/* subtle hero zoom-in on load */
.page-hero video{ animation:heroZoom 14s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.page-hero-content > *{ opacity:0; transform:translateY(20px); animation:heroFadeUp 1s ease forwards; }
.page-hero-content > *:nth-child(1){ animation-delay:.2s; }
.page-hero-content > *:nth-child(2){ animation-delay:.4s; }
.page-hero-content > *:nth-child(3){ animation-delay:.6s; }
@keyframes heroFadeUp{ to{ opacity:1; transform:translateY(0); } }

/* YouTube Background Video Styles */
.video-background {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; overflow: hidden; pointer-events: none;
  animation: heroZoom 14s ease-in-out infinite alternate; 
  transform-origin: center center;
}
.video-background iframe {
  width: 100vw;
  height: 56.25vw; /* 16:9 ratio */
  min-height: 100vh;
  min-width: 177.77vh; /* 16:9 ratio */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.video-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* Light overlay */
  z-index: 1;
}

/* ===================== HEADER (solid bar, per reference site) ===================== */
header{ background:var(--beige-nav); position:sticky; top:0; z-index:50; transition:box-shadow .3s ease; }
header.scrolled{ box-shadow:0 2px 16px rgba(22,62,82,.1); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; }
.logo-text{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--navy); }
.nav-links{ display:none; gap:26px; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--navy); font-weight:500; }
.nav-links a.active{ border-bottom:1px solid var(--navy); padding-bottom:5px; }
@media(min-width:1060px){ .nav-links{ display:flex; } }

/* ===================== PAGE HERO (video, every page) ===================== */
.page-hero{ position:relative; min-height:70vh; display:flex; align-items:flex-end; color:var(--white); overflow:hidden; }
.page-hero.tall{ min-height:88vh; }
.page-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,25,40,.1) 0%, rgba(15,25,40,.5) 100%); z-index:1; }
.page-hero-content{ position:relative; z-index:2; padding-bottom:64px; text-align:center; width:100%; }
.page-hero-eyebrow{ font-family:var(--font-hand); font-size:22px; margin-bottom:6px; }
.page-hero h1{ font-size:34px; line-height:1.2; color:var(--white); text-transform:uppercase; letter-spacing:1px; }
.page-hero-sub{ font-size:15px; color:#EDEAE3; max-width:480px; margin:14px auto 0; font-weight:300; }
.page-hero-content .btn{ margin-top:26px; }
@media(min-width:900px){ .page-hero h1{ font-size:48px; } }

/* ===================== HOW WE HELP YOU / WANDER — 4 card grid ===================== */
.parallax-wrapper { position: relative; }
.sticky-element { position: sticky; top: 80px; z-index: 1; }
.overlay-section { position: relative; z-index: 2; }
.wander-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.wander-head h2{ font-size:34px; text-transform:uppercase; letter-spacing:1px; }
.wander-head .italic{ display:block; font-size:44px; text-transform:none; letter-spacing:0; }
.wander-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:700px){ .wander-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .wander-grid{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.wander-card{ border:1px solid var(--navy); padding:32px 24px; text-align:center; }
.wander-card h3{ font-size:22px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:20px; min-height:84px; display:flex; flex-direction:column; justify-content:center; }
.wander-photo{ position:relative; margin-bottom:20px; }
.wander-photo .placeholder{ aspect-ratio:3/4; }
.wander-photo .stamp-photo{ position:absolute; bottom:-24px; right:-10px; width:44%; transform:rotate(1deg); }
.wander-photo .stamp-photo .placeholder{ aspect-ratio:1/1; font-size:9px; }
.stamp-photo{ background:var(--white); padding:8px; box-shadow:0 8px 20px rgba(0,0,0,.12);
  clip-path: polygon(
    0% 3%,2% 0%,5% 3%,8% 0%,11% 3%,14% 0%,17% 3%,20% 0%,23% 3%,26% 0%,29% 3%,32% 0%,35% 3%,38% 0%,41% 3%,44% 0%,47% 3%,50% 0%,53% 3%,56% 0%,59% 3%,62% 0%,65% 3%,68% 0%,71% 3%,74% 0%,77% 3%,80% 0%,83% 3%,86% 0%,89% 3%,92% 0%,95% 3%,98% 0%,100% 3%,
    100% 97%,98% 100%,95% 97%,92% 100%,89% 97%,86% 100%,83% 97%,80% 100%,77% 97%,74% 100%,71% 97%,68% 100%,65% 97%,62% 100%,59% 97%,56% 100%,53% 97%,50% 100%,47% 97%,44% 100%,41% 97%,38% 100%,35% 97%,32% 100%,29% 97%,26% 100%,23% 97%,20% 100%,17% 97%,14% 100%,11% 97%,8% 100%,5% 97%,2% 100%,0% 97%
  );
}
.film-strip{ background:var(--white); padding:8px; box-shadow:0 8px 20px rgba(0,0,0,.1); }
.wander-tag{ font-family:var(--font-hand); font-size:22px; margin-bottom:12px; margin-top:34px; }
.wander-sub{ font-size:13px; color:var(--ink-soft); font-weight:300; margin-bottom:18px; line-height:1.5; }
.wander-card .btn{ width:100%; }

/* ===================== WHY TRAVEL WITH — dark navy section ===================== */
.why-navy{ background:var(--navy-deep); color:var(--white); }
.why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; position:relative; }
@media(min-width:960px){ .why-grid{ grid-template-columns:.7fr 1.3fr .5fr; } }
.why-head{ grid-column:1/-1; margin-bottom:8px; }
@media(min-width:960px){ .why-head{ grid-column:2/3; margin-top:0; } }
.why-head h2{ color:var(--white); font-size:34px; text-transform:uppercase; letter-spacing:.5px; line-height:1.25; }
.why-head .italic{ color:var(--white); }
.why-photo-main .placeholder{ aspect-ratio:3/4; }
.why-caption{ font-family:var(--font-hand); font-size:20px; color:var(--white); margin-top:-46px; margin-left:16px; position:relative; }
.why-items{ display:flex; flex-direction:column; gap:30px; margin-top:30px; }
.why-item{ display:flex; gap:14px; }
.why-check{ flex-shrink:0; width:22px; height:22px; border:1.5px solid var(--white); display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:4px; }
.why-item h4{ color:var(--white); font-size:19px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.why-item p{ font-size:14.5px; color:#C9D2DE; font-weight:300; }
.why-photo-side{ display:none; }
@media(min-width:960px){ .why-photo-side{ display:block; } }
.why-photo-side .stamp-photo{ width:100%; }
.why-photo-side .placeholder{ aspect-ratio:2/3; }

/* ===================== HOW IT WORKS — tan section, numbered steps ===================== */
.works-tan{ background:var(--tan); position:relative; }
.works-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; }
.works-script{ font-family:var(--font-hand); font-size:24px; transform:rotate(-3deg); display:inline-block; margin-bottom:8px; }
.works-top h2{ font-size:40px; text-transform:uppercase; letter-spacing:1px; }
.works-photo{ width:220px; }
.works-photo .placeholder{ aspect-ratio:16/9; }
.works-steps{ display:grid; grid-template-columns:1fr; gap:44px; align-items:start; }
@media(min-width:860px){ .works-steps{ grid-template-columns:repeat(4,1fr); } }
.works-step{ text-align:center; position:relative; }
.works-num{ font-family:var(--font-display); font-style:italic; font-size:30px; color:var(--navy); margin-bottom:6px; }
.works-step h4{ font-size:19px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.works-step p{ font-size:14px; color:var(--ink-soft); }
.works-footer{ text-align:center; margin-top:48px; }

/* ===================== GROUP TRAVEL (destinations, cream) ===================== */
.dest-head{ text-align:center; max-width:600px; margin:0 auto 48px; }
.dest-head .script{ font-size:28px; display:block; }
.dest-head h2{ font-size:34px; text-transform:uppercase; letter-spacing:1px; }

/* ===================== TESTIMONIALS ===================== */
.testi-head{ text-align:center; margin-bottom:48px; }
.testi-head h2{ font-size:32px; text-transform:uppercase; letter-spacing:1px; }
.testi-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:820px){ .testi-grid{ grid-template-columns:repeat(3,1fr); } }
.testi-card{ text-align:center; }
.testi-card .film-strip{ max-width:180px; margin:0 auto 22px; }
.testi-card .placeholder{ aspect-ratio:1/1; }
.testi-quote{ font-size:15px; color:var(--ink-soft); font-style:italic; margin-bottom:12px; }
.testi-name{ font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:700; color:var(--navy); }

/* ===================== MEET JAZMIN — navy section ===================== */
.advisor{ background:var(--navy); color:var(--white); }
.advisor-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
@media(min-width:900px){ .advisor-grid{ grid-template-columns:.8fr 1.2fr; } }
.advisor-photo .stamp-photo{ width:100%; }
.advisor-photo .placeholder{ aspect-ratio:4/5; }
.advisor-copy .script{ font-size:26px; display:block; }
.advisor-copy h2{ color:var(--white); font-size:32px; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.advisor-copy p{ font-size:15px; color:#D6DEEA; margin-bottom:26px; max-width:500px; font-weight:300; }

/* ===================== NEWSLETTER — periwinkle section ===================== */
.newsletter-peri{ background:var(--periwinkle); }
.newsletter-grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
@media(min-width:900px){ .newsletter-grid{ grid-template-columns:1fr 1fr .5fr; } }
.newsletter-copy .script{ font-size:22px; display:block; margin-bottom:6px; }
.newsletter-copy h2{ font-size:32px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:16px; }
.newsletter-copy p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:22px; max-width:420px; font-weight:300; }
.newsletter-form form { display: flex; flex-wrap: wrap; gap: 0; max-width: 460px; width: 100%; }
.newsletter-form input.wpcf7-email { flex: 1; min-width: 200px; padding: 15px 16px; border: 1.5px solid var(--navy); background: var(--cream); font-family: var(--font-body); font-size: 14px; outline: none; margin: 0; }
.newsletter-form input.wpcf7-submit { background: var(--navy); color: var(--white); border: 1.5px solid var(--navy); padding: 15px 34px; font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .25s ease; margin: 0; } 
.newsletter-form input.wpcf7-submit:hover { background: var(--coral); border-color: var(--coral); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(22,62,82,.22); }
.newsletter-photo .placeholder{ aspect-ratio:4/5; }
.newsletter-filmstrip{ display:none; }
@media(min-width:900px){ .newsletter-filmstrip{ display:flex; flex-direction:column; gap:10px; } }
.newsletter-filmstrip .placeholder{ aspect-ratio:1/1; }

/* ===================== VENDOR LOGOS — grayscale by default, brand color on hover ===================== */
.vendors{ background:var(--cream); text-align:center; }
.vendors-head{ margin-bottom:44px; }
.vendors-head h2{ font-size:28px; text-transform:uppercase; letter-spacing:1px; }
.vendors-head p{ font-size:13.5px; color:var(--ink-soft); margin-top:10px; font-weight:300; }
.vendor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:640px){ .vendor-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:940px){ .vendor-grid{ grid-template-columns:repeat(6,1fr); } }
.vendor-chip{
  border:1.5px solid #D8D2C4; padding:22px 12px; display:flex; align-items:center; justify-content:center;
  min-height:76px; transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.vendor-chip img { max-width:140px; max-height:60px; object-fit:contain; filter:grayscale(1); transition:filter .3s ease, opacity .3s ease; opacity:0.8; }
.vendor-chip:hover{ border-color:var(--navy); transform:translateY(-4px); background:var(--white); }
.vendor-chip:hover img { filter:grayscale(0); opacity:1; }

/* ===================== ABOUT PAGE CUSTOM ===================== */
.about-navy-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media(min-width:900px){ .about-navy-grid{ grid-template-columns:1fr 1fr; } }
.about-navy-content h2{ color:var(--white); font-size:32px; font-style:italic; line-height:1.2; margin-bottom:24px; font-weight:400; }
.about-navy-body{ display:flex; flex-direction:column; gap:16px; font-size:15px; color:#D6DEEA; font-weight:300; }

.mission-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
@media(min-width:900px){ .mission-grid{ grid-template-columns:1.2fr .8fr; } }
.mission-item{ display:flex; gap:16px; margin-bottom:24px; }
.mission-icon{ width:28px; height:28px; border:1.5px solid var(--navy); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.mission-item h4{ font-size:18px; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.mission-item p{ font-size:14.5px; color:var(--navy); opacity:0.85; }

.facts-wrapper{ max-width:800px; margin:0 auto; }
.facts-grid{ display:grid; grid-template-columns:1fr; gap:24px; border-top:1px solid #DCCDBD; padding-top:32px; }
@media(min-width:600px){ .facts-grid{ grid-template-columns:1fr 1fr; } }
.fact-item{ display:flex; flex-direction:column; gap:4px; }
.fact-label{ font-family:var(--font-display); font-size:18px; text-transform:uppercase; letter-spacing:1px; color:var(--navy); font-weight:600; }
.fact-value{ font-size:15px; color:var(--ink-soft); font-weight:400; border-bottom:1px solid #DCCDBD; padding-bottom:12px; }

/* ===================== SIMPLE PAGE BODY (subpages) ===================== */
.page-body{ text-align:center; }
.page-body h2{ font-size:32px; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.page-body p{ color:var(--ink-soft); font-size:15px; max-width:560px; margin:0 auto 28px; font-weight:300; }
.page-body-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:40px; }
@media(min-width:700px){ .page-body-grid{ grid-template-columns:repeat(3,1fr); } }
.page-body-grid .placeholder{ aspect-ratio:4/3; }

/* ===================== FOOTER ===================== */
footer{ background:var(--navy-deep); color:#B9C2D1; padding:64px 0 26px; text-align:center; }
.footer-logo{ font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--white); margin-bottom:20px; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:28px; }
.footer-social{ display:flex; justify-content:center; gap:14px; margin-bottom:32px; }
.footer-social a, .footer-social span{ width:34px; height:34px; border-radius:50%; border:1px solid #3A4A60; display:flex; align-items:center; justify-content:center; font-size:12px; text-decoration:none; color:inherit; transition:color .3s, border-color .3s; }
.footer-social a:hover{ border-color:var(--tan); color:var(--tan); }
.footer-bottom{ border-top:1px solid #3A4A60; padding-top:22px; font-size:12px; color:#8493A6; }
.footer-credit{ font-size:11px; color:#6B7A8F; margin-top:14px; letter-spacing:.3px; }
.footer-credit a{ color:inherit; text-decoration:none; transition:color .3s; border-bottom:1px solid transparent; }
.footer-credit a:hover{ color:var(--tan); border-bottom-color:var(--tan); }

/* ===================== CONTACT FORM 7 CUSTOM STYLES ===================== */
.cf7-input { width:100%; padding:14px; border:1px solid #DCCDBD; background:#FDFBF9; font-family:var(--font-body); font-size:15px; outline:none; color:var(--navy); resize:vertical; }
.cf7-submit { width:100%; max-width:300px; font-size:14px; padding:18px; margin:0 auto; display:inline-block; }
.wpcf7-spinner { margin-top:15px; }

/* ===================== BOOKING MODAL ===================== */
.booking-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(22, 62, 82, 0.85); /* Navy with opacity */
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.booking-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.booking-modal-content {
  background-color: var(--white);
  margin: auto;
  padding: 40px;
  border-top: 5px solid var(--navy);
  width: 90%;
  max-width: 700px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  position: relative;
  transform: translateY(-30px);
  transition: transform 0.3s ease;
  border-radius: 8px;
  max-height: 90vh;
  overflow-y: auto;
}
.booking-modal.show .booking-modal-content {
  transform: translateY(0);
}
.booking-modal-close {
  color: var(--gray);
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}
.booking-modal-close:hover,
.booking-modal-close:focus {
  color: var(--coral);
  text-decoration: none;
}

/* ===================== GLOBAL MOBILE RESPONSIVENESS (iPhones / Mobile) ===================== */
@media (max-width: 768px) {
  /* Reduce global section padding */
  section { padding: 50px 0 !important; }
  
  /* Hero section adjustments */
  .page-hero { min-height: 50vh !important; }
  .page-hero.tall { min-height: 60vh !important; }
  .page-hero-content { padding-bottom: 40px !important; }
  .page-hero h1, 
  .page-hero-content h1 { font-size: 36px !important; line-height: 1.1 !important; margin-top: 10px !important; }
  .page-hero-sub, 
  .page-hero-content p { font-size: 16px !important; line-height: 1.5 !important; }
  
  /* Override inline heading sizes that are too big for mobile */
  h1[style*="font-size"], h2[style*="font-size"], h3[style*="font-size"] {
    font-size: 28px !important; 
    line-height: 1.3 !important;
  }
  .page-hero h1, .page-hero-content h1 { 
    font-size: 36px !important; 
    line-height: 1.1 !important; 
  }
  
  /* Blog & Flex Layout Fixes */
  div[style*="gap:60px;"], div[style*="gap: 60px;"],
  div[style*="gap:40px;"], div[style*="gap: 40px;"] {
    gap: 30px !important;
  }
  div[style*="min-width:300px"], div[style*="min-width: 300px"] {
    min-width: 100% !important;
  }
  img[style*="right:-20px"] {
    right: 0 !important;
    bottom: -10px !important;
  }
  
  /* Scripts & Callouts */
  span.script, 
  .script[style*="font-size: 32px"], 
  .script[style*="font-size: 28px"],
  .script[style*="font-size: 44px"] { font-size: 24px !important; }

  /* Grids that might overflow (from auto-fit minmax 320px) */
  .wander-grid,
  .why-grid,
  .works-steps,
  .testi-grid,
  .vendor-grid,
  .about-navy-grid,
  .mission-grid,
  .newsletter-grid,
  div[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  /* Ensure images in grids don't break width */
  img { max-width: 100% !important; height: auto; }
  
  /* Footer adjustments */
  footer { padding: 40px 0 20px !important; }
  .footer-links { flex-direction: column; gap: 16px; align-items: center; }
  
  /* Booking Modal Mobile Adjustments */
  .booking-modal-content {
    padding: 30px 20px !important;
    width: 95% !important;
    margin: 10% auto !important;
    border-top: 4px solid var(--navy) !important;
  }
  .booking-modal-content h2 { font-size: 24px !important; }
  .cf7-submit { width: 100% !important; max-width: none !important; }

  /* Specific Sections Fixes */
  .why-photo-main, .advisor-photo { max-width: 80%; margin: 0 auto; }
  .why-caption { font-size: 16px !important; margin-top: -20px !important; }
  .works-top { flex-direction: column; align-items: center; text-align: center; }
  .works-photo { width: 100%; max-width: 300px; margin: 0 auto; }
  
  /* Wrap container padding */
  .wrap { padding: 0 24px !important; }
  .nav { padding: 16px 24px !important; }
  .logo-text { font-size: 17px !important; max-width: 80%; }
  .mobile-menu-toggle { transform: scale(0.9); }
}

/* ===================== MOBILE HAMBURGER MENU ===================== */
.mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer; z-index: 60; }
.mobile-menu-toggle span { display: block; height: 2px; width: 100%; background: var(--navy); transition: all 0.3s ease; }
.mobile-menu-drawer { position: fixed; top: 0; left: -100%; width: 300px; height: 100vh; background: var(--cream); z-index: 9999; transition: left 0.4s ease; box-shadow: 2px 0 20px rgba(0,0,0,0.1); overflow-y: auto; padding: 30px; display: flex; flex-direction: column; }
.mobile-menu-drawer.active { left: 0; }
.mobile-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.mobile-menu-close { font-size: 36px; line-height: 1; cursor: pointer; color: var(--navy); }
.mobile-nav-links { display: flex; flex-direction: column; gap: 24px; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.mobile-nav-links a { padding-bottom: 8px; border-bottom: 1px solid rgba(22, 62, 82, 0.1); }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

@media (max-width: 1059px) {
  .mobile-menu-toggle { display: flex; }
}



/* ===================== FREEBIE OPT-IN FORM (Blog) ===================== */
.freebie-form form { display: flex; flex-direction: column; gap: 12px; }
.freebie-form input.wpcf7-email { padding: 15px; border: none; width: 100%; font-family: var(--font-body); font-size: 14px; outline: none; margin: 0; }
.freebie-form input.wpcf7-submit { width: 100%; padding: 15px; background: var(--navy); color: var(--white); border: 1.5px solid var(--navy); font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .25s ease; margin: 0; }
.freebie-form input.wpcf7-submit:hover { background: var(--coral); border-color: var(--coral); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(22,62,82,.22); }
