:root {
  --ink: #1b1917;
  --ink-soft: #3d3833;
  --cream: #f7f2ea;
  --cream-deep: #efe6d8;
  --oak: #b07d4f;
  --oak-dark: #8a5a34;
  --sage: #5d6b58;
  --clay: #a15f43;
  --line: rgba(27, 25, 23, 0.12);
  --shadow-sm: 0 2px 8px rgba(27, 25, 23, 0.06);
  --shadow-md: 0 14px 38px rgba(27, 25, 23, 0.10);
  --shadow-lg: 0 28px 70px rgba(27, 25, 23, 0.18);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6, .display-type {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p {
  color: var(--ink-soft);
}

a {
  color: var(--oak-dark);
  text-decoration: none;
  transition: color 0.25s ease;
}

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

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

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

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

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

.section-ink {
  background-color: var(--ink);
  color: #ffffff;
}

.section-ink h2,
.section-ink h3,
.section-ink h4 {
  color: #ffffff;
}

.section-ink p {
  color: rgba(255, 255, 255, 0.84);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oak-dark);
  margin-bottom: 1rem;
}

.section-ink .eyebrow {
  color: #e8c9a5;
}

.title-xl {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.title-lg {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}

.title-md {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.lede {
  font-size: 1.1rem;
  max-width: 62ch;
}

.rule-accent {
  width: 68px;
  height: 3px;
  background-color: var(--oak);
  border: 0;
  opacity: 1;
  margin: 1.5rem 0;
}

.rule-accent-center {
  margin-left: auto;
  margin-right: auto;
}

.bg-photo-dark {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* ---------- Buttons ---------- */

.btn-furniture {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-furniture-primary {
  background-color: var(--ink);
  color: #ffffff;
}

.btn-furniture-primary:hover,
.btn-furniture-primary:focus-visible {
  background-color: var(--oak-dark);
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-furniture-outline {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-furniture-outline:hover,
.btn-furniture-outline:focus-visible {
  background-color: var(--ink);
  color: #ffffff;
}

.btn-furniture-light {
  background-color: #ffffff;
  color: var(--ink);
}

.btn-furniture-light:hover,
.btn-furniture-light:focus-visible {
  background-color: var(--oak);
  color: #ffffff;
}

.btn-furniture-ghost-light {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-furniture-ghost-light:hover,
.btn-furniture-ghost-light:focus-visible {
  background-color: #ffffff;
  color: var(--ink);
}

/* ---------- Header ---------- */

.site-header {
  background-color: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 0;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-condensed {
  padding: 0.4rem 0;
  box-shadow: var(--shadow-sm);
}

.site-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
}

.header-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.header-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.header-contact i {
  color: var(--oak-dark);
}

.site-nav .nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  padding: 0.5rem 0.95rem;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  color: var(--oak-dark);
}

.nav-toggle {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--ink);
  padding: 0.45rem 0.7rem;
}

/* ---------- Hero ---------- */

.hero-showroom {
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.hero-showroom .hero-inner {
  max-width: 760px;
}

.hero-showroom h1 {
  color: #ffffff;
}

.hero-showroom p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.12rem;
  max-width: 58ch;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.8rem;
  margin-top: 2.8rem;
}

.hero-stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  color: #ffffff;
  display: block;
}

.hero-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Page banner ---------- */

.banner-page {
  padding: 8rem 0 5rem;
  color: #ffffff;
}

.banner-page h1 {
  color: #ffffff;
}

.banner-page p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 62ch;
}

.banner-crumbs {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}

.banner-crumbs a {
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Collection cards ---------- */

.collection-card {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}

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

.collection-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--cream-deep);
}

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

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

.collection-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: rgba(27, 25, 23, 0.85);
  color: #ffffff;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}

.collection-card__body {
  padding: 1.6rem 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.collection-card__body h3 {
  font-size: 1.24rem;
  margin-bottom: 0.6rem;
}

.collection-card__body p {
  font-size: 0.94rem;
  flex-grow: 1;
}

.collection-card__price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--oak-dark);
  margin-top: 0.4rem;
}

/* ---------- Feature blocks ---------- */

.feature-block {
  padding: 2rem 1.6rem;
  border-radius: var(--radius-md);
  background-color: #ffffff;
  height: 100%;
  border: 1px solid var(--line);
}

.feature-block__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cream-deep);
  color: var(--oak-dark);
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}

.feature-block h3 {
  font-size: 1.16rem;
  margin-bottom: 0.6rem;
}

.feature-block p {
  font-size: 0.94rem;
  margin-bottom: 0;
}

/* ---------- Split media ---------- */

.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 6;
  background-color: var(--cream-deep);
}

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

.split-overlap-card {
  background-color: var(--ink);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-top: -3rem;
  margin-left: 1.5rem;
  position: relative;
  z-index: 2;
  max-width: 320px;
}

.split-overlap-card p {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
}

.split-overlap-card .split-overlap-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: #e8c9a5;
  display: block;
  line-height: 1;
}

/* ---------- Process steps ---------- */

.process-step {
  display: flex;
  gap: 1.4rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.process-step:last-child {
  border-bottom: 0;
}

.process-step__index {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--oak);
  color: var(--oak-dark);
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.process-step__body h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.process-step__body p {
  font-size: 0.94rem;
  margin-bottom: 0;
}

/* ---------- Gallery ---------- */

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

.gallery-grid__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1;
  background-color: var(--cream-deep);
}

.gallery-grid__item--wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

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

.gallery-grid__item:hover img {
  transform: scale(1.05);
}

.gallery-grid__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.2rem 1rem;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
  color: #ffffff;
  font-size: 0.88rem;
}

/* ---------- Pricing ---------- */

.price-card {
  background-color: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.9rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.price-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.price-card--featured {
  border-color: var(--oak);
  box-shadow: var(--shadow-md);
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: 2.3rem;
  color: var(--ink);
  line-height: 1;
}

.price-card__amount small {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 400;
}

.price-card__list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 1.8rem;
  font-size: 0.94rem;
}

.price-card__list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0;
  color: var(--ink-soft);
}

.price-card__list i {
  color: var(--sage);
  margin-top: 0.35rem;
}

.price-card .btn-furniture {
  margin-top: auto;
  justify-content: center;
}

.price-badge {
  display: inline-block;
  background-color: var(--oak);
  color: #ffffff;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ---------- Testimonials ---------- */

.testimonial-card {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  padding: 2rem 1.8rem;
  height: 100%;
  border: 1px solid var(--line);
}

.testimonial-card__stars {
  color: var(--oak);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.testimonial-card__quote {
  font-size: 0.98rem;
  color: var(--ink-soft);
}

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

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

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

.testimonial-card__person span {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Team ---------- */

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

.team-card__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--cream-deep);
  margin-bottom: 1.1rem;
}

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

.team-card:hover .team-card__photo img {
  transform: scale(1.04);
}

.team-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.team-card .team-card__role {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oak-dark);
}

/* ---------- Stats strip ---------- */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: #ffffff;
  line-height: 1;
  display: block;
}

.stat-item__label {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.6rem;
}

/* ---------- FAQ ---------- */

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

.faq-accordion .accordion-button {
  background-color: transparent;
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--ink);
  padding: 1.3rem 0;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--oak-dark);
  background-color: transparent;
}

.faq-accordion .accordion-button:focus {
  box-shadow: none;
}

.faq-accordion .accordion-button::after {
  background-image: none;
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.85rem;
  width: auto;
  height: auto;
  transition: transform 0.3s ease;
}

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

.faq-accordion .accordion-body {
  padding: 0 0 1.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Forms ---------- */

.form-shell {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  box-shadow: var(--shadow-md);
}

.form-shell .form-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

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

.form-shell .form-control:focus,
.form-shell .form-select:focus {
  border-color: var(--oak);
  box-shadow: 0 0 0 0.18rem rgba(176, 125, 79, 0.18);
  background-color: #ffffff;
}

.form-shell .form-check-label {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

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

/* ---------- Newsletter ---------- */

.newsletter-band {
  border-radius: var(--radius-lg);
  padding: 3rem 2.2rem;
  color: #ffffff;
}

.newsletter-band h2 {
  color: #ffffff;
}

.newsletter-band p {
  color: rgba(255, 255, 255, 0.84);
}

.newsletter-form .form-control {
  border-radius: 999px;
  border: 0;
  padding: 0.9rem 1.4rem;
  font-size: 0.95rem;
}

/* ---------- Map ---------- */

.map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  line-height: 0;
}

.map-frame iframe {
  width: 100%;
  height: 420px;
  border: 0;
}

/* ---------- Footer ---------- */

.site-footer {
  background-color: var(--ink);
  color: rgba(255, 255, 255, 0.8);
  padding: 4.5rem 0 2rem;
}

.site-footer h3 {
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #e8c9a5;
}

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

.site-footer li {
  margin-bottom: 0.55rem;
}

.footer-contact-item {
  display: flex;
  gap: 0.7rem;
  font-size: 0.92rem;
  margin-bottom: 0.8rem;
}

.footer-contact-item i {
  color: var(--oak);
  margin-top: 0.3rem;
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
}

.footer-brand-line {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #ffffff;
  margin-bottom: 0.8rem;
}

.social-row {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.social-row a:hover,
.social-row a:focus-visible {
  background-color: var(--oak);
  border-color: var(--oak);
  color: #ffffff;
}

/* ---------- Back to top ---------- */

.to-top-button {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background-color: var(--ink);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 1040;
}

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

.to-top-button:hover {
  background-color: var(--oak-dark);
}

/* ---------- Cookie consent ---------- */

.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  padding: 1rem;
  pointer-events: none;
}

.consent-bar__card {
  pointer-events: auto;
  max-width: 1080px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.7rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.consent-bar__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--cream-deep);
  color: var(--oak-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.consent-bar__body {
  flex: 1 1 380px;
  min-width: 260px;
}

.consent-bar__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.consent-bar__text {
  font-size: 0.89rem;
  color: var(--ink-soft);
  margin-bottom: 0;
}

.consent-bar__link {
  color: var(--oak-dark);
  text-decoration: underline;
}

.consent-bar__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.consent-bar__accept,
.consent-bar__decline {
  font-family: var(--font-body);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.consent-bar__accept {
  background-color: var(--ink);
  color: #ffffff;
  border: 1px solid var(--ink);
}

.consent-bar__accept:hover,
.consent-bar__accept:focus-visible {
  background-color: var(--oak-dark);
  border-color: var(--oak-dark);
}

.consent-bar__decline {
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.consent-bar__decline:hover,
.consent-bar__decline:focus-visible {
  border-color: var(--ink);
}

/* ---------- Reveal animation fallback ---------- */

[data-aos] {
  pointer-events: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
  .section-pad {
    padding: 4.2rem 0;
  }

  .hero-showroom {
    min-height: 72vh;
  }

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

  .split-overlap-card {
    margin-left: 0;
    max-width: none;
  }

  .banner-page {
    padding: 6.5rem 0 3.5rem;
  }
}

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

  .gallery-grid__item--wide {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }

  .hero-stats {
    gap: 1.8rem;
  }

  .consent-bar__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .consent-bar__actions {
    width: 100%;
  }

  .consent-bar__accept,
  .consent-bar__decline {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .section-pad {
    padding: 3.4rem 0;
  }

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

  .gallery-grid__item--wide {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }

  .stats-strip {
    grid-template-columns: 1fr;
  }

  .form-shell {
    padding: 1.7rem 1.3rem;
  }
}

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

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

/* QA_GRID_COLUMN_FIX .stats-strip.row */
.stats-strip.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.stats-strip.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}

/* QA_CONTRAST_FIX: give dark-photo sections a dark background-color fallback
   so white text always sits on a dark surface (inline gradient/image covers it). */
.bg-photo-dark {
  background-color: var(--ink);
}

/* QA_CONTRAST_FIX: newsletter band declared white text but had no background,
   leaving white text on the cream page background. Give it the dark surface it expects. */
.newsletter-band {
  background-color: var(--ink);
}

.newsletter-band .form-label,
.newsletter-band .form-note {
  color: rgba(255, 255, 255, 0.84);
}

.newsletter-band .form-note a {
  color: #e8c9a5;
}

/* QA_CONTRAST_FIX */
/* Page banner sits over a dark photo overlay: give it a solid dark base
   so light text keeps a strong contrast ratio even without the image. */
.banner-page {
  background-color: var(--ink);
}

/* Dark photo sections that are not already marked as ink sections
   (e.g. the closing call-to-action band) need a dark base and light text. */
.bg-photo-dark.section-pad:not(.section-ink) {
  background-color: var(--ink);
}
.bg-photo-dark.section-pad:not(.section-ink) h1,
.bg-photo-dark.section-pad:not(.section-ink) h2,
.bg-photo-dark.section-pad:not(.section-ink) h3,
.bg-photo-dark.section-pad:not(.section-ink) h4 {
  color: #ffffff;
}
.bg-photo-dark.section-pad:not(.section-ink) p,
.bg-photo-dark.section-pad:not(.section-ink) .lede {
  color: rgba(255, 255, 255, 0.86);
}

/* Headings inside the dark overlap card were inheriting the dark heading
   colour from the base h1-h6 rule. */
.split-overlap-card h2,
.split-overlap-card h3 {
  color: #ffffff;
}

/* Captions overlay photos with a gradient; add an opaque dark base so the
   white caption text always meets contrast requirements. */
.gallery-grid__caption {
  background-color: rgba(27, 25, 23, 0.85);
}

/* The stat blocks also appear on a cream section where white text is
   unreadable. Scope dark text to cream sections only (ink sections keep white). */
.section-cream .stat-item__number {
  color: var(--ink);
}
.section-cream .stat-item__label {
  color: var(--ink-soft);
}

/* QA_CONTRAST_FIX: the ghost-light button is styled for dark surfaces (white
   text/border) but it is also placed inside light cream/white sections, which
   left white text on a white background. Add an opt-in "on-light" variant that
   flips it to dark text for light sections. */
.btn-furniture-ghost-light.on-light {
  color: var(--ink);
  border-color: var(--ink);
}

.btn-furniture-ghost-light.on-light:hover,
.btn-furniture-ghost-light.on-light:focus-visible {
  background-color: var(--ink);
  color: #ffffff;
}

/* QA_FIX: hero section relies on a background-image only, so its computed
   background-color was transparent and white/light text was measured against
   the cream page background. Give it the dark surface it is designed for. */
.hero-showroom {
  background-color: var(--ink);
}

/* QA_FIX: "Popular" badge used white text on --oak (3.56:1). Darken the badge
   background to the darker oak so the label passes AA. */
.price-badge {
  background-color: var(--oak-dark);
}

/* QA_FIX: the contact form sits on a white .form-shell inside a dark photo
   section. The dark-section paragraph rule turned the .form-note white,
   leaving white text on the white shell. Restore dark text for the note. */
.bg-photo-dark.section-pad:not(.section-ink) .form-shell p.form-note {
  color: var(--ink-soft);
}

/* QA_CONTRAST_FIX: the .eyebrow label defaults to --oak-dark, which is too dark
   when it sits on the dark photo banner (ink surface). Lighten it for any
   eyebrow placed inside a dark photo/banner section so it meets AA. */
.banner-page .eyebrow,
.bg-photo-dark .eyebrow {
  color: #e8c9a5;
}

/* QA_CONTRAST_FIX: "Book a free measure" / "Sign up" / "See details" CTAs use
   .btn.btn-furniture, which never declared its own background or text colour.
   Bootstrap's .btn left it transparent with dark text, so on the dark hero,
   newsletter band and dark CTA the label sat dark-on-dark (1.14:1). Give the
   primary button a solid oak surface with white text (5.9:1) that also works
   on white cards. */
.btn.btn-furniture {
  background-color: var(--oak-dark);
  color: #ffffff;
  border-color: var(--oak-dark);
}

.btn.btn-furniture:hover,
.btn.btn-furniture:focus-visible {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

/* QA_CONTRAST_FIX: carousel slide captions sit over dark photo slides. The
   base heading rule set them to --ink, which measured 1:1 against the dark
   backdrop. Force light caption text on the dark hero hero-carousel. */
.hero-showroom .carousel-caption h2,
.hero-showroom .carousel-caption .title-md,
.carousel-caption h2,
.carousel-caption .title-md {
  color: #ffffff;
}

.hero-showroom .carousel-caption p,
.carousel-caption p {
  color: rgba(255, 255, 255, 0.92);
}

/* QA_CONTRAST_FIX: "Read our story" is an outline button placed inside the
   dark .split-overlap-card. The default outline style is ink-on-transparent,
   so it was invisible on the dark card. Flip it to the light variant there. */
.split-overlap-card .btn-furniture-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.split-overlap-card .btn-furniture-outline:hover,
.split-overlap-card .btn-furniture-outline:focus-visible {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
}

/* QA_CONTRAST_FIX: team roles use --oak-dark on the dark .section-ink band
   (3:1). Use the light accent colour on dark sections so the small uppercase
   labels reach AA. */
.section-ink .team-card .team-card__role {
  color: #e8c9a5;
}

/* ============================================================
   QA_CONTRAST_FIX (price page)
   ------------------------------------------------------------
   1) .stats-strip sits on a LIGHT section on the price page, but
      .stat-item__number / __label are hard-coded white, giving
      white-on-cream (1.11:1). Make the light-surface colour the
      default and only go white inside genuinely dark surfaces.
   2) .price-card and .testimonial-card are WHITE cards, but they
      are also used inside .section-ink bands, where the generic
      `.section-ink h2/h3/h4/p` rules forced white text on top of
      the white card background (1:1). Re-assert the dark card
      text colours for content inside those white cards.
   ============================================================ */

/* --- 1. Stat strip: dark by default, white only on dark surfaces --- */
.stats-strip .stat-item__number {
  color: var(--ink);
}

.stats-strip .stat-item__label {
  color: var(--ink-soft);
}

.section-ink .stats-strip .stat-item__number,
.bg-photo-dark .stats-strip .stat-item__number,
.hero-showroom .stats-strip .stat-item__number {
  color: #ffffff;
}

.section-ink .stats-strip .stat-item__label,
.bg-photo-dark .stats-strip .stat-item__label,
.hero-showroom .stats-strip .stat-item__label {
  color: rgba(255, 255, 255, 0.78);
}

/* --- 2a. Price cards keep their own dark text on white card surface --- */
.section-ink .price-card h3,
.section-ink .price-card h4,
.section-ink .price-card .price-card__amount,
.section-ink .price-card p,
.section-ink .price-card li {
  color: var(--ink);
}

.section-ink .price-card .price-card__list li {
  color: var(--ink-soft);
}

/* --- 2b. Testimonial cards keep their own dark text too --- */
.section-ink .testimonial-card .testimonial-card__quote,
.section-ink .testimonial-card p {
  color: var(--ink-soft);
}

.section-ink .testimonial-card strong {
  color: var(--ink);
}

.section-ink .testimonial-card span {
  color: var(--ink-soft);
}

/* --- 2c. Feature blocks / collection cards inside dark bands --- */
.section-ink .feature-block h3,
.section-ink .feature-block p,
.section-ink .collection-card h3,
.section-ink .collection-card p,
.section-ink .collection-card a {
  color: var(--ink);
}

.section-ink .collection-card p,
.section-ink .feature-block p {
  color: var(--ink-soft);
}

.section-ink .collection-card .collection-card__tag {
  color: #ffffff;
}