/* ===== GUSOK – Minimalist Luxury Yacht Charter ===== */
:root {
  --navy: #0B1C2C;
  --navy-light: #14283A;
  --gold: #C9A86C;
  --gold-soft: #D4B87A;
  --off-white: #F9F7F3;
  --cream: #F2EFE8;
  --text: #1A1A1A;
  --muted: #5C5C5C;
  --white: #FFFFFF;
  --border: rgba(11,28,44,0.08);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --radius: 3px;
  --shadow: 0 12px 40px rgba(11,28,44,0.08);
  --transition: 0.25s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; transition: var(--transition); }
ul { list-style: none; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 28px; }

h1,h2,h3,h4 { font-family: var(--font-serif); font-weight:500; line-height:1.2; }
.eyebrow {
  font-size:0.7rem; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px; font-size:0.85rem; font-weight:500;
  letter-spacing:0.03em; border-radius:var(--radius);
  border:none; cursor:pointer; transition:var(--transition);
}
.btn-primary { background:var(--gold); color:var(--navy); }
.btn-primary:hover { background:var(--gold-soft); }
.btn-outline {
  background:transparent; border:1px solid var(--gold); color:var(--gold);
}
.btn-outline:hover { background:var(--gold); color:var(--navy); }
.btn-outline.light { border-color:rgba(255,255,255,0.55); color:#fff; }
.btn-outline.light:hover { background:#fff; color:var(--navy); border-color:#fff; }
.btn-dark { background:var(--navy); color:#fff; }
.btn-dark:hover { background:var(--gold); color:var(--navy); }
.btn-sm { padding:9px 18px; font-size:0.8rem; }

.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:transparent; padding:18px 0; transition:var(--transition);
}
.header.scrolled {
  background:rgba(11,28,44,0.96); backdrop-filter:blur(10px);
  padding:12px 0; box-shadow:0 2px 20px rgba(0,0,0,0.12);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo-img { height:42px; width:auto; }
.header.scrolled .logo-img { height:36px; }

.nav { display:flex; align-items:center; gap:26px; }
.nav a {
  font-size:0.78rem; font-weight:400; letter-spacing:0.06em;
  text-transform:uppercase; color:rgba(255,255,255,0.88);
}
.nav a:hover, .nav a.active { color:var(--gold); }

.header-actions { display:flex; align-items:center; gap:10px; }
.header-actions .btn { padding:9px 18px; font-size:0.78rem; }
.header-actions .btn-outline {
  border-color:rgba(255,255,255,0.45); color:#fff;
}
.header-actions .btn-outline:hover { background:#fff; color:var(--navy); }

.mobile-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.mobile-toggle span {
  display:block; width:22px; height:1.5px; background:#fff; transition:var(--transition);
}

.hero {
  position:relative; height:100vh; min-height:680px;
  display:flex; align-items:center; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(11,28,44,0.5) 0%, rgba(11,28,44,0.3) 40%, rgba(11,28,44,0.72) 100%);
}
.hero-content { position:relative; z-index:2; max-width:780px; padding-top:70px; }
.hero-title {
  font-size:clamp(2.8rem,6.5vw,4.8rem); color:#fff; margin-bottom:18px;
}
.hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,0.88);
  max-width:520px; margin-bottom:36px; font-weight:300;
}

.search-bar {
  display:flex; background:#fff; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); max-width:780px;
}
.search-field {
  flex:1; padding:14px 18px; border-right:1px solid #eee;
}
.search-field:last-of-type { border-right:none; }
.search-field label {
  display:block; font-size:0.68rem; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.search-field select, .search-field input {
  width:100%; border:none; outline:none; font-size:0.92rem;
  color:var(--text); background:transparent; font-family:var(--font-sans);
}
.search-btn { border-radius:0; padding:0 28px; }

.section { padding:90px 0; }
.section-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:40px; gap:20px;
}
.section-header.centered {
  flex-direction:column; align-items:center; text-align:center;
}
.section-header h2 { font-size:clamp(1.9rem,3.5vw,2.5rem); color:var(--navy); }
.section-desc { max-width:520px; color:var(--muted); margin-top:10px; font-size:1rem; }

.yacht-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.yacht-card {
  background:#fff; border-radius:var(--radius); overflow:hidden;
  transition:var(--transition); box-shadow:0 3px 16px rgba(0,0,0,0.05);
}
.yacht-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.yacht-image { position:relative; aspect-ratio:4/3; overflow:hidden; }
.yacht-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.yacht-card:hover .yacht-image img { transform:scale(1.04); }
.yacht-badge {
  position:absolute; top:12px; left:12px; background:var(--gold);
  color:var(--navy); font-size:0.68rem; font-weight:600;
  letter-spacing:0.07em; text-transform:uppercase; padding:4px 10px; border-radius:2px;
}
.yacht-info { padding:18px; }
.yacht-info h3 { font-size:1.35rem; color:var(--navy); margin-bottom:4px; }
.yacht-meta { font-size:0.82rem; color:var(--muted); margin-bottom:3px; }
.yacht-loc { font-size:0.82rem; color:var(--gold); margin-bottom:14px; }
.yacht-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid #eee; gap:10px;
}
.price { font-size:0.9rem; font-weight:500; color:var(--navy); }
.price small { font-weight:400; color:var(--muted); font-size:0.78rem; }

.dest-grid {
  display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px;
}
.dest-card {
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:1;
}
.dest-card.large { grid-row:span 2; aspect-ratio:auto; }
.dest-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.dest-card:hover img { transform:scale(1.05); }
.dest-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,28,44,0.78) 0%, transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; color:#fff;
}
.dest-overlay h3 { font-size:1.4rem; margin-bottom:3px; }
.dest-overlay p { font-size:0.85rem; opacity:0.85; }

.features-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.feature-card {
  padding:28px 22px; background:#fff; border-radius:var(--radius);
  border:1px solid var(--border); transition:var(--transition);
}
.feature-card:hover { border-color:rgba(201,168,108,0.35); box-shadow:var(--shadow); }
.feature-num {
  font-family:var(--font-serif); font-size:1.5rem; color:var(--gold); margin-bottom:12px;
}
.feature-card h3 { font-size:1.15rem; color:var(--navy); margin-bottom:8px; }
.feature-card p { font-size:0.9rem; color:var(--muted); }

.agency-strip {
  background:var(--cream); padding:50px 0; text-align:center;
}
.agency-strip p { font-size:0.85rem; color:var(--muted); margin-bottom:16px; letter-spacing:0.04em; }
.agency-logo-wrap {
  display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap;
}
.agency-logo-wrap img { height:48px; }

.cta-block {
  text-align:center; padding:90px 0; background:var(--navy); color:#fff;
}
.cta-block h2 { font-size:clamp(1.9rem,3.5vw,2.6rem); color:#fff; margin-bottom:14px; }
.cta-block p { color:rgba(255,255,255,0.8); margin-bottom:28px; max-width:480px; margin-left:auto; margin-right:auto; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.faq-list { max-width:760px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); padding:20px 0; }
.faq-q {
  font-family:var(--font-serif); font-size:1.2rem; color:var(--navy);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q::after { content:"+"; font-size:1.3rem; color:var(--gold); transition:var(--transition); }
.faq-item.open .faq-q::after { content:"−"; }
.faq-a {
  max-height:0; overflow:hidden; transition:max-height 0.3s ease;
  font-size:0.95rem; color:var(--muted); padding-top:0;
}
.faq-item.open .faq-a { max-height:300px; padding-top:12px; }

.page-hero {
  position:relative; height:48vh; min-height:360px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden;
}
.page-hero .hero-bg img { width:100%; height:100%; object-fit:cover; }
.page-hero-content { position:relative; z-index:2; max-width:640px; padding:40px 24px 0; }
.page-hero h1 { font-size:clamp(2.2rem,4.5vw,3.4rem); color:#fff; margin-bottom:12px; }
.page-hero p { font-size:1.05rem; opacity:0.9; }

.content-page { padding:70px 0 90px; }
.content-narrow { max-width:780px; margin:0 auto; }
.content-page h2 { font-size:1.7rem; color:var(--navy); margin:36px 0 14px; }
.content-page h3 { font-size:1.25rem; color:var(--navy); margin:28px 0 10px; }
.content-page p, .content-page li { color:var(--muted); margin-bottom:14px; font-size:0.98rem; }
.content-page ul { margin:12px 0 20px 20px; }
.content-page ul li { list-style:disc; margin-bottom:8px; }
.content-page a { color:var(--gold); }

.form-card {
  max-width:600px; margin:0 auto; background:#fff;
  padding:40px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:0.72rem; font-weight:500;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:12px 14px; border:1px solid #e2dfd8;
  border-radius:var(--radius); font-family:var(--font-sans); font-size:0.92rem;
  background:var(--off-white); outline:none; transition:var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--gold);
}
.form-group textarea { min-height:110px; resize:vertical; }

.footer {
  background:var(--navy); color:rgba(255,255,255,0.7); padding:70px 0 0;
}
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.07);
}
.footer .logo-img { height:38px; margin-bottom:14px; filter:brightness(0) invert(1); }
.footer-brand p { font-size:0.9rem; line-height:1.65; max-width:240px; }
.footer-col h4 {
  font-family:var(--font-sans); font-size:0.75rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.footer-col a, .footer-col p {
  display:block; font-size:0.88rem; margin-bottom:9px; color:rgba(255,255,255,0.62);
}
.footer-col a:hover { color:var(--gold); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; font-size:0.82rem; flex-wrap:wrap; gap:12px;
}
.footer-legal { display:flex; gap:20px; flex-wrap:wrap; }
.footer-legal a:hover { color:var(--gold); }

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card {
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 3px 16px rgba(0,0,0,0.05); transition:var(--transition);
}
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-card-body { padding:20px; }
.blog-card h3 { font-size:1.2rem; color:var(--navy); margin-bottom:8px; }
.blog-card p { font-size:0.9rem; color:var(--muted); margin-bottom:12px; }
.blog-meta { font-size:0.78rem; color:var(--gold); }

@media (max-width:1100px) {
  .yacht-grid { grid-template-columns:repeat(2,1fr); }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .dest-grid { grid-template-columns:1fr 1fr; }
  .dest-card.large { grid-row:span 1; aspect-ratio:16/10; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .blog-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav, .header-actions { display:none; }
  .mobile-toggle { display:flex; }
  .nav.open {
    display:flex; position:fixed; inset:0; background:var(--navy);
    flex-direction:column; align-items:center; justify-content:center;
    gap:28px; z-index:999;
  }
  .nav.open a { font-size:1.15rem; }
  .search-bar { flex-direction:column; }
  .search-field { border-right:none; border-bottom:1px solid #eee; }
  .yacht-grid, .features-grid, .dest-grid, .blog-grid, .footer-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .section { padding:60px 0; }
  .page-hero { height:40vh; min-height:300px; }
}

/* ===== Mega Menu ===== */
.nav-item { position: relative; }
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  min-width: 520px;
  padding: 28px 32px;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(11,28,44,0.14);
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  z-index: 200;
  margin-top: 12px;
}
.nav-item:hover .mega-menu { display: grid; }
.mega-menu a {
  color: var(--navy) !important;
  font-size: 0.85rem !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 6px 0;
  display: block;
}
.mega-menu a:hover { color: var(--gold) !important; }
.mega-menu .mega-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  grid-column: 1 / -1;
}

/* Transparent logo on dark header */
.header .logo-img { filter: brightness(0) invert(1); }
.header.scrolled .logo-img { filter: brightness(0) invert(1); }

/* As Featured In */
.featured-in {
  background: #F4F2ED;
  padding: 36px 0 32px;
  text-align: center;
  border-bottom: 3px solid #0B3C6E;
}
.featured-in .label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 22px;
}
.featured-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 40px;
  opacity: 0.7;
}
.featured-logos span {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  color: #444;
  font-style: italic;
  white-space: nowrap;
}
.featured-logos .serif-bold { font-weight: 700; font-style: normal; letter-spacing: 0.02em; }

/* Footer SEO + Disclaimer */
.footer-seo {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}
.footer-seo strong { color: rgba(255,255,255,0.65); }
.footer-disclaimer {
  padding: 20px 0 28px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.65;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.footer-keywords a {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
}
.footer-keywords a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .mega-menu { display: none !important; }
  .featured-logos { gap: 16px 24px; }
  .featured-logos span { font-size: 0.9rem; }
}