:root {
  --cp-ink: #14110f;
  --cp-ink-soft: #2a2521;
  --cp-ink-muted: #4a423b;
  --cp-cream: #f4ede3;
  --cp-cream-dim: #e6dccb;
  --cp-paper: #fbf7f1;
  --cp-copper: #b87333;
  --cp-copper-deep: #8f5622;
  --cp-copper-light: #d99b58;
  --cp-wine: #6b2118;
  --cp-line: rgba(20, 17, 15, 0.14);
  --cp-line-light: rgba(244, 237, 227, 0.18);
  --cp-shadow: 0 24px 60px -30px rgba(20, 17, 15, 0.55);
  --cp-shadow-soft: 0 12px 34px -22px rgba(20, 17, 15, 0.45);
  --cp-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --cp-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --cp-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --cp-radius: 4px;
  --cp-radius-lg: 10px;
  --cp-container: 1240px;
  --cp-gutter: clamp(1.25rem, 4vw, 3.5rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

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

h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.9rem); }

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

a {
  color: var(--cp-copper-deep);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover { color: var(--cp-wine); }

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

.cp-eyebrow {
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cp-copper-deep);
}

.cp-eyebrow--light { color: var(--cp-copper-light); }

.cp-container {
  width: 100%;
  max-width: var(--cp-container);
  margin-inline: auto;
  padding-inline: var(--cp-gutter);
}

.cp-container--wide {
  max-width: 1520px;
}

.cp-section {
  padding-block: clamp(3.5rem, 8vw, 8rem);
  position: relative;
}

.cp-section--cream { background: var(--cp-cream); }
.cp-section--ink { background: var(--cp-ink); color: var(--cp-cream); }
.cp-section--ink h1,
.cp-section--ink h2,
.cp-section--ink h3 { color: var(--cp-cream); }
.cp-section--ink p { color: var(--cp-cream-dim); }
.cp-section--paper { background: var(--cp-paper); }

.cp-rule {
  height: 1px;
  background: var(--cp-line);
  border: 0;
}

.cp-rule--light { background: var(--cp-line-light); }

/* Buttons */
.cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--cp-font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--cp-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cp-btn--copper {
  background: var(--cp-copper);
  color: var(--cp-ink);
}

.cp-btn--copper:hover {
  background: var(--cp-copper-light);
  color: var(--cp-ink);
  transform: translateY(-3px);
}

.cp-btn--ghost {
  background: transparent;
  color: var(--cp-cream);
  border-color: var(--cp-line-light);
}

.cp-btn--ghost:hover {
  background: var(--cp-cream);
  color: var(--cp-ink);
  border-color: var(--cp-cream);
  transform: translateY(-3px);
}

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

.cp-btn--outline:hover {
  background: var(--cp-ink);
  color: var(--cp-cream);
  transform: translateY(-3px);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(251, 247, 241, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cp-line);
}

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

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--cp-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cp-ink);
}

.site-header__meta {
  display: flex;
  gap: 1.75rem;
  font-size: 0.82rem;
  color: var(--cp-ink-muted);
  font-family: var(--cp-font-mono);
  letter-spacing: 0.02em;
}

.site-header__meta strong { color: var(--cp-ink-soft); font-weight: 600; }

.site-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cp-ink-soft);
  font-weight: 500;
}

.site-nav a:hover { color: var(--cp-copper-deep); }

.site-header__burger {
  background: none;
  border: 0;
  font-size: 1.4rem;
  color: var(--cp-ink);
  cursor: pointer;
}

@media (max-width: 991px) {
  .site-header__meta { display: none; }
  .site-nav ul { display: none; }
}

/* Hero */
.cp-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--cp-cream);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.cp-hero__index {
  position: absolute;
  top: 3rem;
  right: var(--cp-gutter);
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--cp-copper-light);
}

.cp-hero__title {
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--cp-cream);
  max-width: 15ch;
}

.cp-hero__title em {
  font-style: italic;
  color: var(--cp-copper-light);
}

.cp-hero__lead {
  max-width: 46ch;
  font-size: 1.08rem;
  color: var(--cp-cream-dim);
  margin-top: 1.6rem;
}

.cp-hero__aside {
  position: absolute;
  bottom: 3rem;
  left: var(--cp-gutter);
  display: flex;
  gap: 2.5rem;
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cp-cream-dim);
  text-transform: uppercase;
}

.cp-hero__aside span b {
  display: block;
  font-family: var(--cp-font-display);
  font-size: 1.9rem;
  letter-spacing: 0;
  color: var(--cp-copper-light);
  text-transform: none;
}

/* Slider */
.cp-slider { position: relative; }

.cp-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.cp-slider__track::-webkit-scrollbar { display: none; }

.cp-slider__slide {
  min-width: 100%;
  scroll-snap-align: start;
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--cp-ink);
  color: var(--cp-cream);
}

.cp-slider__media {
  min-height: 480px;
  background-size: cover;
  background-position: center;
}

.cp-slider__body {
  padding: clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cp-slider__num {
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--cp-copper-light);
  margin-bottom: 1.25rem;
}

.cp-slider__controls {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

.cp-slider__dot {
  width: 42px;
  height: 3px;
  border: 0;
  background: rgba(244, 237, 227, 0.25);
  cursor: pointer;
  transition: background 0.3s ease;
}

.cp-slider__dot.is-active { background: var(--cp-copper-light); }

@media (max-width: 767px) {
  .cp-slider__slide { grid-template-columns: 1fr; }
  .cp-slider__media { min-height: 260px; }
}

/* Stat band */
.cp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cp-line);
  border: 1px solid var(--cp-line);
}

.cp-stats__cell {
  background: var(--cp-paper);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.cp-stats__num {
  font-family: var(--cp-font-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--cp-copper-deep);
  line-height: 1;
}

.cp-stats__label {
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cp-ink-muted);
  margin-top: 0.75rem;
}

@media (max-width: 767px) {
  .cp-stats { grid-template-columns: 1fr; }
}

/* Bento */
.cp-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: minmax(180px, auto);
  gap: 1.1rem;
}

.cp-bento__cell {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-paper);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

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

.cp-bento__cell--feature {
  grid-row: span 2;
  background: var(--cp-ink);
  color: var(--cp-cream);
}

.cp-bento__cell--feature h3 { color: var(--cp-cream); }

.cp-bento__cell--photo {
  background-size: cover;
  background-position: center;
  min-height: 220px;
  color: var(--cp-cream);
  display: flex;
  align-items: flex-end;
}

.cp-bento__cell--copper {
  background: var(--cp-copper);
  color: var(--cp-ink);
  border-color: var(--cp-copper);
}

.cp-bento__tag {
  font-family: var(--cp-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.82;
}

@media (max-width: 991px) {
  .cp-bento { grid-template-columns: 1fr 1fr; }
  .cp-bento__cell--feature { grid-row: span 1; grid-column: span 2; }
}

@media (max-width: 575px) {
  .cp-bento { grid-template-columns: 1fr; }
  .cp-bento__cell--feature { grid-column: span 1; }
}

/* Split */
.cp-split {
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.cp-split--reverse { grid-template-columns: 38fr 62fr; }
.cp-split--reverse .cp-split__visual { order: 2; }

.cp-split__visual {
  position: relative;
}

.cp-split__visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--cp-radius-lg);
}

.cp-split__float {
  position: absolute;
  bottom: -2rem;
  right: -1.5rem;
  background: var(--cp-copper);
  color: var(--cp-ink);
  padding: 1.25rem 1.5rem;
  border-radius: var(--cp-radius-lg);
  max-width: 230px;
  font-family: var(--cp-font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  box-shadow: var(--cp-shadow);
}

.cp-split__float strong {
  display: block;
  font-family: var(--cp-font-display);
  font-size: 1.7rem;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .cp-split,
  .cp-split--reverse { grid-template-columns: 1fr; }
  .cp-split--reverse .cp-split__visual { order: 0; }
  .cp-split__float { position: static; margin-top: 1rem; }
}

/* Services / article cards */
.cp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

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

.cp-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--cp-shadow);
  border-color: var(--cp-copper);
}

.cp-card__media {
  aspect-ratio: 16 / 10;
  background: var(--cp-cream-dim);
  overflow: hidden;
}

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

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

.cp-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cp-card__index {
  font-family: var(--cp-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--cp-copper-deep);
  margin-bottom: 0.6rem;
}

.cp-card__price {
  font-family: var(--cp-font-display);
  font-size: 1.4rem;
  color: var(--cp-wine);
  margin-top: auto;
  padding-top: 1rem;
}

.cp-card__link {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-top: 0.75rem;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

@media (max-width: 991px) {
  .cp-grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
  .cp-grid-3 { grid-template-columns: 1fr; }
}

/* Timeline / process */
.cp-process {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.cp-process__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding-block: 1.9rem;
  border-top: 1px solid var(--cp-line);
}

.cp-process__item::before {
  content: "0" counter(step);
  font-family: var(--cp-font-mono);
  font-size: 1.4rem;
  color: var(--cp-copper-deep);
  letter-spacing: 0.05em;
}

.cp-process__item:last-child { border-bottom: 1px solid var(--cp-line); }

.cp-process__title {
  font-family: var(--cp-font-display);
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}

@media (max-width: 575px) {
  .cp-process__item { grid-template-columns: 60px 1fr; }
}

/* Pricing table */
.cp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  align-items: stretch;
}

.cp-price {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-paper);
}

.cp-price--featured {
  background: var(--cp-ink);
  color: var(--cp-cream);
  border-color: var(--cp-ink);
  transform: translateY(-12px);
}

.cp-price--featured h3 { color: var(--cp-cream); }
.cp-price--featured p,
.cp-price--featured li { color: var(--cp-cream-dim); }

.cp-price__amount {
  font-family: var(--cp-font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--cp-copper-deep);
  line-height: 1;
  margin-block: 1rem;
}

.cp-price--featured .cp-price__amount { color: var(--cp-copper-light); }

.cp-price__list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
  font-size: 0.92rem;
}

.cp-price__list li {
  padding-block: 0.5rem;
  border-bottom: 1px dashed var(--cp-line);
}

.cp-price--featured .cp-price__list li { border-color: var(--cp-line-light); }

@media (max-width: 991px) {
  .cp-price-grid { grid-template-columns: 1fr; }
  .cp-price--featured { transform: none; }
}

/* Gallery */
.cp-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 0.9rem;
}

.cp-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--cp-radius-lg);
  background: var(--cp-cream-dim);
}

.cp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cp-gallery__item:hover img { transform: scale(1.07); }

.cp-gallery__item--tall { grid-row: span 2; }
.cp-gallery__item--wide { grid-column: span 2; }

.cp-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(rgba(20, 17, 15, 0), rgba(20, 17, 15, 0.86));
  color: var(--cp-cream);
  font-size: 0.82rem;
  font-family: var(--cp-font-mono);
  letter-spacing: 0.03em;
}

@media (max-width: 767px) {
  .cp-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .cp-gallery__item--wide { grid-column: span 2; }
}

/* Testimonials */
.cp-quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  background: var(--cp-cream);
  border-left: 3px solid var(--cp-copper);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--cp-radius-lg);
}

.cp-quote__text {
  font-family: var(--cp-font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  color: var(--cp-ink);
  font-style: italic;
  line-height: 1.35;
}

.cp-quote__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--cp-font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cp-ink-muted);
}

.cp-quote__author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

/* Team */
.cp-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.cp-team__member img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--cp-radius-lg);
  margin-bottom: 1rem;
}

.cp-team__name {
  font-family: var(--cp-font-display);
  font-size: 1.25rem;
  margin: 0;
}

.cp-team__role {
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-copper-deep);
}

@media (max-width: 991px) {
  .cp-team { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
  .cp-team { grid-template-columns: 1fr; }
}

/* FAQ */
.cp-faq {
  border-top: 1px solid var(--cp-line);
}

.cp-faq__item {
  border-bottom: 1px solid var(--cp-line);
}

.cp-faq__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.5rem 0;
  font-family: var(--cp-font-display);
  font-size: 1.25rem;
  color: var(--cp-ink);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
}

.cp-faq__q i { color: var(--cp-copper-deep); transition: transform 0.3s ease; }
.cp-faq__item.is-open .cp-faq__q i { transform: rotate(45deg); }

.cp-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  color: var(--cp-ink-soft);
}

.cp-faq__item.is-open .cp-faq__a {
  max-height: 500px;
  padding-bottom: 1.5rem;
}

/* Forms */
.cp-form {
  display: grid;
  gap: 1.1rem;
}

.cp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.cp-field label {
  display: block;
  font-family: var(--cp-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-ink-muted);
  margin-bottom: 0.5rem;
}

.cp-field input,
.cp-field select,
.cp-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  background: var(--cp-paper);
  font-family: var(--cp-font-body);
  font-size: 0.95rem;
  color: var(--cp-ink);
}

.cp-field input:focus,
.cp-field select:focus,
.cp-field textarea:focus {
  outline: 2px solid var(--cp-copper);
  outline-offset: 1px;
  border-color: var(--cp-copper);
}

.cp-field--error input,
.cp-field--error textarea {
  border-color: #a2211a;
}

.cp-form__note {
  font-size: 0.8rem;
  color: var(--cp-ink-muted);
}

@media (max-width: 575px) {
  .cp-form__row { grid-template-columns: 1fr; }
}

/* CTA band */
.cp-cta {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--cp-cream);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 8rem);
}

.cp-cta h2 { color: var(--cp-cream); }

/* Footer */
.site-footer {
  background: var(--cp-ink);
  color: var(--cp-cream-dim);
  padding-top: clamp(3rem, 6vw, 5rem);
  font-size: 0.9rem;
}

.site-footer a { color: var(--cp-cream-dim); }
.site-footer a:hover { color: var(--cp-copper-light); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding-bottom: 3rem;
}

.site-footer__title {
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cp-copper-light);
  margin-bottom: 1.1rem;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.site-footer__legal {
  border-top: 1px solid var(--cp-line-light);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--cp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(230, 220, 203, 0.7);
}

@media (max-width: 991px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* Cookie banner */
.cp-cookie {
  position: fixed;
  z-index: 1080;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 2rem));
  background: var(--cp-ink);
  color: var(--cp-cream);
  border: 1px solid var(--cp-copper);
  border-radius: var(--cp-radius-lg);
  box-shadow: var(--cp-shadow);
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.cp-cookie.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.cp-cookie__mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cp-copper);
  color: var(--cp-ink);
  font-size: 1.15rem;
}

.cp-cookie__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--cp-cream-dim);
  margin: 0;
}

.cp-cookie__text a { color: var(--cp-copper-light); text-decoration: underline; }

.cp-cookie__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cp-cookie__btn {
  border: 1px solid var(--cp-copper);
  background: transparent;
  color: var(--cp-copper-light);
  padding: 0.65rem 1.25rem;
  border-radius: var(--cp-radius);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.cp-cookie__btn:hover { background: var(--cp-copper); color: var(--cp-ink); }

.cp-cookie__btn--accept {
  background: var(--cp-copper);
  color: var(--cp-ink);
}

.cp-cookie__btn--accept:hover {
  background: var(--cp-copper-light);
  border-color: var(--cp-copper-light);
}

@media (max-width: 767px) {
  .cp-cookie {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .cp-cookie__mark { display: none; }
  .cp-cookie__actions { justify-content: flex-start; }
}

/* Utility */
.cp-mt-lg { margin-top: clamp(2rem, 5vw, 4rem); }
.cp-text-right { text-align: right; }
.cp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.cp-reveal.is-visible { opacity: 1; transform: translateY(0); }

[cunset],
.cp-tagline {
  font-family: var(--cp-font-mono);
  letter-spacing: 0.06em;
}
/* Footer text contrast fix: paragraphs inherit light color on dark footer background */
.site-footer p,
.site-footer .site-footer__legal p {
  color: var(--cp-cream-dim);
}

.site-footer__legal,
.site-footer__legal p {
  color: rgba(230, 220, 203, 0.92);
}

/* ===== Blog page fixes ===== */

/* 1. Timeline steps: keep the description inside the content column
      instead of letting it auto-place into the 90px counter track. */
.cp-process__item > p {
  grid-column: 2;
  margin-bottom: 0;
}

/* 2. Readability inside dark sections: light text on light card surfaces. */
.cp-section--ink .cp-card {
  color: var(--cp-ink);
}
.cp-section--ink .cp-card h3,
.cp-section--ink .cp-card h3 a {
  color: var(--cp-ink);
}
.cp-section--ink .cp-card p {
  color: var(--cp-ink-soft);
}
.cp-section--ink .cp-card p.cp-card__index {
  color: var(--cp-copper-deep);
}

/* 3. Hero aside list items: the global `p` colour rule was overriding the
      inherited light colour of the dark hero. */
.cp-hero .cp-hero__aside p {
  color: var(--cp-cream-dim);
}
.cp-hero .cp-hero__aside p.cp-eyebrow {
  color: var(--cp-copper-light);
}

/* 4. Dark CTA band: paragraphs, labels and notes need light colours. */
.cp-cta p,
.cp-cta p.cp-form__note,
.cp-cta .cp-form .cp-form__note {
  color: var(--cp-cream-dim);
}
.cp-cta .cp-field label {
  color: var(--cp-cream-dim);
}
.cp-cta a,
.cp-cta .cp-form a {
  color: var(--cp-copper-light);
  text-decoration: underline;
}
.cp-cta a:hover,
.cp-cta .cp-form a:hover {
  color: var(--cp-cream);
}

/* 5. Gallery captions: darker backdrop so the light caption text stays legible. */
.cp-gallery__caption {
  background-color: rgba(20, 17, 15, 0.92);
  background-image: linear-gradient(rgba(20, 17, 15, 0.9), rgba(20, 17, 15, 0.98));
  color: var(--cp-cream);
  text-shadow: 0 1px 2px rgba(20, 17, 15, 0.7);
}

/* 6. Footer: force the light cream text on every paragraph in the dark footer. */
footer.site-footer p,
footer.site-footer .site-footer__legal p,
footer.site-footer .site-footer__grid p {
  color: var(--cp-cream-dim);
}
footer.site-footer .site-footer__legal,
footer.site-footer .site-footer__legal p {
  color: rgba(230, 220, 203, 0.95);
}

/* ===== Contrast fixes: split float copper badge ===== */
/* The floating stat badge sits on the copper surface, so the stat colours
   (meant for a light paper background) must be darkened for legibility. */
.cp-split__float .cp-stats__num {
  color: var(--cp-ink);
}
.cp-split__float .cp-stats__label {
  color: var(--cp-ink-soft);
}

/* ===== Contrast fixes: quote block on cream card inside dark section ===== */
/* .cp-section--ink p forces a light colour that is unreadable on the
   light .cp-quote background, so restore the intended dark text. */
.cp-section--ink .cp-quote__text {
  color: var(--cp-ink);
}
.cp-section--ink .cp-quote__author {
  color: var(--cp-ink-muted);
}

/* ===== Contrast fixes: light CTA band variant ===== */
/* The CTA markup uses .cp-section--cream here, so the dark-section text
   colours applied to .cp-cta must be reverted to dark ink on cream. */
.cp-cta.cp-section--cream {
  color: var(--cp-ink);
}
.cp-cta.cp-section--cream h2,
.cp-cta.cp-section--cream h2.cp-display {
  color: var(--cp-ink);
}
.cp-cta.cp-section--cream p,
.cp-cta.cp-section--cream p.cp-form__note,
.cp-cta.cp-section--cream .cp-form .cp-form__note {
  color: var(--cp-ink-soft);
}
.cp-cta.cp-section--cream .cp-eyebrow {
  color: var(--cp-copper-deep);
}
.cp-cta.cp-section--cream .cp-field label {
  color: var(--cp-ink-muted);
}

/* ===== Cuisson sous vide page: bento contrast on dark section ===== */

/* Light bento cards sitting inside the dark ink section must use dark text. */
.cp-section--ink .cp-bento__cell {
  color: var(--cp-ink-soft);
}
.cp-section--ink .cp-bento__cell h3 {
  color: var(--cp-ink);
}
.cp-section--ink .cp-bento__cell p {
  color: var(--cp-ink-soft);
}
.cp-section--ink .cp-bento__cell .cp-bento__tag {
  color: var(--cp-ink-muted);
  opacity: 1;
}

/* Dark feature and photo cells keep light text. */
.cp-section--ink .cp-bento__cell--feature,
.cp-section--ink .cp-bento__cell--feature h3 {
  color: var(--cp-cream);
}
.cp-section--ink .cp-bento__cell--feature p {
  color: var(--cp-cream-dim);
}
.cp-section--ink .cp-bento__cell--feature .cp-bento__tag {
  color: var(--cp-copper-light);
}

.cp-section--ink .cp-bento__cell--photo,
.cp-section--ink .cp-bento__cell--photo h3 {
  color: var(--cp-cream);
}
.cp-section--ink .cp-bento__cell--photo .cp-bento__tag {
  color: var(--cp-copper-light);
}

/* Copper cell: darker copper so light text passes the 4.5:1 contrast ratio. */
.cp-section--ink .cp-bento__cell--copper {
  background: var(--cp-copper-deep);
  border-color: var(--cp-copper-deep);
  color: var(--cp-cream);
}
.cp-section--ink .cp-bento__cell--copper h3,
.cp-section--ink .cp-bento__cell--copper p,
.cp-section--ink .cp-bento__cell--copper .cp-bento__tag {
  color: var(--cp-cream);
  opacity: 1;
}

/* Ghost button on the photographic hero: darken the backdrop for legibility. */
.cp-hero .cp-btn--ghost {
  background: rgba(20, 17, 15, 0.45);
}

/* Inline form confirmation feedback. */
.cp-form__feedback {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cp-copper);
  border-radius: var(--cp-radius);
  background: rgba(184, 115, 51, 0.16);
  color: var(--cp-cream);
  font-size: 0.88rem;
}

/* ===== Contrast fix: eyebrow labels inside light cards ===== */
/* The default --cp-copper-deep eyebrow colour lands at ~3.9:1 against the
   paper/cream card surfaces, just under the 4.5:1 minimum for small text.
   A darker copper keeps the brand tone while restoring legibility. */
.cp-card .cp-eyebrow,
.cp-card p.cp-eyebrow {
  color: #6f4419;
}

/* Same treatment for eyebrow labels used directly on the light section
   backgrounds (paper / cream), which share the low-contrast problem. */
.cp-section--paper p.cp-eyebrow,
.cp-section--cream p.cp-eyebrow {
  color: #6f4419;
}

/* ===== Contrast fix: copper floating stat badge ===== */
/* The label sits on the copper surface; --cp-ink-soft only reached 4.0:1,
   so use the darkest ink to clear the 4.5:1 threshold. */
.cp-split__float .cp-stats__label {
  color: var(--cp-ink);
}

/* ===== Homepage contrast fixes ===== */

/* Slider slides sit on the dark ink surface; restore light text. */
.cp-slider__slide h2,
.cp-slider__slide .cp-display { color: var(--cp-cream); }
.cp-slider__slide p { color: var(--cp-cream-dim); }
.cp-slider__slide p.cp-eyebrow { color: var(--cp-copper-light); }
.cp-slider__slide span.cp-slider__num { color: var(--cp-copper-light); }
.cp-slider__body .cp-btn--outline {
  color: var(--cp-cream);
  border-color: var(--cp-cream);
}
.cp-slider__body .cp-btn--outline:hover {
  background: var(--cp-cream);
  color: var(--cp-ink);
}

/* Bento feature cell (dark ink card) inside the paper section. */
.cp-bento__cell--feature p { color: var(--cp-cream-dim); }
.cp-bento__cell--feature .cp-card__price { color: var(--cp-copper-light); }

/* Copper bento cell: dark ink text keeps the 4.5:1 ratio. */
.cp-bento__cell--copper .cp-stats__num,
.cp-bento__cell--copper .cp-stats__label {
  color: var(--cp-ink);
  opacity: 1;
}

/* Split float badge sits on a copper plate: darken the label. */
.cp-split__float .cp-stats__label { color: var(--cp-ink); }

/* Photo bento tag: give the light text its own dark plate. */
.cp-bento__cell--photo .cp-bento__tag {
  background: rgba(20, 17, 15, 0.72);
  color: var(--cp-cream);
  padding: 0.3rem 0.7rem;
  border-radius: var(--cp-radius);
  opacity: 1;
}

/* CTA band with dark photo backdrop: light buttons + eyebrow. */
.cp-cta .cp-btn--outline {
  color: var(--cp-cream);
  border-color: var(--cp-cream);
}
.cp-cta .cp-btn--outline:hover {
  background: var(--cp-cream);
  color: var(--cp-ink);
}
.cp-cta .cp-eyebrow--light { color: var(--cp-cream); }

/* Cookie banner text must stay light on the dark banner. */
.cp-cookie p,
.cp-cookie .cp-cookie__text p { color: var(--cp-cream-dim); }

/* Hero aside contact block: dark plate so the light text stays readable
   over whatever part of the hero photo sits behind it. */
.cp-hero__aside {
  background: rgba(20, 17, 15, 0.72);
  padding: 1rem 1.25rem;
  border-radius: var(--cp-radius-lg);
}
.cp-hero__aside p { color: var(--cp-cream-dim); }
.cp-hero__aside p.cp-eyebrow { color: var(--cp-copper-light); }

/* ===== Paroconvecteurs page: contrast repairs ===== */

/* 1. Hero dossier badge sits directly over the photo. Give it its own dark
      plate so the small mono label always clears 4.5:1 over any image area. */
.cp-hero .cp-hero__index,
span.cp-hero__index {
  background: rgba(20, 17, 15, 0.86);
  color: var(--cp-cream);
  padding: 0.45rem 0.85rem;
  border-radius: var(--cp-radius);
  border: 1px solid rgba(244, 237, 227, 0.22);
}

/* 2. Primary hero CTA: dark ink text on the mid-tone copper surface was too
      weak over the photographic backdrop. Deeper copper + cream text clears
      the ratio both on the flat surface and over the hero imagery. */
.cp-hero .cp-btn--copper {
  background: var(--cp-copper-deep);
  border-color: var(--cp-copper-deep);
  color: var(--cp-cream);
}
.cp-hero .cp-btn--copper:hover,
.cp-hero .cp-btn--copper:focus-visible {
  background: var(--cp-ink);
  border-color: var(--cp-cream);
  color: var(--cp-cream);
}

/* 3. Small mono uppercase eyebrows on the light cream / paper surfaces:
      a very dark copper keeps the brand accent while restoring legibility. */
.cp-section--cream p.cp-eyebrow,
.cp-section--paper p.cp-eyebrow,
.cp-section--cream .cp-eyebrow,
.cp-section--paper .cp-eyebrow,
.cp-price .cp-eyebrow,
.cp-card .cp-eyebrow {
  color: #3a2110;
}

/* Light eyebrow variants always sit on dark surfaces: keep them light. */
.cp-eyebrow.cp-eyebrow--light,
.cp-section--cream .cp-eyebrow.cp-eyebrow--light,
.cp-section--paper .cp-eyebrow.cp-eyebrow--light,
.cp-price .cp-eyebrow.cp-eyebrow--light,
.cp-card .cp-eyebrow.cp-eyebrow--light {
  color: var(--cp-copper-light);
}

/* ===== Homepage slider: slide layout repair =====
   The slide markup wraps its content in a single Bootstrap .row (with
   .col-lg-6 image / .col-lg-6 body columns), but .cp-slider__slide was set to
   `display:grid; grid-template-columns: 1.05fr 0.95fr`. That made the .row the
   only grid item, so it was confined to the ~1.05fr track while the second
   track stayed empty — squeezing the text column into a one-word-per-line
   sliver on desktop. The slide is a single-column container; the inner
   Bootstrap row handles the image/text split (and the mobile stack). */
.cp-slider__slide {
  display: block;
  grid-template-columns: none;
  width: 100%;
}

.cp-slider__slide .cp-slider__body {
  max-width: 100%;
}

/* Keep the reading column from collapsing next to the image on desktop. */
@media (min-width: 992px) {
  .cp-slider__slide .cp-slider__body {
    min-width: 0;
  }
  .cp-slider__slide .cp-slider__body > p {
    max-width: 62ch;
  }
}

/* ===== Bento photo cell layout repair =====
   .cp-bento__cell--photo was declared as a row flex container
   (`display:flex; align-items:flex-end`), so every child of the card —
   image, tag, heading, paragraph and price — was placed on a single
   horizontal line. The text block was pushed past the right edge of the
   cell, ran underneath the neighbouring copper "Atelier" cell and was
   clipped by the viewport/container edge.
   The photo cell is a single-column card: the photo fills the cell as a
   background plate and the text stacks on top of it at the bottom. */
.cp-bento__cell--photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  min-height: 220px;
  isolation: isolate;
}

/* The <img> is the cell's backdrop, so it is taken out of the flow and
   stretched to cover the whole card instead of sitting in the text row. */
.cp-bento__cell--photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: 0;
}

/* Dark scrim so the cream text stays legible wherever the photo is light. */
.cp-bento__cell--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(20, 17, 15, 0.15),
    rgba(20, 17, 15, 0.82)
  );
  z-index: 1;
  pointer-events: none;
}

/* Keep the stacked text above the photo and the scrim. */
.cp-bento__cell--photo > *:not(img) {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.cp-bento__cell--photo h3,
.cp-bento__cell--photo p {
  color: var(--cp-cream);
}

.cp-bento__cell--photo .cp-card__price {
  color: var(--cp-copper-light);
}

/* ===== Team section layout repair =====
   The team grid was declared with `repeat(4, 1fr)` for only three members, so
   the trio was pushed onto four tracks and the fourth column stayed empty.
   Worse, on narrow viewports the grid collapsed to a single full-width column,
   making every portrait (aspect-ratio 3 / 4) roughly 1.33x the screen width in
   height — three oversized cards stacked vertically for ~2300px of wasted
   space.

   The team block is a three-up grid: one column per member on wide screens,
   a compact two-up grid on tablets, and still a single readable column on the
   smallest phones but with the portrait capped so the cards stop towering. */
.cp-team {
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

@media (max-width: 991px) {
  .cp-team {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 575px) {
  .cp-team {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Cap the portrait height so each member card stays a reasonable size
     instead of forcing a full-width 3:4 image. */
  .cp-team__member img {
    aspect-ratio: 4 / 3;
    max-height: 260px;
    margin-bottom: 0.75rem;
  }
}

/* ===== Team section: compact mobile layout =====
   The previous override still stacked three members in a single full-width
   column on the smallest phones, so each card (portrait image + name + role +
   bio) consumed the entire viewport width and the trio towered vertically for
   more than two thousand pixels. A two-up grid on phones keeps each member
   card compact and roughly halves the section height while staying readable. */
@media (max-width: 575px) {
  .cp-team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.9rem;
  }

  .cp-team__member {
    min-width: 0;
  }

  /* Compact square-ish portraits so the two-up cards stay short. The <img>
     carries the global `max-width: 100%`; the extra `width: 100%` guard keeps
     it filling its (now narrower) grid track. */
  .cp-team__member img {
    width: 100%;
    max-height: none;
    aspect-ratio: 1 / 1;
    margin-bottom: 0.6rem;
  }

  .cp-team__name {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .cp-team__role {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
  }

  /* Hide nothing, but trim the long bio spacing so the cards stay even. */
  .cp-team__member p {
    margin-bottom: 0.5rem;
  }
}

/* ===== Contrast fix: ghost buttons on light surfaces =====
   .cp-btn--ghost is styled for dark backdrops (cream text + light hairline
   border). When the same component is used inside a light paper/cream section
   the cream text lands at ~1.1:1 against the background, so the label is
   effectively invisible. Scoped to the ghost button component only, and only
   in light-section contexts: on dark (.cp-section--ink) and photographic
   backdrops the cream treatment is left untouched. */
.cp-section--paper .cp-btn--ghost,
.cp-section--cream .cp-btn--ghost,
.cp-cta.cp-section--paper .cp-btn--ghost,
.cp-cta.cp-section--cream .cp-btn--ghost {
  color: var(--cp-ink);
  border-color: var(--cp-ink);
}

.cp-section--paper .cp-btn--ghost:hover,
.cp-section--paper .cp-btn--ghost:focus-visible,
.cp-section--cream .cp-btn--ghost:hover,
.cp-section--cream .cp-btn--ghost:focus-visible,
.cp-cta.cp-section--paper .cp-btn--ghost:hover,
.cp-cta.cp-section--paper .cp-btn--ghost:focus-visible,
.cp-cta.cp-section--cream .cp-btn--ghost:hover,
.cp-cta.cp-section--cream .cp-btn--ghost:focus-visible {
  background: var(--cp-ink);
  color: var(--cp-cream);
  border-color: var(--cp-ink);
}

/* ===== Contrast fix: eyebrow labels inside the dark slider slides =====
   .cp-slider__slide renders on the dark --cp-ink surface and sets light text,
   but the slide lives inside a .cp-section--cream wrapper. The later
   "light surfaces" rule (.cp-section--cream p.cp-eyebrow { #3a2110 }) is more
   specific for the nested <p>, so the eyebrow lost its light colour and fell
   to ~1.3:1 against the ink background.
   Scope the correction to eyebrows inside the slider body only, and restore
   the light copper accent already used for dark backdrops. */
.cp-slider__slide .cp-slider__body p.cp-eyebrow,
.cp-slider__slide .cp-slider__body p.cp-eyebrow.cp-eyebrow--light {
  color: var(--cp-copper-light);
}