@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --moran-noir: #17110d;
  --moran-ink: #2a1f18;
  --moran-stone: #6b5b4f;
  --moran-cream: #fbf6ee;
  --moran-parchment: #f1e7d9;
  --moran-line: #e2d5c3;
  --moran-wine: #6e1f2c;
  --moran-wine-dark: #521722;
  --moran-terracotta: #c2603a;
  --moran-gold: #c79a3e;
  --moran-sage: #5b6a4e;

  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 45px -24px rgba(23, 17, 13, 0.45);
  --shadow-strong: 0 34px 80px -32px rgba(23, 17, 13, 0.6);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--moran-ink);
  background-color: var(--moran-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--moran-noir);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; }

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--moran-wine);
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--moran-terracotta);
}

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

main {
  overflow-x: clip;
}

.moran-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--moran-terracotta);
  margin-bottom: 18px;
}

.moran-eyebrow::before {
  content: "";
  width: 38px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.7;
}

.moran-eyebrow--light {
  color: var(--moran-gold);
}

.moran-lead {
  font-size: 1.12rem;
  color: var(--moran-stone);
  max-width: 62ch;
}

.moran-lead--light {
  color: #e8ddcc;
}

.section {
  padding: clamp(72px, 9vw, 132px) 0;
  position: relative;
}

.section--cream { background-color: var(--moran-cream); }
.section--parchment { background-color: var(--moran-parchment); }
.section--noir { background-color: var(--moran-noir); color: #ece2d3; }

.section--noir h2,
.section--noir h3,
.section--noir h4 {
  color: var(--moran-cream);
}

.section--media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--moran-cream);
}

.section--media h2,
.section--media h3 {
  color: var(--moran-cream);
}

.section__head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}

.btn-moran {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-moran:hover {
  transform: translateY(-2px);
}

.btn-moran--solid {
  background-color: var(--moran-wine);
  color: #fff5ea;
}

.btn-moran--solid:hover,
.btn-moran--solid:focus-visible {
  background-color: var(--moran-wine-dark);
  color: #fff5ea;
}

.btn-moran--gold {
  background-color: var(--moran-gold);
  color: #221708;
}

.btn-moran--gold:hover,
.btn-moran--gold:focus-visible {
  background-color: #b0872f;
  color: #221708;
}

.btn-moran--ghost {
  background-color: transparent;
  border-color: rgba(251, 246, 238, 0.65);
  color: var(--moran-cream);
}

.btn-moran--ghost:hover,
.btn-moran--ghost:focus-visible {
  background-color: var(--moran-cream);
  color: var(--moran-noir);
}

.btn-moran--outline {
  background-color: transparent;
  border-color: var(--moran-wine);
  color: var(--moran-wine);
}

.btn-moran--outline:hover,
.btn-moran--outline:focus-visible {
  background-color: var(--moran-wine);
  color: #fff5ea;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(251, 246, 238, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--moran-line);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-soft);
  background-color: rgba(251, 246, 238, 0.98);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--moran-noir);
  letter-spacing: 0.01em;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
  color: var(--moran-wine);
}

.site-header__contacts {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.86rem;
  color: var(--moran-stone);
}

.site-header__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-header__contact-item i {
  color: var(--moran-terracotta);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--moran-ink);
  position: relative;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--moran-terracotta);
  transition: width 0.3s ease;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after {
  width: 100%;
}

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--moran-cream);
  overflow: hidden;
}

.hero__inner {
  max-width: 720px;
}

.hero__title {
  color: var(--moran-cream);
  margin-bottom: 22px;
}

.hero__text {
  font-size: 1.15rem;
  color: #e6dbc9;
  max-width: 54ch;
  margin-bottom: 34px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 54px;
  padding-top: 28px;
  border-top: 1px solid rgba(251, 246, 238, 0.25);
}

.hero__meta-item span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--moran-gold);
  line-height: 1;
}

.hero__meta-item small {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d9cbb6;
}

.moran-carousel {
  position: relative;
  overflow: hidden;
}

.moran-carousel__slide {
  min-height: 74vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--moran-cream);
}

.moran-carousel__slide-inner {
  max-width: 700px;
  padding: 90px 0;
}

.moran-carousel__controls {
  position: absolute;
  right: 40px;
  bottom: 44px;
  display: flex;
  gap: 12px;
  z-index: 5;
}

.moran-carousel__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(251, 246, 238, 0.55);
  background-color: rgba(23, 17, 13, 0.35);
  color: var(--moran-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.moran-carousel__btn:hover,
.moran-carousel__btn:focus-visible {
  background-color: var(--moran-gold);
  border-color: var(--moran-gold);
  color: var(--moran-noir);
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.dish-card {
  background-color: #fffdf9;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.dish-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}

.dish-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--moran-parchment);
}

.dish-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.dish-card:hover .dish-card__media img {
  transform: scale(1.06);
}

.dish-card__price {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background-color: var(--moran-gold);
  color: #221708;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

.dish-card__body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.dish-card__title {
  margin: 0;
  font-size: 1.3rem;
}

.dish-card__text {
  color: var(--moran-stone);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}

.dish-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dish-card__tag {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moran-sage);
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.service-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--moran-cream);
  box-shadow: var(--shadow-soft);
}

.service-card__body {
  position: relative;
  z-index: 2;
  padding: 34px 30px;
}

.service-card__title {
  color: var(--moran-cream);
  margin-bottom: 10px;
}

.service-card__text {
  color: #e2d6c4;
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--moran-gold);
  font-weight: 600;
  font-size: 0.9rem;
}

.service-card__link:hover,
.service-card__link:focus-visible {
  color: var(--moran-cream);
}

.value-card {
  background-color: #fffdf9;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-md);
  padding: 34px 30px;
  height: 100%;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.value-card:hover {
  border-color: var(--moran-gold);
  transform: translateY(-4px);
}

.value-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--moran-parchment);
  color: var(--moran-wine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.value-card__title {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.value-card__text {
  color: var(--moran-stone);
  font-size: 0.95rem;
  margin: 0;
}

.team-card {
  text-align: center;
  background-color: #fffdf9;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  height: 100%;
}

.team-card__photo {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 3px solid var(--moran-parchment);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-size: 1.18rem;
  margin-bottom: 4px;
}

.team-card__role {
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moran-terracotta);
  margin-bottom: 14px;
}

.team-card__text {
  color: var(--moran-stone);
  font-size: 0.92rem;
  margin: 0;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background-color: var(--moran-line);
}

.timeline__item {
  position: relative;
  padding-left: 54px;
  margin-bottom: 38px;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--moran-cream);
  border: 2px solid var(--moran-terracotta);
}

.timeline__year {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--moran-wine);
  display: block;
  margin-bottom: 6px;
}

.timeline__text {
  color: var(--moran-stone);
  margin: 0;
}

.testimonial {
  background-color: #fffdf9;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial__stars {
  color: var(--moran-gold);
  font-size: 0.95rem;
  letter-spacing: 3px;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--moran-ink);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--moran-noir);
}

.testimonial__meta {
  font-size: 0.82rem;
  color: var(--moran-stone);
}

.price-panel {
  background-color: #fffdf9;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-md);
  padding: 40px 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.price-panel--featured {
  background-color: var(--moran-noir);
  border-color: var(--moran-wine);
  color: #efe4d3;
}

.price-panel--featured .price-panel__name,
.price-panel--featured .price-panel__amount {
  color: var(--moran-cream);
}

.price-panel__badge {
  align-self: flex-start;
  background-color: var(--moran-gold);
  color: #221708;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}

.price-panel__name {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.price-panel__amount {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--moran-wine);
  line-height: 1;
  margin-bottom: 22px;
}

.price-panel__amount small {
  font-size: 1rem;
  color: var(--moran-stone);
}

.price-panel__list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  flex: 1;
}

.price-panel__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: inherit;
}

.price-panel__list li i {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--moran-terracotta);
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--moran-line);
}

.price-row__name {
  font-weight: 500;
  color: var(--moran-ink);
}

.price-row__desc {
  display: block;
  font-size: 0.85rem;
  color: var(--moran-stone);
  font-weight: 400;
}

.price-row__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--moran-wine);
  white-space: nowrap;
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: moran-step;
}

.step-item {
  position: relative;
  padding: 0 0 34px 76px;
}

.step-item:last-child {
  padding-bottom: 0;
}

.step-item::before {
  counter-increment: moran-step;
  content: counter(moran-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--moran-parchment);
  color: var(--moran-wine);
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-item__title {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.step-item__text {
  color: var(--moran-stone);
  font-size: 0.95rem;
  margin: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--moran-parchment);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 20px 18px;
  font-size: 0.9rem;
  color: var(--moran-cream);
  background: linear-gradient(to top, rgba(23, 17, 13, 0.85), rgba(23, 17, 13, 0));
}

.post-card {
  background-color: #fffdf9;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}

.post-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--moran-parchment);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.post-card__date {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moran-sage);
}

.post-card__title {
  font-size: 1.28rem;
  margin: 0;
}

.post-card__text {
  color: var(--moran-stone);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}

.moran-form {
  background-color: #fffdf9;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-md);
  padding: clamp(30px, 4vw, 48px);
}

.moran-form--dark {
  background-color: rgba(23, 17, 13, 0.72);
  border-color: rgba(199, 154, 62, 0.35);
  color: #efe4d3;
}

.form-label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--moran-ink);
  margin-bottom: 8px;
}

.moran-form--dark .form-label {
  color: #e6dbc9;
}

.form-control,
.form-select {
  padding: 14px 16px;
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-sm);
  background-color: var(--moran-cream);
  color: var(--moran-ink);
  font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--moran-terracotta);
  box-shadow: 0 0 0 3px rgba(194, 96, 58, 0.18);
  background-color: #fff;
}

.moran-form--dark .form-control,
.moran-form--dark .form-select {
  background-color: rgba(251, 246, 238, 0.08);
  border-color: rgba(251, 246, 238, 0.3);
  color: var(--moran-cream);
}

.moran-form--dark .form-control::placeholder {
  color: #c9bca9;
}

.form-note {
  font-size: 0.82rem;
  color: var(--moran-stone);
}

.accordion-item {
  border: 1px solid var(--moran-line);
  border-radius: var(--radius-sm) !important;
  margin-bottom: 14px;
  overflow: hidden;
  background-color: #fffdf9;
}

.accordion-button {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--moran-noir);
  background-color: #fffdf9;
  padding: 22px 24px;
}

.accordion-button:not(.collapsed) {
  color: var(--moran-wine);
  background-color: var(--moran-parchment);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(194, 96, 58, 0.18);
}

.accordion-body {
  color: var(--moran-stone);
  font-size: 0.96rem;
  padding: 6px 24px 24px;
}

.stat-block {
  text-align: center;
  padding: 26px 18px;
}

.stat-block__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--moran-wine);
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}

.section--media .stat-block__value {
  color: var(--moran-gold);
}

.stat-block__label {
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moran-stone);
}

.section--media .stat-block__label {
  color: #ddd0bd;
}

.cta-band {
  background-size: cover;
  background-position: center;
  color: var(--moran-cream);
  padding: clamp(70px, 8vw, 110px) 0;
}

.cta-band__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}

.map-frame {
  border: 0;
  width: 100%;
  min-height: 440px;
  border-radius: var(--radius-md);
  filter: grayscale(0.25) contrast(1.05);
}

.site-footer {
  background-color: var(--moran-noir);
  color: #d8cbb8;
  padding: 82px 0 34px;
}

.site-footer a {
  color: #d8cbb8;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--moran-gold);
}

.site-footer__title {
  color: var(--moran-cream);
  font-size: 1.05rem;
  margin-bottom: 22px;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin-bottom: 12px;
  font-size: 0.93rem;
}

.site-footer__contact {
  font-size: 0.93rem;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.site-footer__contact i {
  color: var(--moran-gold);
  margin-top: 5px;
}

.site-footer__divider {
  border-color: rgba(251, 246, 238, 0.16);
  margin: 46px 0 26px;
  opacity: 1;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.84rem;
  color: #a99a86;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background-color: var(--moran-wine);
  color: #fff5ea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 1040;
}

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

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--moran-gold);
  color: var(--moran-noir);
}

.cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(1080px, calc(100% - 32px));
  z-index: 1090;
  background-color: rgba(23, 17, 13, 0.97);
  color: #f2e8d8;
  border: 1px solid rgba(199, 154, 62, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  padding: 22px 26px;
  backdrop-filter: blur(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: cookie-rise 0.55s ease both;
}

.cookie-bar--hide {
  opacity: 0;
  transform: translateX(-50%) translateY(26px);
  pointer-events: none;
}

.cookie-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cookie-bar__text {
  flex: 1 1 420px;
  min-width: 0;
}

.cookie-bar__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--moran-cream);
  margin: 0 0 6px;
}

.cookie-bar__copy {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #ded1bd;
}

.cookie-bar__link {
  color: var(--moran-gold);
  text-decoration: underline;
}

.cookie-bar__link:hover,
.cookie-bar__link:focus-visible {
  color: #ffd97a;
}

.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cookie-bar__btn {
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cookie-bar__btn--ghost {
  background-color: transparent;
  border: 1px solid rgba(251, 246, 238, 0.55);
  color: var(--moran-cream);
}

.cookie-bar__btn--ghost:hover,
.cookie-bar__btn--ghost:focus-visible {
  background-color: rgba(251, 246, 238, 0.12);
  border-color: var(--moran-cream);
}

.cookie-bar__btn--solid {
  background-color: var(--moran-gold);
  border: 1px solid var(--moran-gold);
  color: #221708;
}

.cookie-bar__btn--solid:hover,
.cookie-bar__btn--solid:focus-visible {
  background-color: #ffd97a;
  border-color: #ffd97a;
}

@keyframes cookie-rise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.moran-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--moran-parchment);
  color: var(--moran-wine);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

.moran-divider {
  width: 64px;
  height: 2px;
  background-color: var(--moran-gold);
  border: 0;
  margin: 26px auto;
  opacity: 1;
}

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

  .site-nav__list {
    gap: 18px;
    flex-wrap: wrap;
  }

  .hero {
    min-height: 78vh;
  }
}

@media (max-width: 767.98px) {
  .site-header__bar {
    flex-wrap: wrap;
  }

  .cookie-bar {
    bottom: 14px;
    padding: 20px;
    border-radius: var(--radius-md);
  }

  .cookie-bar__actions {
    width: 100%;
  }

  .cookie-bar__btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .hero__meta {
    gap: 22px;
  }

  .step-item {
    padding-left: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* QA_STEP_CARD_GRID_FIX .step-list:has(> .step-item) */
@media(min-width:992px){.step-list:has(> .step-item){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.step-list:has(> .step-item)>:not(.step-item){grid-column:1/-1}.step-list:has(> .step-item)>.step-item{width:100%;max-width:100%;min-width:0}}

/* QA_CTA_BAND_CONTRAST_FIX: ensure the CTA band always has a dark backdrop
   so its cream/gold text keeps sufficient contrast, even without a bg image. */
.cta-band {
  background-color: var(--moran-noir);
}

/* QA_CONTRAST_FIX blog */
.hero h1 {
  color: var(--moran-cream);
}

.moran-eyebrow {
  color: #8f3b1c;
}

.section--noir .step-item__text,
.section--media .step-item__text {
  color: #e2d6c4;
}

.section--noir .price-row {
  border-bottom-color: rgba(251, 246, 238, 0.22);
}

.section--noir .price-row__name {
  color: var(--moran-cream);
}

.section--noir .price-row__desc {
  color: #d8cbb8;
}

/* Service cards: image on top, dark body so light text is readable */
.service-card {
  flex-direction: column;
  align-items: stretch;
}

.service-card > a {
  display: block;
  flex: 0 0 auto;
}

.service-card > a img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.service-card__body {
  margin-top: auto;
  background-color: #241811;
}

/* QA_ABOUT_CONTRAST_FIX: text that sat on the wrong background after the
   section-level colour rules (dark sections with light cards, dark hero,
   dark form) is brought back to a readable colour. */
.hero h1,
.hero .hero__title {
  color: var(--moran-cream);
}

/* Terracotta #c2603a only reached 3.4-4.1:1 on the cream/parchment sections.
   Darker terracotta keeps the brand hue with >=5:1. */
.moran-eyebrow:not(.moran-eyebrow--light) {
  color: #9c4526;
}

.team-card__role {
  color: #9c4526;
}

/* Cards that are light coloured but live inside a dark/media section must keep
   dark headings (the section rule forced cream on a white card). */
.section--noir .value-card .value-card__title,
.section--media .value-card .value-card__title,
.section--noir .post-card .post-card__title,
.section--media .post-card .post-card__title {
  color: var(--moran-noir);
}

.moran-form--dark .form-note {
  color: #e2d6c4;
}

/* QA_SERVICE_CARD_MEDIA_FIX: the service card is a text-over-photo card, but
   the markup places the photo as an inline <img> next to the text. The flex
   row therefore squeezed the text body and clipped it. The photo is turned
   into a full-card background layer with a dark gradient so the cream text
   always has a dark backdrop. */
.service-card:has(> a > img) {
  background-color: var(--moran-noir);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.service-card:has(> a > img) > a {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

.service-card:has(> a > img) > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card:has(> a > img) > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(23, 17, 13, 0.95) 10%,
    rgba(23, 17, 13, 0.74) 55%,
    rgba(23, 17, 13, 0.48) 100%
  );
}

.service-card:has(> a > img) > .service-card__body {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* On phones two half-width service cards leave ~96px of usable text width,
   which clips long words such as "Familienfeiern". They become full width. */
@media (max-width: 575.98px) {
  .row.g-4 > .col-6:has(> .service-card) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* QA_EYEBROW_LIGHT_CONTRAST_FIX: an earlier generic `.moran-eyebrow { color }`
   rule (equal specificity, declared later) overrode the intended light variant,
   rendering it as dark terracotta on dark backgrounds. Restore a light gold
   with enough luminance to stay >=4.5:1 even over the lighter hero photo. */
.moran-eyebrow.moran-eyebrow--light {
  color: #f0d9a0;
}

/* QA_CONTACTS_EYEBROW_LIGHT_FIX: the earlier appended `.moran-eyebrow{color:#8f3b1c}`
   override (same specificity, later in the sheet) also hit the light variant and
   left the "Kontakt/Anreise/Ein Anruf genügt" eyebrows dark-on-dark. Restore a
   light gold on the light variant with a higher-specificity rule. */
.moran-eyebrow.moran-eyebrow--light {
  color: #f0d9a8;
}

/* QA_CATERING_STEP_LIST_LAYOUT_FIX
   The Bootstrap `.row.g-4` inside the plain `.step-list` wrapper applied
   negative side margins (-1.5rem), so the row was wider than its parent and
   the step content spilled outside the card bounds. The gutters are removed
   and, on desktop, the six step cards are laid out in two readable columns
   (one column on mobile/tablet, where the Bootstrap columns already stack). */
.step-list > .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin-left: 0;
  margin-right: 0;
  display: block;
}

.step-list > .row > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.step-list > .row > [class*="col-"] + [class*="col-"] {
  margin-top: 1.75rem;
}

.step-list > .row > [class*="col-"] > .step-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 992px) {
  .step-list > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 2.25rem;
  }

  .step-list > .row > [class*="col-"] + [class*="col-"] {
    margin-top: 0;
  }
}

/* QA_CATERING_EYEBROW_CONTRAST_FIX
   The later `.moran-eyebrow { color: #8f3b1c }` rule (same specificity as the
   modifier) won over `.moran-eyebrow--light`, turning the eyebrow dark brown
   on the dark hero / noir / media backgrounds. The light variant is restored. */
.moran-eyebrow.moran-eyebrow--light,
.hero .moran-eyebrow.moran-eyebrow--light,
.section--noir .moran-eyebrow.moran-eyebrow--light,
.section--media .moran-eyebrow.moran-eyebrow--light {
  color: #e8c07a;
}

/* QA_BLOG_CONTRAST_FIX_3
   1) `.btn-moran--outline` uses the wine brand colour as text, which is almost
      invisible on the dark hero photo and the dark footer. On dark surfaces the
      outline button switches to cream text/border.
   2) The Bootstrap `.blockquote-footer` default grey (rgb 108,117,125) only
      reached 4.36:1 on the cream section. A darker stone tone clears 4.5:1.
   3) `.section--media` was defined as a photo section but had no background
      image on this page, leaving cream text on a cream background. A dark
      backdrop is applied so the cream/gold text stays readable. */
.hero .btn-moran--outline,
.site-footer .btn-moran--outline {
  border-color: var(--moran-cream);
  color: var(--moran-cream);
}

.hero .btn-moran--outline:hover,
.hero .btn-moran--outline:focus-visible,
.site-footer .btn-moran--outline:hover,
.site-footer .btn-moran--outline:focus-visible {
  background-color: var(--moran-cream);
  color: var(--moran-noir);
}

.blockquote-footer {
  color: #6b5b4f;
}

.section--media {
  background-color: var(--moran-noir);
}

.section--media .moran-eyebrow {
  color: #e8c07a;
}

.section--media .moran-lead {
  color: #ddd0bd;
}

/* QA_PRICE_ROW_VALUE_CONTRAST_FIX
   `.price-row__value` keeps the wine brand colour, which was almost invisible
   (1.0-1.8:1) on the dark noir/media sections (the "Getränke" price list sits
   on the noir photo section). Earlier appended rules already lightened the
   row name and description there but not the value. On dark surfaces the
   value switches to the light gold used for the other light-on-dark accents. */
.section--noir .price-row__value,
.section--media .price-row__value,
.section--noir .price-row .price-row__value,
.section--media .price-row .price-row__value {
  color: #f0d9a0;
}

/* QA_HERO_GOLD_CTA_CONTRAST_FIX
   The gold pill CTA in the hero was measured against the dark hero photo
   backdrop (rgb 28,21,15) and came out at ~1.03:1 because the dark
   #221708 label sat edge-to-edge on a very dark surface. The hero CTAs are
   restyled as dark buttons with a gold border and a light label, so the
   text keeps a high contrast both against the button fill and against the
   dark hero image behind it. The gold look is kept for the hover state. */
.hero .btn-moran--gold {
  background-color: var(--moran-noir);
  border-color: var(--moran-gold);
  color: var(--moran-cream);
}

.hero .btn-moran--gold:hover,
.hero .btn-moran--gold:focus-visible {
  background-color: var(--moran-gold);
  border-color: var(--moran-gold);
  color: #1a1004;
}

/* QA_EYEBROW_LIGHT_HERO_CONTRAST_FIX
   The light eyebrow variant (.moran-eyebrow--light) was rendered as #e8c07a
   over the hero photo/overlay composite (approx. rgb(97,96,93)), which only
   reached ~3.67:1. A brighter warm gold keeps the brand hue while clearing
   4.5:1 on the hero, noir and media backdrops. */
.moran-eyebrow.moran-eyebrow--light,
.hero .moran-eyebrow.moran-eyebrow--light,
.section--noir .moran-eyebrow.moran-eyebrow--light,
.section--media .moran-eyebrow.moran-eyebrow--light,
.cta-band .moran-eyebrow.moran-eyebrow--light {
  color: #f8e8c0;
}

/* QA_VALUE_CARD_HEIGHT_FIX
   The four value cards in the "Willkommen" section carry only a short icon,
   heading and one paragraph, but `.value-card { height: 100% }` inside the
   stretch-aligned CSS grid forced every card to the height of the tallest
   sibling (the card with the three-line heading). The shorter cards therefore
   ended with large empty areas below their text.
   The grid items no longer stretch: each card is now only as tall as its own
   content, so no blank space remains. A sensible minimum keeps the row visually
   balanced without re-introducing oversized boxes. Mobile layout is unchanged
   because it already stacks the grid into a single column. */
.grid-cards > .value-card {
  align-self: start;
  height: auto;
}

/* QA_COOKIE_BAR_SOLID_BTN_CONTRAST_FIX
   The primary cookie button ("Alles okay") used a gold fill (#c79a3e) with a
   very dark brown label (#221708). The gold pill sits directly on the nearly
   black cookie-bar backdrop (rgb 23,17,13 / 0.97), and the dark label was
   measured against that dark surrounding surface (~1.06:1), leaving the
   button text unreadable at the pill edges.
   Only this one button is corrected: it keeps the brand gold as the visible
   outline/accent, while the fill becomes the same dark noir used by the other
   dark-surface CTAs and the label becomes the light cream/gold tone. The
   hover state restores the solid gold fill with the dark label, so the accent
   colour is preserved. This affects no other element on the page. */
.cookie-bar__btn--solid {
  background-color: #2b1d0f;
  border-color: var(--moran-gold);
  color: #f8e8c0;
}

.cookie-bar__btn--solid:hover,
.cookie-bar__btn--solid:focus-visible {
  background-color: var(--moran-gold);
  border-color: var(--moran-gold);
  color: #1a1004;
}

/* QA_GHOST_BTN_HERO_MEDIA_CONTRAST_FIX
   `.btn-moran--ghost` uses `color: var(--moran-cream)` (opaque) but the
   measured composite of the label over the hero/CTA-band photo backdrop
   dropped to 2.4:1 on mobile, because the surrounding surface is the dark
   photo (rgb 199,154,62 blend) rather than the cream page. The ghost button
   on a media/dark surface gets an opaque cream label and a stronger border
   so the "Tisch reservieren" / "Direkt zum Kontakt" text clears 4.5:1
   against the dark photo. Hover/focus behaviour is unchanged. Scoped to
   ghost buttons sitting on the photo hero and CTA band only. */
.hero .btn-moran--ghost,
.cta-band .btn-moran--ghost,
.section--media .btn-moran--ghost,
.section--noir .btn-moran--ghost {
  background-color: rgba(23, 17, 13, 0.55);
  border-color: var(--moran-cream);
  color: var(--moran-cream);
}

.hero .btn-moran--ghost:hover,
.hero .btn-moran--ghost:focus-visible,
.cta-band .btn-moran--ghost:hover,
.cta-band .btn-moran--ghost:focus-visible,
.section--media .btn-moran--ghost:hover,
.section--media .btn-moran--ghost:focus-visible,
.section--noir .btn-moran--ghost:hover,
.section--noir .btn-moran--ghost:focus-visible {
  background-color: var(--moran-cream);
  color: var(--moran-noir);
}