:root{
  --bg:#ffffff;
  --ink:#102a43;
  --muted:#486581;
  --primary:#0b6e4f;
  --primary-ink:#e9fff8;
  --accent:#1c7ed6;
  --card:#f6f9fc;
  --border:#e1e7ef;
  --danger:#c92a2a;
}
*{box-sizing:border-box}
html,body{
  padding-top: var(--header-h, 0px);
margin:0;padding:0}
body{
  padding-top: var(--header-h, 0px);

  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px, 92%);margin:0 auto}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  height: auto;
}
.nav{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{font-weight:700;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px}
.logo-icon{font-size:22px}
.primary-nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.primary-nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.primary-nav a:hover{background:var(--card);color:var(--ink)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;border:1px solid var(--border);color:var(--ink);font-weight:600}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--ghost{background:rgba(255,255,255,0.8);color:var(--ink)}
.btn--sm{padding:8px 12px;font-size:0.95rem}
.hero{background:linear-gradient(180deg,#eef7ff, #fff);padding:48px 0}
.hero__content{display:grid;grid-template-columns:1.2fr 0.8fr;gap:24px;align-items:center}
.lead{font-size:1.125rem;color:var(--muted)}
.cta{display:flex;gap:12px;margin:16px 0 8px}
.trust{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:12px 0 0}
.trust li{list-style:none;background:var(--card);padding:8px 12px;border-radius:999px;border:1px solid var(--border);font-size:0.95rem}
.section{padding:56px 0}
.section--alt{background:var(--card)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.card{background:rgba(255,255,255,0.8);border:1px solid var(--border);border-radius:16px;padding:20px;font-size:.95rem}
.tight>li{margin:6px 0}
.price{font-size:1.125rem}
.tour-card__media{border-radius:12px;overflow:hidden;margin-bottom:12px;border:1px solid var(--border)}
.faq details{background:rgba(255,255,255,0.8);border:1px solid var(--border);border-radius:12px;padding:14px;margin:10px 0}
.footer{border-top:1px solid var(--border);padding:28px 0;color:var(--muted);font-size:.95rem}
form{display:grid;gap:12px}
input, textarea, select{padding:12px;border:1px solid var(--border);border-radius:10px;font:inherit}
label{font-weight:600}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{background:var(--primary-ink);color:var(--primary);border:1px solid var(--primary);padding:6px 10px;border-radius:999px;font-weight:600}
.legal{font-size:.9rem;color:var(--muted)}
.nav-toggle{display:none}
@media (max-width:900px){
  .hero__content{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .primary-nav{display:none}
  .nav-toggle{display:inline-block;margin-left:auto}
}

.slogan{font-size:.9rem;color:var(--muted);margin-left:10px;font-style:italic}


.logo-img{height:40px;width:auto;display:block}
.brand-text{display:none}
.tagline{font-style:italic;color:var(--muted);margin:-8px 0 8px 0}
.center{text-align:center}
.small{font-size:.9rem;color:var(--muted)}
.brand-grid .card img{width:100%;height:auto}
@media (min-width:901px){ .brand-text{display:inline-block;margin-left:8px;font-weight:700;color:var(--ink)} }




.site-header .logo{display:flex;align-items:center;gap:12px}
.site-header .logo{display:flex;align-items:center;gap:12px}



.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  height: auto;
}
.site-header .primary-nav a{
  color:#fff;
}
.site-header .primary-nav a:hover{
  background:rgba(255,255,255,0.1);
  color:#fff;
}
.slogan{color:#cfe9ff}



.logo-oval{
  display:flex;
  align-items:center;
  justify-content:center;
  width:10cm;
  height:4cm;
  border-radius:50% / 50%;
  background:rgba(255,255,255,0.8);
  border:3px solid var(--border);
  overflow:hidden;
  padding:8px;
}
.logo-oval img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
}
.site-header .logo{display:flex;align-items:center;gap:12px}




.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  height: auto;
}








.hero-header{
  position:relative;
  background: #0b6e4f;
  height:60vh;
  min-height:420px;
}
.hero-header::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
}
.slogan-only{
  position:absolute;
  bottom:8vh;
  left:6vw;
  right:6vw;
  color:#fff;
  font-weight:800;
  font-size:clamp(28px, 5vw, 56px);
  line-height:1.1;
  letter-spacing:0.02em;
  text-shadow:0 8px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
  margin:0;
  z-index:1;
}



.main-logo{width:4cm;height:4cm;object-fit:contain;}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  height: auto;
}



.main-logo{width:4cm;height:4cm;object-fit:contain;}
.site-header .container.nav{
  display:flex;
  justify-content:center;
}



.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  height: auto;
}
body{
  padding-top: var(--header-h, 0px);

  padding-top:140px; /* offset for fixed header */
}



.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  height: auto;
}
.main-logo{width:4cm;height:4cm;object-fit:contain;}
.header-slogan{font-family:'Playfair Display', serif;font-size:1.2rem;font-weight:600;color:#1c7ed6;margin-left:12px;text-align:left;}





.header-nav{
  margin-left:auto;
  display:flex;
  gap:20px;
  align-items:center;
}
.header-nav a{
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
}
.header-nav a:hover{
  color:var(--accent);
}



/* Authoritative fixed header styles */

/* Keep header content in a row: logo + slogan on left, nav on right */
.site-header .container.nav{display:flex;align-items:center;gap:16px;width:100%}
.header-nav{margin-left:auto;display:flex;gap:20px;align-items:center}



/* Hard-fixed header for Chrome on macOS */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 10px 20px;
  height: 170px; /* explicit stable height */
  width: 100%;
  box-sizing: border-box;
  transform: translateZ(0); /* force compositor layer */
  will-change: transform;
}
/* Keep inner layout */
.site-header .container.nav{display:flex;align-items:center;gap:16px;width:100%}
.header-nav{margin-left:auto;display:flex;gap:20px;align-items:center}
/* Static content offset using CSS only (no JS) */
body{
  padding-top: var(--header-h, 0px);
padding-top:170px;}


/* Programs slider (left blue square) */
.prog-slider{position:relative;width:100%;aspect-ratio:1/1;max-height:480px;border-radius:12px;overflow:hidden}
.prog-track{display:flex;height:100%;transition:transform .45s ease}
.prog-slide{min-width:100%;height:100%;flex-shrink:0}
.prog-slide img{width:100%;height:100%;object-fit:cover;display:block}
.prog-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;font-size:26px;width:36px;height:36px;border-radius:50%;cursor:pointer}
.prog-prev{left:8px}
.prog-next{right:8px}
.prog-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;display:flex;gap:6px}
.prog-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.6);cursor:pointer}
.prog-dots button[aria-current="true"]{background:#fff}
@media (max-width:640px){
  .prog-slider{max-height:340px}
}


/* === Fix: equal squares in "Наши программы" cards and remove blue background === */
.section #tours .tour-card__media,
#tours .tour-card__media,
.tour-card__media {
  background: none !important;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}

/* Ensure inner content fills the square */
.tour-card__media > img,
.tour-card__media .prog-slider,
.tour-card__media .prog-track,
.tour-card__media .prog-slide {
  width: 100%;
  height: 100%;
}

/* Crop images nicely */
.tour-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slider children should not change height */
.prog-slider {
  position: relative;
}
.prog-track {
  display: flex;
  transition: transform 0.4s ease;
  height: 100%;
}
.prog-slide {
  min-width: 100%;
  height: 100%;
  flex: 0 0 100%;
}

/* Nav buttons overlay inside the square */
.prog-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: 0;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
}
.prog-prev { left: 0.5rem; }
.prog-next { right: 0.5rem; }

/* Dots at bottom inside the square */
.prog-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  z-index: 2;
}
.prog-dots button[aria-current="true"] { transform: scale(1.1); }

/* Prevent layout jump between left and right cards */
.grid.two .card .tour-card__media {
  /* Make sure both cards line up */
  align-self: stretch;
}


/* --- Mobile header stacking fix (program button below slogan) --- */
@media (max-width: 640px) {
  .site-header { padding: 8px 12px; }
  .site-header .container.nav { 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    gap: 8px;
  }
  .header-slogan {
    margin-left: 0;
    margin-top: 4px;
    text-align: center;
  }
  .header-nav {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .header-nav a { display: inline-block; }
}


/* --- Extra header height --- */
.site-header {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}


/* --- Lift nav buttons inside header by ~1cm --- */
.header-nav {
  position: relative;
  top: -16px;
}


/* --- Mobile fix: place quick contacts at bottom --- */
@media (max-width: 640px) {
  .quick-contacts {
    margin-top: 40px;
    order: 999;
  }
}


/* Ensure quick contacts behaves well at bottom on mobile */
@media (max-width: 640px) {
  .quick-contacts { width: 100%; }
}


/* Mobile: ensure quick contacts sits nicely at bottom */
@media (max-width: 768px) {
  .quick-contacts { width: 100%; }
}


/* Mobile/tablet: ensure quick contacts sits nicely at bottom (up to 834px) */
@media (max-width: 834px) {
  .quick-contacts { width: 100%; }
}


/* Hide h2 logo (question mark) on mobile */
@media (max-width: 768px) {
}

/* Center align for "Наши программы рыбалки" */
.programs-title {
  text-align: center;
  margin: 20px auto;
}


/* Align all section titles */
.section-title {
  text-align: center;
  margin: 20px auto;
}


/* Unified style for all section titles */
.section-title {
  text-align: center;
  margin: 24px auto;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #102a43;
}