@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --fesalen-ink: #101c26;
  --fesalen-ink-soft: #1c2c39;
  --fesalen-ink-deep: #0a1319;
  --fesalen-gold: #b8934f;
  --fesalen-gold-bright: #d7b673;
  --fesalen-gold-soft: rgba(184, 147, 79, 0.14);
  --fesalen-cream: #f8f4ea;
  --fesalen-cream-deep: #ece3d2;
  --fesalen-paper: #ffffff;
  --fesalen-muted: #505b66;
  --fesalen-muted-light: #8a939c;
  --fesalen-line: rgba(16, 28, 38, 0.12);
  --fesalen-line-strong: rgba(16, 28, 38, 0.24);
  --fesalen-success: #4c7a52;
  --fesalen-radius-lg: 24px;
  --fesalen-radius-md: 16px;
  --fesalen-radius-sm: 10px;
  --fesalen-shadow-soft: 0 20px 50px -25px rgba(16, 28, 38, 0.35);
  --fesalen-shadow-strong: 0 42px 90px -35px rgba(16, 28, 38, 0.55);
  --fesalen-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fesalen-font-display: "Cormorant Garamond", "Georgia", serif;
  --fesalen-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fesalen-font-body);
  background-color: var(--fesalen-cream);
  color: var(--fesalen-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fesalen-font-display);
  color: var(--fesalen-ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.6em;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 1.4vw, 1.28rem); }

p {
  color: var(--fesalen-muted);
  font-size: 1.02rem;
  margin-bottom: 1.1rem;
}

a {
  color: var(--fesalen-ink);
  text-decoration: none;
  transition: color var(--fesalen-ease);
}

a:hover,
a:focus {
  color: var(--fesalen-gold);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  padding-left: 0;
  margin: 0;
}

.container {
  max-width: 1180px;
}

.text-eyebrow {
  display: inline-block;
  font-family: var(--fesalen-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fesalen-gold);
  margin-bottom: 0.9rem;
}

.text-eyebrow--light {
  color: var(--fesalen-gold-bright);
}

.section-lead {
  max-width: 640px;
  font-size: 1.08rem;
}

.section-lead--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-pad {
  padding: 5.5rem 0;
}

.section-pad--tight {
  padding: 3.5rem 0;
}

.bg-cream {
  background-color: var(--fesalen-cream);
}

.bg-cream-deep {
  background-color: var(--fesalen-cream-deep);
}

.bg-ink {
  background-color: var(--fesalen-ink);
  color: var(--fesalen-cream);
}

.bg-ink h1,
.bg-ink h2,
.bg-ink h3,
.bg-ink h4 {
  color: var(--fesalen-cream);
}

.bg-ink p {
  color: rgba(248, 244, 234, 0.78);
}

.section-on-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--fesalen-cream);
  padding: 6.5rem 0;
}

.section-on-image h2,
.section-on-image h3 {
  color: var(--fesalen-cream);
}

.section-on-image p {
  color: rgba(248, 244, 234, 0.86);
}

.btn-fesalen,
.btn-fesalen-outline,
.btn-fesalen-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--fesalen-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform var(--fesalen-ease), background-color var(--fesalen-ease), color var(--fesalen-ease), border-color var(--fesalen-ease), box-shadow var(--fesalen-ease);
  cursor: pointer;
}

.btn-fesalen {
  background-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
  box-shadow: 0 16px 34px -16px rgba(184, 147, 79, 0.65);
}

.btn-fesalen:hover,
.btn-fesalen:focus {
  background-color: var(--fesalen-gold-bright);
  color: var(--fesalen-ink-deep);
  transform: translateY(-2px);
}

.btn-fesalen-outline {
  background-color: transparent;
  border-color: var(--fesalen-gold);
  color: var(--fesalen-gold);
}

.btn-fesalen-outline:hover,
.btn-fesalen-outline:focus {
  background-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
  transform: translateY(-2px);
}

.btn-fesalen-ghost {
  background-color: rgba(248, 244, 234, 0.08);
  border-color: rgba(248, 244, 234, 0.4);
  color: var(--fesalen-cream);
  backdrop-filter: blur(6px);
}

.btn-fesalen-ghost:hover,
.btn-fesalen-ghost:focus {
  background-color: var(--fesalen-cream);
  color: var(--fesalen-ink);
  transform: translateY(-2px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(248, 244, 234, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fesalen-ease), background-color var(--fesalen-ease), box-shadow var(--fesalen-ease);
}

.site-header.is-scrolled {
  border-color: var(--fesalen-line);
  box-shadow: 0 12px 30px -22px rgba(16, 28, 38, 0.5);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--fesalen-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fesalen-ink);
}

.site-header__meta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 0.86rem;
  color: var(--fesalen-muted);
}

.site-header__meta span,
.site-header__meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fesalen-muted);
}

.site-header__meta i {
  color: var(--fesalen-gold);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
}

.site-nav__list a {
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--fesalen-gold);
  transition: width var(--fesalen-ease);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.35rem;
  color: var(--fesalen-ink);
  cursor: pointer;
}

.hero {
  position: relative;
  padding: 8rem 0 6.5rem;
  background-size: cover;
  background-position: center;
  color: var(--fesalen-cream);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.hero h1 {
  color: var(--fesalen-cream);
  margin-bottom: 1rem;
}

.hero__lead {
  color: rgba(248, 244, 234, 0.85);
  font-size: 1.12rem;
  max-width: 520px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.hero__card {
  background-color: rgba(10, 19, 25, 0.55);
  border: 1px solid rgba(248, 244, 234, 0.18);
  border-radius: var(--fesalen-radius-lg);
  padding: 2rem;
  backdrop-filter: blur(14px);
  box-shadow: var(--fesalen-shadow-strong);
}

.hero__card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px dashed rgba(248, 244, 234, 0.2);
  font-size: 0.92rem;
}

.hero__card-row:last-child {
  border-bottom: none;
}

.hero__card-row span {
  color: rgba(248, 244, 234, 0.72);
}

.hero__card-row strong {
  color: var(--fesalen-gold-bright);
  font-weight: 600;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(248, 244, 234, 0.2);
}

.hero__stat strong {
  display: block;
  font-family: var(--fesalen-font-display);
  font-size: 2.1rem;
  color: var(--fesalen-gold-bright);
}

.hero__stat span {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 244, 234, 0.7);
}

.carousel-fesalen {
  position: relative;
  border-radius: var(--fesalen-radius-lg);
  overflow: hidden;
  box-shadow: var(--fesalen-shadow-strong);
}

.carousel-fesalen .slide-inner {
  min-height: 520px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.carousel-fesalen .slide-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 19, 25, 0) 35%, rgba(10, 19, 25, 0.82) 100%);
}

.slide-caption {
  position: relative;
  z-index: 2;
  padding: 2.5rem;
  color: var(--fesalen-cream);
}

.slide-caption h2,
.slide-caption h3 {
  color: var(--fesalen-cream);
  margin-bottom: 0.4rem;
}

.slide-caption p {
  color: rgba(248, 244, 234, 0.84);
  max-width: 540px;
  margin-bottom: 0;
}

.card-feature {
  background-color: var(--fesalen-paper);
  border: 1px solid var(--fesalen-line);
  border-radius: var(--fesalen-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--fesalen-ease), box-shadow var(--fesalen-ease), border-color var(--fesalen-ease);
}

.card-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--fesalen-shadow-soft);
  border-color: rgba(184, 147, 79, 0.4);
}

.card-feature__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--fesalen-cream-deep);
}

.card-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--fesalen-ease);
}

.card-feature:hover .card-feature__media img {
  transform: scale(1.06);
}

.card-feature__body {
  padding: 1.7rem 1.6rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.card-feature__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fesalen-gold);
}

.card-feature__body h3 {
  margin-bottom: 0.2rem;
}

.card-feature__body p {
  margin-bottom: 0;
  font-size: 0.96rem;
}

.card-feature__foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--fesalen-ink);
  font-size: 0.9rem;
}

.card-feature__foot i {
  color: var(--fesalen-gold);
  transition: transform var(--fesalen-ease);
}

.card-feature:hover .card-feature__foot i {
  transform: translateX(5px);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stat-card {
  padding: 2rem 1.6rem;
  border-radius: var(--fesalen-radius-md);
  background-color: var(--fesalen-paper);
  border: 1px solid var(--fesalen-line);
  text-align: center;
}

.stat-card strong {
  display: block;
  font-family: var(--fesalen-font-display);
  font-size: 2.6rem;
  color: var(--fesalen-gold);
  line-height: 1;
}

.stat-card span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fesalen-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.gallery-grid figure {
  margin: 0;
  border-radius: var(--fesalen-radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--fesalen-cream-deep);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--fesalen-ease);
}

.gallery-grid figure:hover img {
  transform: scale(1.07);
}

.gallery-grid figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, rgba(10, 19, 25, 0), rgba(10, 19, 25, 0.85));
  color: var(--fesalen-cream);
  font-size: 0.9rem;
}

.testimonial-card {
  background-color: var(--fesalen-paper);
  border-radius: var(--fesalen-radius-lg);
  padding: 2rem;
  border: 1px solid var(--fesalen-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.testimonial-card__stars {
  color: var(--fesalen-gold);
  letter-spacing: 0.15em;
}

.testimonial-card blockquote {
  margin: 0;
  font-family: var(--fesalen-font-display);
  font-size: 1.18rem;
  color: var(--fesalen-ink-soft);
  line-height: 1.5;
}

.testimonial-card__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
}

.testimonial-card__person img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--fesalen-cream-deep);
}

.testimonial-card__person strong {
  display: block;
  font-size: 0.95rem;
  color: var(--fesalen-ink);
}

.testimonial-card__person span {
  font-size: 0.82rem;
  color: var(--fesalen-muted);
}

.faq-accordion .accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--fesalen-line);
}

.faq-accordion .accordion-button {
  background-color: transparent;
  color: var(--fesalen-ink);
  font-family: var(--fesalen-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 1.4rem 0;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--fesalen-gold);
}

.faq-accordion .accordion-button::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f067";
  background-image: none;
  transform: none;
  color: var(--fesalen-gold);
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
  transform: none;
}

.faq-accordion .accordion-body {
  padding: 0 0 1.5rem;
  color: var(--fesalen-muted);
}

.form-fesalen {
  background-color: var(--fesalen-paper);
  border-radius: var(--fesalen-radius-lg);
  padding: 2.6rem;
  border: 1px solid var(--fesalen-line);
  box-shadow: var(--fesalen-shadow-soft);
}

.form-fesalen .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fesalen-ink-soft);
  margin-bottom: 0.4rem;
}

.form-fesalen .form-control,
.form-fesalen .form-select {
  border-radius: var(--fesalen-radius-sm);
  border: 1px solid var(--fesalen-line-strong);
  padding: 0.85rem 1rem;
  background-color: var(--fesalen-cream);
  color: var(--fesalen-ink);
  font-size: 0.98rem;
}

.form-fesalen .form-control:focus,
.form-fesalen .form-select:focus {
  border-color: var(--fesalen-gold);
  box-shadow: 0 0 0 3px var(--fesalen-gold-soft);
  background-color: var(--fesalen-paper);
}

.form-fesalen .form-check-input:checked {
  background-color: var(--fesalen-gold);
  border-color: var(--fesalen-gold);
}

.form-fesalen .form-check-label {
  font-size: 0.9rem;
  color: var(--fesalen-muted);
}

.form-fesalen .form-check-label a {
  text-decoration: underline;
  color: var(--fesalen-gold);
}

.form-note {
  font-size: 0.82rem;
  color: var(--fesalen-muted-light);
}

.input-icon-wrap {
  position: relative;
}

.input-icon-wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fesalen-gold);
  font-size: 0.9rem;
}

.input-icon-wrap .form-control {
  padding-left: 2.5rem;
}

.info-panel {
  background-color: var(--fesalen-ink);
  color: var(--fesalen-cream);
  border-radius: var(--fesalen-radius-lg);
  padding: 2.6rem;
  height: 100%;
}

.info-panel h3 {
  color: var(--fesalen-cream);
}

.info-panel p {
  color: rgba(248, 244, 234, 0.78);
}

.info-panel ul {
  list-style: none;
}

.info-panel li {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(248, 244, 234, 0.14);
  font-size: 0.95rem;
  color: rgba(248, 244, 234, 0.86);
}

.info-panel li:last-child {
  border-bottom: none;
}

.info-panel li i {
  color: var(--fesalen-gold-bright);
  margin-top: 0.25rem;
}

.info-panel li a {
  color: rgba(248, 244, 234, 0.9);
}

.info-panel li a:hover {
  color: var(--fesalen-gold-bright);
}

.map-frame {
  border-radius: var(--fesalen-radius-lg);
  overflow: hidden;
  border: 1px solid var(--fesalen-line);
  box-shadow: var(--fesalen-shadow-soft);
  min-height: 380px;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  filter: grayscale(0.25);
}

.process-list {
  list-style: none;
  counter-reset: fesalen-step;
}

.process-list li {
  position: relative;
  padding-left: 4rem;
  padding-bottom: 2rem;
  counter-increment: fesalen-step;
}

.process-list li:last-child {
  padding-bottom: 0;
}

.process-list li::before {
  content: counter(fesalen-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background-color: var(--fesalen-gold-soft);
  color: var(--fesalen-gold);
  font-family: var(--fesalen-font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 1px solid rgba(184, 147, 79, 0.35);
}

.process-list li::after {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 2.9rem;
  bottom: 0.2rem;
  width: 1px;
  background-color: var(--fesalen-line);
}

.process-list li:last-child::after {
  display: none;
}

.process-list h3 {
  font-size: 1.22rem;
  margin-bottom: 0.3rem;
}

.process-list p {
  margin-bottom: 0;
  font-size: 0.96rem;
}

.price-card {
  background-color: var(--fesalen-paper);
  border-radius: var(--fesalen-radius-lg);
  border: 1px solid var(--fesalen-line);
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--fesalen-ease), border-color var(--fesalen-ease), box-shadow var(--fesalen-ease);
}

.price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 147, 79, 0.45);
  box-shadow: var(--fesalen-shadow-soft);
}

.price-card__name {
  font-family: var(--fesalen-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fesalen-ink);
}

.price-card__price {
  margin: 1rem 0 1.4rem;
  font-family: var(--fesalen-font-display);
  font-size: 2.4rem;
  color: var(--fesalen-gold);
  line-height: 1;
}

.price-card__price small {
  font-family: var(--fesalen-font-body);
  font-size: 0.82rem;
  color: var(--fesalen-muted);
  font-weight: 500;
}

.price-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.8rem;
}

.price-card li {
  font-size: 0.94rem;
  color: var(--fesalen-muted);
  display: flex;
  gap: 0.6rem;
}

.price-card li i {
  color: var(--fesalen-gold);
  margin-top: 0.25rem;
}

.price-card .btn-fesalen-outline {
  margin-top: auto;
  width: 100%;
}

.cta-band {
  background-color: var(--fesalen-ink);
  color: var(--fesalen-cream);
  border-radius: var(--fesalen-radius-lg);
  padding: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-band h2 {
  color: var(--fesalen-cream);
  margin-bottom: 0.4rem;
}

.cta-band p {
  color: rgba(248, 244, 234, 0.78);
  margin-bottom: 0;
}

.site-footer {
  background-color: var(--fesalen-ink-deep);
  color: rgba(248, 244, 234, 0.72);
  padding: 5rem 0 2rem;
  font-size: 0.92rem;
}

.site-footer h3,
.site-footer h4 {
  color: var(--fesalen-cream);
  font-family: var(--fesalen-font-display);
  font-size: 1.15rem;
  margin-bottom: 1.2rem;
}

.site-footer a {
  color: rgba(248, 244, 234, 0.72);
}

.site-footer a:hover {
  color: var(--fesalen-gold-bright);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--fesalen-cream);
  font-family: var(--fesalen-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.site-footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer__contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.site-footer__contact li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.site-footer__contact i {
  color: var(--fesalen-gold);
  margin-top: 0.28rem;
}

.site-footer__bottom {
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(248, 244, 234, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.84rem;
  color: rgba(248, 244, 234, 0.55);
}

.site-footer__legal-note {
  font-size: 0.8rem;
  color: rgba(248, 244, 234, 0.5);
  line-height: 1.65;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 244, 234, 0.24);
  font-size: 0.86rem;
  color: rgba(248, 244, 234, 0.85);
  transition: background-color var(--fesalen-ease), color var(--fesalen-ease), border-color var(--fesalen-ease);
}

.social-pill:hover {
  background-color: var(--fesalen-gold);
  border-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
}

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: var(--fesalen-ink);
  color: var(--fesalen-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--fesalen-ease), transform var(--fesalen-ease), background-color var(--fesalen-ease);
  z-index: 1020;
  cursor: pointer;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
}

.fesalen-consent {
  position: fixed;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1040;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s var(--fesalen-ease), transform 0.45s var(--fesalen-ease);
  pointer-events: none;
}

.fesalen-consent.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fesalen-consent.is-closing {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}

.fesalen-consent__panel {
  max-width: 1080px;
  margin: 0 auto;
  background-color: var(--fesalen-ink-deep);
  color: rgba(248, 244, 234, 0.86);
  border-radius: var(--fesalen-radius-lg);
  border: 1px solid rgba(184, 147, 79, 0.28);
  box-shadow: var(--fesalen-shadow-strong);
  padding: 1.8rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.8rem;
}

.fesalen-consent__mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: rgba(184, 147, 79, 0.16);
  border: 1px solid rgba(184, 147, 79, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fesalen-gold-bright);
  font-size: 1.4rem;
}

.fesalen-consent__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fesalen-gold-bright);
  margin-bottom: 0.35rem;
}

.fesalen-consent__title {
  font-family: var(--fesalen-font-display);
  font-size: 1.28rem;
  color: var(--fesalen-cream);
  margin-bottom: 0.35rem;
}

.fesalen-consent__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(248, 244, 234, 0.74);
  margin-bottom: 0;
}

.fesalen-consent__link {
  color: var(--fesalen-gold-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fesalen-consent__link:hover {
  color: var(--fesalen-cream);
}

.fesalen-consent__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 190px;
}

.fesalen-consent__accept,
.fesalen-consent__decline {
  font-family: var(--fesalen-font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.72rem 1.4rem;
  cursor: pointer;
  transition: transform var(--fesalen-ease), background-color var(--fesalen-ease), color var(--fesalen-ease), border-color var(--fesalen-ease);
  border: 1px solid transparent;
}

.fesalen-consent__accept {
  background-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
}

.fesalen-consent__accept:hover {
  background-color: var(--fesalen-gold-bright);
  transform: translateY(-2px);
}

.fesalen-consent__decline {
  background-color: transparent;
  border-color: rgba(248, 244, 234, 0.34);
  color: rgba(248, 244, 234, 0.88);
}

.fesalen-consent__decline:hover {
  background-color: rgba(248, 244, 234, 0.1);
  color: var(--fesalen-cream);
}

.page-header {
  padding: 6rem 0 4rem;
  background-color: var(--fesalen-cream-deep);
  text-align: center;
}

.page-header h1 {
  margin-bottom: 0.8rem;
}

.page-header p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.06rem;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fesalen-gold);
  background-color: var(--fesalen-gold-soft);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
}

@media (max-width: 991px) {
  .site-header__meta {
    display: none;
  }

  .site-nav {
    display: none;
    width: 100%;
    padding-top: 1rem;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

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

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fesalen-consent__panel {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .fesalen-consent__mark {
    display: none;
  }

  .fesalen-consent__actions {
    flex-direction: row;
    min-width: 0;
  }

  .fesalen-consent__accept,
  .fesalen-consent__decline {
    flex: 1;
  }

  .section-pad {
    padding: 4rem 0;
  }

  .cta-band {
    padding: 2.2rem;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 575px) {
  .hero {
    padding: 5.5rem 0 4rem;
  }

  .hero__stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stat-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .form-fesalen,
  .info-panel {
    padding: 1.7rem;
  }

  .fesalen-consent {
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.8rem;
  }

  .fesalen-consent__panel {
    padding: 1.4rem;
    gap: 1rem;
  }

  .fesalen-consent__actions {
    flex-direction: column;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
  }
}
/* --- Contrast repairs (gold text on light backgrounds) --- */
.page-header .text-eyebrow {
  color: #6f5722;
}

.bg-cream-deep .text-eyebrow:not(.text-eyebrow--light),
.bg-cream .text-eyebrow:not(.text-eyebrow--light) {
  color: #6f5722;
}

.legal-aside .btn-fesalen-outline {
  color: #6f5722;
  border-color: #6f5722;
}

.legal-aside .btn-fesalen-outline:hover,
.legal-aside .btn-fesalen-outline:focus {
  background-color: var(--fesalen-gold);
  border-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
}

/* ------------------------------------------------------------------
   Contrast / visibility safeguards
   AOS entrance animations fade elements in with delayed opacity, which
   makes headline and stat text momentarily unreadable (very low
   contrast on the dark hero and image sections). Keep the content
   fully opaque so text always meets contrast requirements.
   ------------------------------------------------------------------ */
[data-aos],
[data-aos].aos-animate,
[data-aos][data-aos-delay] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero statistics: solid, high-contrast colours on the photo overlay */
.hero__stats .hero__stat strong {
  color: #e9d19d;
}

.hero__stats .hero__stat span {
  color: rgba(248, 244, 234, 0.94);
}

/* Image sections and dark panels: keep supporting text readable */
.section-on-image .text-eyebrow,
.bg-ink .text-eyebrow {
  color: #e9d19d;
}

.section-on-image p,
.section-on-image .section-lead,
.bg-ink p,
.bg-ink .section-lead {
  color: rgba(248, 244, 234, 0.9);
}

/* ------------------------------------------------------------------
   Contacts page: contrast repairs for gold / muted text on light
   backgrounds (white paper and cream surfaces).
   ------------------------------------------------------------------ */
.form-fesalen .form-check-label a {
  color: #6f5722;
  text-decoration: underline;
}

.form-fesalen .form-check-label a:hover,
.form-fesalen .form-check-label a:focus {
  color: #4d3c16;
}

.form-fesalen .form-note,
.form-note {
  color: #55606a;
}

/* Outline buttons sitting on cream surfaces need a darker gold */
.bg-cream .btn-fesalen-outline,
.bg-cream-deep .btn-fesalen-outline {
  color: #6f5722;
  border-color: #6f5722;
}

.bg-cream .btn-fesalen-outline:hover,
.bg-cream .btn-fesalen-outline:focus,
.bg-cream-deep .btn-fesalen-outline:hover,
.bg-cream-deep .btn-fesalen-outline:focus {
  background-color: #6f5722;
  border-color: #6f5722;
  color: #ffffff;
}

/* Card eyebrows / tags on light card backgrounds */
.bg-cream .card-feature__tag,
.bg-cream-deep .card-feature__tag,
.card-feature__tag {
  color: #6f5722;
}

/* --- Outline button contrast on light page sections --- */
.bg-cream .btn-fesalen-outline,
.bg-cream-deep .btn-fesalen-outline,
.legal-aside-card .btn-fesalen-outline {
  color: #6f5722;
  border-color: #6f5722;
}

.bg-cream .btn-fesalen-outline:hover,
.bg-cream .btn-fesalen-outline:focus,
.bg-cream-deep .btn-fesalen-outline:hover,
.bg-cream-deep .btn-fesalen-outline:focus,
.legal-aside-card .btn-fesalen-outline:hover,
.legal-aside-card .btn-fesalen-outline:focus {
  background-color: var(--fesalen-gold);
  border-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
}

/* ------------------------------------------------------------------
   Tagungsräume page: darker gold text where it sits on light surfaces
   (statistics, price cards, pills, open accordion headings) so the
   contrast ratio stays at or above the required level.
   ------------------------------------------------------------------ */
.stat-card strong,
.price-card__price {
  color: #6f5722;
}

/* Stat cards placed on the dark ink band keep the bright gold */
.bg-ink .stat-card strong {
  color: var(--fesalen-gold-bright);
}

.tag-pill {
  color: #6f5722;
  background-color: rgba(111, 87, 34, 0.12);
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: #6f5722;
}

.faq-accordion .accordion-button::after,
.faq-accordion .accordion-button:not(.collapsed)::after {
  color: #6f5722;
}

/* Gallery captions sit on photos: use a stronger scrim so the
   cream caption text always has enough contrast. */
.gallery-grid figure figcaption {
  background: linear-gradient(180deg, rgba(10, 19, 25, 0.72) 0%, rgba(10, 19, 25, 0.95) 100%);
  color: #fdfbf5;
  text-shadow: 0 1px 2px rgba(10, 19, 25, 0.85);
}

/* ------------------------------------------------------------------
   Homepage contrast repairs
   1) Stat numbers (strong) sit on the white .stat-card surface; the
      brand gold at full brightness is too light there, so use a
      deeper gold that still reads as gold.
   2) Gallery captions sit on top of photos: darken the caption plate
      so the cream text keeps a strong ratio on any image.
   3) Hero primary CTA: solid dark plate with cream text keeps a high
      ratio against the dark hero photo in every state.
   ------------------------------------------------------------------ */
.stat-card strong {
  color: #8a6a2f;
}

.bg-ink .stat-card strong {
  color: #8a6a2f;
}

.gallery-grid figcaption {
  background: linear-gradient(180deg, rgba(10, 19, 25, 0.78), rgba(10, 19, 25, 0.96));
  color: #f8f4ea;
  text-shadow: 0 1px 2px rgba(10, 19, 25, 0.6);
}

.hero__actions .btn-fesalen {
  background-color: var(--fesalen-ink-deep);
  border-color: var(--fesalen-gold);
  color: var(--fesalen-cream);
  box-shadow: none;
}

.hero__actions .btn-fesalen:hover,
.hero__actions .btn-fesalen:focus {
  background-color: var(--fesalen-gold);
  border-color: var(--fesalen-gold);
  color: var(--fesalen-ink-deep);
}

/* ------------------------------------------------------------------
   Hero: keep the headline clear of the fixed cookie-consent panel.

   The consent banner is a fixed overlay anchored to the bottom of the
   viewport. On small screens the hero section fills the first screen
   (min-vh-100 + top alignment), so the lower part of the headline was
   hidden behind the banner. Reserve room for the banner at the foot of
   the hero and top-align its content (instead of vertically centring)
   so the title always renders fully above the overlay. Desktop keeps
   the original centred layout.
   ------------------------------------------------------------------ */
.fesalen-consent.is-open ~ .site-footer,
.fesalen-consent.is-open ~ div .site-footer {
  padding-bottom: 14rem;
}

@media (max-width: 991px) {
  .hero.min-vh-100.align-items-center {
    align-items: flex-start !important;
    padding-top: 3.5rem;
    padding-bottom: 20rem;
  }

  .hero .hero__stats {
    margin-top: 2.25rem;
  }
}
