:root{
  --navy:#213547;   /* your blue */
  --orange:#F47329; /* your orange */
  --ink:#1b2a36;
  --bg:#ffffff;
  --muted:#f6f8fa;
  --ring: rgba(244,115,41,.35);
}

*{box-sizing:border-box}

body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

a{
  color:var(--navy);
  text-decoration:none;
}

a:hover{opacity:.9}

/* Header */
.topbar{
  border-bottom:1px solid #e9eef3;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
}

.wrap{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

.flex{
  display:flex;
  align-items:center;
}

.space{
  justify-content:space-between;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
}

.pin{
  width:28px;
  height:28px;
  border-radius:50% 50% 50% 0;
  background:var(--orange);
  transform:rotate(-45deg);
  position:relative;
  display:inline-block;
}

.pin:after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
}

.brand{
  font-weight:800;
  letter-spacing:.2px;
  color:var(--navy);
}

nav a{
  padding:10px 14px;
  font-weight:600;
}

.cta-btn{
  background:var(--orange);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  font-weight:700;
  border:0;
  cursor:pointer;
}

.cta-btn:hover{
  filter:brightness(.96);
}

/* Hero */
.hero{
  position:relative;
  padding:56px 0 32px;
  background:linear-gradient(180deg,#fff, #fff 60%, #fcfcfd 100%);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  color:var(--navy);
}

/* Optional: subtle overlay so text is readable on photos */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.15),
    rgba(255,255,255,0.0)
  );
  pointer-events:none;
}

.hero .wrap{
  position:relative;
  z-index:1;
}


.hero h1{
  font-size:clamp(28px,4vw,44px);
  color:var(--navy);
  margin:0 0 10px;
  line-height:1.15;
  letter-spacing:.2px;
}

.sub{
  color:#4a5b67;
  max-width:780px;
}

.search{
  margin-top:22px;
  background:#fff;
  border:1px solid #e5edf4;
  border-radius:14px;
  padding:10px;
  box-shadow:0 4px 18px rgba(33,53,71,.06);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.input{
  flex:1 1 240px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #dfebf3;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}

.input input{
  border:0;
  outline:none;
  width:100%;
  font-size:16px;
}

.input:focus-within{
  box-shadow:0 0 0 4px var(--ring);
}

.search .cta-btn{
  padding:12px 18px;
}

/* Pills */
.pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.pill{
  border:1px solid #e5edf4;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
}

.pill .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
  margin-right:8px;
  background:var(--orange);
}

/* Sections */
section{
  padding:36px 0;
}

.grid{
  display:grid;
  gap:16px;
}

.grid.cols-3{
  grid-template-columns:repeat(3,1fr);
}

.grid.cols-4{
  grid-template-columns:repeat(4,1fr);
}

@media (max-width:960px){
  .grid.cols-3,
  .grid.cols-4{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:640px){
  .grid.cols-3,
  .grid.cols-4{
    grid-template-columns:1fr;
  }
}

.card{
  border:1px solid #e5edf4;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(33,53,71,.04);
}

.thumb{
  height:160px;
  background:linear-gradient(135deg, #edf2f7, #f7fafc);
  position:relative;
}

.dash{
  position:absolute;
  left:12px;
  bottom:12px;
  width:70px;
  height:0;
  border-top:4px dashed var(--orange);
  opacity:.9;
}

.card .pad{
  padding:14px;
}

.card h3{
  margin:0 0 4px;
  font-size:18px;
  color:var(--navy);
}

.meta{
  color:#5b6a75;
  font-size:14px;
}

.price{
  margin-top:8px;
  font-weight:800;
  color:var(--navy);
}

.link{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:700;
  color:var(--orange);
}

/* Map-by-state */
.state{
  padding:10px 12px;
  border:1px solid #e5edf4;
  border-radius:10px;
  background:#fff;
  font-weight:700;
  color:var(--navy);
}

/* Trust & CTA */
.trust{
  background:var(--muted);
  border:1px solid #e9eef3;
  border-radius:14px;
  padding:18px;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(3,1fr);
}

@media (max-width:820px){
  .trust{
    grid-template-columns:1fr;
  }
}

.trust b{
  color:var(--navy);
}

.newsletter{
  margin-top:22px;
  border:1px solid #e5edf4;
  border-radius:14px;
  padding:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.newsletter input{
  flex:1 1 260px;
  border:1px solid #dfebf3;
  border-radius:10px;
  padding:10px 12px;
  font-size:16px;
}

.newsletter input:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ring);
}

/* Footer */
footer{
  margin-top:40px;
  padding:28px 0;
  background:#0f1a22;
  color:#c8d3dc;
}

footer a{
  color:#c8d3dc;
}
/* ============================
   State-specific hero images
   ============================ */

/* Georgia */
body.state-ga .hero{
  background-image:url("../assets/images/hero/hero-georgia.webp");
}

/* Florida */
body.state-fl .hero{
  background-image:url("../assets/images/hero/hero-florida.webp");
}
.thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* ===== OTA UPGRADE: Tours Page ===== */



/* Filters card (clean, premium, sticky like an OTA) */
.controls-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  margin-top: -26px;
  position: sticky;
  top: 10px;
  z-index: 30;
}

/* Controls layout */
.tours-controls{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

@media (max-width: 980px){
  .tours-controls{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .tours-controls{ grid-template-columns: 1fr; }
}

.tours-controls input,
.tours-controls select{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  padding: 0 12px;
  font-size: 14px;
  background: #fff;
}

.tours-controls input:focus,
.tours-controls select:focus{
  outline: none;
  border-color: rgba(37,99,235,.7);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}

.tours-meta{
  margin-top: 10px;
  color: rgba(15,23,42,.75);
  font-weight: 600;
}

/* Grid spacing like an OTA */
#toursGrid{
  margin-top: 18px;
  gap: 16px;
}

/* Card polish (if your .card exists, this enhances it) */
.card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

/* Thumbnail area becomes a real image window */
.card .thumb{
  height: 170px;
  position: relative;
  background: linear-gradient(135deg, rgba(15,23,42,.08), rgba(15,23,42,.02));
}

.tour-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15,23,42,.86);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: .2px;
}

/* CTA link looks like a button (OTA vibe) */
.card .link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(15,23,42,.14);
}

.card .link:hover{
  border-color: rgba(37,99,235,.55);
}
/* ===== HERO FIX (better even if image file is missing) ===== */

/* ===== FINAL TOURS HERO (single source of truth) ===== */

/* ===== FINAL TOURS HERO (single source of truth) ===== */

.hero--tours{
  padding: 72px 0;
  background:
    radial-gradient(1200px 500px at 20% 20%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.55)),
    url("/img/hero/tours-hero.jpg") center / cover no-repeat;
  color: #fff;
}

.hero--tours h1{
  font-size: clamp(32px, 4vw, 54px);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.hero--tours .sub{
  max-width: 820px;
  font-size: 18px;
  line-height: 1.45;
  opacity: 0.95;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}