main[data-page="home"] {
  overflow: clip;
  hyphens: auto;
}

.home-hero {
  position: relative;
  display: grid;
  min-height: 40.625rem;
  isolation: isolate;
  align-items: end;
  padding-block: var(--space-7);
  color: var(--color-warm-white);
}

.home-hero__media,
.home-hero__overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.home-hero__overlay {
  z-index: -1;
  background: linear-gradient(180deg, rgb(38 60 58 / 16%) 0%, rgb(38 60 58 / 28%) 38%, rgb(38 60 58 / 72%) 100%);
}

.home-hero__layout {
  display: grid;
  width: min(100% - (2 * var(--container-padding)), var(--container-max));
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  margin-inline: auto;
}

.home-hero__panel {
  display: flex;
  min-width: 0;
  grid-column: 8 / span 5;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid rgb(255 252 245 / 80%);
  border-radius: var(--radius-xl);
  background: rgb(255 252 245 / 92%);
  color: var(--color-ink);
  box-shadow: var(--shadow-elevated);
}

.home-hero__panel .eyebrow,
.home-hero__panel h1,
.home-hero__panel p {
  margin: 0;
}

.home-hero__panel h1 {
  max-width: 12ch;
  font-size: clamp(2.625rem, 4.6vw, 4rem);
}

.home-hero__lead {
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: 1.6;
}

.home-hero__play-note {
  color: var(--color-muted-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
}

.home-overview {
  background: var(--color-cream-canvas);
}

.home-overview__surface {
  padding: var(--space-8);
  border: var(--border);
  border-radius: var(--radius-xl);
  background: var(--color-warm-white);
}

.home-overview__intro {
  min-width: 0;
  max-width: 44rem;
}

.home-overview__intro p:last-child,
.home-section-heading p:last-child,
.home-mechanics__copy p:last-child,
.home-remodel__copy p:last-child,
.home-decoration__intro p:last-child,
.home-tips__intro p:last-child,
.home-gallery__intro p:last-child,
.home-faq__intro p:last-child {
  margin-bottom: 0;
}

.home-overview__cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.home-overview__cards > article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.home-overview__cards h3,
.home-overview__cards p {
  margin: 0;
}

.home-card__topline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.home-card__topline > * {
  min-width: 0;
}

.home-card__marker {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-round);
  background: var(--color-pale-turquoise);
  font-family: var(--font-heading);
  font-weight: 700;
}

.home-card__marker--coral { background: var(--color-pale-coral); }
.home-card__marker--green { background: #e4f0df; }

.home-card__roller,
.home-card__plant {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-coral);
}

.home-card__roller::after {
  position: absolute;
  width: 1.1rem;
  height: 2px;
  top: 1.35rem;
  left: 1.05rem;
  background: var(--color-ink);
  content: "";
  transform: rotate(42deg);
  transform-origin: left center;
}

.home-card__plant {
  border-radius: 70% 20% 70% 20%;
  background: var(--color-leaf-green);
  transform: rotate(-25deg);
}

.home-mechanics {
  background: var(--color-pale-turquoise);
}

.home-mechanics__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: calc(var(--space-5) + var(--space-2));
  align-items: start;
}

.home-mechanics__copy {
  min-width: 0;
  max-width: 42.5rem;
}

.home-review-note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: 4px solid var(--color-coral);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--color-warm-white);
}

.home-review-note h3,
.home-review-note p { margin: 0; }

.home-loop {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-xl);
  background: var(--color-warm-white);
}

.home-loop h3 { margin: 0; }

.home-loop__steps {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-loop__step {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.home-loop__step:not(:last-child)::after {
  position: absolute;
  top: 1.4rem;
  right: calc(var(--space-3) * -1.15);
  color: var(--color-coral-deep);
  content: "→";
  font-size: 1.4rem;
  font-weight: 700;
}

.home-loop__step h4,
.home-loop__step p { margin: 0; }

.home-loop__number {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-sunny-yellow);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
}

.home-remodel {
  background: var(--color-warm-white);
}

.home-remodel__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: calc(var(--space-5) + var(--space-2));
  align-items: start;
}

.home-remodel__copy {
  min-width: 0;
  max-width: 36.25rem;
}

.home-observation-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.home-observation-list li {
  display: grid;
  min-width: 0;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.home-observation-list span {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-pale-coral);
  font-weight: 700;
}

.home-remodel__figure {
  min-width: 0;
  margin: 0;
}

.home-remodel__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-remodel__quote {
  margin: var(--space-4) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-pale-coral);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: 1.4;
}

.home-decoration {
  background: var(--color-cream-canvas);
}

.home-decoration__intro {
  min-width: 0;
  max-width: 44rem;
}

.home-decoration__cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.home-decoration__cards > article {
  display: grid;
  min-width: 0;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.home-decoration__cards h3,
.home-decoration__cards p { margin: 0; }

.home-swatch,
.home-decoration-icon {
  display: block;
  width: 3rem;
  height: 3rem;
}

.home-swatch {
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-coral) 0 50%, var(--color-turquoise) 50% 100%);
}

.home-decoration-icon {
  position: relative;
  border: 2px solid var(--color-ink);
  border-radius: 50% 50% 40% 40%;
  background: var(--color-sunny-yellow);
}

.home-decoration-icon::after {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  right: -0.25rem;
  bottom: -0.5rem;
  border-left: 2px solid var(--color-ink);
  content: "";
}

.home-decoration-icon--leaf {
  border-radius: 80% 15% 80% 15%;
  background: var(--color-leaf-green);
  transform: rotate(-25deg);
}

.home-decoration__conclusion {
  display: flex;
  min-width: 0;
  max-width: 42.5rem;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-pale-coral);
}

.home-decoration__conclusion h3,
.home-decoration__conclusion p { margin: 0; }

.home-style {
  background: var(--color-cream-canvas);
}

.home-section-heading {
  min-width: 0;
  max-width: 44rem;
}

.home-style__intro {
  margin-inline: auto;
  text-align: center;
}

.home-style__intro p { text-align: left; }

.home-style__motifs {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-6);
  border-top: var(--border);
  border-bottom: var(--border);
}

.home-style__motif {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.home-style__motif + .home-style__motif { border-left: var(--border); }
.home-style__motif h3,
.home-style__motif p { margin: 0; }

.home-motif-icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-sunny-yellow);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
}

.home-motif-icon--lamp { border-radius: 50% 50% var(--radius-sm) var(--radius-sm); background: var(--color-pale-coral); }
.home-motif-icon--leaf { border-radius: 80% 15% 80% 15%; background: var(--color-leaf-green); transform: rotate(-25deg); }

.home-style__quote {
  display: grid;
  min-width: 0;
  max-width: 42.5rem;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin: var(--space-6) auto 0;
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-warm-white);
}

.home-style__quote p { margin: 0; }

.home-tips {
  background: var(--color-pale-turquoise);
}

.home-tips__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
}

.home-tips__intro {
  min-width: 0;
  max-width: 36.25rem;
}

.home-tips__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.home-tips__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tip;
}

.home-tips__list li {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  counter-increment: tip;
}

.home-tips__list li::before {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-warm-white);
  content: counter(tip);
  font-family: var(--font-heading);
  font-weight: 700;
}

.home-tips__list h3,
.home-tips__list p { margin: 0; }
.home-tips__list p { margin-top: var(--space-1); }

.home-tips__cta-note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border);
}

.home-tips__cta-note p { margin: 0; }

.home-gallery {
  background: var(--color-warm-white);
}

.home-gallery__intro {
  min-width: 0;
  max-width: 42.5rem;
}

.home-gallery__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(14rem, auto));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.home-gallery__tile {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.home-gallery__tile--image { grid-row: 1 / span 2; }
.home-gallery__tile figcaption { margin: 0; }
.home-gallery__tile img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.home-gallery__art {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 14rem;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-pale-turquoise);
}

.home-gallery__art--room { background: var(--color-pale-coral); }

.home-bingo-board {
  display: grid;
  width: min(100%, 17rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--color-warm-white);
  transform: rotate(-4deg);
}

.home-bingo-board span {
  display: grid;
  min-width: 0;
  min-height: 2.4rem;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-pale-turquoise);
  font-family: var(--font-heading);
  font-weight: 700;
}

.home-bingo-board span:nth-child(2),
.home-bingo-board span:nth-child(6),
.home-bingo-board span:nth-child(8) { background: var(--color-sunny-yellow); }

.home-room-art__chair {
  position: relative;
  width: 7rem;
  height: 5rem;
  border: 2px solid var(--color-ink);
  border-radius: 3rem 3rem var(--radius-sm) var(--radius-sm);
  background: var(--color-coral);
}

.home-room-art__chair::after {
  position: absolute;
  width: 6rem;
  height: 1.6rem;
  bottom: -1.5rem;
  left: 0.35rem;
  border-bottom: 2px solid var(--color-ink);
  border-left: 2px solid var(--color-ink);
  border-right: 2px solid var(--color-ink);
  content: "";
}

.home-room-art__plant {
  position: absolute;
  width: 2.7rem;
  height: 4.4rem;
  right: 16%;
  bottom: 2.25rem;
  border: 2px solid var(--color-ink);
  border-radius: 85% 15% 85% 15%;
  background: var(--color-leaf-green);
  transform: rotate(-18deg);
}

.home-room-art__swatches {
  position: absolute;
  display: flex;
  gap: var(--space-1);
  top: 1.25rem;
  right: 1.25rem;
}

.home-room-art__swatches span {
  width: 1.2rem;
  height: 2.5rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-turquoise);
}

.home-room-art__swatches span:nth-child(2) { background: var(--color-sunny-yellow); }
.home-room-art__swatches span:nth-child(3) { background: var(--color-coral); }

.home-faq {
  background: var(--color-cream-canvas);
}

.home-faq__wrap {
  min-width: 0;
  max-width: 48.75rem;
  margin-inline: auto;
}

.home-faq__intro { min-width: 0; }

.home-faq__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.home-faq__list details {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.home-faq__list summary {
  display: flex;
  min-width: 0;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  list-style: none;
}

.home-faq__list summary::-webkit-details-marker { display: none; }
.home-faq__list summary::after {
  flex: 0 0 auto;
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
}
.home-faq__list details[open] summary::after { content: "−"; }

.home-faq__answer {
  min-width: 0;
  padding: 0 var(--space-5) var(--space-5);
}
.home-faq__answer p { margin: 0; }

.home-final {
  background: var(--color-warm-white);
}

.home-final__panel {
  position: relative;
  display: flex;
  min-width: 0;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-8) var(--space-6);
  border: var(--border);
  border-radius: var(--radius-xl);
  background: var(--color-pale-coral);
}

.home-final__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  max-width: 40.625rem;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.home-final__content h2,
.home-final__content p { margin: 0; }
.home-final__content p { text-align: left; }
.home-final__content .button { align-self: center; }

.home-final__small { color: var(--color-muted-ink); font-size: var(--text-sm); }

.home-final__ball,
.home-final__leaf {
  position: absolute;
  pointer-events: none;
}

.home-final__ball {
  width: 5rem;
  height: 5rem;
  top: 1.5rem;
  left: 3rem;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-sunny-yellow);
}

.home-final__leaf {
  width: 4rem;
  height: 6rem;
  right: 3.5rem;
  bottom: 1.5rem;
  border: 2px solid var(--color-ink);
  border-radius: 80% 15% 80% 15%;
  background: var(--color-leaf-green);
  transform: rotate(-25deg);
}

@media (hover: none) {
  .home-overview__cards > article:hover { transform: none; box-shadow: none; }
}

@media (max-width: 1040px) {
  .home-hero__panel { grid-column: 4 / span 6; max-width: 38.75rem; justify-self: center; }
}

@media (max-width: 949px) {
  .home-overview__cards,
  .home-decoration__cards,
  .home-style__motifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-overview__cards > article:last-child,
  .home-decoration__cards > article:last-child { grid-column: 1 / span 2; }
  .home-mechanics__grid,
  .home-remodel__grid,
  .home-tips__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .home-remodel__figure { order: -1; }
  .home-style__motif + .home-style__motif { border-left: 0; }
  .home-style__motif:nth-child(2) { border-left: var(--border); }
  .home-style__motif:last-child { grid-column: 1 / span 2; border-top: var(--border); }
}

@media (max-width: 699px) {
  .home-hero { min-height: 37.5rem; padding-block: var(--space-5); }
  .home-hero__media img { object-position: center; }
  .home-hero__layout { display: flex; min-width: 0; align-items: end; }
  .home-hero__panel { width: 100%; min-width: 0; padding: var(--space-5); }
  .home-hero__panel h1 { max-width: 11ch; font-size: clamp(2.625rem, 12vw, 3rem); }
  .home-hero__lead { font-size: var(--text-base); }
  .home-overview__surface { padding: var(--space-5); }
  .home-overview__cards,
  .home-decoration__cards,
  .home-style__motifs,
  .home-gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .home-overview__cards > article:last-child,
  .home-decoration__cards > article:last-child,
  .home-style__motif:last-child { grid-column: auto; }
  .home-loop { padding: var(--space-5); }
  .home-loop__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .home-loop__step:not(:last-child)::after { top: auto; right: auto; bottom: calc(var(--space-4) * -1.05); left: 0.85rem; content: "↓"; }
  .home-remodel__quote { padding: var(--space-4); }
  .home-decoration__cards > article { grid-template-columns: 3rem minmax(0, 1fr); }
  .home-style__motif + .home-style__motif,
  .home-style__motif:nth-child(2) { border-top: var(--border); border-left: 0; }
  .home-style__intro { text-align: left; }
  .home-style__quote { grid-template-columns: minmax(0, 1fr); }
  .home-tips__grid { gap: var(--space-5); }
  .home-gallery__grid { grid-template-rows: auto; }
  .home-gallery__tile--image { grid-row: auto; }
  .home-gallery__tile img { height: auto; }
  .home-gallery__art { min-height: 13.75rem; }
  .home-faq__list summary { padding: var(--space-4); }
  .home-faq__answer { padding: 0 var(--space-4) var(--space-4); }
  .home-final__panel { padding: var(--space-6) var(--space-5); }
  .home-final__content .button { width: 100%; }
  .home-final__ball { width: 2.75rem; height: 2.75rem; top: 0.75rem; left: 0.75rem; }
  .home-final__leaf { display: none; }
}

@media (max-width: 359px) {
  .home-decoration__cards > article { grid-template-columns: minmax(0, 1fr); }
  .home-decoration__cards > article .home-swatch,
  .home-decoration__cards > article .home-decoration-icon { margin-bottom: var(--space-1); }
}