.design--bright {
  --page-bg: #fbf9f5;
  --hdr-solid: rgba(251, 249, 245, 0.97);
  --card-shadow: 0 28px 56px -34px rgba(34, 30, 25, 0.5);
}
.hero--bright {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
  background:
    radial-gradient(
      980px 600px at 50% -60px,
      #fff 0%,
      rgba(255, 255, 255, 0.9) 35%,
      rgba(255, 255, 255, 0) 72%),
    #f5f1ea;
}
.hero--bright .hero__lamp {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--header-h) + 0.5rem);
  width: 96px;
  height: 6px;
  margin-left: -48px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 26px 7px rgba(211, 109, 61, 0.32);
}
.hero--bright .hero__cone {
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + 0.85rem);
  width: 150%;
  height: 34rem;
  transform: translateX(-50%);
  background:
    linear-gradient(
      180deg,
      rgba(255, 205, 150, 0.34),
      rgba(255, 215, 170, 0.12) 55%,
      rgba(255, 220, 180, 0) 90%);
  clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.hero--bright .hero__inner {
  position: relative;
  z-index: 1;
}
.hero--bright .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(2.5rem, 7vw, 3.1rem);
}
.hero--bright .eyebrow {
  justify-content: center;
  margin-bottom: 0;
}
.hero--bright .hero__title {
  max-width: 65rem;
  margin: 1.1rem 0 1.25rem;
  font-size: clamp(2.25rem, 1rem + 4.2vw, 4.75rem);
  letter-spacing: -0.048em;
}
.hero--bright .hero__title--kicker {
  margin-top: 0;
}
.hero--bright .hero__kicker {
  display: block;
  max-width: 34rem;
  margin: 0 auto clamp(0.9rem, 2vw, 1.25rem);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
@media (max-width: 639px) {
  .hero--bright .hero__kicker {
    max-width: 19rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
}
.hero--bright .hero__lead {
  max-width: 43.75rem;
}
.hero--bright .hero__actions {
  justify-content: center;
  gap: 0.9rem 1.6rem;
  margin-top: clamp(1.4rem, 3vw, 1.75rem);
}
.hero--bright .hero__link {
  text-underline-offset: 0.3em;
}
.hero--bright .hero__proof {
  justify-content: center;
  margin-top: 1.4rem;
}
@media (max-width: 639px) {
  .hero--bright .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero--bright .hero__link {
    justify-content: center;
    min-height: 44px;
  }
}
.hero__cards {
  display: grid;
  gap: 0.75rem;
  margin: clamp(2rem, 5vw, 3.1rem) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.hero-card figure {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(28, 27, 25, 0.06);
  box-shadow: var(--card-shadow);
}
.hero-card__pic,
.hero-card__pic img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-card__pic img {
  aspect-ratio: 1;
  object-fit: cover;
}
.hero-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.75rem 1rem;
}
.hero-card__body b {
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.hero-card__body span {
  font-size: 0.88rem;
  color: var(--muted);
}
@media (min-width: 700px) {
  .hero__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }
  .hero-card {
    display: flex;
  }
  .hero-card figure {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-radius: 18px;
  }
  .hero-card__body {
    flex: 1;
  }
  .hero-card__pic img {
    aspect-ratio: auto;
    height: clamp(10rem, 15.4vw, 13.875rem);
  }
  .hero-card__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.15rem 0.75rem;
    padding: 0.95rem 1.25rem 1.05rem;
  }
  .hero-card__body b {
    font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.32rem);
  }
}
.hero--bright .hero__figure {
  width: min(100%, 46rem);
  margin: clamp(2rem, 5vw, 3.1rem) auto 0;
  overflow: hidden;
  border-radius: 14px;
  background: #ebe6de;
  border: 1px solid rgba(28, 27, 25, 0.06);
  box-shadow: var(--card-shadow);
}
.hero--bright .hero__pic,
.hero--bright .hero__pic img {
  display: block;
  width: 100%;
}
.hero--bright .hero__pic img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 700px) {
  .hero--bright .hero__figure {
    border-radius: 18px;
  }
}
@media (min-width: 1024px) {
  .hero--bright {
    min-height: clamp(48rem, 100svh, 56.25rem);
  }
  .hero--bright .hero__cone {
    width: 1240px;
    height: 40rem;
    top: calc(var(--header-h) + 1.25rem);
  }
  .hero--bright .hero__lamp {
    width: 150px;
    height: 7px;
    margin-left: -75px;
    top: calc(var(--header-h) + 0.875rem);
  }
  .hero--bright .hero__copy {
    padding-top: 3.1rem;
  }
}
.design--bright main > section:not(.conversion):not(.hero) {
  background: #fbf9f5;
}
.design--bright main > :is(#what-we-check, #real-work, #quote, #faq) {
  background: #fff;
  border-top: 1px solid var(--line);
}
.design--bright .split__list b {
  font-size: 1rem;
}
.design--bright .benefits .lever {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border: 1px solid rgba(28, 27, 25, 0.07);
  border-top: 3px solid var(--accent);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.design--bright .benefits .lever__sub {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-size: 0.84rem;
  font-weight: 650;
}
.design--bright .benefits .lever__title {
  font-size: 1.3rem;
}
.design--bright .case__scale strong {
  color: var(--accent-dark);
}
.design--bright .process {
  background: #f5f1ea;
}
.seq--colour-temperature :is(.seq__layer, .seq__label) {
  animation: 7.5s linear -0.6s infinite both;
}
.seq--colour-temperature .seq__layer--1 {
  animation-name: ct-frame-1;
}
.seq--colour-temperature .seq__layer--2 {
  animation-name: ct-frame-2;
}
.seq--colour-temperature .seq__label--0 {
  animation-name: ct-label-0;
}
.seq--colour-temperature .seq__label--1 {
  animation-name: ct-label-1;
}
.seq--colour-temperature .seq__label--2 {
  animation-name: ct-label-2;
}
@keyframes ct-frame-1 {
  0%, 26.667% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  40%, 73.333% {
    opacity: 1;
  }
  73.4%, 100% {
    opacity: 0;
  }
}
@keyframes ct-frame-2 {
  0% {
    opacity: 0.5;
    animation-timing-function: ease-out;
  }
  6.667%, 60% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  73.333% {
    opacity: 1;
  }
  93.333% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes ct-label-0 {
  0% {
    opacity: 0.5;
    animation-timing-function: ease-out;
  }
  2.667%, 30.667% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  36%, 97.333% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes ct-label-1 {
  0%, 30.667% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  36%, 64% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  69.333%, 100% {
    opacity: 0;
  }
}
@keyframes ct-label-2 {
  0% {
    opacity: 0.5;
    animation-timing-function: ease-out;
  }
  2.667%, 64% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  69.333%, 97.333% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0.5;
  }
}
.seq--downlight-dimming :is(.seq__layer, .seq__label) {
  animation: 11s linear infinite both;
}
.seq--downlight-dimming .seq__layer--1 {
  animation-name: dim-frame-1;
}
.seq--downlight-dimming .seq__layer--2 {
  animation-name: dim-frame-2;
}
.seq--downlight-dimming .seq__label--0 {
  animation-name: dim-label-0;
}
.seq--downlight-dimming .seq__label--2 {
  animation-name: dim-label-2;
}
@keyframes dim-frame-1 {
  0%, 18.182% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }
  31.818%, 81.818% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  90.909%, 100% {
    opacity: 0;
  }
}
@keyframes dim-frame-2 {
  0%, 31.818% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  45.455%, 72.727% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }
  81.818%, 100% {
    opacity: 0;
  }
}
@keyframes dim-label-0 {
  0%, 29.091% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  34.545%, 79.091% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  84.545%, 100% {
    opacity: 1;
  }
}
@keyframes dim-label-2 {
  0%, 29.091% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  34.545%, 79.091% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  84.545%, 100% {
    opacity: 0;
  }
}