@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400&family=Inter:wght@300..700&display=swap');

:root {
  --belarim-cocoa: #241611;
  --belarim-espresso: #3a241a;
  --belarim-mocha: #5b3c2c;
  --belarim-cream: #f6ebd9;
  --belarim-ivory: #fffaf3;
  --belarim-gold: #bd8a44;
  --belarim-gold-soft: #e4bd82;
  --belarim-rose: #a3435a;
  --belarim-rose-deep: #6f2637;
  --belarim-ink: #241611;
  --belarim-muted: #6a5142;
  --belarim-line: rgba(36, 22, 17, 0.14);
  --belarim-scrim: rgba(20, 12, 8, 0.66);
  --belarim-radius: 22px;
  --belarim-radius-sm: 12px;
  --belarim-shadow: 0 24px 60px -30px rgba(36, 22, 17, 0.5);
  --belarim-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --belarim-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --belarim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--belarim-font-body);
  color: var(--belarim-ink);
  background-color: var(--belarim-ivory);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--belarim-font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--belarim-rose-deep);
  text-decoration: none;
  transition: color 0.22s var(--belarim-ease);
}

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

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

.site-shell {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.surface-dark {
  background-color: var(--belarim-espresso);
  color: var(--belarim-cream);
}

.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4 {
  color: var(--belarim-ivory);
}

.surface-cream {
  background-color: var(--belarim-cream);
  color: var(--belarim-ink);
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88vh;
  padding-block: clamp(4rem, 10vw, 8rem);
  background-size: cover;
  background-position: center;
  background-color: var(--belarim-espresso);
  color: var(--belarim-ivory);
  overflow: hidden;
}

.hero--compressed {
  min-height: 62vh;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 9, 6, 0.45) 0%, rgba(15, 9, 6, 0.82) 100%);
  z-index: 0;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--belarim-gold-soft);
  margin-bottom: 1.4rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(228, 189, 130, 0.4);
  border-radius: 999px;
}

.hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--belarim-ivory);
  margin-bottom: 1.1rem;
}

.hero__lead {
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  max-width: 46ch;
  color: rgba(255, 250, 243, 0.88);
  margin-bottom: 1.9rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero__scribble {
  margin-top: 3rem;
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  color: rgba(255, 250, 243, 0.75);
  font-size: 0.9rem;
}

.hero__scribble strong {
  display: block;
  font-family: var(--belarim-font-serif);
  font-size: 1.8rem;
  color: var(--belarim-gold-soft);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.section-head {
  max-width: 740px;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--belarim-gold);
  margin-bottom: 0.9rem;
}

.section-head__title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-bottom: 0.8rem;
}

.section-head__lead {
  color: var(--belarim-muted);
  font-size: 1.06rem;
  max-width: 58ch;
}

.surface-dark .section-head__lead {
  color: rgba(246, 235, 217, 0.84);
}

.surface-dark .section-head__eyebrow {
  color: var(--belarim-gold-soft);
}

.band {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.band--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--reverse > :first-child {
    order: 2;
  }
}

.split__media {
  position: relative;
  border-radius: var(--belarim-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--belarim-cream), #e5c9a5);
  box-shadow: var(--belarim-shadow);
}

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

.split__badge {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  background: var(--belarim-ivory);
  color: var(--belarim-espresso);
  padding: 0.9rem 1.2rem;
  border-radius: var(--belarim-radius-sm);
  font-family: var(--belarim-font-serif);
  font-size: 1rem;
  box-shadow: 0 16px 34px -18px rgba(36, 22, 17, 0.55);
}

.flavor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

@media (min-width: 640px) {
  .flavor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .flavor-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.flavor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--belarim-radius);
  overflow: hidden;
  background-color: #fffdfa;
  border: 1px solid var(--belarim-line);
  box-shadow: var(--belarim-shadow);
  transition: transform 0.35s var(--belarim-ease), box-shadow 0.35s var(--belarim-ease);
}

.flavor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -34px rgba(36, 22, 17, 0.55);
}

.flavor-card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--belarim-cream), #e7cba7);
  overflow: hidden;
}

.flavor-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--belarim-ease);
}

.flavor-card:hover .flavor-card__media img {
  transform: scale(1.05);
}

.flavor-card__body {
  padding: 1.5rem 1.4rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.flavor-card__tag {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--belarim-rose);
}

.flavor-card__title {
  font-size: 1.4rem;
  margin: 0;
}

.flavor-card__text {
  color: var(--belarim-muted);
  font-size: 0.97rem;
  margin: 0;
}

.flavor-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--belarim-line);
}

.flavor-card__price {
  font-family: var(--belarim-font-serif);
  font-size: 1.15rem;
  color: var(--belarim-espresso);
}

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

.btn-belarim:focus-visible {
  outline: 3px solid rgba(189, 138, 68, 0.55);
  outline-offset: 3px;
}

.btn-belarim--solid {
  background-color: var(--belarim-rose-deep);
  color: #fffaf3;
}

.btn-belarim--solid:hover {
  background-color: var(--belarim-rose);
  color: #fffaf3;
  transform: translateY(-2px);
}

.btn-belarim--gold {
  background-color: var(--belarim-gold);
  color: var(--belarim-cocoa);
}

.btn-belarim--gold:hover {
  background-color: var(--belarim-gold-soft);
  color: var(--belarim-cocoa);
  transform: translateY(-2px);
}

.btn-belarim--ghost {
  background-color: transparent;
  color: var(--belarim-ivory);
  border-color: rgba(255, 250, 243, 0.55);
}

.btn-belarim--ghost:hover {
  background-color: var(--belarim-ivory);
  color: var(--belarim-cocoa);
}

.btn-belarim--outline {
  background-color: transparent;
  color: var(--belarim-espresso);
  border-color: rgba(36, 22, 17, 0.35);
}

.btn-belarim--outline:hover {
  background-color: var(--belarim-espresso);
  color: var(--belarim-ivory);
}

.btn-belarim--link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--belarim-rose-deep);
  font-weight: 600;
}

.btn-belarim--link:hover {
  color: var(--belarim-gold);
}

.btn-belarim--sm {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
}

.craft-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 720px) {
  .craft-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .craft-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.craft-step {
  position: relative;
  height: 100%;
  padding: 1.7rem 1.5rem 1.5rem;
  border-radius: var(--belarim-radius-sm);
  background-color: #fffdfa;
  border: 1px solid var(--belarim-line);
  transition: border-color 0.3s var(--belarim-ease), transform 0.3s var(--belarim-ease);
}

.craft-step:hover {
  border-color: var(--belarim-gold);
  transform: translateY(-4px);
}

.craft-step__num {
  font-family: var(--belarim-font-serif);
  font-size: 2.1rem;
  color: var(--belarim-gold);
  line-height: 1;
  margin-bottom: 0.8rem;
}

.craft-step__title {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.craft-step__text {
  font-size: 0.94rem;
  color: var(--belarim-muted);
  margin: 0;
}

.surface-dark .craft-step {
  background-color: rgba(255, 250, 243, 0.06);
  border-color: rgba(255, 250, 243, 0.14);
}

.surface-dark .craft-step__text {
  color: rgba(246, 235, 217, 0.8);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 800px) {
  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-block {
  padding: 1.2rem 0.6rem;
  text-align: center;
}

.stat-block__value {
  font-family: var(--belarim-font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--belarim-gold);
  line-height: 1;
  display: block;
}

.stat-block__label {
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--belarim-muted);
  margin-top: 0.5rem;
  display: block;
}

.surface-dark .stat-block__label {
  color: rgba(246, 235, 217, 0.78);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

@media (min-width: 820px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.7rem 1.5rem;
  border-radius: var(--belarim-radius-sm);
  background-color: #fffdfa;
  border: 1px solid var(--belarim-line);
  height: 100%;
}

.testimonial-card__stars {
  color: var(--belarim-gold);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
}

.testimonial-card__quote {
  font-family: var(--belarim-font-serif);
  font-size: 1.08rem;
  color: var(--belarim-espresso);
  margin: 0;
}

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

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--belarim-cream);
  flex: 0 0 48px;
}

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

.testimonial-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.testimonial-card__role {
  font-size: 0.82rem;
  color: var(--belarim-muted);
  margin: 0;
}

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

@media (min-width: 800px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .gallery-grid > :nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--belarim-radius-sm);
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--belarim-cream), #e7cba7);
}

.gallery-grid > :nth-child(1).gallery-tile {
  aspect-ratio: auto;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--belarim-ease);
}

.gallery-tile:hover img {
  transform: scale(1.06);
}

.gallery-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.1rem 0.9rem;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0) 0%, rgba(20, 12, 8, 0.78) 100%);
  color: var(--belarim-ivory);
  font-size: 0.9rem;
}

.faq-list {
  border-top: 1px solid var(--belarim-line);
}

.faq-item {
  border-bottom: 1px solid var(--belarim-line);
  padding: 1.3rem 0;
}

.faq-item__q {
  font-family: var(--belarim-font-serif);
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  color: var(--belarim-espresso);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.faq-item__q::before {
  content: "Q";
  font-family: var(--belarim-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--belarim-gold);
  letter-spacing: 0.1em;
}

.faq-item__a {
  margin: 0;
  color: var(--belarim-muted);
  font-size: 0.98rem;
}

.cta-band {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--belarim-cocoa);
  color: var(--belarim-ivory);
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 9, 6, 0.55), rgba(15, 9, 6, 0.85));
  z-index: 0;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

.cta-band__title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--belarim-ivory);
  margin-bottom: 0.8rem;
}

.cta-band__lead {
  max-width: 52ch;
  margin: 0 auto 1.8rem;
  color: rgba(255, 250, 243, 0.86);
}

.belarim-form {
  display: grid;
  gap: 1.1rem;
}

.belarim-form__row {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 720px) {
  .belarim-form__row--two {
    grid-template-columns: 1fr 1fr;
  }
}

.belarim-form__field {
  display: grid;
  gap: 0.4rem;
}

.belarim-form__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--belarim-espresso);
  letter-spacing: 0.02em;
}

.surface-dark .belarim-form__label {
  color: rgba(246, 235, 217, 0.9);
}

.belarim-form input,
.belarim-form textarea,
.belarim-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--belarim-line);
  background-color: #fffdfa;
  color: var(--belarim-ink);
  font-family: var(--belarim-font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s var(--belarim-ease), box-shadow 0.2s var(--belarim-ease);
}

.belarim-form textarea {
  min-height: 140px;
  resize: vertical;
}

.belarim-form input:focus,
.belarim-form textarea:focus,
.belarim-form select:focus {
  outline: none;
  border-color: var(--belarim-gold);
  box-shadow: 0 0 0 3px rgba(189, 138, 68, 0.2);
}

.belarim-form input.is-invalid,
.belarim-form textarea.is-invalid,
.belarim-form select.is-invalid {
  border-color: #b02b1f;
  box-shadow: 0 0 0 3px rgba(176, 43, 31, 0.14);
}

.belarim-form__hint {
  font-size: 0.82rem;
  color: var(--belarim-muted);
  margin: 0;
}

.surface-dark .belarim-form__hint {
  color: rgba(246, 235, 217, 0.7);
}

.belarim-form__error {
  font-size: 0.82rem;
  color: #b02b1f;
}

.belarim-form__success {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background-color: rgba(189, 138, 68, 0.12);
  border: 1px solid rgba(189, 138, 68, 0.4);
  color: var(--belarim-espresso);
  font-size: 0.92rem;
}

.checkbox-field {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--belarim-muted);
}

.checkbox-field input {
  width: auto;
  margin-top: 0.2rem;
}

.checkbox-field a {
  color: var(--belarim-rose-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-box {
  display: grid;
  gap: 1rem;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--belarim-radius);
  background: linear-gradient(150deg, #2e1c14 0%, #1d1109 100%);
  color: var(--belarim-ivory);
  border: 1px solid rgba(228, 189, 130, 0.24);
}

@media (min-width: 820px) {
  .newsletter-box {
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
  }
}

.newsletter-box__title {
  font-size: 1.5rem;
  color: var(--belarim-ivory);
  margin: 0 0 0.5rem;
}

.newsletter-box__lead {
  color: rgba(255, 250, 243, 0.8);
  margin: 0;
  font-size: 0.95rem;
}

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
  flex: 1 1 220px;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 250, 243, 0.3);
  background-color: rgba(255, 250, 243, 0.08);
  color: var(--belarim-ivory);
  font-size: 0.95rem;
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 250, 243, 0.6);
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--belarim-gold-soft);
  box-shadow: 0 0 0 3px rgba(228, 189, 130, 0.2);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pill-list li {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: rgba(189, 138, 68, 0.12);
  border: 1px solid rgba(189, 138, 68, 0.34);
  color: var(--belarim-espresso);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.surface-dark .pill-list li {
  background-color: rgba(228, 189, 130, 0.14);
  border-color: rgba(228, 189, 130, 0.34);
  color: var(--belarim-ivory);
}

.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.price-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--belarim-line);
}

.price-list__name {
  font-weight: 600;
  color: var(--belarim-espresso);
}

.price-list__note {
  display: block;
  font-weight: 400;
  color: var(--belarim-muted);
  font-size: 0.86rem;
  margin-top: 0.15rem;
}

.price-list__value {
  font-family: var(--belarim-font-serif);
  color: var(--belarim-gold);
  font-size: 1.15rem;
  white-space: nowrap;
}

.breadcrumb-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255, 250, 243, 0.7);
  margin-bottom: 1.2rem;
}

.breadcrumb-line a {
  color: rgba(255, 250, 243, 0.85);
}

.breadcrumb-line a:hover {
  color: var(--belarim-gold-soft);
}

.breadcrumb-line span[aria-current] {
  color: var(--belarim-gold-soft);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: background-color 0.3s var(--belarim-ease), box-shadow 0.3s var(--belarim-ease);
}

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

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--belarim-font-serif);
  font-size: 1.25rem;
  color: var(--belarim-ivory);
  letter-spacing: 0.01em;
}

.site-nav__links {
  display: flex;
  gap: 1.7rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  color: rgba(255, 250, 243, 0.86);
  font-size: 0.94rem;
  position: relative;
}

.site-nav__link:hover {
  color: var(--belarim-gold-soft);
}

.site-nav--solid {
  background-color: rgba(36, 22, 17, 0.94);
  box-shadow: 0 8px 30px -22px rgba(0, 0, 0, 0.6);
}

.site-nav--light {
  background-color: rgba(255, 250, 243, 0.96);
  box-shadow: 0 8px 30px -22px rgba(36, 22, 17, 0.45);
  backdrop-filter: blur(10px);
}

.site-nav--light .site-nav__brand {
  color: var(--belarim-espresso);
}

.site-nav--light .site-nav__link {
  color: var(--belarim-espresso);
}

.site-nav--light .site-nav__link:hover {
  color: var(--belarim-rose);
}

.belarim-scroll-top {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  background-color: var(--belarim-espresso);
  color: var(--belarim-gold-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s var(--belarim-ease), transform 0.3s var(--belarim-ease),
    background-color 0.3s var(--belarim-ease);
  z-index: 1040;
  cursor: pointer;
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.65);
}

.belarim-scroll-top:hover {
  background-color: var(--belarim-cocoa);
  color: var(--belarim-ivory);
}

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

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--belarim-ease), transform 0.7s var(--belarim-ease);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.belarim-cookie-panel {
  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 1080;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "crest text" "actions actions";
  gap: 1rem 1.1rem;
  width: min(420px, calc(100vw - 2rem));
  padding: 1.3rem 1.35rem 1.4rem;
  border-radius: 20px;
  background: linear-gradient(160deg, #30201a 0%, #1a0f09 100%);
  color: var(--belarim-ivory);
  border: 1px solid rgba(228, 189, 130, 0.28);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.72);
  transition: opacity 0.32s var(--belarim-ease), transform 0.32s var(--belarim-ease);
}

.belarim-cookie-panel--leaving {
  opacity: 0;
  transform: translateY(16px);
}

.belarim-cookie-panel[hidden] {
  display: none !important;
}

.belarim-cookie-panel__crest {
  grid-area: crest;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: rgba(228, 189, 130, 0.16);
  color: var(--belarim-gold-soft);
  font-size: 1.15rem;
}

.belarim-cookie-panel__text {
  grid-area: text;
}

.belarim-cookie-panel__title {
  font-family: var(--belarim-font-serif);
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  color: var(--belarim-gold-soft);
}

.belarim-cookie-panel__body {
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 250, 243, 0.86);
}

.belarim-cookie-panel__link {
  color: var(--belarim-gold-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.belarim-cookie-panel__link:hover {
  color: var(--belarim-ivory);
}

.belarim-cookie-panel__actions {
  grid-area: actions;
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.belarim-cookie-panel__btn {
  border: 0;
  padding: 0.62rem 1.3rem;
  border-radius: 999px;
  font-family: var(--belarim-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.22s var(--belarim-ease), color 0.22s var(--belarim-ease),
    transform 0.22s var(--belarim-ease), border-color 0.22s var(--belarim-ease);
}

.belarim-cookie-panel__btn:focus-visible {
  outline: 3px solid rgba(228, 189, 130, 0.6);
  outline-offset: 2px;
}

.belarim-cookie-panel__btn--ghost {
  background-color: transparent;
  color: rgba(255, 250, 243, 0.9);
  border: 1px solid rgba(255, 250, 243, 0.35);
}

.belarim-cookie-panel__btn--ghost:hover {
  background-color: rgba(255, 250, 243, 0.1);
  color: var(--belarim-ivory);
}

.belarim-cookie-panel__btn--solid {
  background-color: var(--belarim-gold);
  color: var(--belarim-cocoa);
}

.belarim-cookie-panel__btn--solid:hover {
  background-color: var(--belarim-gold-soft);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .belarim-cookie-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "crest" "text" "actions";
    gap: 0.9rem;
  }

  .belarim-cookie-panel__crest {
    width: 38px;
    height: 38px;
  }

  .belarim-cookie-panel__actions {
    justify-content: stretch;
  }

  .belarim-cookie-panel__btn {
    flex: 1;
  }
}

.card-mini {
  display: grid;
  gap: 0.5rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--belarim-radius-sm);
  background-color: #fffdfa;
  border: 1px solid var(--belarim-line);
}

.card-mini__title {
  font-size: 1rem;
  margin: 0;
}

.card-mini__value {
  color: var(--belarim-rose-deep);
  font-weight: 600;
  word-break: break-word;
}

.card-mini__value a {
  color: inherit;
}

.card-mini__value a:hover {
  color: var(--belarim-gold);
}

.text-underline-gold {
  text-decoration: underline;
  text-decoration-color: var(--belarim-gold);
  text-underline-offset: 4px;
}

.lead-serif {
  font-family: var(--belarim-font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--belarim-espresso);
  line-height: 1.4;
}

.surface-dark .lead-serif {
  color: var(--belarim-ivory);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ===== About page QA overrides ===== */

/* 1. Eyebrow + price-list labels: darker bronze for readable contrast on cream/ivory */
.section-head__eyebrow,
.price-list__value {
  color: #7f5a1e;
}

/* 2. Flavor card media: keep the badge out of the image flow so it cannot clip */
.flavor-card__media {
  position: relative;
}

.flavor-card__media .flavor-card__tag {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: rgba(255, 250, 243, 0.95);
  color: var(--belarim-rose-deep);
  line-height: 1.3;
  box-shadow: 0 10px 22px -14px rgba(36, 22, 17, 0.6);
}

/* 3. Outline buttons sitting on dark surfaces need light text */
.hero .btn-belarim--outline,
.surface-dark .btn-belarim--outline,
.cta-band .btn-belarim--outline {
  color: var(--belarim-ivory);
  border-color: rgba(255, 250, 243, 0.55);
  background-color: rgba(20, 12, 8, 0.35);
}

.hero .btn-belarim--outline:hover,
.surface-dark .btn-belarim--outline:hover,
.cta-band .btn-belarim--outline:hover {
  background-color: var(--belarim-ivory);
  color: var(--belarim-cocoa);
  border-color: var(--belarim-ivory);
}

/* 4. Footer / dark surface text links need light colour */
.surface-dark .btn-belarim--link,
footer .btn-belarim--link {
  color: var(--belarim-gold-soft);
}

.surface-dark .btn-belarim--link:hover,
footer .btn-belarim--link:hover,
.surface-dark .btn-belarim--link:focus-visible,
footer .btn-belarim--link:focus-visible {
  color: var(--belarim-ivory);
}

/* 5. Gallery captions on narrow screens: solid scrim + clamped copy so the
      caption never spills past the tile onto the page background */
@media (max-width: 799px) {
  .gallery-tile {
    aspect-ratio: 3 / 4;
  }

  .gallery-tile__caption {
    padding: 0.75rem 0.8rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--belarim-ivory);
    background: rgba(20, 12, 8, 0.85);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }
}

/* ============================================================
   QA FIXES — card media clipping + text contrast
   (appended overrides, nothing above is modified)
   ============================================================ */

/* --- Card media: keep the image inside the 4/3 frame and put the
       tag label as an overlay so it can no longer overflow the card --- */
.flavor-card__media {
  position: relative;
}

.flavor-card__media > a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.flavor-card__media img {
  display: block;
}

.flavor-card__media .flavor-card__tag {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background-color: var(--belarim-ivory);
  color: var(--belarim-rose-deep);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px -16px rgba(36, 22, 17, 0.7);
}

/* --- Header: opaque bar and fully opaque text for contrast --- */
.site-nav.site-nav--solid {
  background-color: #241611;
}

.site-nav .site-nav__brand,
.site-nav .site-nav__brand span {
  color: #fffaf3;
}

.site-nav .site-nav__link,
.site-nav .nav-link,
.site-nav .dropdown-toggle {
  color: #fffaf3;
}

.site-nav .site-nav__link:hover,
.site-nav .site-nav__link:focus-visible,
.site-nav .nav-link:hover,
.site-nav .dropdown-toggle:hover {
  color: #e4bd82;
}

.site-nav .navbar-toggler {
  color: #fffaf3;
  border-color: rgba(255, 250, 243, 0.45);
}

.site-nav .small,
.site-nav .small span,
.site-nav .small a,
.site-nav a[href^="mailto:"] {
  color: #f6ebd9;
}

.site-nav .text-underline-gold {
  color: #e4bd82;
}

/* --- Small gold labels on light surfaces: darker gold for readability --- */
.section-head__eyebrow {
  color: #7a4f16;
}

.price-list__value {
  color: #7a4f16;
}

/* --- Footer / dark surfaces: readable link and outline-button colours --- */
.surface-dark li a:not(.btn),
.surface-dark p a:not(.btn) {
  color: #f0d9b5;
}

.surface-dark li a:not(.btn):hover,
.surface-dark li a:not(.btn):focus-visible,
.surface-dark p a:not(.btn):hover,
.surface-dark p a:not(.btn):focus-visible {
  color: #ffdca8;
}

.surface-dark .btn-belarim--outline {
  color: var(--belarim-ivory);
  border-color: rgba(255, 250, 243, 0.55);
}

.surface-dark .btn-belarim--outline:hover,
.surface-dark .btn-belarim--outline:focus-visible {
  background-color: var(--belarim-ivory);
  color: var(--belarim-espresso);
}

/* --- Outline buttons sitting on photographic/dark backgrounds --- */
.hero .btn-belarim--outline {
  color: var(--belarim-ivory);
  border-color: rgba(255, 250, 243, 0.62);
}

.hero .btn-belarim--outline:hover,
.hero .btn-belarim--outline:focus-visible {
  background-color: var(--belarim-ivory);
  color: var(--belarim-cocoa);
}

/* --- Gallery captions: solid dark base under the gradient so the text
       keeps its contrast even when the photo is slow or unavailable --- */
.gallery-tile__caption {
  background-color: rgba(20, 12, 8, 0.82);
}

/* ============================================================
   Cookie Policy page QA overrides — breadcrumb contrast on
   light (cream/ivory) surfaces
   ============================================================ */
.surface-cream .breadcrumb-line,
.surface-cream .breadcrumb-line span,
.band.surface-cream .breadcrumb-line {
  color: #4a3327;
}

.surface-cream .breadcrumb-line a {
  color: #6f2637;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.surface-cream .breadcrumb-line a:hover,
.surface-cream .breadcrumb-line a:focus-visible {
  color: #7a4f16;
}

.surface-cream .breadcrumb-line span[aria-current] {
  color: #4a3327;
}

/* ============================================================
   QA FIXES — contrast on dark surfaces and light sticky header
   (appended overrides; nothing above is modified)
   ============================================================ */

/* --- Price note sitting inside the dark pricing band --- */
.surface-dark .price-list__note,
.surface-dark p.price-list__note,
.surface-dark .price-list__note.mt-4 {
  color: rgba(246, 235, 217, 0.88);
}

/* --- Sticky header in its light state: dark text on the pale bar.
       These selectors out-specify the earlier forced ivory colours. --- */
.site-nav.site-nav--light .site-nav__brand,
.site-nav.site-nav--light .site-nav__brand span,
.site-nav.site-nav--light .navbar-brand {
  color: #241611;
}

.site-nav.site-nav--light .site-nav__link,
.site-nav.site-nav--light .nav-link,
.site-nav.site-nav--light .dropdown-toggle {
  color: #2b1a12;
}

.site-nav.site-nav--light .site-nav__link:hover,
.site-nav.site-nav--light .site-nav__link:focus-visible,
.site-nav.site-nav--light .nav-link:hover,
.site-nav.site-nav--light .dropdown-toggle:hover {
  color: #7a4f16;
}

.site-nav.site-nav--light .small,
.site-nav.site-nav--light .small span,
.site-nav.site-nav--light .small a,
.site-nav.site-nav--light a[href^="mailto:"] {
  color: #3a241a;
}

.site-nav.site-nav--light .text-underline-gold {
  color: #7a4f16;
}

.site-nav.site-nav--light .navbar-toggler {
  color: #241611;
  border-color: rgba(36, 22, 17, 0.45);
}

/* --- Same treatment for the pale footer logo lockup on dark surface --- */
footer.surface-dark .site-nav__brand,
footer.surface-dark .site-nav__brand span {
  color: var(--belarim-ivory);
}

/* ============================================================
   HOMEPAGE QA FIXES — appended overrides only (no earlier rule
   is removed or altered)
   ============================================================ */

/* --- 1. Sticky header in its light state: the earlier override forced
       ivory text on the ivory bar, so give the light variant its own
       dark, readable palette. --- */
.site-nav.site-nav--light {
  background-color: #fffaf3;
  box-shadow: 0 8px 30px -22px rgba(36, 22, 17, 0.45);
}

.site-nav.site-nav--light .site-nav__brand,
.site-nav.site-nav--light .site-nav__brand span {
  color: #241611;
}

.site-nav.site-nav--light .site-nav__link,
.site-nav.site-nav--light .nav-link,
.site-nav.site-nav--light .dropdown-toggle,
.site-nav.site-nav--light button.site-nav__link {
  color: #241611;
}

.site-nav.site-nav--light .site-nav__link:hover,
.site-nav.site-nav--light .site-nav__link:focus-visible,
.site-nav.site-nav--light .nav-link:hover,
.site-nav.site-nav--light .dropdown-toggle:hover {
  color: #6f2637;
}

.site-nav.site-nav--light .small,
.site-nav.site-nav--light .small span,
.site-nav.site-nav--light .small a,
.site-nav.site-nav--light a[href^="mailto:"] {
  color: #3a241a;
}

.site-nav.site-nav--light .text-underline-gold {
  color: #6f4812;
  text-decoration-color: #bd8a44;
}

.site-nav.site-nav--light .navbar-toggler {
  color: #241611;
  border-color: rgba(36, 22, 17, 0.35);
}

.site-nav.site-nav--light .btn-belarim--ghost {
  color: #241611;
  border-color: rgba(36, 22, 17, 0.4);
}

.site-nav.site-nav--light .btn-belarim--ghost:hover,
.site-nav.site-nav--light .btn-belarim--ghost:focus-visible {
  background-color: #241611;
  color: #fffaf3;
  border-color: #241611;
}

/* --- 2. Testimonial band sits on a photographic background: keep every
       piece of copy light so it stays legible over the dark scrim. --- */
.band.surface-dark .section-head__eyebrow {
  color: #e4bd82;
}

.band.surface-dark .section-head__title,
.band.surface-dark .section-head__lead {
  color: #f6ebd9;
}

/* --- 3. Form copy sitting on dark surfaces (enquiry form + newsletter) --- */
.cta-band .belarim-form label,
.cta-band .belarim-form label span,
.surface-dark .belarim-form label,
.surface-dark .belarim-form label span {
  color: #f6ebd9;
}

.cta-band .belarim-form__hint,
.surface-dark .belarim-form__hint {
  color: rgba(246, 235, 217, 0.88);
}

.cta-band .belarim-form a:not(.btn),
.surface-dark .belarim-form a:not(.btn),
.newsletter-box .belarim-form a:not(.btn) {
  color: #f0d9b5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cta-band .belarim-form a:not(.btn):hover,
.surface-dark .belarim-form a:not(.btn):hover,
.newsletter-box .belarim-form a:not(.btn):hover,
.cta-band .belarim-form a:not(.btn):focus-visible,
.surface-dark .belarim-form a:not(.btn):focus-visible,
.newsletter-box .belarim-form a:not(.btn):focus-visible {
  color: #ffdca8;
}

.newsletter-box .belarim-form__label {
  color: #f6ebd9;
}

.newsletter-box .belarim-form__hint {
  color: rgba(246, 235, 217, 0.88);
}

.newsletter-box .belarim-form input[type="email"] {
  color: #fffaf3;
}

/* --- 4. Cookie panel: solid, high-contrast buttons that read clearly
       against both the dark panel and the dark footer behind it. --- */
.belarim-cookie-panel__btn--solid {
  background-color: #e4bd82;
  color: #241611;
}

.belarim-cookie-panel__btn--solid:hover,
.belarim-cookie-panel__btn--solid:focus-visible {
  background-color: #f3d9ac;
  color: #241611;
}

.belarim-cookie-panel__btn--ghost {
  color: #fffaf3;
  border-color: rgba(255, 250, 243, 0.6);
}

/* ============================================================
   HERO MOBILE QA FIX — the hero heading was clipped vertically
   and hidden behind the fixed cookie panel on narrow screens.
   The hero uses `align-items: center` with `overflow: hidden`, so
   once the content grew taller than the 88vh min-height the top of
   the h1 was cropped. Align the content to the start on small
   screens, let the section grow with its content, and add bottom
   breathing room vnot covered by the fixed cookie panel.
   ============================================================ */

.hero > .container.site-shell {
  position: relative;
  z-index: 1;
}

/* Keep the hero content out of the sticky header's measured height
   and stop the centred flex line from cropping tall content. */
.hero {
  align-items: flex-start;
  min-height: 0;
  overflow: visible;
}

.hero__inner {
  max-width: 820px;
}

.hero__title {
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 767.98px) {
  /* Room for the sticky header plus the fixed cookie panel so the
     headline and its last line stay visible inside the hero. */
  .hero {
    padding-block: 2.25rem 16rem;
  }

  .hero__title {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
    line-height: 1.16;
  }

  .hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }
}

/* ============================================================
   HOMEPAGE CAROUSEL FIX — section 2 "A close look at what
   leaves our kitchen". Bootstrap's .carousel-item keeps its
   images out of normal flow during the slide transition, so the
   rotating images were absolutely positioned and the visible
   slide's photo was cropped to a square frame, leaving a large
   empty cream gap under it. Layout the slides statically, keep the
   photo uncropped and keep the caption inside the frame.
   ============================================================ */

.band--bench .bench-carousel {
  position: relative;
}

.band--bench .bench-carousel .carousel-inner {
  overflow: visible;
}

.band--bench .bench-carousel .carousel-inner,
.band--bench .bench-carousel .carousel-item {
  width: 100%;
}

/* Featured photo: natural, uncropped image and no square crop */
.band--bench .gallery-tile {
  aspect-ratio: auto;
  height: auto;
  border-radius: var(--belarim-radius);
  background: #fffdfa;
  border: 1px solid var(--belarim-line);
  box-shadow: var(--belarim-shadow);
}

.band--bench .gallery-tile img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  object-position: center;
  background-color: #fffdfa;
}

/* Caption stays inside the frame instead of on top of the cover crop */
.band--bench .gallery-tile__caption {
  position: static;
  inset: auto;
  background: #fffdfa;
  color: var(--belarim-espresso);
  border-top: 1px solid var(--belarim-line);
  padding: 1rem 1.2rem 1.1rem;
  font-size: 0.95rem;
}

.band--bench .gallery-tile:hover img {
  transform: none;
}

/* Controls sit over the photo, vertically centred against the tall image */
.band--bench .carousel-control-prev,
.band--bench .carousel-control-next {
  width: 3rem;
  opacity: 0.9;
}

@media (max-width: 799px) {
  .band--bench .gallery-tile {
    aspect-ratio: auto;
  }

  .band--bench .gallery-tile img {
    max-height: none;
  }

  .band--bench .gallery-tile__caption {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
}

/* ============================================================
   Testimonial card text contrast fix
   The testimonial band is a dark surface whose light colour
   inheritance (.surface-dark) was leaking into the pale card:
   the name picked up the cream inherited colour on a #fffdfa
   card (ratio ~1.16). Keep the card's own dark palette.
   ============================================================ */
.testimonial-card {
  color: var(--belarim-ink);
}

.testimonial-card .testimonial-card__name {
  color: var(--belarim-cocoa);
}

.testimonial-card .testimonial-card__role {
  color: var(--belarim-muted);
}

.testimonial-card .testimonial-card__quote {
  color: var(--belarim-espresso);
}