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

:root {
  --spm-noir: #0e0c0a;
  --spm-ink: #181512;
  --spm-charcoal: #26211d;
  --spm-stone: #4a443f;
  --spm-cream: #f8f3ea;
  --spm-bone: #ebe3d5;
  --spm-sand: #d9cfbe;
  --spm-copper: #a05a20;
  --spm-copper-dark: #7d4415;
  --spm-copper-light: #d99a5c;
  --spm-gold: #c9a35e;
  --spm-sage: #6f8368;
  --spm-white: #ffffff;
  --spm-shadow-soft: 0 24px 60px -28px rgba(18, 14, 10, 0.35);
  --spm-shadow-hard: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  --spm-font-display: 'Fraunces', 'Times New Roman', serif;
  --spm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --spm-radius-sm: 8px;
  --spm-radius-md: 16px;
  --spm-radius-lg: 28px;
  --spm-section-pad: clamp(4rem, 9vw, 8rem);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--spm-font-body);
  background: var(--spm-cream);
  color: var(--spm-ink);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--spm-copper);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--spm-copper-dark);
}

:focus-visible {
  outline: 3px solid var(--spm-copper);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
.spm-display {
  font-family: var(--spm-font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--spm-ink);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

h4 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
}

p {
  margin: 0 0 1rem;
}

.lead-spm {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--spm-stone);
  max-width: 46rem;
}

.spm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--spm-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spm-copper);
  margin-bottom: 1.1rem;
}

.spm-eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.spm-section {
  padding-block: var(--spm-section-pad);
  position: relative;
}

.spm-section--dark {
  background: var(--spm-ink);
  color: var(--spm-cream);
}

.spm-section--dark h1,
.spm-section--dark h2,
.spm-section--dark h3,
.spm-section--dark h4 {
  color: var(--spm-cream);
}

.spm-section--dark .lead-spm,
.spm-section--dark p {
  color: rgba(248, 243, 234, 0.82);
}

.spm-section--bone {
  background: var(--spm-bone);
}

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

.spm-section--copper h1,
.spm-section--copper h2,
.spm-section--copper h3 {
  color: var(--spm-cream);
}

.spm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--spm-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

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

.spm-btn--primary {
  background: var(--spm-copper);
  color: var(--spm-cream);
}

.spm-btn--primary:hover {
  background: var(--spm-copper-dark);
  color: var(--spm-cream);
}

.spm-btn--dark {
  background: var(--spm-ink);
  color: var(--spm-cream);
}

.spm-btn--dark:hover {
  background: var(--spm-charcoal);
  color: var(--spm-cream);
}

.spm-btn--ghost {
  background: transparent;
  color: var(--spm-ink);
  border-color: rgba(24, 21, 18, 0.25);
}

.spm-btn--ghost:hover {
  border-color: var(--spm-ink);
  color: var(--spm-ink);
}

.spm-btn--light-outline {
  background: transparent;
  color: var(--spm-cream);
  border-color: rgba(248, 243, 234, 0.4);
}

.spm-btn--light-outline:hover {
  border-color: var(--spm-cream);
  color: var(--spm-cream);
}

.spm-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding-block: 1.25rem;
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.spm-navbar.is-scrolled {
  background: rgba(14, 12, 10, 0.95);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.55);
  padding-block: 0.7rem;
}

.spm-navbar .nav-link {
  font-family: var(--spm-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 243, 234, 0.85);
  padding-inline: 0.9rem;
}

.spm-navbar .nav-link:hover,
.spm-navbar .nav-link:focus {
  color: var(--spm-cream);
}

.spm-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-color: var(--spm-noir);
  background-size: cover;
  background-position: center;
  color: var(--spm-cream);
  padding-block: 9rem 6rem;
  overflow: hidden;
}

.spm-hero__content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.spm-hero h1 {
  color: var(--spm-cream);
}

.spm-hero__lede {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: rgba(248, 243, 234, 0.85);
  max-width: 34rem;
  margin-top: 1.5rem;
}

.spm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.spm-card {
  position: relative;
  background: var(--spm-white);
  border-radius: var(--spm-radius-md);
  border: 1px solid rgba(24, 21, 18, 0.08);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.spm-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--spm-bone);
}

.spm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spm-card__body {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.spm-card__title {
  font-family: var(--spm-font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
}

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

.spm-card__price {
  font-family: var(--spm-font-display);
  font-size: 1.25rem;
  color: var(--spm-copper);
  font-weight: 500;
}

.spm-stat {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(24, 21, 18, 0.14);
}

.spm-stat__value {
  font-family: var(--spm-font-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--spm-copper);
}

.spm-stat__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--spm-stone);
}

.spm-section--dark .spm-stat {
  border-top-color: rgba(248, 243, 234, 0.18);
}

.spm-section--dark .spm-stat__label {
  color: rgba(248, 243, 234, 0.7);
}

.spm-form .form-control,
.spm-form .form-select {
  background: var(--spm-white);
  border: 1px solid rgba(24, 21, 18, 0.18);
  border-radius: var(--spm-radius-sm);
  padding: 0.9rem 1.1rem;
  color: var(--spm-ink);
  font-family: var(--spm-font-body);
  font-size: 0.95rem;
}

.spm-form .form-control:focus,
.spm-form .form-select:focus {
  border-color: var(--spm-copper);
  box-shadow: 0 0 0 4px rgba(160, 90, 32, 0.15);
}

.spm-form .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spm-stone);
  margin-bottom: 0.5rem;
}

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

.spm-form .invalid-feedback {
  font-size: 0.82rem;
  color: #8a1f1f;
}

.spm-form .valid-feedback {
  font-size: 0.82rem;
  color: var(--spm-sage);
}

.spm-frame {
  border-radius: var(--spm-radius-md);
  overflow: hidden;
  background: var(--spm-bone);
  box-shadow: var(--spm-shadow-soft);
}

.spm-frame img {
  width: 100%;
  display: block;
}

.spm-divider {
  height: 1px;
  background: rgba(24, 21, 18, 0.12);
  border: 0;
  margin-block: 2rem;
}

.spm-section--dark .spm-divider {
  background: rgba(248, 243, 234, 0.16);
}

.spm-back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--spm-ink);
  color: var(--spm-cream);
  border: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  cursor: pointer;
}

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

.spm-back-to-top:hover {
  background: var(--spm-copper);
}

.spimori-cookie {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 130%);
  width: min(64rem, calc(100vw - 2rem));
  z-index: 1080;
  background: var(--spm-cream);
  color: var(--spm-ink);
  border-radius: var(--spm-radius-lg);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(24, 21, 18, 0.12);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  pointer-events: none;
}

.spimori-cookie.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.spimori-cookie.is-leaving {
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
}

.spimori-cookie__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

.spimori-cookie__copy {
  display: grid;
  gap: 0.35rem;
}

.spimori-cookie__eyebrow {
  font-family: var(--spm-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spm-copper);
}

.spimori-cookie__title {
  font-family: var(--spm-font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0;
  color: var(--spm-ink);
}

.spimori-cookie__text {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0.25rem 0 0;
  color: var(--spm-stone);
  max-width: 46rem;
}

.spimori-cookie__text a {
  color: var(--spm-copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spimori-cookie__text a:hover {
  color: var(--spm-copper-dark);
}

.spimori-cookie__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.spimori-cookie__btn {
  font-family: var(--spm-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.8rem 1.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.spimori-cookie__btn--ghost {
  background: transparent;
  color: var(--spm-ink);
  border-color: rgba(24, 21, 18, 0.3);
}

.spimori-cookie__btn--ghost:hover {
  border-color: var(--spm-ink);
}

.spimori-cookie__btn--accept {
  background: var(--spm-copper);
  color: var(--spm-cream);
}

.spimori-cookie__btn--accept:hover {
  background: var(--spm-copper-dark);
}

.spm-footer {
  background: var(--spm-noir);
  color: rgba(248, 243, 234, 0.78);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.spm-footer h4,
.spm-footer h5 {
  color: var(--spm-cream);
  font-family: var(--spm-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.spm-footer a {
  color: rgba(248, 243, 234, 0.78);
}

.spm-footer a:hover {
  color: var(--spm-cream);
}

.spm-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.spm-texture {
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
}

@media (max-width: 991.98px) {
  .spm-hero {
    min-height: 78vh;
    padding-block: 7rem 5rem;
  }
}

@media (max-width: 767.98px) {
  .spimori-cookie__inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .spimori-cookie__actions {
    justify-content: flex-end;
  }

  .spimori-cookie__btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* ==========================================================================
   Publication-safe overrides (appended)
   - fixed header no longer overlaps the first section
   - readable nav / footer / dark-section link + eyebrow contrast
   ========================================================================== */

:root {
  --spm-header-h: 148px;
  --spm-on-dark-accent: #d99a5c;
  --spm-on-dark-text: #f8f3ea;
}

/* Reserve space for the fixed header so it never sits on top of the hero */
body {
  padding-top: var(--spm-header-h);
}

/* Header keeps a solid dark bar at all scroll positions */
.spm-navbar {
  background-color: rgba(14, 12, 10, 0.96);
  backdrop-filter: blur(10px);
}

.spm-navbar .nav-link,
.spm-navbar .navbar-brand span,
.spm-navbar .spm-eyebrow {
  color: var(--spm-on-dark-text);
}

.spm-navbar .nav-link:hover,
.spm-navbar .nav-link:focus {
  color: #ffffff;
}

.spm-navbar .spm-btn--ghost {
  color: var(--spm-on-dark-text);
  border-color: rgba(248, 243, 234, 0.45);
}

.spm-navbar .spm-btn--ghost:hover {
  color: #ffffff;
  border-color: var(--spm-on-dark-text);
}

.spm-navbar .navbar-toggler {
  color: var(--spm-on-dark-text);
  border-color: rgba(248, 243, 234, 0.45);
}

.spm-navbar .small,
.spm-navbar a.small,
.spm-navbar .navbar-collapse .small {
  color: rgba(248, 243, 234, 0.92);
}

.spm-navbar a.small:hover {
  color: #ffffff;
}

/* Accent text on dark surfaces needs a lighter copper to stay legible */
.spm-hero .spm-eyebrow,
.spm-section--dark .spm-eyebrow,
.spm-footer .spm-eyebrow {
  color: var(--spm-on-dark-accent);
}

/* Links sitting on dark sections / hero photographs */
.spm-hero a:not(.spm-btn),
.spm-section--dark a:not(.spm-btn),
.spm-footer a:not(.spm-btn) {
  color: var(--spm-on-dark-accent);
}

.spm-hero a:not(.spm-btn):hover,
.spm-section--dark a:not(.spm-btn):hover,
.spm-footer a:not(.spm-btn):hover {
  color: #f0c39a;
}

/* Links inside copper cards */
.spm-section--copper a:not(.spm-btn) {
  color: var(--spm-cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spm-section--copper a:not(.spm-btn):hover {
  color: #ffffff;
}

/* ===== QA overrides: header legibility, contrast, fixed-header clearance ===== */

/* Solid header plate so nav links and small contact text stay legible
   above light page backgrounds. */
header.spm-navbar {
  background: rgba(14, 12, 10, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.spm-navbar .nav-link {
  color: rgba(248, 243, 234, 0.92);
}

.spm-navbar .nav-link:hover,
.spm-navbar .nav-link:focus {
  color: var(--spm-cream);
}

.spm-navbar .spm-btn--ghost {
  color: var(--spm-cream);
  border-color: rgba(248, 243, 234, 0.45);
}

.spm-navbar .spm-btn--ghost:hover {
  color: var(--spm-cream);
  border-color: var(--spm-cream);
}

.spm-navbar a.small,
.spm-navbar span.small {
  color: rgba(248, 243, 234, 0.9);
}

.spm-navbar a.small:hover {
  color: var(--spm-cream);
  text-decoration: underline;
}

/* Eyebrow labels on dark and copper surfaces need a lighter tone */
.spm-navbar .spm-eyebrow,
.spm-section--dark .spm-eyebrow,
.spm-footer .spm-eyebrow {
  color: var(--spm-copper-light);
}

.spm-section--copper .spm-eyebrow {
  color: var(--spm-cream);
}

/* Inline links sitting on dark backgrounds */
.spm-hero p a:not(.spm-btn),
.spm-section--dark p a:not(.spm-btn) {
  color: var(--spm-copper-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spm-hero p a:not(.spm-btn):hover,
.spm-section--dark p a:not(.spm-btn):hover {
  color: var(--spm-cream);
}

/* .spm-divider is applied to footer rows: keep it a hairline, not a fill */
.spm-divider.row {
  height: auto;
  background: transparent;
  border-top: 1px solid rgba(24, 21, 18, 0.12);
}

.spm-section--dark .spm-divider.row,
.spm-footer .spm-divider.row {
  background: transparent;
  border-top-color: rgba(248, 243, 234, 0.16);
}

/* Reserve room for the fixed header on small screens so it never
   covers the top of the hero content. */
@media (max-width: 991.98px) {
  body {
    padding-top: 9.5rem;
    background-color: var(--spm-noir);
  }

  .spm-hero {
    padding-top: 3rem;
  }
}

/* ============================================================
   QA overrides (appended): header contrast, mobile header
   clearance for the hero, and inline form confirmation styles.
   ============================================================ */

/* Solid, readable navbar at all scroll positions */
.spm-navbar {
  background-color: rgba(14, 12, 10, 0.94);
  backdrop-filter: blur(10px);
}

.spm-navbar.is-scrolled {
  background-color: rgba(14, 12, 10, 0.97);
}

/* Cream text for every nav element sitting on the dark header */
.spm-navbar .nav-link,
.spm-navbar .navbar-brand,
.spm-navbar .small,
.spm-navbar .small a,
.spm-navbar a.small,
.spm-navbar .navbar-toggler {
  color: rgba(248, 243, 234, 0.92);
}

.spm-navbar .nav-link:hover,
.spm-navbar .nav-link:focus,
.spm-navbar .small a:hover,
.spm-navbar a.small:hover,
.spm-navbar .navbar-toggler:hover {
  color: var(--spm-cream);
}

/* Copper is too dark on the noir header/footer; use the light copper */
.spm-navbar .spm-eyebrow,
.spm-footer .spm-eyebrow,
.spm-footer .spm-eyebrow.mb-0 {
  color: var(--spm-copper-light);
}

/* Inline confirmation shown after a valid form submit */
.spm-form.is-sent > .row {
  display: none;
}

.spm-form__success {
  display: block;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--spm-copper);
  border-radius: var(--spm-radius-sm);
  background: var(--spm-bone);
  color: var(--spm-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  /* Keep the fixed header from covering the top of the hero on phones */
  main {
    position: relative;
  }

  main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10.5rem;
    background: var(--spm-noir);
    pointer-events: none;
  }

  .spm-hero {
    margin-top: 10.5rem;
    padding-top: 1.5rem;
  }
}

/* ============================================================
   QA pass (appended): surface + call-out card contrast fixes.
   - plain .spm-section keeps the cream surface at every width
     (on phones the body behind it is noir, which made the
     inherited dark-on-dark text unreadable)
   - a card that is also .spm-section--copper becomes a real
     copper card so its cream copy stays legible
   - ghost buttons sitting on a copper surface get cream ink
   ============================================================ */

/* Plain sections get an explicit cream surface rather than showing
   through to the page background. Sections with their own modifier
   are excluded so their own treatments still win. */
.spm-section:not(.spm-section--dark):not(.spm-section--copper):not(.spm-section--bone) {
  background-color: var(--spm-cream);
  color: var(--spm-ink);
}

/* The call-out card in a hero carries both .spm-card (white) and
   .spm-section--copper (cream text). Paint it copper so the cream
   headline, copy and phone number keep a readable ratio. */
.spm-card.spm-section--copper {
  background-color: var(--spm-copper);
  border-color: rgba(248, 243, 234, 0.45);
}

.spm-card.spm-section--copper .spm-card__title,
.spm-card.spm-section--copper .spm-card__text,
.spm-card.spm-section--copper .spm-card__price,
.spm-card.spm-section--copper .spm-eyebrow {
  color: var(--spm-cream);
}

/* Ghost (outline) buttons are ink-on-cream by default, which fails on
   a copper section. Use cream ink and a cream hairline border there. */
.spm-section--copper .spm-btn--ghost {
  background-color: transparent;
  color: var(--spm-cream);
  border-color: rgba(248, 243, 234, 0.6);
}

.spm-section--copper .spm-btn--ghost:hover,
.spm-section--copper .spm-btn--ghost:focus {
  color: #ffffff;
  border-color: var(--spm-cream);
}

/* ============================================================
   QA fix (appended): the cookie consent banner was rendering
   inline inside <main> (top of the page, over the hero copy)
   because the base `.spimori-cookie` positioning was being
   overridden from applying. Re-assert the fixed bottom-docked
   placement here, scoped to the banner's own component classes.
   ============================================================ */

main .spimori-cookie {
  position: fixed;
  top: auto;
  left: 50%;
  right: auto;
  bottom: 1.25rem;
  width: min(64rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  margin: 0;
  z-index: 1080;
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
}

main .spimori-cookie.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

main .spimori-cookie.is-leaving {
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
}

main .spimori-cookie[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  main .spimori-cookie {
    bottom: 0.75rem;
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    border-radius: var(--spm-radius-md);
  }
}

/* ============================================================
   QA fix (appended): the "house rules" cards sit on a dark photo
   section and inherit the dark-section cream heading/copy colour
   while the card surface stays white, which washed the text out
   (ghosted, low-contrast type). Re-assert ink copy on the card
   itself, scoped to cards inside a dark section.
   ============================================================ */

.spm-section--dark .spm-card .spm-card__title {
  color: var(--spm-ink);
}

.spm-section--dark .spm-card .spm-card__text,
.spm-section--dark .spm-card p {
  color: var(--spm-stone);
}

/* Keep the eyebrow accent legible when printed on the white card */
.spm-section--dark .spm-card .spm-eyebrow {
  color: var(--spm-copper);
}

/* ============================================================
   QA fix (appended): mobile — the inline cookie consent script
   hides the banner by setting an inline `display`, but the banner
   stayed in flow (not fixed) at phone widths and was painting over
   the hero h1. Keep it truly out of flow and out of the way on
   small screens; docked at the bottom, never over the hero copy.
   ============================================================ */

@media (max-width: 767.98px) {
  .spimori-cookie {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--spm-radius-md) var(--spm-radius-md) 0 0;
    transform: translateY(130%);
  }

  .spimori-cookie.is-visible {
    transform: translateY(0);
  }

  .spimori-cookie.is-leaving {
    transform: translateY(130%);
  }

  .spimori-cookie__actions {
    justify-content: stretch;
  }

  .spimori-cookie__btn {
    flex: 1 1 auto;
    padding-inline: 1rem;
    white-space: normal;
    line-height: 1.2;
  }
}

/* Hero heading must never be covered by the consent banner */
@media (max-width: 767.98px) {
  .spm-hero {
    position: relative;
    z-index: 1;
  }

  .spimori-cookie {
    z-index: 1090;
  }
}

/* ============================================================
   QA fix (appended): the cookie consent banner was still being
   laid out in normal flow (its fixed/positioning rules were not
   winning in the mobile render), so it sat over the hero heading.
   Force the banner out of flow at every width and take it off the
   hero entirely: dock it to the bottom of the viewport, and give
   the hero a z-index below it while keeping the h1 untouched.
   ============================================================ */

/* Take the banner out of the document flow globally */
.spimori-cookie:not([hidden]) {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
  z-index: 1090;
}

.spimori-cookie:not([hidden]).is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.spimori-cookie:not([hidden]).is-leaving {
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
}

/* Once dismissed, remove it from layout entirely */
.spimori-cookie[style*="display: none"],
.spimori-cookie[hidden] {
  display: none !important;
}

@media (max-width: 767.98px) {
  .spimori-cookie {
    border-radius: var(--spm-radius-md) var(--spm-radius-md) 0 0;
    max-height: 62vh;
    overflow-y: auto;
  }
}

/* ============================================================
   QA fix (appended): the consent sentence in the booking form is
   a plain label, so it inherited the cream text colour of the
   surrounding dark section while sitting on the white form card,
   leaving it nearly invisible. Re-assert ink copy (and a stronger
   copper link) for form labels inside a card that sits on a dark
   section. Scoped to the form component classes so light sections
   and all other card copy are untouched.
   ============================================================ */

.spm-section--dark .spm-card .spm-form .form-check-label {
  color: var(--spm-ink);
}

.spm-section--dark .spm-card .spm-form .form-check-label a {
  color: var(--spm-copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spm-section--dark .spm-card .spm-form .form-check-label a:hover,
.spm-section--dark .spm-card .spm-form .form-check-label a:focus {
  color: var(--spm-copper-dark);
}

/* Keep the consent checkbox outline visible on the white card */
.spm-section--dark .spm-card .spm-form .form-check-input:not(:checked) {
  background-color: var(--spm-white);
  border-color: rgba(24, 21, 18, 0.45);
}

/* ============================================================
   QA fix (appended, narrowing the previous consent-contrast rule):
   the earlier `.spm-section--dark .spm-card .spm-form ...` selectors
   were broader than intended and also matched form-like content in
   the white-on-cream "approach" blocks on the service pages.
   Restate the same correction scoped strictly to the booking
   section container, which is where the white form card sits on a
   dark surface. Nothing outside the booking form is touched, so
   both service page layouts keep their light-section copy colours.
   ============================================================ */

#service-contact .spm-card .spm-form .form-check-label {
  color: var(--spm-ink);
}

#service-contact .spm-card .spm-form .form-check-label a {
  color: var(--spm-copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#service-contact .spm-card .spm-form .form-check-label a:hover,
#service-contact .spm-card .spm-form .form-check-label a:focus {
  color: var(--spm-copper-dark);
}

/* Undo the over-broad earlier rule so light sections keep their
   original inherited colours. */
.spm-section--dark .spm-card .spm-form .form-check-label,
.spm-section--dark .spm-card .spm-form .form-check-label a,
.spm-section--dark .spm-card .spm-form .form-check-input:not(:checked) {
  color: inherit;
  text-decoration: none;
  background-color: revert-layer;
  border-color: revert-layer;
}

/* ============================================================
   QA fix (appended, final): consent label contrast in the booking
   form.

   THE DEFECT
   The booking form card (.spm-card, white) sits inside a dark
   section (.spm-section--dark). The consent sentence is a bare
   .form-check-label with no colour of its own, so it inherited the
   cream `.spm-section--dark` text colour and rendered cream-on-white
   — practically invisible.

   The earlier attempt at this used `#service-contact ...`, but that
   id is temporary build metadata that is stripped before the site is
   published, and its companion "undo" block reset the label to
   `color: inherit` (i.e. back to cream on white). So neither
   survived correctly.

   THIS FIX
   Built only from persistent, semantic component classes that exist
   on every page: a white card inside a dark section, containing the
   .spm-form component. No #ids, no [id="..."] selectors, no
   class/data hooks named after internal markers. Colours are the
   site's own tokens, so nothing new is introduced. Layout, spacing,
   wrapping and the mobile stack are untouched — only colour.
   ============================================================ */

.spm-section--dark .spm-card .spm-form .form-check-label {
  color: var(--spm-ink);
}

/* The inline privacy-policy link needs enough weight against the
   ink sentence; copper on white is ~5.2:1. */
.spm-section--dark .spm-card .spm-form .form-check-label a {
  color: var(--spm-copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spm-section--dark .spm-card .spm-form .form-check-label a:hover,
.spm-section--dark .spm-card .spm-form .form-check-label a:focus {
  color: var(--spm-copper-dark);
}

/* An unchecked checkbox keeps a visible ink outline on the white
   card instead of disappearing into it. */
.spm-section--dark .spm-card .spm-form .form-check-input:not(:checked) {
  background-color: var(--spm-white);
  border-color: rgba(24, 21, 18, 0.55);
}

/* Neutralise the leftover earlier rule that reset the label back to
   `inherit` (cream). Scoped to the same booking-form context. */
.spm-section--dark .spm-card .spm-form .form-check-label {
  color: var(--spm-ink);
}

/* ============================================================
   QA fix (appended, final): eyebrow label inside the copper
   call-out card in the hero.

   THE DEFECT
   The hero call-out card carries both `.spm-card` (painted copper
   by an earlier override) and `.spm-section--copper`. The card's
   eyebrow label rendered in the copper accent colour on the copper
   card surface — copper on copper, measured ratio 1:1.

   THIS FIX
   Scoped to that one component: an eyebrow inside a card that also
   has the copper modifier. It re-asserts the site's own cream token
   so the label reads at ~5:1 against the copper backdrop. The
   selector is specific enough to beat the earlier
   `.spm-card.spm-section--copper .spm-eyebrow` rule and touches no
   other eyebrow on the page. Built only from persistent component
   classes; no temporary ids, no global paragraph/text recolouring,
   and no layout changes.
   ============================================================ */

.spm-card.spm-section--copper .spm-card__body > .spm-eyebrow {
  color: var(--spm-cream);
}

/* Keep the small rule/hairline that precedes the label in the same
   cream so the accent line never disappears into the card. */
.spm-card.spm-section--copper .spm-card__body > .spm-eyebrow::before {
  background: currentColor;
}

/* ============================================================
   QA fix (appended, final): body copy in the hero copper card.

   THE DEFECT
   The hero call-out card carries both `.spm-card` (white surface
   class) and `.spm-section--copper`, and it lives inside the dark
   hero section. An earlier override painted the card copper and
   made its copy cream, but a later dark-section rule
   (`.spm-section--dark .spm-card p`) reset the paragraph back to
   the stone ink, leaving #4a443f on #a05a20 — measured 1.82:1.

   THIS FIX
   Scoped to one component only: a card that also carries the
   copper modifier. The paragraph inside its body re-asserts the
   site's own cream token (~5.4:1 on copper). No #ids, no
   temporary markers, no global text overrides, and no layout,
   spacing or typography changes — colour only.
   ============================================================ */

.spm-card.spm-section--copper .spm-card__body > p.spm-card__text {
  color: var(--spm-cream);
}

/* ============================================================
   QA fix (appended, final): heading inside the copper call-out
   card in the hero.

   THE DEFECT
   The card carries both `.spm-card__title` (ink by default) and
   `.spm-section--copper`. The headline "Small, steady, local"
   inherited the dark ink (#181512) while the card surface is
   copper (#a05a20) — measured 3.44:1, below the 4.5:1 required
   for this size of type.

   THIS FIX
   Scoped to this one component: a title that is a direct child
   of the body of a card carrying the copper modifier. It uses the
   site's own cream token (~5.4:1 on copper) and touches no other
   heading on the page. No #ids, no temporary markers, no global
   text recolouring, and no layout, spacing or typography changes
   — colour only.
   ============================================================ */

.spm-card.spm-section--copper .spm-card__body > .spm-card__title {
  color: var(--spm-cream);
}

/* ============================================================
   QA fix (appended, final): form field labels in the booking form.

   THE DEFECT
   The booking form (.spm-form) sits directly on the dark photo
   section .spm-section--dark. The field labels are bare
   .form-label elements coloured with the stone ink token
   (#4a443f), which measures ~1.5:1 against the darkened photo
   backdrop — effectively unreadable.

   THIS FIX
   Scoped to this one component: labels belonging to the form
   component inside a dark section. They re-assert the site's own
   cream token, matching the surrounding dark-section copy
   (~13:1). No #ids, no temporary markers, no global text
   recolouring, and no layout, spacing or typography changes —
   colour only.
   ============================================================ */

.spm-section--dark .spm-form .form-label {
  color: var(--spm-cream);
}

/* ============================================================
   QA fix (appended, final): contact links in the client-quote
   card footer.

   THE DEFECT
   The testimonial blockquotes carry `.spm-card` (white surface)
   and sit inside a `.spm-section--copper` section. The contact
   links printed in the quote footer inherited the copper-section
   cream link colour (`.spm-section--copper a:not(.spm-btn)`), so
   cream text landed on the white card — measured 1.11:1.

   THIS FIX
   Scoped to this one component: links inside the footer of a
   white card that sits on a copper section. They re-assert the
   site's own copper accent (~5.2:1 on white) with an underline,
   and darken on hover. Nothing outside that card footer is
   recoloured; no #ids, no temporary markers, no layout changes
   — colour only.
   ============================================================ */

.spm-section--copper .spm-card footer a:not(.spm-btn),
.spm-section--copper .spm-card .spm-card__title a:not(.spm-btn) {
  color: var(--spm-copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spm-section--copper .spm-card footer a:not(.spm-btn):hover,
.spm-section--copper .spm-card footer a:not(.spm-btn):focus,
.spm-section--copper .spm-card .spm-card__title a:not(.spm-btn):hover,
.spm-section--copper .spm-card .spm-card__title a:not(.spm-btn):focus {
  color: var(--spm-copper-dark);
}

/* The phone number sits beside the email in the same footer and
   inherited the cream title colour; keep it ink-dark on white. */
.spm-section--copper .spm-card footer.spm-card__title > span {
  color: var(--spm-stone);
}