:root{
  --bg:#ffffff;
  --text:#0b0d10;
  --muted:#5b6472;
  --line:rgba(0,0,0,.12);
  --panel:#f6f7f9;
  --shadow:0 16px 36px rgba(0,0,0,.10);
  --radius:18px;
  --max:1180px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
}
a{text-decoration:none;color:inherit}
button,input{font-family:inherit}

.topbar{
  position:sticky;
  top:0;
  background:#000;
  color:#fff;
  z-index:50;
}
.nav{
  max-width:var(--max);
  margin:auto;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;        /* prevent wrapping */
}

.leftNav{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;             /* allow shrinking */
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  white-space:nowrap;      /* keep logo + text one line */
}

.navLinks{
  display:flex;            /* always one row */
  gap:18px;
  align-items:center;
  white-space:nowrap;      /* keep links one line */
  overflow:auto;           /* if tight, it scrolls instead of wrapping */
  scrollbar-width:none;    /* hide scrollbar firefox */
}
.navLinks::-webkit-scrollbar{display:none;} /* hide scrollbar chrome */

@media(max-width:920px){
  .navLinks{display:none;} /* hide links on small screens */
}

.rightNav{
  display:flex;
  gap:10px;
  align-items:center;
}
.pillBtn{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
}
.pillWhite{
  background:#fff;
  color:#000;
}

.wrap{
  max-width:var(--max);
  margin:auto;
  padding:30px 16px 80px;
}

.hero{
  display:grid;
  gap:30px;
}
@media(min-width:980px){
  .hero{
    grid-template-columns:1.1fr .9fr;
    align-items:center;
  }
}

.heroTitle{
  font-size:46px;
  margin:10px 0 20px;
}

.cityRow{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:600;
}
.cityDot{
  width:8px;
  height:8px;
  background:#000;
  border-radius:50%;
}
.cityLinkBtn{
  background:none;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  font-weight:700;
}

.heroCard{
  max-width:540px;
}

.modeRow{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}
.modeBtn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  cursor:pointer;
  font-weight:700;
}
.modeActive{
  background:#000;
  color:#fff;
  border-color:#000;
}

.field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  margin-bottom:10px;
}
.iconBox{
  background:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
}
.field input{
  border:none;
  background:transparent;
  width:100%;
  outline:none;
}

.ctaRow{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:10px;
}
.ctaPrimary{
  background:#000;
  color:#fff;
  padding:14px 20px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:800;
}
.ctaHint{
  color:var(--muted);
  font-size:14px;
}

.notice{
  margin-top:14px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size:13px;
  color:var(--muted);
}

.art{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.art img{
  width:100%;
  display:block;
}

.section{
  margin-top:50px;
}
.sectionTitle{
  font-size:32px;
  margin-bottom:20px;
}

.cards{
  display:grid;
  gap:20px;
}
@media(min-width:860px){
  .cards{
    grid-template-columns:1fr 1fr 1fr;
  }
}

.miniCard{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.miniHead{
  display:flex;
  justify-content:space-between;
}
.miniIcon{
  background:#000;
  color:#fff;
  padding:18px;
  border-radius:20px;
}
.miniBtn{
  margin-top:14px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  cursor:pointer;
}

.fleetGrid{
  display:grid;
  gap:20px;
}
@media(min-width:920px){
  .fleetGrid{
    grid-template-columns:1fr 1fr;
  }
}

.carCard{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.carTop{
  height:170px;
  background:var(--panel);
  position:relative;
}
.carTop img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.carTag{
  position:absolute;
  top:12px;
  left:12px;
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.carBody{
  padding:18px;
}
.carTitle{
  margin:0 0 10px;
}
.metaRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.pill{
  background:var(--panel);
  padding:5px 10px;
  border-radius:999px;
}

.carActions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.btnBlack{
  background:#000;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
}
.btnGhost{
  background:var(--panel);
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  cursor:pointer;
}

.footer{
  background:#000;
  color:#fff;
  margin-top:70px;
}
.footerWrap{
  max-width:var(--max);
  margin:auto;
  padding:40px 16px;
}
.footerGrid{
  display:grid;
  gap:30px;
}
@media(min-width:980px){
  .footerGrid{
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
}
.footCol h4{
  margin-bottom:10px;
}
.footLinks{
  display:grid;
  gap:10px;
  font-size:14px;
  color:rgba(255,255,255,.75);
}
.storeBadge{
  margin-top:12px;
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.3);
}
.footBottom{
  margin-top:30px;
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(255,255,255,.6);
}
.staticField{
  background:#f3f4f6;
  cursor:default;
}

.staticText{
  font-weight:600;
  color:#111;
}
.reviewsHeader{
  margin-top:10px;
  margin-bottom:22px;
}

.ratingBig{
  font-size:44px;
  font-weight:900;
  letter-spacing:-.5px;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
}

.starBig{
  font-size:40px;
}

.reviewsSub{
  margin-top:10px;
  color:#666;
  font-size:16px;
}

.reviewList{
  display:flex;
  flex-direction:column;
}

.reviewItem{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.reviewAvatar{
  width:64px;
  height:64px;
  min-width:64px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.reviewContent{
  flex:1;
}

.reviewStars{
  color:#6b5cff;
  font-size:18px;
  margin-bottom:6px;
  letter-spacing:2px;
}

.reviewMeta{
  font-size:14px;
  color:#666;
  margin-bottom:10px;
}

.reviewContent p{
  margin:0;
  line-height:1.6;
  color:#222;
}

.reviewCta{
  margin-top:18px;
}
/* Reviews: responsive + pro on mobile */
.reviewsHeader{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:22px;
}

.reviewItem{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.reviewAvatar{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:999px;
  object-fit:cover;
  display:block;
}

/* Better spacing + readable on mobile */
@media (max-width: 640px){
  .ratingBig{
    font-size:34px;
  }

  .starBig{
    font-size:30px;
  }

  .reviewsSub{
    font-size:14px;
    line-height:1.4;
  }

  .reviewStars{
    font-size:16px;
  }

  .reviewMeta{
    font-size:13px;
  }

  .reviewContent p{
    font-size:15px;
  }

  .reviewCta .btnBlack{
    width:100%;
    text-align:center;
  }
}

.artPanel{
  border-radius:20px;
  overflow:hidden;
  background:#f3f4f6;
}

.artSlider{
  width:100%;
  height:360px;   /* bigger on desktop */
  overflow:hidden;
  position:relative;
  border-radius:20px;
}

/* Mobile size */
@media (max-width:720px){
  .artSlider{
    height:300px;  /* bigger but still controlled */
  }
}

.slides{
  display:flex;
  height:100%;
  will-change:transform;
  animation: slideShow 16s infinite;
}

.slides img{
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

@keyframes slideShow{
  0%,20%   { transform: translateX(0%); }
  25%,45%  { transform: translateX(-100%); }
  50%,70%  { transform: translateX(-200%); }
  75%,95%  { transform: translateX(-300%); }
  100%     { transform: translateX(0%); }
}
.topbar .navLogo{
  width:60px !important;
  height:60px !important;
  max-width:60px !important;
  max-height:60px !important;
  min-width:60px !important;
  min-height:60px !important;
  object-fit:contain !important;
  display:block;
}

/* if brandMark still exists, keep it small too */
.topbar .brandMark{
  width:60px !important;
  height:60px !important;
  max-width:60px !important;
  max-height:60px !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  display:block;
}

/* safety: no image inside the top bar can exceed 60px tall */
.topbar img{
  max-height:60px !important;
}

.helpModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200000;
}

.helpModal.show{
  display:flex;
}

.helpBox{
  background:#fff;
  border-radius:18px;
  padding:26px 22px;
  width:340px;
  max-width:92%;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  position:relative;
}

.closeHelp{
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  background:transparent;
  font-size:18px;
  cursor:pointer;
}

.helpItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  margin-top:10px;
}

.helpItem a{
  font-weight:800;
}

.helpIcon{
  font-size:18px;
}
.miniBtnLink{
  margin-top:14px;
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#f6f7f9;
  cursor:pointer;
  font-weight:700;
}
.blogHero{
  margin-top:8px;
  margin-bottom:22px;
}

.blogTitle{
  font-size:44px;
  margin:0 0 10px;
}

.blogSub{
  color:var(--muted);
  font-size:16px;
  margin:0 0 10px;
  max-width:720px;
}

.blogMeta{
  font-size:13px;
  color:rgba(0,0,0,.55);
}

.blogCard{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  margin-top:18px;
}

.blogList{
  margin:10px 0 0;
  padding-left:18px;
  color:#222;
  line-height:1.7;
}

.blogCtaRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

@media (max-width:640px){
  .blogTitle{ font-size:34px; }
}
.hostCard{
  display:flex !important;
  gap:18px;
  align-items:center;
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.12);
  max-width:900px;
}

.hostAvatar{
  width:84px !important;
  height:84px !important;
  min-width:84px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block;
}

.hostInfo{
  flex:1;
  min-width:0;
}

.hostInfo h3{
  margin:0 0 6px;
}

.hostInfo p{
  margin:0 0 12px;
  color:#5b6472;
  line-height:1.6;
}

.hostStats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.hostStat{
  background:#f6f7f9;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

.hostActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Mobile */
@media (max-width:640px){
  .hostCard{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .hostActions a{
    width:100%;
    text-align:center;
  }
}
/* Make the host card perfectly aligned */
.hostCard{
  max-width:980px;
  margin:0 auto;              /* center the card */
  align-items:flex-start;      /* align avatar with title */
}

.hostAvatar{
  margin-top:8px;             /* move avatar slightly down to align with text */
}

/* Better spacing for text + stats */
.hostInfo h3{
  font-size:22px;
  margin-bottom:6px;
}

.hostStats{
  margin-top:10px;
  margin-bottom:16px;
}

/* Make buttons line up clean */
.hostActions{
  margin-top:2px;
}
.hostAvatar{
  width:92px !important;
  height:92px !important;
  min-width:92px !important;
}

.hostCard{
  padding:26px;
}

.sectionNote{
  color:var(--muted);
  margin-top:-6px;
  margin-bottom:18px;
}

.attractionGrid{
  display:grid;
  gap:18px;
}

@media(min-width:920px){
  .attractionGrid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

.attractionCard{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.attractionTop{
  height:160px;
  background:var(--panel);
}

.attractionTop img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.attractionBody{
  padding:16px;
}

.attractionTitle{
  margin:0 0 6px;
  font-size:18px;
}

.attractionMeta{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.attractionActions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.attractionCta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
/* Attraction image size */
.attractionTop{
  height:160px;
  overflow:hidden;
}

.attractionTop img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mobile fix */
@media (max-width:640px){
  .attractionTop{
    height:140px;
  }
}