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

:root {
  --cocoa-900: #21120c;
  --cocoa-800: #2f1b12;
  --cocoa-700: #452a1c;
  --caramel-600: #8f5223;
  --caramel-500: #b8713a;
  --caramel-300: #dca678;
  --gold-400: #d9a84e;
  --berry-600: #7a2740;
  --cream-100: #fbf6ee;
  --cream-200: #f4ead9;
  --cream-300: #e8d8c1;
  --ink: #1c100a;
  --line-soft: rgba(33, 18, 12, 0.12);
  --line-strong: rgba(33, 18, 12, 0.28);
  --shadow-sm: 0 6px 18px rgba(33, 18, 12, 0.08);
  --shadow-md: 0 18px 44px rgba(33, 18, 12, 0.14);
  --shadow-lg: 0 34px 80px rgba(33, 18, 12, 0.22);
  --radius-s: 10px;
  --radius-m: 20px;
  --radius-l: 34px;
  --radius-pill: 999px;
  --shell: 1200px;
  --gutter: clamp(18px, 4vw, 44px);
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--cream-100);
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--cocoa-900);
  line-height: 1.14;
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.85rem);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.24rem, 2vw, 1.6rem);
  font-weight: 500;
}

p {
  margin: 0 0 1.1rem;
}

a {
  color: var(--caramel-600);
  text-decoration: none;
  transition: color 0.25s var(--ease-soft);
}

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

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

ul,
ol {
  padding-left: 1.15rem;
}

:focus-visible {
  outline: 3px solid var(--berry-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.shell--wide {
  max-width: 1380px;
}

.band {
  position: relative;
  padding: clamp(58px, 8vw, 118px) 0;
}

.band--tight {
  padding: clamp(40px, 5vw, 70px) 0;
}

.band--cream {
  background-color: var(--cream-100);
}

.band--sand {
  background-color: var(--cream-200);
}

.band--dark {
  background-color: var(--cocoa-900);
  color: var(--cream-200);
}

.band--dark h1,
.band--dark h2,
.band--dark h3,
.band--dark h4 {
  color: #ffffff;
}

.band--dark a {
  color: var(--gold-400);
}

.band--dark a:hover,
.band--dark a:focus-visible {
  color: #ffffff;
}

.media-band {
  background-color: var(--cocoa-800);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}

.media-band h1,
.media-band h2,
.media-band h3 {
  color: #ffffff;
}

.media-band p {
  color: #f3e7d6;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--caramel-600);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background-color: var(--gold-400);
  display: inline-block;
}

.band--dark .eyebrow,
.media-band .eyebrow {
  color: var(--gold-400);
}

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.75;
  color: var(--cocoa-700);
  max-width: 62ch;
}

.band--dark .lede,
.media-band .lede {
  color: #ecdfd0;
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

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

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .lede {
  margin-left: auto;
  margin-right: auto;
}

.btn-oven {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--caramel-600);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-soft), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-soft);
}

.btn-oven:hover,
.btn-oven:focus-visible {
  background-color: var(--berry-600);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-oven--line {
  background-color: transparent;
  border: 2px solid var(--caramel-600);
  color: var(--caramel-600);
  padding: 13px 28px;
}

.btn-oven--line:hover,
.btn-oven--line:focus-visible {
  background-color: var(--caramel-600);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.band--dark .btn-oven--line,
.media-band .btn-oven--line {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.band--dark .btn-oven--line:hover,
.media-band .btn-oven--line:hover,
.band--dark .btn-oven--line:focus-visible,
.media-band .btn-oven--line:focus-visible {
  background-color: var(--gold-400);
  color: var(--cocoa-900);
}

.btn-oven--light {
  background-color: var(--cream-100);
  color: var(--cocoa-900);
}

.btn-oven--light:hover,
.btn-oven--light:focus-visible {
  background-color: #ffffff;
  color: var(--berry-600);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}

.hero-stage {
  position: relative;
  min-height: clamp(560px, 82vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--cocoa-900);
}

.hero-stage__slides .carousel-item {
  min-height: clamp(560px, 82vh, 860px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-stage__inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding: clamp(60px, 9vw, 120px) 0;
}

.hero-stage h1 {
  color: #ffffff;
  margin-bottom: 20px;
}

.hero-stage p {
  color: #f1e5d7;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  max-width: 58ch;
}

.hero-stage .carousel-indicators {
  bottom: 32px;
  margin-bottom: 0;
}

.hero-stage .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.42);
  opacity: 1;
}

.hero-stage .carousel-indicators .active {
  background-color: var(--gold-400);
}

.hero-stage .carousel-control-prev,
.hero-stage .carousel-control-next {
  width: 62px;
  opacity: 0.85;
}

.hero-stage .carousel-control-prev:hover,
.hero-stage .carousel-control-next:hover {
  opacity: 1;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.32);
  background-color: rgba(33, 18, 12, 0.42);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-badges i {
  color: var(--gold-400);
}

.trust-strip {
  background-color: var(--cocoa-800);
  color: var(--cream-200);
  padding: 26px 0;
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #eadfce;
}

.trust-strip__item i {
  font-size: 1.4rem;
  color: var(--gold-400);
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

.split__media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background-color: var(--cream-300);
}

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

.split__media--wide {
  aspect-ratio: 16 / 11;
}

.split__tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  background-color: rgba(33, 18, 12, 0.82);
  color: #ffffff;
  border-radius: var(--radius-m);
  padding: 14px 22px;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
}

.stat-card {
  padding: 26px 24px;
  border-radius: var(--radius-m);
  background-color: var(--cream-200);
  border: 1px solid var(--line-soft);
}

.band--dark .stat-card,
.media-band .stat-card {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--caramel-600);
  line-height: 1;
  margin-bottom: 8px;
}

.band--dark .stat-card__value,
.media-band .stat-card__value {
  color: var(--gold-400);
}

.stat-card__label {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--cocoa-700);
}

.band--dark .stat-card__label,
.media-band .stat-card__label {
  color: #e8dbcb;
}

.card-rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.pastry-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-soft);
}

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

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

.pastry-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

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

.pastry-card__flag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background-color: var(--berry-600);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pastry-card__body {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pastry-card__body h3 {
  margin-bottom: 10px;
}

.pastry-card__body p {
  color: var(--cocoa-700);
  font-size: 0.96rem;
}

.pastry-card__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pastry-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--caramel-600);
}

.pastry-card__link {
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.process-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  counter-reset: step;
}

.process-node {
  position: relative;
  padding: 30px 24px;
  border-radius: var(--radius-m);
  background-color: #ffffff;
  border: 1px solid var(--line-soft);
}

.band--sand .process-node {
  background-color: #ffffff;
}

.process-node__index {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--cream-300);
  line-height: 1;
  margin-bottom: 14px;
}

.process-node h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}

.process-node p {
  font-size: 0.93rem;
  color: var(--cocoa-700);
  margin-bottom: 0;
}

.process-node::after {
  content: "";
  position: absolute;
  top: 42px;
  right: -18px;
  width: 20px;
  height: 1px;
  background-color: var(--line-strong);
}

.process-node:last-child::after {
  display: none;
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 18px;
}

.mosaic__cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--cream-300);
}

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

.mosaic__cell:hover img {
  transform: scale(1.07);
}

.mosaic__cell--tall {
  grid-row: span 2;
}

.mosaic__cell--wide {
  grid-column: span 2;
}

.mosaic__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 20px 18px;
  background: linear-gradient(to top, rgba(33, 18, 12, 0.88), rgba(33, 18, 12, 0));
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
}

.quote-rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

.quote-card {
  padding: 32px 28px;
  border-radius: var(--radius-m);
  background-color: #ffffff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.quote-card__stars {
  color: var(--gold-400);
  font-size: 0.95rem;
  letter-spacing: 3px;
}

.quote-card__text {
  font-size: 1rem;
  color: var(--cocoa-700);
  margin-bottom: 0;
}

.quote-card__who {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.quote-card__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 54px;
  background-color: var(--cream-300);
}

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

.quote-card__name {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--cocoa-900);
  line-height: 1.3;
}

.quote-card__role {
  font-size: 0.83rem;
  color: var(--cocoa-700);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}

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

.person-card__media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-m);
  overflow: hidden;
  background-color: var(--cream-300);
  margin-bottom: 18px;
}

.person-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}

.person-card:hover .person-card__media img {
  transform: scale(1.04);
}

.person-card h3 {
  font-size: 1.16rem;
  margin-bottom: 4px;
}

.person-card__role {
  font-size: 0.86rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--caramel-600);
  font-weight: 600;
}

.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 34px;
  list-style: none;
  border-left: 2px solid var(--line-strong);
}

.timeline__item {
  position: relative;
  padding-bottom: 34px;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -43px;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--gold-400);
  border: 3px solid var(--cream-100);
}

.band--sand .timeline__item::before {
  border-color: var(--cream-200);
}

.timeline__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--caramel-600);
  display: block;
  margin-bottom: 6px;
}

.timeline__item p {
  margin-bottom: 0;
  color: var(--cocoa-700);
}

.tier-rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border-radius: var(--radius-l);
  background-color: #ffffff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.tier-card--featured {
  background-color: var(--cocoa-900);
  color: var(--cream-200);
  border-color: var(--cocoa-900);
  box-shadow: var(--shadow-lg);
  transform: translateY(-10px);
}

.tier-card--featured h3,
.tier-card--featured .tier-card__price {
  color: #ffffff;
}

.tier-card--featured .tier-card__list li {
  color: #ebdece;
}

.tier-card__label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--caramel-600);
  margin-bottom: 12px;
}

.tier-card--featured .tier-card__label {
  color: var(--gold-400);
}

.tier-card__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  color: var(--cocoa-900);
  line-height: 1;
  margin: 10px 0 6px;
}

.tier-card__cycle {
  font-size: 0.88rem;
  color: var(--cocoa-700);
  margin-bottom: 22px;
}

.tier-card--featured .tier-card__cycle {
  color: #d9c9b6;
}

.tier-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 12px;
}

.tier-card__list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: var(--cocoa-700);
}

.tier-card__list li i {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--caramel-500);
}

.tier-card--featured .tier-card__list li i {
  color: var(--gold-400);
}

.tier-card .btn-oven {
  margin-top: auto;
  width: 100%;
}

.accordion-bake {
  display: grid;
  gap: 14px;
}

.accordion-bake__item {
  border-radius: var(--radius-m);
  background-color: #ffffff;
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.accordion-bake__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--cocoa-900);
  cursor: pointer;
}

.accordion-bake__trigger i {
  color: var(--caramel-600);
  transition: transform 0.3s var(--ease-soft);
}

.accordion-bake__trigger[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.accordion-bake__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-soft);
}

.accordion-bake__panel p {
  padding: 0 26px 24px;
  margin: 0;
  color: var(--cocoa-700);
  font-size: 0.96rem;
}

.form-card {
  padding: clamp(28px, 4vw, 46px);
  border-radius: var(--radius-l);
  background-color: #ffffff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-block--full {
  grid-column: 1 / -1;
}

.field-block label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--cocoa-800);
}

.field-block input,
.field-block select,
.field-block textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background-color: var(--cream-100);
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
  transition: border-color 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}

.field-block textarea {
  min-height: 140px;
  resize: vertical;
}

.field-block input:focus,
.field-block select:focus,
.field-block textarea:focus {
  outline: none;
  border-color: var(--caramel-600);
  box-shadow: 0 0 0 4px rgba(184, 113, 58, 0.16);
}

.field-block input.is-invalid,
.field-block select.is-invalid,
.field-block textarea.is-invalid {
  border-color: #a3232f;
  box-shadow: 0 0 0 4px rgba(163, 35, 47, 0.14);
}

.field-note {
  font-size: 0.8rem;
  color: var(--cocoa-700);
  min-height: 18px;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--cocoa-700);
}

.form-consent input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--caramel-600);
}

.map-frame {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
  min-height: 380px;
  background-color: var(--cream-300);
}

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

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
}

.contact-list__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-list__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--cream-200);
  color: var(--caramel-600);
  font-size: 1.05rem;
}

.band--dark .contact-list__icon,
.media-band .contact-list__icon {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--gold-400);
}

.contact-list__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--caramel-600);
  margin-bottom: 4px;
}

.band--dark .contact-list__label,
.media-band .contact-list__label {
  color: var(--gold-400);
}

.contact-list__value {
  font-size: 1rem;
  color: inherit;
  line-height: 1.55;
}

.cta-band {
  position: relative;
  overflow: hidden;
}

.cta-band__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

.marquee-strip {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background-color: var(--cream-200);
  padding: 20px 0;
}

.marquee-strip__track {
  display: flex;
  gap: 54px;
  white-space: nowrap;
  animation: ribbon-slide 32s linear infinite;
  width: max-content;
}

.marquee-strip__track span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--cocoa-700);
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.marquee-strip__track span::after {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.4rem;
  color: var(--gold-400);
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee-strip__track {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

.note-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border-radius: var(--radius-m);
  background-color: var(--cream-200);
  border-left: 5px solid var(--gold-400);
  font-size: 0.95rem;
  color: var(--cocoa-700);
}

.check-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}

.check-duo li {
  position: relative;
  padding-left: 30px;
  color: var(--cocoa-700);
}

.band--dark .check-duo li,
.media-band .check-duo li {
  color: #e8dbcb;
}

.check-duo li i {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--caramel-500);
}

.band--dark .check-duo li i,
.media-band .check-duo li i {
  color: var(--gold-400);
}

.price-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-m);
  border: 1px solid var(--line-soft);
  background-color: #ffffff;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.price-table th,
.price-table td {
  padding: 18px 22px;
  text-align: left;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}

.price-table thead th {
  background-color: var(--cocoa-900);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.price-table tbody tr:last-child td {
  border-bottom: 0;
}

.price-table tbody tr:nth-child(even) {
  background-color: var(--cream-100);
}

.price-table td:last-child {
  font-weight: 600;
  color: var(--caramel-600);
  white-space: nowrap;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background-color: rgba(251, 246, 238, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.3s var(--ease-soft), padding 0.3s var(--ease-soft);
}

.site-header.is-stuck {
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 82px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cocoa-900);
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
  color: var(--caramel-600);
}

.site-header__meta {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-header__meta-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--cocoa-700);
}

.site-header__meta-item i {
  color: var(--caramel-600);
}

.site-header__toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background-color: transparent;
  color: var(--cocoa-900);
  font-size: 1.2rem;
  cursor: pointer;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--cocoa-800);
  padding: 8px 0;
  position: relative;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--gold-400);
  transition: width 0.3s var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-current::after {
  width: 100%;
}

.site-footer {
  background-color: var(--cocoa-900);
  color: #e6d9c8;
  padding-top: clamp(52px, 7vw, 90px);
}

.site-footer h4 {
  color: #ffffff;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.site-footer a {
  color: #e6d9c8;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--gold-400);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(26px, 4vw, 48px);
  padding-bottom: 52px;
}

.site-footer__about {
  max-width: 40ch;
  font-size: 0.93rem;
  line-height: 1.7;
  color: #d6c7b4;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 0.93rem;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 24px 0 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #c9b9a5;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.site-footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.site-footer__socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  transition: background-color 0.25s var(--ease-soft);
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
  background-color: var(--caramel-600);
  color: #ffffff;
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 1030;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background-color: var(--cocoa-900);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-out), visibility 0.3s;
}

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

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--caramel-600);
  color: #ffffff;
}

.consent-dock {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 1080;
  width: min(1080px, calc(100% - 32px));
  transform: translateX(-50%);
  animation: consent-rise 0.5s var(--ease-out) both;
}

@keyframes consent-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 26px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.consent-dock__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 22px 26px;
  border-radius: var(--radius-l);
  background-color: var(--cocoa-900);
  border: 1px solid rgba(217, 168, 78, 0.32);
  box-shadow: var(--shadow-lg);
}

.consent-dock__intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.consent-dock__badge {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: rgba(217, 168, 78, 0.18);
  color: var(--gold-400);
  font-size: 1.1rem;
}

.consent-dock__copy {
  min-width: 0;
}

.consent-dock__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}

.consent-dock__text {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.6;
  color: #dccfbe;
  max-width: 68ch;
}

.consent-dock__link {
  color: var(--gold-400);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-dock__link:hover,
.consent-dock__link:focus-visible {
  color: #ffffff;
}

.consent-dock__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.consent-dock__btn {
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft);
  white-space: nowrap;
}

.consent-dock__btn--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
}

.consent-dock__btn--ghost:hover,
.consent-dock__btn--ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

.consent-dock__btn--solid {
  background-color: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--cocoa-900);
}

.consent-dock__btn--solid:hover,
.consent-dock__btn--solid:focus-visible {
  background-color: #f0c473;
  border-color: #f0c473;
  color: var(--cocoa-900);
}

.list-inline-bake {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.list-inline-bake li {
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--caramel-600);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background-color: var(--cream-200);
}

.band--dark .list-inline-bake li,
.media-band .list-inline-bake li {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--gold-400);
}

.text-frame {
  max-width: 78ch;
}

.text-frame h2 {
  margin-top: 1.6em;
}

.text-frame h2:first-child {
  margin-top: 0;
}

.text-frame ul,
.text-frame ol {
  color: var(--cocoa-700);
}

.divider-soft {
  height: 1px;
  background-color: var(--line-soft);
  border: 0;
  margin: 0;
}

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

  .process-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-node::after {
    display: none;
  }

  .trust-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .site-header__toggle {
    display: inline-grid;
    place-items: center;
  }

  .site-nav {
    position: fixed;
    inset: 82px 0 auto 0;
    background-color: var(--cream-100);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-md);
    padding: 22px var(--gutter) 30px;
    transform: translateY(-16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease-soft), transform 0.28s var(--ease-out), visibility 0.28s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .site-nav__link {
    display: block;
    width: 100%;
    padding: 12px 0;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line-soft);
  }

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

  .split--reverse .split__media {
    order: 0;
  }

  .card-rack,
  .quote-rack,
  .people-grid,
  .tier-rack,
  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mosaic {
    grid-auto-rows: 170px;
  }

  .cta-band__grid {
    grid-template-columns: 1fr;
  }

  .consent-dock__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .consent-dock__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  .card-rack,
  .quote-rack,
  .people-grid,
  .tier-rack,
  .mosaic,
  .stat-grid,
  .form-grid,
  .check-duo {
    grid-template-columns: 1fr;
  }

  .mosaic__cell--wide,
  .mosaic__cell--tall {
    grid-column: span 1;
    grid-row: span 1;
  }

  .tier-card--featured {
    transform: none;
  }

  .btn-row .btn-oven {
    width: 100%;
  }

  .consent-dock {
    bottom: 12px;
    width: calc(100% - 20px);
  }

  .consent-dock__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .consent-dock__btn {
    width: 100%;
  }

  .back-to-top {
    right: 14px;
    bottom: 96px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}
/* --- Accessibility contrast fixes --- */
/* Process step numbers: dark enough on the white cards */
.process-node__index {
  color: var(--caramel-600);
}

/* Mosaic captions: solid dark backdrop so white text passes contrast */
.mosaic__caption {
  background-color: #21120c;
  background-image: linear-gradient(to top, rgba(33, 18, 12, 0.92), rgba(33, 18, 12, 0.78));
}

/* Solid buttons keep white text inside dark/media bands */
.band--dark a.btn-oven:not(.btn-oven--line),
.media-band a.btn-oven:not(.btn-oven--line),
.band--dark a.btn-oven:not(.btn-oven--line):hover,
.media-band a.btn-oven:not(.btn-oven--line):hover,
.band--dark a.btn-oven:not(.btn-oven--line):focus-visible,
.media-band a.btn-oven:not(.btn-oven--line):focus-visible {
  color: #ffffff;
}

.band--dark a.btn-oven:not(.btn-oven--line):hover,
.media-band a.btn-oven:not(.btn-oven--line):hover,
.band--dark a.btn-oven:not(.btn-oven--line):focus-visible,
.media-band a.btn-oven:not(.btn-oven--line):focus-visible {
  background-color: var(--berry-600);
}

/* --- Contrast fixes (about-us) --- */

/* Buttons inside dark bands: keep button text readable instead of inheriting the
   gold link colour from `.band--dark a`. */
.band--dark .btn-oven,
.band--dark .btn-oven:visited,
.band--dark .btn-oven:hover,
.band--dark .btn-oven:focus-visible {
  color: #ffffff;
}

.band--dark .btn-oven--light,
.band--dark .btn-oven--light:visited {
  color: var(--cocoa-900);
}

.band--dark .btn-oven--light:hover,
.band--dark .btn-oven--light:focus-visible {
  color: var(--berry-600);
}

/* Content placed on the dark `.split__tag` overlay must use light text. */
.split__tag .eyebrow {
  color: var(--gold-400);
}

.split__tag h1,
.split__tag h2,
.split__tag h3,
.split__tag h4 {
  color: #ffffff;
}

.split__tag p,
.split__tag .lede {
  color: #f2e7d9;
}

.split__tag .check-duo li {
  color: #ecdfd0;
}

.split__tag .check-duo li i {
  color: var(--gold-400);
}

/* Mosaic captions: the gradient shorthand left background-color transparent, so
   the light caption text sat directly over the pale image cell. Give it a solid
   dark backing so the caption always has contrast. */
.mosaic__caption {
  background-color: rgba(33, 18, 12, 0.9);
}

/* Keep the light buttons readable even against the `:visited`/`:hover` rules
   above (must out-specify `.band--dark .btn-oven:visited`). */
.band--dark a.btn-oven--light,
.band--dark a.btn-oven--light:visited {
  color: var(--cocoa-900);
}

.band--dark a.btn-oven--light:hover,
.band--dark a.btn-oven--light:focus-visible {
  color: var(--berry-600);
}

/* --- Contrast fixes (about page) --- */
/* Buttons sitting inside dark/media bands: keep readable foreground colors.
   The generic `.band--dark a` / `.media-band a` rule was repainting the
   solid and "light" button labels in gold, dropping contrast below 3:1. */
.band--dark a.btn-oven,
.media-band a.btn-oven {
  color: #ffffff;
}

.band--dark a.btn-oven:hover,
.band--dark a.btn-oven:focus-visible,
.media-band a.btn-oven:hover,
.media-band a.btn-oven:focus-visible {
  background-color: var(--berry-600);
  color: #ffffff;
}

.band--dark a.btn-oven--light,
.media-band a.btn-oven--light {
  color: var(--cocoa-900);
}

.band--dark a.btn-oven--light:hover,
.band--dark a.btn-oven--light:focus-visible,
.media-band a.btn-oven--light:hover,
.media-band a.btn-oven--light:focus-visible {
  background-color: #ffffff;
  color: var(--cocoa-900);
}

/* Content column used in .split layouts. The markup places full headings,
   paragraphs and lists in this column, so it must sit in normal flow on the
   page background rather than being painted as a dark floating "tag". */
.split__body {
  position: relative;
  z-index: 2;
}

/* Portfolio captions: give the label a solid dark backing so white text keeps
   a strong ratio regardless of the photo behind it. */
.mosaic__caption {
  background-color: rgba(33, 18, 12, 0.8);
  background-image: linear-gradient(to top, rgba(33, 18, 12, 0.95), rgba(33, 18, 12, 0.72));
  color: #ffffff;
}

/* --- Contrast fixes (contacts page) --- */

/* The "light" CTA button inside a dark band must keep its dark label. The
   earlier `.band--dark a.btn-oven:not(.btn-oven--line)` rule has higher
   specificity than `.band--dark a.btn-oven--light`, so it repainted the
   label white on the cream button face. Match its specificity and come later. */
.band--dark a.btn-oven--light:not(.btn-oven--line),
.band--dark a.btn-oven--light:not(.btn-oven--line):visited {
  color: var(--cocoa-900);
}

.band--dark a.btn-oven--light:not(.btn-oven--line):hover,
.band--dark a.btn-oven--light:not(.btn-oven--line):focus-visible {
  background-color: #ffffff;
  color: var(--cocoa-900);
}

/* Links inside the dark trust strip were inheriting the body link colour
   (caramel on cocoa) and falling well under 4.5:1. */
.trust-strip a,
.trust-strip a:visited {
  color: var(--gold-400);
}

.trust-strip a:hover,
.trust-strip a:focus-visible {
  color: #ffffff;
}

/* Contact rows placed on the dark `.split__tag` overlay need light text for
   the small uppercase labels, values and icon chips. */
.split__tag .contact-list__label {
  color: var(--gold-400);
}

.split__tag .contact-list__value,
.split__tag .contact-list__value a {
  color: #f2e7d9;
}

.split__tag .contact-list__icon {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--gold-400);
}

/* --- Homepage fixes: carousel caption contrast, consent dock --- */

/* The kitchen-slider captions sit over photos on a light band and the pale
   page background bled through, leaving white text at ~1.08:1. Give the
   caption a solid dark backing so the heading and body text stay readable. */
.hero-stage__slides .carousel-caption {
  background-color: rgba(33, 18, 12, 0.9);
  color: #ffffff;
  border-radius: var(--radius-m);
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 18px 22px;
  text-align: left;
}

.hero-stage__slides .carousel-caption h3 {
  color: #ffffff;
}

.hero-stage__slides .carousel-caption p {
  color: #f2e7d9;
  margin-bottom: 0;
}

/* Off-screen "Previous"/"Next" labels were being measured as white text on
   the cream band. Colour them dark; they remain visually hidden. */
.carousel-control-prev .visually-hidden,
.carousel-control-next .visually-hidden,
.hero-stage__slides .carousel-control-prev .visually-hidden,
.hero-stage__slides .carousel-control-next .visually-hidden {
  color: #21120c;
}

/* The consent dock reuses .consent-dock__intro on a <p>, which inherited the
   dark body ink (#1c100a) over the dark dock background (#21120c). Force the
   light dock colour so the line stays readable. */
p.consent-dock__intro {
  display: block;
  color: #dccfbe;
  margin: 0 0 6px;
}

/* The dock is fixed over the lower part of the viewport and could swallow
   clicks aimed at content underneath it (e.g. a form checkbox or button that
   scrolls into the bottom of the page). Keep the banner visible but let
   pointer events pass through except on its own controls. */
.consent-dock {
  pointer-events: none;
}

.consent-dock__btn,
.consent-dock__badge,
.consent-dock a {
  pointer-events: auto;
}
