:root {
  --cream: #f5f0e8;
  --parchment: #ede6d3;
  --warm-white: #faf7f2;
  --stone: #8a7d6b;
  --dark-stone: #4a3f35;
  --forest: #2d4a2d;
  --forest-light: #3d6b3d;
  --rust: #8b4513;
  --gold: #b8965a;
  --gold-light: #d4b07a;
  --text-dark: #2c2318;
  --text-mid: #5a4a3a;
  --text-light: #8a7d6b;
  --border: rgba(138, 125, 107, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Lora', serif;
  background: var(--warm-white);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* Skip to content – accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--forest);
  color: var(--cream);
  padding: 8px 16px;
  z-index: 200;
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus { top: 0; }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav-logo img {
  height: 120px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--forest); }

/* Hamburger button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--dark-stone);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark-stone);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(44,35,24,0.75) 0%, rgba(44,35,24,0.45) 40%, rgba(44,35,24,0.8) 100%),
    url('../assets/images/haz.png') center/cover no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.3;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 120px 80px 80px;
  max-width: 760px;
}
.hero-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.08;
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}
.hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(245,240,232,0.82);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 40px;
}
.hero-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.badge {
  padding: 6px 16px;
  border: 1px solid rgba(184,150,90,0.5);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero-cta {
  display: inline-block;
  padding: 14px 36px;
  background: var(--forest);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--forest-light);
  transition: all 0.3s;
}
.hero-cta:hover {
  background: var(--forest-light);
  border-color: var(--forest-light);
}
.hero-year {
  position: absolute;
  right: 80px;
  bottom: 80px;
  font-family: 'Playfair Display', serif;
  font-size: 9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  user-select: none;
  z-index: 1;
}
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(245,240,232,0.5);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 2;
}
.scroll-line {
  width: 48px;
  height: 1px;
  background: rgba(245,240,232,0.3);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: scrollAnim 2s infinite;
}
@keyframes scrollAnim { to { left: 100%; } }

/* ── SECTIONS ── */
section { padding: 100px 80px; }
.section-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--dark-stone);
  line-height: 1.2;
  margin-bottom: 20px;
}
h2 em { font-style: italic; color: var(--forest); }
.lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 680px;
}

/* ── ABOUT ── */
.about {
  background: var(--parchment);
  position: relative;
  overflow: hidden;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.about-text p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 18px;
}
.about-image { position: relative; }
.about-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.about-image-frame {
  position: absolute;
  top: -16px;
  right: -16px;
  bottom: 16px;
  left: 16px;
  border: 2px solid var(--gold);
  z-index: -1;
}
.about-stat-row {
  display: flex;
  gap: 40px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.about-stat strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--forest);
  line-height: 1;
  margin-bottom: 6px;
}
.about-stat span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.decor-border {
  position: absolute;
  top: 40px; right: 40px;
  width: 180px; height: 180px;
  border: 1px solid rgba(184,150,90,0.2);
  border-radius: 50%;
  pointer-events: none;
}

/* ── APARTMENTS ── */
.apartments {
  background: var(--warm-white);
  max-width: 1400px;
  margin: 0 auto;
}
.apartments-header {
  text-align: center;
  margin-bottom: 60px;
}
.apartments-header .section-label { justify-content: center; }
.apartments-header .section-label::before { display: none; }
.apartments-header .section-label::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.apartments-header .lead { margin: 0 auto; }
.apt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.apt-card {
  background: var(--cream);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.apt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(44,35,24,0.12);
}
.apt-card-img {
  height: 280px;
  overflow: hidden;
  position: relative;
}
.apt-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.apt-card:hover .apt-card-img img { transform: scale(1.04); }

/* ── APARTMENT CAROUSEL ── */
.apt-carousel { position: absolute; inset: 0; overflow: hidden; }
.apt-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}
.apt-carousel-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* keep slides flat; the slider replaces the single-image hover zoom */
.apt-card:hover .apt-carousel-track img { transform: none; }
.apt-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(44, 35, 24, 0.45);
  color: var(--cream);
  font-family: serif;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s, background 0.2s;
  z-index: 3;
}
.apt-carousel-nav.prev { left: 12px; }
.apt-carousel-nav.next { right: 12px; }
.apt-carousel-nav:hover { background: var(--forest); }
.apt-card:hover .apt-carousel-nav,
.apt-carousel-nav:focus-visible { opacity: 1; }
.apt-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 3;
}
.apt-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.55);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.apt-carousel-dots button.active {
  background: var(--gold);
  transform: scale(1.3);
}
/* On touch devices there is no hover — keep arrows visible */
@media (hover: none) {
  .apt-carousel-nav { opacity: 1; }
}
.apt-card-body { padding: 32px; }
.apt-card-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-stone);
  margin-bottom: 14px;
}
.apt-card-body p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 24px;
}
.apt-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.apt-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: var(--text-mid);
}
.apt-feature::before {
  content: '◆';
  font-size: 0.45rem;
  color: var(--gold);
  flex-shrink: 0;
}
.apt-price {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.apt-price strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--forest);
}
.apt-price span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  color: var(--stone);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn-book {
  display: inline-block;
  padding: 10px 24px;
  background: var(--dark-stone);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-book:hover { background: var(--forest); }

/* ── DIVIDER ── */
.divider {
  padding: 0 80px;
  position: relative;
}
.divider-inner {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  position: relative;
}
.divider-inner::before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--warm-white);
  padding: 0 16px;
  color: var(--gold);
  font-size: 0.7rem;
}

/* ── REGION ── */
.region {
  background: var(--dark-stone);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.region::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url('../assets/images/bck.jpg?w=1800&q=80') center/cover no-repeat;
  opacity: 0.12;
}
.region-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.region h2 { color: var(--cream); }
.region h2 em { color: var(--gold-light); }
.region .lead { color: rgba(245,240,232,0.75); max-width: 700px; margin-bottom: 60px; }
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.region-card {
  background: rgba(245,240,232,0.06);
  border: 1px solid rgba(245,240,232,0.12);
  padding: 28px;
  backdrop-filter: blur(6px);
  transition: background 0.3s;
}
.region-card:hover { background: rgba(245,240,232,0.1); }
.region-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.region-card .dist {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.45);
  margin-bottom: 12px;
}
.region-card p {
  font-size: 0.93rem;
  line-height: 1.7;
  color: rgba(245,240,232,0.7);
}

/* ── ATTRACTIONS ── */
.attractions {
  background: var(--parchment);
  max-width: none;
}
.attractions-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.attr-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 48px;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}
.attr-tab {
  padding: 12px 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.attr-tab.active {
  color: var(--forest);
  border-bottom-color: var(--forest);
}
.attr-tab:hover { color: var(--dark-stone); }
.attr-panel { display: none; }
.attr-panel.active { display: block; }
.attr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.attr-item {
  background: var(--warm-white);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.attr-item-img {
  height: 200px;
  overflow: hidden;
}
.attr-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.attr-item:hover .attr-item-img img { transform: scale(1.06); }
.attr-item-body { padding: 22px; flex: 1; }
.attr-item-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--dark-stone);
  margin-bottom: 8px;
}
.attr-item-body .tag {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: block;
}
.attr-item-body p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-mid);
}
.attr-dist-badge {
  margin: 0 22px 22px;
  padding: 8px 14px;
  background: var(--forest);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Wide CTA below the attraction tabs → external Tourinform listing */
.attr-more {
  display: block;
  width: 100%;
  margin-top: 48px;
  padding: 20px 36px;
  text-align: center;
  background: var(--forest);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--forest-light);
  transition: all 0.3s;
}
.attr-more:hover {
  background: var(--forest-light);
  border-color: var(--gold);
}

/* ── GALLERY ── */
.gallery {
  background: var(--warm-white);
  padding: 100px 0;
}
.gallery-header {
  text-align: center;
  padding: 0 80px;
  margin-bottom: 48px;
}
.gallery-header .section-label { justify-content: center; }
.gallery-header .section-label::before { display: none; }
.gallery-strip {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 6px;
}
.gallery-item { overflow: hidden; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  display: block;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:nth-child(2) { grid-row: 1 / 3; }

/* ── CONTACT / BOOKING ── */
.contact {
  background: var(--dark-stone);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(184,150,90,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.contact-inner { position: relative; max-width: 900px; margin: 0 auto; }
.contact h2 { color: var(--cream); font-size: 2.8rem; }
.contact h2 em { color: var(--gold-light); }
.contact .lead {
  color: rgba(245,240,232,0.72);
  margin: 20px auto 48px;
  max-width: 500px;
}
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  text-align: left;
  margin-bottom: 48px;
}
.contact-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 24px;
}
.contact-card .cc-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.contact-card .cc-value {
  font-family: 'Lora', serif;
  font-size: 0.92rem;
  color: rgba(245,240,232,0.85);
  line-height: 1.5;
}
.contact-card a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.contact-card a:hover { color: var(--gold-light); }
.contact-btn {
  display: inline-block;
  padding: 16px 48px;
  background: var(--gold);
  color: var(--dark-stone);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
}
.contact-btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}

/* Map embed */
.contact-map {
  margin-top: 56px;
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  line-height: 0;
}
.contact-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  filter: grayscale(0.4) sepia(0.15);
}

/* ── LOCATION / GETTING HERE ── */
.location {
  background: var(--cream);
  position: relative;
}
.location-header { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.location-header .section-label { justify-content: center; }
.location-header .section-label::before { display: none; }
.location-header h2 { font-size: 2.8rem; }
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}
.location-map {
  border: 1px solid var(--border);
  overflow: hidden;
  line-height: 0;
  min-height: 420px;
}
.location-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  filter: grayscale(0.25) sepia(0.1);
}
.access-block .section-label { margin-bottom: 20px; }
.access-block h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.access-block > p { color: var(--text-mid); margin-bottom: 28px; max-width: 540px; }
.access-item {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.access-item:last-child { border-bottom: 1px solid var(--border); }
.access-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1.4;
}
.access-item h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 6px;
}
.access-item p { color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; }
.access-item p strong { color: var(--text-dark); }
@media (max-width: 860px) {
  .location-grid { grid-template-columns: 1fr; gap: 32px; }
  .location-map, .location-map iframe { min-height: 320px; }
}

/* ── FOOTER ── */
footer {
  background: #1c150f;
  color: rgba(245,240,232,0.4);
  padding: 40px 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
footer .footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: rgba(245,240,232,0.6);
}
footer p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

/* ── INLINE DISTANCES TABLE ── */
.dist-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 48px;
  font-family: 'Cormorant Garamond', serif;
}
.dist-table thead th {
  background: rgba(255,255,255,0.07);
  color: var(--gold-light);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dist-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s;
}
.dist-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.dist-table td {
  padding: 12px 16px;
  font-size: 0.96rem;
  color: rgba(245,240,232,0.72);
}
.dist-table td:first-child {
  color: rgba(245,240,232,0.92);
  font-weight: 500;
}
.dist-table td strong {
  color: var(--gold-light);
  font-weight: 600;
}

/* ── SCROLL TO TOP ── */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--forest);
  color: var(--cream);
  border: 1px solid var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
  font-family: serif;
}
.scroll-top.visible { opacity: 1; visibility: visible; }
.scroll-top:hover { background: var(--forest-light); transform: translateY(-2px); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-content > * { animation: fadeUp 0.8s ease both; }
.hero-eyebrow { animation-delay: 0.1s; }
.hero h1     { animation-delay: 0.25s; }
.hero-sub    { animation-delay: 0.4s; }
.hero-badges { animation-delay: 0.55s; }
.hero-cta    { animation-delay: 0.65s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Desktop hero: keep the headline on the dark left, let the haz.png "NYITÁS
   HAMAROSAN" sign sit readable in the empty right column. Percentage sizing keeps
   text and sign from overlapping at any desktop width. */
@media (min-width: 901px) {
  .hero-content { max-width: 52%; }
  .hero-bg {
    background:
      linear-gradient(90deg,
        rgba(44, 35, 24, 0.93) 0%,
        rgba(44, 35, 24, 0.82) 42%,
        rgba(44, 35, 24, 0.30) 60%,
        rgba(44, 35, 24, 0.05) 100%),
      url('../assets/images/haz.png') right center / 66% auto no-repeat,
      var(--dark-stone);
  }
}

@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(44,35,24,0.08);
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    display: block;
    padding: 14px 24px;
    font-size: 0.95rem;
  }
  section { padding: 72px 24px; }
  /* Smaller logo so the fixed nav doesn't eat the top of the hero image */
  .nav-logo img { height: 70px; }
  /* Hero: show the FULL haz.png (incl. the "NYITÁS HAMAROSAN" sign) instead of
     cropping it with cover; image sits as a band below the nav, text flows under it. */
  .hero { min-height: auto; }
  /* Start the background area right below the fixed nav (≈103px: 16+70 logo+16+1 border),
     show the FULL image (contain) at the top, text flows underneath. */
  .hero-bg {
    top: 103px;
    background: url('../assets/images/haz.png') top center / contain no-repeat var(--dark-stone);
  }
  .hero-content { padding: calc(50vw + 120px) 24px 60px; }
  .hero-year, .scroll-hint { display: none; }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  /* About: show the whole image (sign included) at its natural ratio, no cropping */
  /* Carousel arrows have no hover on touch screens → keep them visible */
  .apt-carousel-nav { opacity: 1; }
  .about-stat-row { gap: 24px; }
  .apt-grid { grid-template-columns: 1fr; }
  .region-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery-item:nth-child(2) { grid-row: auto; }
  .gallery-header { padding: 0 24px; }
  footer { flex-direction: column; gap: 12px; text-align: center; padding: 32px 24px; }
  .divider { padding: 0 24px; }
  .scroll-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
  .dist-table thead { display: none; }
  .dist-table, .dist-table tbody, .dist-table tr, .dist-table td { display: block; width: 100%; }
  .dist-table tr {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .dist-table td { padding: 4px 0; border: none; }
  .dist-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--gold-light);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin-right: 6px;
  }
}