:root {
  --vrem-deep: #17211c;
  --vrem-deep-2: #1e2a23;
  --vrem-deep-3: #2a362f;
  --vrem-paper: #f6f0e4;
  --vrem-paper-2: #ece3d2;
  --vrem-paper-3: #e1d5bd;
  --vrem-card: #fffaf1;
  --vrem-ink: #1e231f;
  --vrem-ink-soft: #495047;
  --vrem-ink-mute: #6b7268;
  --vrem-gold: #c6a24d;
  --vrem-gold-ink: #7d5a12;
  --vrem-gold-bright: #e2c382;
  --vrem-rust: #a85338;
  --vrem-forest: #2f4a3a;
  --vrem-line: rgba(23, 33, 28, 0.12);
  --vrem-line-dark: rgba(246, 240, 228, 0.16);
  --vrem-shadow-sm: 0 6px 18px rgba(23, 33, 28, 0.07);
  --vrem-shadow-md: 0 18px 45px rgba(23, 33, 28, 0.13);
  --vrem-shadow-lg: 0 30px 70px rgba(23, 33, 28, 0.2);
  --vrem-radius: 14px;
  --vrem-radius-lg: 26px;
  --vrem-font-display: Georgia, "Times New Roman", serif;
  --vrem-font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --vrem-container: 1180px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--vrem-font-body);
  color: var(--vrem-ink);
  background-color: var(--vrem-paper);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vrem-font-display);
  color: var(--vrem-ink);
  letter-spacing: -0.012em;
  line-height: 1.15;
  font-weight: 700;
  margin-top: 0;
}

h1 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
h4 { font-size: 1.22rem; }
h5 { font-size: 1.03rem; }

p { color: var(--vrem-ink-soft); margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--vrem-gold-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover { color: var(--vrem-ink); }

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

.vrem-container {
  width: 100%;
  max-width: var(--vrem-container);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.vrem-section {
  padding: clamp(3.25rem, 6.5vw, 6.5rem) 0;
  position: relative;
}

.vrem-section--cream { background: var(--vrem-paper); }
.vrem-section--paper { background: var(--vrem-paper-2); }
.vrem-section--deep { background: var(--vrem-deep); color: var(--vrem-paper); }
.vrem-section--deep h1,
.vrem-section--deep h2,
.vrem-section--deep h3,
.vrem-section--deep h4,
.vrem-section--deep h5 { color: var(--vrem-paper); }
.vrem-section--deep p { color: rgba(246, 240, 228, 0.82); }
.vrem-section--deep a { color: var(--vrem-gold-bright); }
.vrem-section--deep a:hover { color: var(--vrem-paper); }

.vrem-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--vrem-gold-ink);
  margin-bottom: 1rem;
}

.vrem-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.vrem-section--deep .vrem-eyebrow { color: var(--vrem-gold-bright); }

.vrem-lead {
  font-size: 1.1rem;
  color: var(--vrem-ink-soft);
  line-height: 1.7;
}

.vrem-section--deep .vrem-lead { color: rgba(246, 240, 228, 0.86); }

.vrem-rule {
  height: 1px;
  background: var(--vrem-line);
  border: none;
  margin: 2rem 0;
}

.vrem-section--deep .vrem-rule { background: var(--vrem-line-dark); }

.vrem-section-head {
  max-width: 700px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

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

.vrem-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.015em;
  padding: 0.88rem 1.7rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  line-height: 1.1;
}

.vrem-btn:hover { transform: translateY(-2px); }
.vrem-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(198, 162, 77, 0.35); }

.vrem-btn--primary {
  background: var(--vrem-ink);
  color: var(--vrem-paper);
}
.vrem-btn--primary:hover { background: var(--vrem-forest); color: var(--vrem-paper); }

.vrem-btn--gold {
  background: var(--vrem-gold);
  color: var(--vrem-ink);
  box-shadow: inset 0 0 0 1.5px rgba(23, 33, 28, 0.12);
}
.vrem-btn--gold:hover { background: var(--vrem-gold-bright); color: var(--vrem-ink); }

.vrem-btn--ghost {
  background: transparent;
  color: var(--vrem-ink);
  border-color: rgba(23, 33, 28, 0.3);
}
.vrem-btn--ghost:hover { background: var(--vrem-ink); color: var(--vrem-paper); }

.vrem-section--deep .vrem-btn--ghost {
  color: var(--vrem-paper);
  border-color: rgba(246, 240, 228, 0.42);
}
.vrem-section--deep .vrem-btn--ghost:hover {
  background: var(--vrem-paper);
  color: var(--vrem-ink);
}

.vrem-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: rgba(198, 162, 77, 0.16);
  color: var(--vrem-gold-ink);
}

.vrem-tag--deep {
  background: rgba(226, 195, 130, 0.18);
  color: var(--vrem-gold-bright);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(246, 240, 228, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vrem-line);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(246, 240, 228, 0.97);
  box-shadow: 0 8px 26px rgba(23, 33, 28, 0.09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--vrem-font-display);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--vrem-ink);
  letter-spacing: -0.01em;
}

.site-brand img {
  border-radius: 6px;
  display: block;
}

.site-brand__mark {
  display: inline-block;
  padding: 0.15rem 0.35rem;
  color: var(--vrem-gold-ink);
}

.site-nav .nav-link {
  color: var(--vrem-ink);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active {
  color: var(--vrem-gold-ink);
  background: rgba(198, 162, 77, 0.12);
}

.vrem-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.84rem;
  color: var(--vrem-ink-soft);
  text-decoration: none;
}

.vrem-contact-chip i { color: var(--vrem-gold-ink); font-size: 0.82rem; }
.vrem-contact-chip:hover { color: var(--vrem-ink); }

.site-header .navbar-toggler {
  border: 1.5px solid var(--vrem-line);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  color: var(--vrem-ink);
  font-size: 1.1rem;
}
.site-header .navbar-toggler:focus { box-shadow: 0 0 0 4px rgba(198, 162, 77, 0.24); }

.vrem-hero {
  position: relative;
  min-height: clamp(560px, 88vh, 860px);
  display: flex;
  align-items: center;
  color: var(--vrem-paper);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.vrem-hero__inner {
  position: relative;
  z-index: 2;
  padding: 5.5rem 0;
}

.vrem-hero h1,
.vrem-hero p,
.vrem-hero .vrem-lead {
  color: var(--vrem-paper);
}

.vrem-hero h1 {
  font-size: clamp(2.1rem, 4.8vw, 4.2rem);
  letter-spacing: -0.018em;
}

.vrem-hero .vrem-eyebrow { color: var(--vrem-gold-bright); }

.vrem-hero .vrem-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(246, 240, 228, 0.88);
  max-width: 46ch;
}

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

.vrem-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246, 240, 228, 0.24);
}

.vrem-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vrem-hero__meta-item strong {
  font-family: var(--vrem-font-display);
  font-size: 1.5rem;
  color: var(--vrem-gold-bright);
  font-weight: 700;
}

.vrem-hero__meta-item span {
  font-size: 0.82rem;
  color: rgba(246, 240, 228, 0.72);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vrem-marquee {
  background: var(--vrem-gold);
  color: var(--vrem-ink);
  overflow: hidden;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(23, 33, 28, 0.08);
  border-bottom: 1px solid rgba(23, 33, 28, 0.08);
}

.vrem-marquee__track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  font-family: var(--vrem-font-display);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  animation: vrem-scroll 36s linear infinite;
}

.vrem-marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.vrem-marquee__track span::after {
  content: "\2726";
  font-size: 0.72rem;
  color: rgba(23, 33, 28, 0.55);
}

@keyframes vrem-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .vrem-marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

.vrem-card {
  background: var(--vrem-card);
  border: 1px solid var(--vrem-line);
  border-radius: var(--vrem-radius-lg);
  padding: 2rem;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vrem-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vrem-shadow-md);
  border-color: rgba(198, 162, 77, 0.4);
}

.vrem-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(198, 162, 77, 0.16);
  color: var(--vrem-gold-ink);
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
}

.vrem-feature {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.vrem-feature__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--vrem-paper-2);
  color: var(--vrem-gold-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

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

.vrem-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vrem-shadow-md);
}

.vrem-service-card__media {
  aspect-ratio: 4 / 3;
  background: var(--vrem-paper-2);
  overflow: hidden;
}

.vrem-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}

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

.vrem-service-card__body {
  padding: 1.6rem 1.6rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.vrem-service-card__body h3 { margin-bottom: 0.15rem; }

.vrem-service-card__link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--vrem-gold-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.vrem-service-card__link i { transition: transform 0.2s ease; }
.vrem-service-card:hover .vrem-service-card__link i { transform: translateX(4px); }

.vrem-stat {
  text-align: center;
  padding: 1.4rem 0.75rem;
}

.vrem-stat__num {
  font-family: var(--vrem-font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  color: var(--vrem-gold-ink);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.vrem-section--deep .vrem-stat__num { color: var(--vrem-gold-bright); }

.vrem-stat__label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vrem-ink-mute);
}

.vrem-section--deep .vrem-stat__label { color: rgba(246, 240, 228, 0.72); }

.vrem-quote {
  position: relative;
  background: var(--vrem-card);
  border: 1px solid var(--vrem-line);
  border-radius: var(--vrem-radius-lg);
  padding: 2.4rem 2rem 2rem;
  height: 100%;
}

.vrem-quote__mark {
  font-family: var(--vrem-font-display);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--vrem-gold);
  display: block;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.vrem-quote__text {
  font-family: var(--vrem-font-display);
  font-size: 1.1rem;
  color: var(--vrem-ink);
  line-height: 1.55;
  margin-bottom: 1.4rem;
}

.vrem-quote__author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--vrem-line);
}

.vrem-quote__author img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vrem-paper-2);
}

.vrem-quote__name {
  font-weight: 600;
  color: var(--vrem-ink);
  font-size: 0.94rem;
  display: block;
}

.vrem-quote__role {
  font-size: 0.82rem;
  color: var(--vrem-ink-mute);
  display: block;
}

.vrem-step {
  display: flex;
  gap: 1.1rem;
  padding: 1.5rem;
  background: var(--vrem-card);
  border: 1px solid var(--vrem-line);
  border-radius: var(--vrem-radius);
  height: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.vrem-step:hover {
  border-color: rgba(198, 162, 77, 0.45);
  box-shadow: var(--vrem-shadow-sm);
}

.vrem-step__num {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--vrem-ink);
  color: var(--vrem-gold-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vrem-font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

.vrem-step h4 { margin-bottom: 0.3rem; font-size: 1.05rem; }
.vrem-step p { font-size: 0.94rem; margin: 0; }

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

.vrem-gallery__item {
  aspect-ratio: 4 / 3;
  border-radius: var(--vrem-radius);
  overflow: hidden;
  background: var(--vrem-paper-2);
  position: relative;
}

.vrem-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}

.vrem-gallery__item:hover img { transform: scale(1.06); }

.vrem-gallery__cap {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  background: rgba(23, 33, 28, 0.78);
  color: var(--vrem-paper);
  font-size: 0.78rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

@media (max-width: 767.98px) {
  .vrem-gallery { grid-template-columns: repeat(2, 1fr); }
}

.vrem-faq .accordion-item {
  background: var(--vrem-card);
  border: 1px solid var(--vrem-line);
  border-radius: var(--vrem-radius) !important;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.vrem-faq .accordion-button {
  background: var(--vrem-card);
  color: var(--vrem-ink);
  font-family: var(--vrem-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 1.15rem 1.35rem;
}

.vrem-faq .accordion-button:not(.collapsed) {
  background: var(--vrem-paper-2);
  color: var(--vrem-ink);
  box-shadow: none;
}

.vrem-faq .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(198, 162, 77, 0.2);
}

.vrem-faq .accordion-button::after {
  background-size: 0.9rem;
  filter: saturate(0);
}

.vrem-faq .accordion-body {
  color: var(--vrem-ink-soft);
  padding: 0.4rem 1.35rem 1.2rem;
  font-size: 0.96rem;
}

.vrem-field { margin-bottom: 1.1rem; }

.vrem-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vrem-ink-soft);
  margin-bottom: 0.45rem;
}

.vrem-field .form-control,
.vrem-field .form-select,
.vrem-field textarea {
  border-radius: 12px;
  border: 1.5px solid var(--vrem-line);
  background: var(--vrem-card);
  padding: 0.82rem 1rem;
  color: var(--vrem-ink);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vrem-field .form-control::placeholder,
.vrem-field textarea::placeholder { color: #8b9088; }

.vrem-field .form-control:focus,
.vrem-field .form-select:focus,
.vrem-field textarea:focus {
  border-color: var(--vrem-gold);
  box-shadow: 0 0 0 4px rgba(198, 162, 77, 0.16);
  background: #fffdf6;
}

.vrem-field .form-control.is-invalid,
.vrem-field .form-select.is-invalid,
.vrem-field textarea.is-invalid {
  border-color: var(--vrem-rust);
}

.vrem-form-note {
  font-size: 0.82rem;
  color: var(--vrem-ink-mute);
  margin-top: 0.9rem;
}

.vrem-info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.3rem 1.4rem;
  background: var(--vrem-card);
  border: 1px solid var(--vrem-line);
  border-radius: var(--vrem-radius);
  height: 100%;
}

.vrem-info-card__icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--vrem-paper-2);
  color: var(--vrem-gold-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.vrem-info-card h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.vrem-info-card p,
.vrem-info-card a { font-size: 0.92rem; margin: 0; color: var(--vrem-ink-soft); }
.vrem-info-card a:hover { color: var(--vrem-gold-ink); }

.vrem-cta-band {
  background: var(--vrem-gold);
  color: var(--vrem-ink);
  border-radius: var(--vrem-radius-lg);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.vrem-cta-band h2 { color: var(--vrem-ink); margin-bottom: 0.4rem; }
.vrem-cta-band p { color: rgba(23, 33, 28, 0.78); margin: 0; }

.vrem-map {
  border-radius: var(--vrem-radius-lg);
  overflow: hidden;
  border: 1px solid var(--vrem-line);
  background: var(--vrem-paper-2);
  min-height: 340px;
}

.vrem-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}

.vrem-team {
  text-align: center;
}

.vrem-team img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
  background: var(--vrem-paper-2);
  border: 4px solid var(--vrem-card);
  box-shadow: var(--vrem-shadow-sm);
}

.vrem-team h4 { margin-bottom: 0.15rem; font-size: 1.05rem; }
.vrem-team span { font-size: 0.85rem; color: var(--vrem-gold-ink); font-weight: 600; letter-spacing: 0.04em; }
.vrem-team p { font-size: 0.9rem; margin-top: 0.7rem; color: var(--vrem-ink-mute); }

.vrem-timeline {
  position: relative;
  padding-left: 2rem;
}

.vrem-timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  background: rgba(198, 162, 77, 0.4);
}

.vrem-timeline__item {
  position: relative;
  padding-bottom: 1.8rem;
}

.vrem-timeline__item::before {
  content: "";
  position: absolute;
  left: -1.63rem;
  top: 0.4rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vrem-gold);
  box-shadow: 0 0 0 4px rgba(198, 162, 77, 0.2);
}

.vrem-timeline__item h4 { margin-bottom: 0.2rem; font-size: 1.02rem; }
.vrem-timeline__item span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vrem-gold-ink); }

.site-footer {
  background: var(--vrem-deep);
  color: rgba(246, 240, 228, 0.82);
  padding: 4rem 0 2rem;
}

.site-footer h5 {
  color: var(--vrem-paper);
  font-family: var(--vrem-font-display);
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.site-footer a {
  color: rgba(246, 240, 228, 0.75);
  font-size: 0.9rem;
  text-decoration: none;
}

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

.site-footer p,
.site-footer li { color: rgba(246, 240, 228, 0.72); font-size: 0.9rem; }

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 0.5rem; }

.site-footer .vrem-footer-line {
  border-top: 1px solid var(--vrem-line-dark);
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  font-size: 0.82rem;
  color: rgba(246, 240, 228, 0.6);
}

.site-footer .vrem-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--vrem-font-display);
  font-size: 1.25rem;
  color: var(--vrem-paper);
  font-weight: 700;
}

.vrem-legal-link {
  display: block;
  font-size: 0.86rem;
  margin-bottom: 0.5rem;
}

.vrem-top {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vrem-ink);
  color: var(--vrem-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  cursor: pointer;
  border: none;
}

.vrem-top:hover { background: var(--vrem-forest); color: var(--vrem-paper); }

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

.vrem-cookie-slab {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1090;
  width: min(430px, calc(100vw - 2rem));
  background: linear-gradient(155deg, #223027 0%, #17211c 100%);
  color: var(--vrem-paper);
  border-radius: 22px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 30px 60px rgba(23, 33, 28, 0.45);
  border: 1px solid rgba(226, 195, 130, 0.28);
  animation: vrem-cookie-in 0.5s ease both;
}

@keyframes vrem-cookie-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .vrem-cookie-slab { animation: none; }
}

.vrem-cookie-slab.is-hidden { display: none; }

.vrem-cookie-slab__inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.vrem-cookie-slab__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.vrem-cookie-slab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(226, 195, 130, 0.18);
  color: var(--vrem-gold-bright);
  font-size: 1.08rem;
  flex-shrink: 0;
}

.vrem-cookie-slab__title {
  font-family: var(--vrem-font-display);
  font-size: 1.08rem;
  color: var(--vrem-paper);
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

.vrem-cookie-slab__text {
  font-size: 0.86rem;
  color: rgba(246, 240, 228, 0.8);
  margin: 0;
  line-height: 1.55;
}

.vrem-cookie-slab__text a {
  color: var(--vrem-gold-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vrem-cookie-slab__text a:hover { color: var(--vrem-paper); }

.vrem-cookie-slab__actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0.2rem;
}

.vrem-cookie-slab__btn {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.58rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-family: var(--vrem-font-body);
}

.vrem-cookie-slab__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(226, 195, 130, 0.4);
}

.vrem-cookie-slab__btn--ghost {
  background: transparent;
  color: var(--vrem-paper);
  border-color: rgba(246, 240, 228, 0.4);
}

.vrem-cookie-slab__btn--ghost:hover {
  background: rgba(246, 240, 228, 0.14);
  color: var(--vrem-paper);
}

.vrem-cookie-slab__btn--accept {
  background: var(--vrem-gold-bright);
  color: var(--vrem-ink);
}

.vrem-cookie-slab__btn--accept:hover {
  background: #f0d597;
  color: var(--vrem-ink);
}

@media (max-width: 575.98px) {
  .vrem-cookie-slab {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    padding: 1.2rem 1.1rem 1.05rem;
  }
  .vrem-cookie-slab__actions { justify-content: stretch; }
  .vrem-cookie-slab__btn { flex: 1 1 0; text-align: center; }
}

.vrem-form-panel {
  background: var(--vrem-card);
  border: 1px solid var(--vrem-line);
  border-radius: var(--vrem-radius-lg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

.vrem-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.vrem-badge-list li {
  font-size: 0.82rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--vrem-paper-2);
  color: var(--vrem-ink-soft);
  border: 1px solid var(--vrem-line);
}

.vrem-section--deep .vrem-badge-list li {
  background: rgba(246, 240, 228, 0.08);
  color: rgba(246, 240, 228, 0.86);
  border-color: var(--vrem-line-dark);
}

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

@media (max-width: 991.98px) {
  .vrem-split { grid-template-columns: 1fr; }
  .site-header__inner { min-height: 68px; }
  .vrem-hero { min-height: auto; }
  .vrem-hero__inner { padding: 4rem 0; }
}

.vrem-aside-note {
  border-left: 3px solid var(--vrem-gold);
  padding: 0.3rem 0 0.3rem 1.1rem;
  font-size: 0.95rem;
  color: var(--vrem-ink-soft);
  font-style: italic;
}

.vrem-section--deep .vrem-aside-note {
  color: rgba(246, 240, 228, 0.82);
  border-left-color: var(--vrem-gold-bright);
}

.vrem-legal-content {
  max-width: 820px;
  margin: 0 auto;
}

.vrem-legal-content h2 { margin-top: 2.4rem; font-size: 1.55rem; }
.vrem-legal-content h3 { margin-top: 1.6rem; font-size: 1.18rem; }
.vrem-legal-content p,
.vrem-legal-content li { color: var(--vrem-ink-soft); font-size: 0.97rem; }
.vrem-legal-content ul { padding-left: 1.2rem; }
.vrem-legal-content ul li { margin-bottom: 0.45rem; }

@media (max-width: 575.98px) {
  .vrem-section { padding: 3rem 0; }
  .vrem-card { padding: 1.5rem; }
  .vrem-quote { padding: 1.8rem 1.4rem 1.5rem; }
}
/* ------------------------------------------------------------------
   Accessibility / contrast overrides
   ------------------------------------------------------------------ */

/* Hero: guarantee a dark backdrop so the light hero text stays readable
   even when no hero photo is set for the page. Inline/module background
   images (if any) still paint on top of this fallback. */
.vrem-hero {
  background-color: #17211c;
  background-image: linear-gradient(140deg, #17211c 0%, #1e2a23 55%, #2a362f 100%);
}

.vrem-hero .vrem-hero__meta-item span {
  color: rgba(246, 240, 228, 0.85);
}

/* Deep tag chip: dark pill + light gold text works on both light cards
   and dark sections instead of light-on-light gold. */
.vrem-tag--deep {
  background: #17211c;
  color: #e9d3a2;
  border: 1px solid rgba(226, 195, 130, 0.45);
}

/* Gold CTA band: use dark ink for links, eyebrows and body copy so they
   stay readable on the gold background. */
.vrem-cta-band .vrem-eyebrow {
  color: #17211c;
}

.vrem-cta-band p {
  color: rgba(23, 33, 28, 0.95);
}

.vrem-cta-band a {
  color: #14201a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vrem-cta-band a:hover {
  color: #000;
}

.vrem-cta-band a.vrem-btn {
  text-decoration: none;
}

.vrem-cta-band .vrem-aside-note {
  color: rgba(23, 33, 28, 0.95);
  border-left-color: #17211c;
}

/* --- QA contrast overrides: info cards inside dark sections use a light card
   surface, so headings/paragraphs must use ink colours instead of paper. --- */
.vrem-section--deep .vrem-info-card h4 {
  color: var(--vrem-ink);
}

.vrem-section--deep .vrem-info-card p,
.vrem-section--deep .vrem-info-card a,
.vrem-section--deep .vrem-info-card span {
  color: var(--vrem-ink-soft);
}

.vrem-section--deep .vrem-info-card a:hover {
  color: var(--vrem-gold-ink);
}

/* Keep card content fully opaque so text contrast is never diluted by
   reveal animations while they run. */
.vrem-card,
.vrem-card * {
  opacity: 1;
}

/* ------------------------------------------------------------------
   QA contrast fixes: contacts page (placeholders, hero ghost button,
   hero meta links)
   ------------------------------------------------------------------ */

/* Placeholder text was too light against the cream input surface. */
.vrem-field .form-control::placeholder,
.vrem-field .form-select::placeholder,
.vrem-field textarea::placeholder {
  color: #59605a;
  opacity: 1;
}

/* Ghost buttons placed on the dark hero need light text/border. */
.vrem-hero .vrem-btn--ghost {
  color: #f6f0e4;
  border-color: rgba(246, 240, 228, 0.55);
}

.vrem-hero .vrem-btn--ghost:hover {
  background: #f6f0e4;
  border-color: #f6f0e4;
  color: #17211c;
}

/* Links inside the hero (e-mail in the meta row) must stay bright
   against the dark backdrop. */
.vrem-hero a:not(.vrem-btn) {
  color: #e2c382;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vrem-hero a:not(.vrem-btn):hover {
  color: #fffaf1;
}

/* ------------------------------------------------------------------
   QA contrast fix: gold-ink text on light (cream/paper) surfaces
   Darkened so every link / tag reaches at least 4.5:1.
   ------------------------------------------------------------------ */
.vrem-legal-content a,
.vrem-legal-content a strong,
.vrem-legal-content strong a {
  color: #453208;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vrem-legal-content a:hover,
.vrem-legal-content strong a:hover {
  color: #17211c;
}

.vrem-section--cream .vrem-tag,
.vrem-section--paper .vrem-tag {
  color: #453208;
  background: rgba(198, 162, 77, 0.24);
}

/* ------------------------------------------------------------------
   QA contrast fix: AOS reveal animations must not fade text.
   AOS starts elements at opacity 0 and fades them in over 0.7s, which
   made headings/paragraphs render at ~35% opacity (low contrast) while
   the transition was running. Keep the transform/slide motion, but make
   the content fully opaque at all times.
   ------------------------------------------------------------------ */
[data-aos],
[data-aos].aos-animate,
[data-aos] * {
  opacity: 1 !important;
}

/* Slightly stronger tag chip on cream/paper cards for comfortable margins. */
.vrem-section--cream .vrem-tag,
.vrem-section--paper .vrem-tag {
  background: rgba(198, 162, 77, 0.24);
  color: #453208;
}

/* Links on light card surfaces inside cream/paper sections. */
.vrem-section--cream .vrem-card a,
.vrem-section--paper .vrem-card a {
  color: #6b4c0e;
}

.vrem-section--cream .vrem-card a:hover,
.vrem-section--paper .vrem-card a:hover {
  color: #17211c;
}

.vrem-section--cream .vrem-card p,
.vrem-section--cream .vrem-card li,
.vrem-section--paper .vrem-card p,
.vrem-section--paper .vrem-card li {
  color: #414a42;
}

/* ------------------------------------------------------------------
   QA fix: numbered "step" cards (e.g. /thank-you/)
   The .vrem-step card is a flex row; its body content is now wrapped
   in .vrem-step__body so the number sits beside a stacked
   title + paragraph block instead of pushing them into the same row.
   ------------------------------------------------------------------ */
.vrem-step {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.vrem-step__body {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.vrem-step__body h3,
.vrem-step__body h4 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.vrem-step__body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Keep the step card content inside its bounds at every width. */
.vrem-step {
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .vrem-step {
    padding: 1.25rem;
    gap: 0.9rem;
  }
  .vrem-step__num {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }
  .vrem-step__body h3,
  .vrem-step__body h4 { font-size: 1rem; }
}

/* ------------------------------------------------------------------
   QA fix: "three things" feature blocks (section head + feature cards)
   The .vrem-feature row laid the icon, the heading and the paragraph
   side by side, so the text squeezed into a narrow column and spilled
   outside the card. The icon stays beside a single stacked text column.
   ------------------------------------------------------------------ */
.vrem-feature {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0.35rem 1.1rem;
  align-items: start;
}

.vrem-feature__icon {
  grid-row: 1 / span 2;
  align-self: start;
}

.vrem-feature h3 {
  grid-column: 2;
  margin: 0.1rem 0 0.5rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.vrem-feature p {
  grid-column: 2;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  .vrem-feature {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.25rem 0.85rem;
  }
  .vrem-feature__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------
   QA fix: homepage "Négy lépés a leadott listáig" step cards
   These step cards have no .vrem-step__body wrapper, so the number,
   the h3 and the p were all laid out side by side in the flex row and
   the text spilled outside the card. Make the card a two-column grid:
   the number sits in its own column and the heading + paragraph stack
   in the second column, staying inside the card bounds.
   ------------------------------------------------------------------ */
.vrem-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  column-gap: 1.1rem;
  row-gap: 0.3rem;
}

.vrem-step__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  flex: 0 0 auto;
}

.vrem-step h3,
.vrem-step h4 {
  grid-column: 2;
  min-width: 0;
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
}

.vrem-step p {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  .vrem-step {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 0.9rem;
  }
}

/* ------------------------------------------------------------------
   QA fix: step cards — explicitly place the heading and the paragraph
   so grid auto-placement can never drop them into the narrow number
   column (which squeezed the text into a vertical strip and clipped it).
   ------------------------------------------------------------------ */
.vrem-step h3,
.vrem-step h4 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
}

.vrem-step p {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.vrem-step__body {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* Card must never clip its own text. */
.vrem-step {
  overflow: visible;
  align-items: start;
}

/* ------------------------------------------------------------------
   QA fix: "Megtalál minket a Pallagi úton" contact section
   - The map columns stretched their rows, so the info cards ballooned
     into tall empty blocks and the map iframe lost its height.
   - The map wrapper had no intrinsic height, so the iframe (height:100%)
     collapsed into a blank area while the map was still loading.
   ------------------------------------------------------------------ */
main > .vrem-section:last-of-type .row.g-4 {
  align-items: flex-start;
  align-content: flex-start;
  row-gap: 1rem;
}

/* Contact info cards: natural height, no stretched empty space. */
main > .vrem-section:last-of-type .vrem-info-card {
  height: auto;
  align-self: start;
  margin-bottom: 0.75rem;
}

main > .vrem-section:last-of-type .vrem-info-card > div:last-child {
  min-width: 0;
}

main > .vrem-section:last-of-type .vrem-info-card p {
  overflow-wrap: anywhere;
}

/* Contact chips stack neatly under the cards instead of sitting inline. */
main > .vrem-section:last-of-type .vrem-contact-chip {
  margin-bottom: 0.35rem;
}

main > .vrem-section:last-of-type .vrem-aside-note {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* Map: give the wrapper a real height and keep the embed filling it. */
main > .vrem-section:last-of-type .vrem-map {
  display: block;
  height: clamp(300px, 34vw, 440px);
  min-height: 300px;
  background: var(--vrem-paper-3);
}

main > .vrem-section:last-of-type .vrem-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

main > .vrem-section:last-of-type .col-lg-7 > p.mt-3 {
  margin-top: 1rem;
}

@media (max-width: 991.98px) {
  main > .vrem-section:last-of-type .vrem-map {
    height: 320px;
    min-height: 320px;
  }
}

/* ------------------------------------------------------------------
   QA fix: "Három dolog, amin nálunk nem kell gondolkodni" feature cards
   The grid placement rules above put the icon in column 1 and the
   heading/paragraph in column 2, but the heading kept its display
   sizing and the flex gap made the text track collapse, so the body
   copy wrapped into a very narrow column. Give the feature block a
   stable two-column grid with a container-relative text column and
   normal wrapping so each card's copy uses the full card width.
   ------------------------------------------------------------------ */
.vrem-section .vrem-feature {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.4rem;
  align-items: start;
  width: 100%;
}

.vrem-section .vrem-feature__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: start;
}

.vrem-section .vrem-feature h3 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}

.vrem-section .vrem-feature p {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  .vrem-section .vrem-feature {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 0.85rem;
  }
  .vrem-section .vrem-feature h3 { font-size: 1.1rem; }
  .vrem-section .vrem-feature p { font-size: 0.93rem; }
}

/* ------------------------------------------------------------------
   QA contrast fix: numbered step cards inside dark sections
   (.vrem-section--deep). The card surface is light (--vrem-card), but
   the dark-section rules painted headings with --vrem-paper and body
   copy with rgba(246,240,228,.82), i.e. near-white text on an almost
   white card. Restore ink colours on the light card surface only;
   the section itself and the light-section cards stay unchanged.
   ------------------------------------------------------------------ */
.vrem-section--deep .vrem-step h3,
.vrem-section--deep .vrem-step h4 {
  color: var(--vrem-ink);
}

.vrem-section--deep .vrem-step p,
.vrem-section--deep .vrem-step__body p {
  color: var(--vrem-ink-soft);
}

/* The number badge is already dark-on-dark; keep its gold numeral
   readable against the dark badge background. */
.vrem-section--deep .vrem-step__num {
  color: var(--vrem-gold-bright);
}

/* ------------------------------------------------------------------
   QA contrast fix (final): step cards in dark sections.

   DOM on both service pages: .vrem-step > .vrem-step__num + plain <div>
   holding <h4> + <p>. The grid placement overrides above target direct
   .vrem-step h4 / .vrem-step p children, but the real text lives one
   level deeper inside that unnamed <div>, so the headings and copy
   inherited the dark-section colours (near-white) on the light
   --vrem-card surface: barely visible, unreadable on mobile.

   Scope strictly to .vrem-section--deep so light-section step cards and
   every other surface keep their existing colours.
   ------------------------------------------------------------------ */
.vrem-section--deep .vrem-step {
  color: var(--vrem-ink);
}

.vrem-section--deep .vrem-step h4,
.vrem-section--deep .vrem-step h3,
.vrem-section--deep .vrem-step > div > h3,
.vrem-section--deep .vrem-step > div > h4 {
  color: var(--vrem-ink);
}

.vrem-section--deep .vrem-step p,
.vrem-section--deep .vrem-step > div > p,
.vrem-section--deep .vrem-step > div:last-child p {
  color: var(--vrem-ink-soft);
}

/* Keep the stack cell from being squeezed/clipped on narrow screens. */
.vrem-section--deep .vrem-step > div:not(.vrem-step__num) {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Number badge: gold numeral already clears the dark badge; keep it. */
.vrem-section--deep .vrem-step .vrem-step__num {
  color: var(--vrem-gold-bright);
}

/* ------------------------------------------------------------------
   QA fix: gallery captions ("Polcok, mielőtt és miután" grid)
   The captions are absolutely positioned pills inset 0.85rem from the
   bottom-left of a 4:3 card. On narrow screens the label wraps to two
   or three lines, so the pill grew past the card's rounded clipped
   box and the first characters / last line were cut off at the left
   and bottom edges. Keep the pill look, but inset it symmetrically
   inside the card and let the text wrap within the card width.
   Desktop and single-line captions keep their previous appearance.
   ------------------------------------------------------------------ */
.vrem-gallery__item .vrem-gallery__cap {
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.6rem;
  max-width: calc(100% - 1.2rem);
  padding: 0.3rem 0.7rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   QA contrast fix: primary buttons inside the gold CTA band.
   .vrem-cta-band a { color: #14201a } also applies to button-styled
   links, and .vrem-btn--primary fills them with --vrem-ink, so the
   label became dark-on-dark (~1.05:1). Keep the dark button surface
   and restore the light paper label used by .vrem-btn--primary.
   Scoped to the CTA band buttons only.
   ------------------------------------------------------------------ */
.vrem-cta-band a.vrem-btn--primary {
  color: var(--vrem-paper);
}

.vrem-cta-band a.vrem-btn--primary:hover,
.vrem-cta-band a.vrem-btn--primary:focus {
  color: var(--vrem-paper);
}

/* ------------------------------------------------------------------
   QA contrast fix: carousel cards with photo backdrops.
   The homepage carousel slides are .vrem-card elements that set an
   inline background-image with a dark overlay. Their index <span
   class="vrem-tag"> chip used the light-section rule (dark brown ink
   on a translucent gold pill), which reads dark-on-dark over an
   almost black photo (1:1). Give the chip a light/gold treatment so
   the label is legible on the dark backdrop. Scoped to tags that sit
   inside a card with a photo backdrop; light cards keep their chip.
   ------------------------------------------------------------------ */
.vrem-card[style*="linear-gradient"] .vrem-tag,
.vrem-card[style*="url("] .vrem-tag {
  background: rgba(226, 195, 130, 0.92);
  color: #2a2110;
  border: 1px solid rgba(246, 240, 228, 0.35);
}

.vrem-card[style*="linear-gradient"] .vrem-tag--deep,
.vrem-card[style*="url("] .vrem-tag--deep {
  background: rgba(226, 195, 130, 0.92);
  color: #2a2110;
  border-color: rgba(246, 240, 228, 0.35);
}

/* ------------------------------------------------------------------
   QA contrast fix: body copy inside carousel/photo-backdrop cards.
   .vrem-card p (and the paper/cream section variants) paint the
   paragraph with dark ink, but these cards set an inline photo
   background under a dark overlay, so the copy rendered dark-on-dark
   (~1:1). Scope light text to cards that actually carry a photo
   backdrop; plain light cards keep their ink colours.
   ------------------------------------------------------------------ */
.vrem-card[style*="linear-gradient"] p,
.vrem-card[style*="url("] p,
.vrem-section--paper .vrem-card[style*="linear-gradient"] p,
.vrem-section--paper .vrem-card[style*="url("] p,
.vrem-section--cream .vrem-card[style*="linear-gradient"] p,
.vrem-section--cream .vrem-card[style*="url("] p {
  color: var(--vrem-paper);
}

/* Headings on those photo cards keep the paper colour for the same reason. */
.vrem-card[style*="linear-gradient"] h1,
.vrem-card[style*="linear-gradient"] h2,
.vrem-card[style*="linear-gradient"] h3,
.vrem-card[style*="url("] h1,
.vrem-card[style*="url("] h2,
.vrem-card[style*="url("] h3 {
  color: var(--vrem-paper);
}

/* ------------------------------------------------------------------
   QA contrast fix: stat labels on light (paper/cream) surfaces.
   .vrem-stat__label uses --vrem-ink-mute (#6b7268), which measured
   4.37:1 against --vrem-paper (#f6f0e4) / --vrem-paper-2 — just under
   the 4.5:1 requirement for small uppercase text. Darken only this
   component's label colour on light sections; dark sections keep the
   existing light-on-dark treatment, and no body copy is recoloured.
   ------------------------------------------------------------------ */
.vrem-stat .vrem-stat__label {
  color: #57604f;
}

.vrem-section--deep .vrem-stat .vrem-stat__label {
  color: rgba(246, 240, 228, 0.82);
}