.elementor-301 .elementor-element.elementor-element-8b6d0af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-301 .elementor-element.elementor-element-566e152{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-301 .elementor-element.elementor-element-1dd9c2e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-301 .elementor-element.elementor-element-59e0d07{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-301 .elementor-element.elementor-element-987065a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-301 .elementor-element.elementor-element-4403a2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-301 .elementor-element.elementor-element-8b6d0af{--width:100%;}.elementor-301 .elementor-element.elementor-element-566e152{--width:100%;}.elementor-301 .elementor-element.elementor-element-1dd9c2e{--width:100%;}.elementor-301 .elementor-element.elementor-element-59e0d07{--width:100%;}.elementor-301 .elementor-element.elementor-element-987065a{--width:100%;}.elementor-301 .elementor-element.elementor-element-4403a2d{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-566e152 *//* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 01
   A LITTLE WONDER GOES A LONG WAY
   HERO EDITORIAL — CSS DESKTOP v1.0
   ========================================================== */


/* ==========================================================
   01 — HERO FOUNDATION
   ========================================================== */

#wonderhue-about-hero {
  --whab-paper: #f7efe5;
  --whab-cream: #fff8ee;
  --whab-ink: #17282c;
  --whab-coral: #f18b77;
  --whab-amber: #e9b77a;
  --whab-teal: #4f9a91;
  --whab-muted: #596761;

  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  isolation: isolate;
  overflow: hidden;

  background: var(--whab-paper);
}

#wonderhue-about-hero,
#wonderhue-about-hero * {
  box-sizing: border-box;
}

#wonderhue-about-hero .whab-hero-section {
  position: relative;
  width: 100%;
  min-height: 850px;
  overflow: hidden;

  padding: 145px clamp(30px, 5.5vw, 105px) 40px;

  color: var(--whab-ink);
  font-family: "Inter", sans-serif;

  background:
    radial-gradient(
      ellipse at 4% 65%,
      rgba(241,139,119,.11),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 95% 10%,
      rgba(233,183,122,.14),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      #faf3e9 0%,
      #f5ecdf 100%
    );
}


/* ==========================================================
   02 — DECORATIVE ATMOSPHERE
   ========================================================== */

#wonderhue-about-hero .whab-hero-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

#wonderhue-about-hero .whab-hero-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
}

#wonderhue-about-hero .whab-hero-glow--amber {
  width: 570px;
  height: 570px;
  top: -290px;
  right: -180px;

  background: radial-gradient(
    circle,
    rgba(233,183,122,.22),
    transparent 70%
  );

  filter: blur(45px);
}

#wonderhue-about-hero .whab-hero-glow--coral {
  width: 580px;
  height: 580px;
  bottom: -360px;
  left: -260px;

  background: radial-gradient(
    circle,
    rgba(241,139,119,.16),
    transparent 70%
  );

  filter: blur(50px);
}

#wonderhue-about-hero .whab-hero-orbit {
  position: absolute;
  display: block;
  border: 1px solid rgba(79,154,145,.12);
  border-radius: 50%;
}

#wonderhue-about-hero .whab-hero-orbit--one {
  width: 760px;
  height: 760px;
  left: -520px;
  top: 15%;
}

#wonderhue-about-hero .whab-hero-orbit--two {
  width: 550px;
  height: 550px;
  right: -400px;
  bottom: -230px;
}

#wonderhue-about-hero .whab-hero-spark {
  position: absolute;
  line-height: 1;
  opacity: .65;
}

#wonderhue-about-hero .whab-hero-spark--one {
  top: 24%;
  left: 5%;
  color: var(--whab-amber);
  font-size: 25px;
}

#wonderhue-about-hero .whab-hero-spark--two {
  right: 5%;
  bottom: 18%;
  color: var(--whab-teal);
  font-size: 22px;
}


/* ==========================================================
   03 — MAIN CONTAINER
   ========================================================== */

#wonderhue-about-hero .whab-hero-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}


/* ==========================================================
   04 — TOP EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-hero .whab-hero-topline {
  display: flex;
  align-items: center;
  gap: 23px;
  width: 100%;

  padding-bottom: 22px;
  border-bottom: 1px solid rgba(23,40,44,.19);
}

#wonderhue-about-hero .whab-hero-topline-label,
#wonderhue-about-hero .whab-hero-topline-number {
  color: #795f4b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  white-space: nowrap;
}

#wonderhue-about-hero .whab-hero-topline-number {
  color: var(--whab-teal);
}

#wonderhue-about-hero .whab-hero-topline-rule {
  flex: 1;
  height: 1px;
  background: rgba(23,40,44,.18);
}


/* ==========================================================
   05 — MAIN HERO GRID
   ========================================================== */

#wonderhue-about-hero .whab-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.03fr)
    minmax(0, .97fr);

  align-items: center;
  gap: clamp(35px, 5vw, 105px);

  padding: 70px 0 85px;
}

#wonderhue-about-hero .whab-hero-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}


/* ==========================================================
   06 — EYEBROW
   ========================================================== */

#wonderhue-about-hero .whab-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 33px;

  color: #986a4a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

#wonderhue-about-hero .whab-hero-eyebrow-star {
  color: var(--whab-coral);
  font-size: 27px;
  line-height: 1;
}


/* ==========================================================
   07 — MAIN HEADLINE
   ========================================================== */

#wonderhue-about-hero .whab-hero-title {
  margin: 0;
  padding: 0;

  color: var(--whab-ink);

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(70px, 6.2vw, 120px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.075em;

  text-wrap: balance;
}

#wonderhue-about-hero .whab-hero-title-line {
  display: block;
  white-space: nowrap;
}

#wonderhue-about-hero .whab-hero-title-accent {
  position: relative;
  display: block;
  width: fit-content;

  color: var(--whab-coral);
  font-style: italic;

  transform: translateX(9px);
}

#wonderhue-about-hero .whab-hero-title-accent::after {
  content: "";
  position: absolute;
  left: 5%;
  bottom: -8px;

  width: 90%;
  height: 10px;

  border-radius: 50%;
  border-bottom: 3px solid rgba(79,154,145,.65);

  transform: rotate(-3deg);
}

#wonderhue-about-hero .whab-hero-title-last {
  position: relative;
}

#wonderhue-about-hero .whab-hero-title-period {
  color: var(--whab-teal);
}


/* ==========================================================
   08 — INTRO PARAGRAPH
   ========================================================== */

#wonderhue-about-hero .whab-hero-intro {
  display: flex;
  align-items: flex-start;
  gap: 20px;

  max-width: 520px;
  margin-top: 39px;
}

#wonderhue-about-hero .whab-hero-intro-line {
  flex-shrink: 0;
  width: 36px;
  height: 2px;
  margin-top: 12px;

  background: var(--whab-coral);
}

#wonderhue-about-hero .whab-hero-description {
  margin: 0;
  max-width: 445px;

  color: var(--whab-muted);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.85;
}


/* ==========================================================
   09 — PRIMARY CTA
   ========================================================== */

#wonderhue-about-hero .whab-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;

  margin-top: 42px;
}

#wonderhue-about-hero .whab-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 33px;

  min-height: 59px;
  padding: 12px 15px 12px 28px;

  border: 1px solid var(--whab-coral);
  border-radius: 50px;

  background: var(--whab-coral);
  color: var(--whab-ink);

  font-size: 13px;
  font-weight: 800;
  text-decoration: none;

  box-shadow: 0 10px 26px rgba(241,139,119,.17);

  transition:
    background .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}

#wonderhue-about-hero .whab-hero-cta-text {
  white-space: nowrap;
}

#wonderhue-about-hero .whab-hero-cta-arrow {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: rgba(23,40,44,.12);
  color: var(--whab-ink);

  font-size: 20px;
  line-height: 1;

  transition: transform .35s ease;
}

#wonderhue-about-hero .whab-hero-cta-note {
  max-width: 155px;
  color: #8a8276;

  font-size: 9px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .13em;
}

@media (hover: hover) {

  #wonderhue-about-hero .whab-hero-cta:hover {
    background: #f5a08d;
    transform: translateY(-4px);

    box-shadow: 0 16px 32px rgba(241,139,119,.3);
  }

  #wonderhue-about-hero .whab-hero-cta:hover
  .whab-hero-cta-arrow {
    transform: translate(3px, -3px);
  }

}

#wonderhue-about-hero .whab-hero-cta:focus-visible {
  outline: 3px solid var(--whab-teal);
  outline-offset: 5px;
}


/* ==========================================================
   10 — CREATIVE VISUAL COMPOSITION
   ========================================================== */

#wonderhue-about-hero .whab-hero-visual {
  position: relative;
  min-width: 0;
}

#wonderhue-about-hero .whab-hero-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;

  padding: 13px;
  overflow: visible;

  border: 1px solid rgba(23,40,44,.13);
  border-radius: 240px 240px 24px 24px;

  background: rgba(255,255,255,.35);

  box-shadow:
    0 30px 65px rgba(65,52,37,.11),
    0 8px 18px rgba(65,52,37,.05);

  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

#wonderhue-about-hero .whab-hero-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  border-radius: 230px 230px 15px 15px;

  background: #d9c5ad;
}

#wonderhue-about-hero .whab-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(23,40,44,0) 48%,
    rgba(23,40,44,.16) 100%
  );
}

#wonderhue-about-hero .whab-hero-image-main {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}

@media (hover: hover) {

  #wonderhue-about-hero .whab-hero-visual-frame:hover {
    transform: translateY(-7px);
  }

  #wonderhue-about-hero .whab-hero-visual-frame:hover
  .whab-hero-image-main {
    transform: scale(1.045);
  }

}


/* ==========================================================
   11 — IMAGE STAMP
   ========================================================== */

#wonderhue-about-hero .whab-hero-image-stamp {
  position: absolute;
  z-index: 3;

  top: 13%;
  left: -45px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;

  width: 125px;
  height: 125px;

  border-radius: 50%;
  border: 5px solid var(--whab-paper);

  background: var(--whab-teal);
  color: #fffaf1;

  text-align: center;
  box-shadow: 0 12px 30px rgba(23,40,44,.15);

  transform: rotate(-12deg);
}

#wonderhue-about-hero .whab-hero-image-stamp-icon {
  font-size: 25px;
  line-height: 1;
  color: #ffe2ae;
}

#wonderhue-about-hero .whab-hero-image-stamp-text {
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .13em;
}


/* ==========================================================
   12 — IMAGE CORNER DETAIL
   ========================================================== */

#wonderhue-about-hero .whab-hero-image-corner {
  position: absolute;
  z-index: 3;

  right: 28px;
  bottom: 28px;

  display: flex;
  align-items: center;
  gap: 9px;

  color: #fffaf1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;

  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

#wonderhue-about-hero .whab-hero-image-corner-rule {
  display: block;
  width: 30px;
  height: 1px;

  background: rgba(255,255,255,.8);
}


/* ==========================================================
   13 — FLOATING IMAGE CAPTION
   ========================================================== */

#wonderhue-about-hero .whab-hero-visual-caption {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 19px;

  color: #8a7969;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
}

#wonderhue-about-hero .whab-hero-caption-symbol {
  color: var(--whab-coral);
  font-size: 20px;
}


/* ==========================================================
   14 — BOTTOM EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-hero .whab-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding: 26px 0 6px;

  border-top: 1px solid rgba(23,40,44,.17);
}

#wonderhue-about-hero .whab-hero-bottom-message {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  color: #7c6c5e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

#wonderhue-about-hero .whab-hero-bottom-symbol {
  color: var(--whab-coral);
  font-size: 25px;
  line-height: 1;
}

#wonderhue-about-hero .whab-hero-bottom-scroll {
  display: inline-flex;
  align-items: center;
  gap: 17px;

  color: var(--whab-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

#wonderhue-about-hero .whab-hero-scroll-arrow {
  display: grid;
  place-items: center;

  width: 37px;
  height: 37px;

  border: 1px solid rgba(23,40,44,.25);
  border-radius: 50%;

  color: var(--whab-ink);
  font-size: 20px;

  animation: whabArrowFloat 2.8s ease-in-out infinite;
}

@keyframes whabArrowFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}


/* ==========================================================
   15 — DESKTOP ADJUSTMENT
   1025px — 1250px
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1250px) {

  #wonderhue-about-hero .whab-hero-section {
    padding-top: 130px;
  }

  #wonderhue-about-hero .whab-hero-grid {
    gap: 45px;
  }

  #wonderhue-about-hero .whab-hero-title {
    font-size: clamp(65px, 5.9vw, 78px);
  }

  #wonderhue-about-hero .whab-hero-image-stamp {
    width: 105px;
    height: 105px;
    left: -30px;
  }

}


/* ==========================================================
   16 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-hero *,
  #wonderhue-about-hero *::before,
  #wonderhue-about-hero *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — HERO CSS DESKTOP v1.0 */






/* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 01
   A LITTLE WONDER GOES A LONG WAY
   HERO EDITORIAL — CSS RESPONSIVE v1.0
   ========================================================== */


/* ==========================================================
   17 — TABLET
   768px — 1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* HERO FOUNDATION */

  #wonderhue-about-hero .whab-hero-section {
    min-height: auto;
    padding: 130px 6vw 38px;
  }

  /* ATMOSPHERE */

  #wonderhue-about-hero .whab-hero-glow--amber {
    width: 450px;
    height: 450px;
    right: -250px;
    top: -220px;
  }

  #wonderhue-about-hero .whab-hero-glow--coral {
    width: 460px;
    height: 460px;
    left: -270px;
    bottom: -260px;
  }

  #wonderhue-about-hero .whab-hero-orbit--one {
    width: 550px;
    height: 550px;
    left: -390px;
  }

  #wonderhue-about-hero .whab-hero-orbit--two {
    width: 420px;
    height: 420px;
    right: -310px;
  }

  /* EDITORIAL STRIP */

  #wonderhue-about-hero .whab-hero-topline {
    gap: 18px;
    padding-bottom: 20px;
  }

  /* MAIN GRID — VERTICAL EDITORIAL */

  #wonderhue-about-hero .whab-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 65px;
    padding: 65px 0 70px;
  }

  /* TEXT */

  #wonderhue-about-hero .whab-hero-copy {
    width: 100%;
    max-width: 760px;
  }

  #wonderhue-about-hero .whab-hero-eyebrow {
    margin-bottom: 28px;
  }

  #wonderhue-about-hero .whab-hero-title {
    font-size: clamp(76px, 10vw, 110px);
    line-height: .94;
  }

  #wonderhue-about-hero .whab-hero-title-accent {
    transform: translateX(6px);
  }

  #wonderhue-about-hero .whab-hero-intro {
    margin-top: 35px;
  }

  #wonderhue-about-hero .whab-hero-description {
    max-width: 570px;
    font-size: 17px;
  }

  #wonderhue-about-hero .whab-hero-actions {
    margin-top: 35px;
  }

  /* IMAGE */

  #wonderhue-about-hero .whab-hero-visual {
    width: min(100%, 600px);
    margin-inline: auto;
  }

  #wonderhue-about-hero .whab-hero-visual-frame {
    aspect-ratio: 4 / 5;
    padding: 12px;
  }

  #wonderhue-about-hero .whab-hero-image-stamp {
    top: 13%;
    left: -35px;
    width: 115px;
    height: 115px;
  }

  #wonderhue-about-hero .whab-hero-visual-caption {
    margin-top: 20px;
  }

  /* BOTTOM STRIP */

  #wonderhue-about-hero .whab-hero-bottom {
    padding-top: 24px;
  }

  #wonderhue-about-hero .whab-hero-bottom-message,
  #wonderhue-about-hero .whab-hero-bottom-scroll {
    font-size: 9px;
  }

}


/* ==========================================================
   18 — MOBILE
   0px — 767px
   ========================================================== */

@media (max-width: 767px) {

  /* HERO FOUNDATION */

  #wonderhue-about-hero .whab-hero-section {
    min-height: auto;
    padding: 112px 22px 30px;
  }

  /* DECORATIVE ATMOSPHERE */

  #wonderhue-about-hero .whab-hero-glow--amber {
    width: 320px;
    height: 320px;
    top: -170px;
    right: -200px;
    filter: blur(30px);
  }

  #wonderhue-about-hero .whab-hero-glow--coral {
    width: 340px;
    height: 340px;
    left: -220px;
    bottom: -230px;
    filter: blur(32px);
  }

  #wonderhue-about-hero .whab-hero-orbit--one {
    width: 380px;
    height: 380px;
    left: -310px;
  }

  #wonderhue-about-hero .whab-hero-orbit--two {
    width: 320px;
    height: 320px;
    right: -270px;
  }

  #wonderhue-about-hero .whab-hero-spark--one {
    top: 23%;
    left: 4%;
    font-size: 18px;
  }

  #wonderhue-about-hero .whab-hero-spark--two {
    right: 5%;
    font-size: 17px;
  }

  /* TOP EDITORIAL STRIP */

  #wonderhue-about-hero .whab-hero-topline {
    gap: 12px;
    padding-bottom: 16px;
  }

  #wonderhue-about-hero .whab-hero-topline-label,
  #wonderhue-about-hero .whab-hero-topline-number {
    font-size: 9px;
    letter-spacing: .11em;
  }

  /* MAIN GRID */

  #wonderhue-about-hero .whab-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
    padding: 50px 0 55px;
  }

  /* STORY */

  #wonderhue-about-hero .whab-hero-copy {
    width: 100%;
    min-width: 0;
  }

  #wonderhue-about-hero .whab-hero-eyebrow {
    gap: 9px;
    margin-bottom: 24px;
    font-size: 10px;
  }

  #wonderhue-about-hero .whab-hero-eyebrow-star {
    font-size: 23px;
  }

  /* MAIN HEADLINE */

  #wonderhue-about-hero .whab-hero-title {
    font-size: clamp(44px, 12vw, 76px);
    line-height: .98;
    letter-spacing: -.065em;
  }

  #wonderhue-about-hero .whab-hero-title-line {
    white-space: nowrap;
  }

  #wonderhue-about-hero .whab-hero-title-accent {
    transform: translateX(4px);
  }

  #wonderhue-about-hero .whab-hero-title-accent::after {
    bottom: -5px;
    height: 7px;
    border-bottom-width: 2px;
  }

  /* INTRO */

  #wonderhue-about-hero .whab-hero-intro {
    gap: 13px;
    margin-top: 30px;
  }

  #wonderhue-about-hero .whab-hero-intro-line {
    width: 25px;
    margin-top: 11px;
  }

  #wonderhue-about-hero .whab-hero-description {
    max-width: 420px;
    font-size: 15px;
    line-height: 1.8;
  }

  /* CTA */

  #wonderhue-about-hero .whab-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 32px;
  }

  #wonderhue-about-hero .whab-hero-cta {
    min-height: 55px;
    padding: 10px 12px 10px 24px;
    gap: 24px;
    font-size: 12px;
  }

  #wonderhue-about-hero .whab-hero-cta-arrow {
    width: 32px;
    height: 32px;
  }

  #wonderhue-about-hero .whab-hero-cta-note {
    max-width: none;
    font-size: 9px;
  }

  /* IMAGE COMPOSITION */

  #wonderhue-about-hero .whab-hero-visual {
    width: calc(100% - 14px);
    margin-left: auto;
    margin-right: auto;
  }

  #wonderhue-about-hero .whab-hero-visual-frame {
    aspect-ratio: 4 / 5;
    padding: 8px;
    border-radius: 180px 180px 18px 18px;
  }

  #wonderhue-about-hero .whab-hero-image {
    border-radius: 170px 170px 12px 12px;
  }

  #wonderhue-about-hero .whab-hero-image-main {
    object-position: center center;
  }

  /* IMAGE STAMP */

  #wonderhue-about-hero .whab-hero-image-stamp {
    top: 13%;
    left: -22px;

    width: 87px;
    height: 87px;
    gap: 4px;

    border-width: 4px;
  }

  #wonderhue-about-hero .whab-hero-image-stamp-icon {
    font-size: 18px;
  }

  #wonderhue-about-hero .whab-hero-image-stamp-text {
    font-size: 7px;
    letter-spacing: .1em;
  }

  /* IMAGE CORNER */

  #wonderhue-about-hero .whab-hero-image-corner {
    right: 18px;
    bottom: 18px;
    gap: 6px;
    font-size: 9px;
  }

  #wonderhue-about-hero .whab-hero-image-corner-rule {
    width: 22px;
  }

  /* FLOATING CAPTION */

  #wonderhue-about-hero .whab-hero-visual-caption {
    gap: 8px;
    margin-top: 16px;
    font-size: 8px;
    letter-spacing: .11em;
  }

  #wonderhue-about-hero .whab-hero-caption-symbol {
    font-size: 17px;
  }

  /* BOTTOM STRIP */

  #wonderhue-about-hero .whab-hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    padding-top: 23px;
  }

  #wonderhue-about-hero .whab-hero-bottom-message {
    gap: 9px;
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: .09em;
  }

  #wonderhue-about-hero .whab-hero-bottom-symbol {
    font-size: 21px;
  }

  #wonderhue-about-hero .whab-hero-bottom-scroll {
    gap: 12px;
    font-size: 9px;
  }

  #wonderhue-about-hero .whab-hero-scroll-arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

}


/* ==========================================================
   19 — SMALL MOBILE
   Up to 390px
   ========================================================== */

@media (max-width: 390px) {

  #wonderhue-about-hero .whab-hero-section {
    padding: 108px 17px 26px;
  }

  #wonderhue-about-hero .whab-hero-topline-label,
  #wonderhue-about-hero .whab-hero-topline-number {
    font-size: 8px;
  }

  #wonderhue-about-hero .whab-hero-grid {
    gap: 45px;
  }

  #wonderhue-about-hero .whab-hero-title {
    font-size: clamp(40px, 11.7vw, 47px);
  }

  #wonderhue-about-hero .whab-hero-description {
    font-size: 14px;
  }

  #wonderhue-about-hero .whab-hero-visual {
    width: calc(100% - 12px);
  }

  #wonderhue-about-hero .whab-hero-image-stamp {
    width: 76px;
    height: 76px;
    left: -17px;
  }

  #wonderhue-about-hero .whab-hero-image-stamp-text {
    font-size: 6.5px;
  }

  #wonderhue-about-hero .whab-hero-cta {
    gap: 15px;
    padding-left: 19px;
  }

}


/* ==========================================================
   20 — TOUCH & ACCESSIBILITY
   ========================================================== */

@media (hover: none) {

  #wonderhue-about-hero .whab-hero-visual-frame,
  #wonderhue-about-hero .whab-hero-image-main {
    transform: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-hero *,
  #wonderhue-about-hero *::before,
  #wonderhue-about-hero *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — HERO CSS RESPONSIVE v1.0 */







/* ==========================================================
   WONDERHUE STUDIO — ABOUT US HERO
   RESPONSIVE LAYOUT REFINEMENT v1.1
   TABLET + MOBILE
   ========================================================== */


/* ==========================================================
   21 — TABLET: EDITORIAL SPLIT LAYOUT
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Recuperar las dos columnas */

  #wonderhue-about-hero .whab-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, .95fr);

    align-items: center;
    gap: clamp(25px, 3vw, 45px);

    padding: 55px 0 65px;
  }

  /* Adaptar titular al espacio disponible */

  #wonderhue-about-hero .whab-hero-title {
    font-size: clamp(46px, 5.4vw, 60px);
    line-height: .97;
    letter-spacing: -.07em;
  }

  #wonderhue-about-hero .whab-hero-title-line {
    white-space: nowrap;
  }

  #wonderhue-about-hero .whab-hero-eyebrow {
    margin-bottom: 24px;
    font-size: 9px;
  }

  /* Descripción */

  #wonderhue-about-hero .whab-hero-intro {
    margin-top: 27px;
    gap: 12px;
  }

  #wonderhue-about-hero .whab-hero-description {
    font-size: 14px;
    line-height: 1.7;
  }

  /* CTA */

  #wonderhue-about-hero .whab-hero-actions {
    margin-top: 27px;
    gap: 15px;
  }

  #wonderhue-about-hero .whab-hero-cta-note {
    max-width: 180px;
  }

  /* Imagen junto al texto */

  #wonderhue-about-hero .whab-hero-visual {
    width: 100%;
    margin: 0;
    min-width: 0;
  }

  #wonderhue-about-hero .whab-hero-visual-frame {
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 9px;

    border-radius: 190px 190px 20px 20px;
  }

  #wonderhue-about-hero .whab-hero-image {
    border-radius: 180px 180px 13px 13px;
  }

  /* Sello adaptado */

  #wonderhue-about-hero .whab-hero-image-stamp {
    width: 86px;
    height: 86px;
    left: -23px;
    top: 12%;
    border-width: 4px;
  }

  #wonderhue-about-hero .whab-hero-image-stamp-icon {
    font-size: 19px;
  }

  #wonderhue-about-hero .whab-hero-image-stamp-text {
    font-size: 7px;
  }

}


/* ==========================================================
   22 — MOBILE: COMPACT COMPOSITION + FOOT STRIP
   ========================================================== */

@media (max-width: 767px) {

  /* Reducir separación entre texto e imagen */

  #wonderhue-about-hero .whab-hero-grid {
    gap: 32px;
    padding-bottom: 42px;
  }

  /* Ajustar proporción del espacio */

  #wonderhue-about-hero .whab-hero-title {
    font-size: clamp(41px, 11.4vw, 68px);
  }

  /* Imagen más próxima al contenido */

  #wonderhue-about-hero .whab-hero-visual {
    width: calc(100% - 12px);
  }

  /* Franja inferior — ambos elementos a la misma altura */

  #wonderhue-about-hero .whab-hero-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-top: 20px;
  }

  #wonderhue-about-hero .whab-hero-bottom-message {
    flex: 1;
    min-width: 0;
    max-width: 230px;

    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .04em;
  }

  #wonderhue-about-hero .whab-hero-bottom-scroll {
    flex-shrink: 0;
    gap: 7px;

    font-size: 8px;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  #wonderhue-about-hero .whab-hero-scroll-arrow {
    width: 29px;
    height: 29px;
    font-size: 16px;
  }

}


/* ==========================================================
   23 — SMALL MOBILE: FOOT STRIP
   ========================================================== */

@media (max-width: 390px) {

  #wonderhue-about-hero .whab-hero-bottom {
    gap: 8px;
  }

  #wonderhue-about-hero .whab-hero-bottom-message {
    font-size: 7px;
    letter-spacing: 0;
  }

  #wonderhue-about-hero .whab-hero-bottom-scroll {
    font-size: 7px;
    gap: 5px;
  }

  #wonderhue-about-hero .whab-hero-bottom-symbol {
    font-size: 17px;
  }

  #wonderhue-about-hero .whab-hero-scroll-arrow {
    width: 26px;
    height: 26px;
  }

}

/* END ABOUT US — RESPONSIVE FIX v1.1 */







/* ==========================================================
   WONDERHUE ABOUT US — HERO
   TABLET MICRO FIX v1.2
   INTRO LINE + DECORATIVE STARS
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* 01 — Hacer más discreta la raya salmón */

  #wonderhue-about-hero .whab-hero-intro {
    gap: 12px;
    max-width: 100%;
  }

  #wonderhue-about-hero .whab-hero-intro-line {
    width: 22px;
    flex: 0 0 22px;
  }

  #wonderhue-about-hero .whab-hero-description {
    min-width: 0;
    max-width: 100%;
    font-size: 13.5px;
    line-height: 1.7;
  }

  /* 02 — Separar la estrella teal del texto */

  #wonderhue-about-hero .whab-hero-visual-caption {
    position: relative;
    padding-right: 28px;
    margin-top: 25px;
  }

  /* Ocultar solo la estrella decorativa de fondo
     que invade el extremo derecho del caption */

  #wonderhue-about-hero .whab-hero-spark--two {
    display: none;
  }

}

/* END TABLET MICRO FIX v1.2 *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1dd9c2e *//* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 02
   OUR STORY — INK & IMAGINATION
   CSS DESKTOP v1.0
   ========================================================== */


/* ==========================================================
   01 — SECTION FOUNDATION
   ========================================================== */

#wonderhue-about-story {
  --whas-ink: #101b20;
  --whas-deep: #0c161b;
  --whas-paper: #fff3e7;
  --whas-coral: #f18b77;
  --whas-teal: #83c9bd;
  --whas-amber: #edbf86;
  --whas-muted: #b5c6c1;

  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;

  background: var(--whas-deep);
}

#wonderhue-about-story,
#wonderhue-about-story * {
  box-sizing: border-box;
}

#wonderhue-about-story .whas-section {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;

  padding: 105px clamp(32px, 6vw, 110px) 35px;

  color: var(--whas-paper);
  font-family: "Inter", sans-serif;

  background:
    radial-gradient(
      ellipse at 79% 20%,
      rgba(46, 110, 112, .13),
      transparent 43%
    ),
    radial-gradient(
      ellipse at 15% 80%,
      rgba(122, 74, 74, .10),
      transparent 39%
    ),
    linear-gradient(
      145deg,
      #111f25 0%,
      #0d181e 52%,
      #0a151a 100%
    );
}


/* ==========================================================
   02 — INK ATMOSPHERE
   ========================================================== */

#wonderhue-about-story .whas-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* TINTA TEAL — GRAN MANCHA ORGÁNICA */

#wonderhue-about-story .whas-ink {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 43% 57% 62% 38% / 54% 43% 57% 46%;
}

#wonderhue-about-story .whas-ink--teal {
  width: 760px;
  height: 680px;

  top: -310px;
  right: -280px;

  background:
    radial-gradient(
      ellipse at 38% 45%,
      rgba(84, 181, 172, .28) 0%,
      rgba(50, 130, 129, .15) 32%,
      rgba(21, 80, 85, .06) 59%,
      transparent 75%
    );

  filter: blur(36px);
  transform: rotate(-25deg);
}

/* TINTA CORAL — MANCHA INFERIOR IZQUIERDA */

#wonderhue-about-story .whas-ink--coral {
  width: 730px;
  height: 560px;

  bottom: -280px;
  left: -280px;

  background:
    radial-gradient(
      ellipse at 55% 48%,
      rgba(241, 139, 119, .23) 0%,
      rgba(180, 79, 76, .12) 35%,
      rgba(125, 51, 63, .05) 62%,
      transparent 76%
    );

  filter: blur(44px);
  transform: rotate(18deg);
}

/* TINTA ÁMBAR — LUZ SOBRE EL CENTRO */

#wonderhue-about-story .whas-ink--amber {
  width: 490px;
  height: 390px;

  top: 35%;
  left: 39%;

  background:
    radial-gradient(
      ellipse,
      rgba(237, 191, 134, .13) 0%,
      rgba(196, 135, 74, .06) 43%,
      transparent 74%
    );

  filter: blur(48px);
  transform: rotate(-18deg);
}


/* ==========================================================
   03 — SVG INK STROKES
   ========================================================== */

#wonderhue-about-story .whas-ink-art {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: .8;
  pointer-events: none;
}

#wonderhue-about-story .whas-ink-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wonderhue-about-story .whas-ink-stroke--one {
  stroke: rgba(131, 201, 189, .26);
  stroke-width: 3.5;
}

#wonderhue-about-story .whas-ink-stroke--two {
  stroke: rgba(241, 139, 119, .22);
  stroke-width: 3;
}

#wonderhue-about-story .whas-ink-stroke--three {
  stroke: rgba(237, 191, 134, .24);
  stroke-width: 2.5;
}


/* ==========================================================
   04 — RINGS & COLOR DROPLETS
   ========================================================== */

#wonderhue-about-story .whas-ring {
  position: absolute;
  display: block;

  border: 1px solid rgba(237, 191, 134, .14);
  border-radius: 50%;
}

#wonderhue-about-story .whas-ring--one {
  width: 680px;
  height: 680px;
  top: -470px;
  left: -260px;
}

#wonderhue-about-story .whas-ring--two {
  width: 510px;
  height: 510px;
  right: -340px;
  bottom: -210px;

  border-color: rgba(131, 201, 189, .12);
}

#wonderhue-about-story .whas-droplet {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: .65;
}

#wonderhue-about-story .whas-droplet--one {
  width: 8px;
  height: 8px;
  top: 17%;
  left: 12%;
  background: var(--whas-coral);
}

#wonderhue-about-story .whas-droplet--two {
  width: 5px;
  height: 5px;
  top: 34%;
  right: 13%;
  background: var(--whas-amber);
}

#wonderhue-about-story .whas-droplet--three {
  width: 10px;
  height: 10px;
  bottom: 22%;
  left: 43%;
  background: var(--whas-teal);
}

#wonderhue-about-story .whas-droplet--four {
  width: 4px;
  height: 4px;
  bottom: 13%;
  right: 25%;
  background: var(--whas-coral);
}

#wonderhue-about-story .whas-droplet--five {
  width: 6px;
  height: 6px;
  top: 57%;
  left: 4%;
  background: var(--whas-amber);
}

#wonderhue-about-story .whas-spark {
  position: absolute;
  line-height: 1;
  opacity: .52;
}

#wonderhue-about-story .whas-spark--one {
  top: 17%;
  right: 11%;
  color: var(--whas-amber);
  font-size: 30px;
}

#wonderhue-about-story .whas-spark--two {
  bottom: 21%;
  left: 8%;
  color: var(--whas-teal);
  font-size: 23px;
}


/* ==========================================================
   05 — MAIN CONTENT CONTAINER
   ========================================================== */

#wonderhue-about-story .whas-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}


/* ==========================================================
   06 — TOP EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-story .whas-topline {
  display: flex;
  align-items: center;
  gap: 22px;

  width: 100%;
  padding-bottom: 27px;

  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

#wonderhue-about-story .whas-topline-label,
#wonderhue-about-story .whas-topline-number {
  color: var(--whas-amber);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  white-space: nowrap;
}

#wonderhue-about-story .whas-topline-number {
  color: var(--whas-teal);
}

#wonderhue-about-story .whas-topline-rule {
  flex: 1;
  height: 1px;
  background: rgba(237, 191, 134, .24);
}


/* ==========================================================
   07 — MAIN EDITORIAL GRID
   ========================================================== */

#wonderhue-about-story .whas-main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.13fr)
    minmax(0, .87fr);

  gap: clamp(65px, 8vw, 145px);
  align-items: center;

  padding: 105px 0 115px;
}

#wonderhue-about-story .whas-manifesto,
#wonderhue-about-story .whas-story-content {
  position: relative;
  min-width: 0;
}


/* ==========================================================
   08 — MANIFESTO EYEBROW
   ========================================================== */

#wonderhue-about-story .whas-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 34px;

  color: var(--whas-amber);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

#wonderhue-about-story .whas-eyebrow-mark {
  color: var(--whas-coral);
  font-size: 28px;
  line-height: 1;
}


/* ==========================================================
   09 — MANIFESTO TITLE
   ========================================================== */

#wonderhue-about-story .whas-title {
  margin: 0;
  padding: 0;

  color: var(--whas-paper);
  font-family: "Bricolage Grotesque", sans-serif;

  font-size: clamp(70px, 6.2vw, 116px);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.075em;
}

#wonderhue-about-story .whas-title-line {
  display: block;
  white-space: nowrap;
}

#wonderhue-about-story .whas-title-accent {
  color: var(--whas-coral);
  font-style: italic;
}

#wonderhue-about-story .whas-title-final {
  color: var(--whas-paper);
}

#wonderhue-about-story .whas-title-period {
  color: var(--whas-teal);
}


/* ==========================================================
   10 — HAND-DRAWN UNDERLINE
   ========================================================== */

#wonderhue-about-story .whas-title-underline {
  display: block;

  width: min(78%, 385px);
  height: 35px;

  margin: 9px 0 0 20px;

  overflow: visible;
  color: var(--whas-amber);

  transform: rotate(-3deg);
}


/* ==========================================================
   11 — MANIFESTO SIGNATURE
   ========================================================== */

#wonderhue-about-story .whas-manifesto-foot {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-top: 45px;

  color: rgba(255, 243, 231, .62);

  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .15em;
}

#wonderhue-about-story .whas-manifesto-foot-line {
  flex: 0 0 45px;
  height: 1px;
  background: var(--whas-coral);
}


/* ==========================================================
   12 — STORY INDEX
   ========================================================== */

#wonderhue-about-story .whas-story-index {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 30px;
}

#wonderhue-about-story .whas-story-index-number {
  color: var(--whas-amber);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 31px;
  font-weight: 800;
}

#wonderhue-about-story .whas-story-index-rule {
  display: block;
  width: 35px;
  height: 1px;
  background: rgba(237, 191, 134, .6);
}

#wonderhue-about-story .whas-story-index-label {
  color: var(--whas-teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}


/* ==========================================================
   13 — STORY LEAD & BODY
   ========================================================== */

#wonderhue-about-story .whas-story-lead {
  max-width: 560px;
  margin: 0 0 31px;

  color: var(--whas-paper);

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(25px, 2.15vw, 37px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.025em;
}

#wonderhue-about-story .whas-story-lead strong {
  color: var(--whas-coral);
  font-weight: 800;
}

#wonderhue-about-story .whas-story-paragraph {
  max-width: 560px;
  margin: 0 0 23px;

  color: var(--whas-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95;
}


/* ==========================================================
   14 — EDITORIAL QUOTE
   ========================================================== */

#wonderhue-about-story .whas-story-quote {
  position: relative;
  max-width: 550px;
  margin: 44px 0 35px;

  padding: 24px 28px 23px 34px;

  border-left: 2px solid var(--whas-teal);

  background: linear-gradient(
    90deg,
    rgba(131, 201, 189, .09),
    transparent 100%
  );
}

#wonderhue-about-story .whas-story-quote-mark {
  position: absolute;
  top: -27px;
  left: 19px;

  color: rgba(237, 191, 134, .46);
  font-family: Georgia, serif;
  font-size: 85px;
  line-height: 1;
}

#wonderhue-about-story .whas-story-quote p {
  position: relative;
  z-index: 1;
  margin: 0;

  color: var(--whas-paper);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}


/* ==========================================================
   15 — STORY SIGNATURE
   ========================================================== */

#wonderhue-about-story .whas-story-signature {
  display: flex;
  align-items: center;
  gap: 11px;

  color: var(--whas-amber);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

#wonderhue-about-story .whas-story-signature-star {
  color: var(--whas-coral);
  font-size: 24px;
  line-height: 1;
}


/* ==========================================================
   16 — CREATIVE COLOR SIGNATURE
   ========================================================== */

#wonderhue-about-story .whas-color-signature {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;
  padding: 30px 0;

  border-top: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

#wonderhue-about-story .whas-color-word {
  flex-shrink: 0;

  color: rgba(255, 243, 231, .8);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  white-space: nowrap;
}

#wonderhue-about-story .whas-color-trail {
  display: block;
  flex: 1 1 45px;

  height: 5px;
  min-width: 15px;

  border-radius: 60% 40% 55% 45%;

  transform: rotate(-2deg);
}

#wonderhue-about-story .whas-color-trail--coral {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(241, 139, 119, .85),
    rgba(241, 139, 119, .15)
  );
}

#wonderhue-about-story .whas-color-trail--teal {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(131, 201, 189, .85),
    rgba(131, 201, 189, .15)
  );
}

#wonderhue-about-story .whas-color-trail--amber {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(237, 191, 134, .85),
    transparent
  );
}


/* ==========================================================
   17 — BOTTOM EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-story .whas-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;

  padding: 29px 0 6px;
}

#wonderhue-about-story .whas-bottom-message,
#wonderhue-about-story .whas-bottom-next {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: rgba(255, 243, 231, .65);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .13em;
}

#wonderhue-about-story .whas-bottom-symbol {
  color: var(--whas-coral);
  font-size: 22px;
  line-height: 1;
}

#wonderhue-about-story .whas-bottom-next {
  color: var(--whas-amber);
}

#wonderhue-about-story .whas-bottom-arrow {
  font-size: 21px;
  line-height: 1;
  color: var(--whas-teal);
}


/* ==========================================================
   18 — DESKTOP COMPACT
   1025px — 1250px
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1250px) {

  #wonderhue-about-story .whas-section {
    padding-inline: 5vw;
  }

  #wonderhue-about-story .whas-main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 55px;
  }

  #wonderhue-about-story .whas-title {
    font-size: clamp(67px, 6.1vw, 82px);
  }

  #wonderhue-about-story .whas-story-lead {
    font-size: 27px;
  }

  #wonderhue-about-story .whas-story-paragraph {
    font-size: 15px;
  }

}


/* ==========================================================
   19 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-story *,
  #wonderhue-about-story *::before,
  #wonderhue-about-story *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — OUR STORY CSS DESKTOP v1.0 */







/* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 02
   OUR STORY — INK & IMAGINATION
   CSS TABLET & MOBILE v1.0
   ========================================================== */


/* ==========================================================
   20 — TABLET
   768px — 1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* 01 — FOUNDATION */

  #wonderhue-about-story .whas-section {
    padding: 85px 5vw 30px;
  }

  /* 02 — ATMOSPHERE */

  #wonderhue-about-story .whas-ink--teal {
    width: 570px;
    height: 530px;
    top: -230px;
    right: -260px;
    filter: blur(35px);
  }

  #wonderhue-about-story .whas-ink--coral {
    width: 570px;
    height: 460px;
    bottom: -230px;
    left: -240px;
    filter: blur(37px);
  }

  #wonderhue-about-story .whas-ink--amber {
    width: 370px;
    height: 310px;
    top: 37%;
    left: 30%;
  }

  #wonderhue-about-story .whas-ring--one {
    width: 500px;
    height: 500px;
    left: -330px;
    top: -330px;
  }

  #wonderhue-about-story .whas-ring--two {
    width: 380px;
    height: 380px;
    right: -270px;
  }

  #wonderhue-about-story .whas-ink-art {
    opacity: .65;
  }

  /* 03 — TOP STRIP */

  #wonderhue-about-story .whas-topline {
    gap: 16px;
    padding-bottom: 22px;
  }

  #wonderhue-about-story .whas-topline-label,
  #wonderhue-about-story .whas-topline-number {
    font-size: 9px;
    letter-spacing: .12em;
  }

  /* 04 — MAIN TWO-COLUMN COMPOSITION */

  #wonderhue-about-story .whas-main {
    grid-template-columns:
      minmax(0, .95fr)
      minmax(0, 1.05fr);

    gap: clamp(25px, 3.5vw, 42px);
    align-items: center;

    padding: 85px 0 90px;
  }

  /* 05 — MANIFESTO */

  #wonderhue-about-story .whas-eyebrow {
    gap: 9px;
    margin-bottom: 25px;
    font-size: 9px;
    letter-spacing: .1em;
  }

  #wonderhue-about-story .whas-eyebrow-mark {
    font-size: 23px;
  }

  #wonderhue-about-story .whas-title {
    font-size: clamp(47px, 5.8vw, 64px);
    line-height: .97;
    letter-spacing: -.065em;
  }

  #wonderhue-about-story .whas-title-underline {
    width: 75%;
    height: 25px;
    margin-left: 10px;
  }

  #wonderhue-about-story .whas-manifesto-foot {
    gap: 12px;
    margin-top: 31px;
    font-size: 8px;
    letter-spacing: .1em;
  }

  #wonderhue-about-story .whas-manifesto-foot-line {
    flex-basis: 28px;
  }

  /* 06 — STORY */

  #wonderhue-about-story .whas-story-index {
    gap: 10px;
    margin-bottom: 23px;
  }

  #wonderhue-about-story .whas-story-index-number {
    font-size: 25px;
  }

  #wonderhue-about-story .whas-story-lead {
    margin-bottom: 22px;
    font-size: clamp(23px, 2.8vw, 30px);
    line-height: 1.35;
  }

  #wonderhue-about-story .whas-story-paragraph {
    margin-bottom: 17px;
    font-size: 14px;
    line-height: 1.8;
  }

  /* 07 — QUOTE */

  #wonderhue-about-story .whas-story-quote {
    margin: 34px 0 29px;
    padding: 23px 20px 20px 25px;
  }

  #wonderhue-about-story .whas-story-quote-mark {
    font-size: 68px;
    top: -22px;
    left: 13px;
  }

  #wonderhue-about-story .whas-story-quote p {
    font-size: 16px;
  }

  #wonderhue-about-story .whas-story-signature {
    font-size: 9px;
    letter-spacing: .1em;
  }

  /* 08 — COLOR SIGNATURE */

  #wonderhue-about-story .whas-color-signature {
    gap: 11px;
    padding: 25px 0;
  }

  #wonderhue-about-story .whas-color-word {
    font-size: 8px;
    letter-spacing: .09em;
  }

  #wonderhue-about-story .whas-color-trail {
    min-width: 12px;
    height: 4px;
  }

  /* 09 — BOTTOM */

  #wonderhue-about-story .whas-bottom {
    gap: 15px;
    padding-top: 24px;
  }

  #wonderhue-about-story .whas-bottom-message,
  #wonderhue-about-story .whas-bottom-next {
    font-size: 9px;
    letter-spacing: .09em;
  }

}


/* ==========================================================
   21 — MOBILE
   0px — 767px
   ========================================================== */

@media (max-width: 767px) {

  /* 01 — FOUNDATION */

  #wonderhue-about-story .whas-section {
    padding: 66px 22px 25px;
  }

  /* 02 — INK ATMOSPHERE */

  #wonderhue-about-story .whas-ink--teal {
    width: 380px;
    height: 390px;
    top: -165px;
    right: -250px;
    filter: blur(31px);
  }

  #wonderhue-about-story .whas-ink--coral {
    width: 390px;
    height: 360px;
    bottom: -190px;
    left: -260px;
    filter: blur(32px);
  }

  #wonderhue-about-story .whas-ink--amber {
    width: 280px;
    height: 250px;
    top: 42%;
    left: 14%;
    filter: blur(32px);
  }

  #wonderhue-about-story .whas-ink-art {
    opacity: .5;
  }

  #wonderhue-about-story .whas-ring--one {
    width: 340px;
    height: 340px;
    top: -240px;
    left: -230px;
  }

  #wonderhue-about-story .whas-ring--two {
    width: 310px;
    height: 310px;
    right: -240px;
    bottom: -160px;
  }

  #wonderhue-about-story .whas-spark--one {
    top: 13%;
    right: 7%;
    font-size: 23px;
  }

  #wonderhue-about-story .whas-spark--two {
    bottom: 16%;
    left: 5%;
    font-size: 19px;
  }

  /* 03 — TOP EDITORIAL STRIP */

  #wonderhue-about-story .whas-topline {
    gap: 10px;
    padding-bottom: 18px;
  }

  #wonderhue-about-story .whas-topline-label,
  #wonderhue-about-story .whas-topline-number {
    font-size: 8px;
    letter-spacing: .08em;
  }

  /* 04 — MAIN LAYOUT */

  #wonderhue-about-story .whas-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 65px;
    align-items: start;
    padding: 66px 0 72px;
  }

  /* 05 — MANIFESTO */

  #wonderhue-about-story .whas-eyebrow {
    gap: 10px;
    margin-bottom: 25px;
    font-size: 9px;
    letter-spacing: .11em;
  }

  #wonderhue-about-story .whas-eyebrow-mark {
    font-size: 24px;
  }

  #wonderhue-about-story .whas-title {
    font-size: clamp(52px, 12.3vw, 85px);
    line-height: .95;
    letter-spacing: -.065em;
  }

  #wonderhue-about-story .whas-title-line {
    white-space: nowrap;
  }

  #wonderhue-about-story .whas-title-underline {
    width: 78%;
    height: 27px;
    margin: 10px 0 0 8px;
  }

  #wonderhue-about-story .whas-manifesto-foot {
    gap: 13px;
    margin-top: 30px;
    font-size: 9px;
    line-height: 1.6;
    letter-spacing: .1em;
  }

  #wonderhue-about-story .whas-manifesto-foot-line {
    flex-basis: 29px;
  }

  /* 06 — STORY BODY */

  #wonderhue-about-story .whas-story-index {
    gap: 11px;
    margin-bottom: 25px;
  }

  #wonderhue-about-story .whas-story-index-number {
    font-size: 27px;
  }

  #wonderhue-about-story .whas-story-index-rule {
    width: 27px;
  }

  #wonderhue-about-story .whas-story-index-label {
    font-size: 9px;
  }

  #wonderhue-about-story .whas-story-lead {
    margin-bottom: 23px;
    font-size: clamp(25px, 7vw, 34px);
    line-height: 1.35;
  }

  #wonderhue-about-story .whas-story-paragraph {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.85;
  }

  /* 07 — QUOTE */

  #wonderhue-about-story .whas-story-quote {
    margin: 42px 0 30px;
    padding: 24px 16px 22px 24px;
  }

  #wonderhue-about-story .whas-story-quote-mark {
    font-size: 72px;
    left: 12px;
    top: -25px;
  }

  #wonderhue-about-story .whas-story-quote p {
    font-size: 17px;
    line-height: 1.6;
  }

  /* 08 — SIGNATURE */

  #wonderhue-about-story .whas-story-signature {
    gap: 9px;
    font-size: 9px;
    letter-spacing: .09em;
  }

  #wonderhue-about-story .whas-story-signature-star {
    font-size: 21px;
  }

  /* 09 — CREATIVE COLOR SIGNATURE */

  #wonderhue-about-story .whas-color-signature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;

    padding: 26px 0;
  }

  #wonderhue-about-story .whas-color-word {
    font-size: 10px;
    letter-spacing: .12em;
  }

  #wonderhue-about-story .whas-color-trail {
    width: 100%;
    min-width: 0;
    height: 3px;
  }

  /* 10 — BOTTOM STRIP */

  #wonderhue-about-story .whas-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    gap: 12px;
    padding: 24px 0 5px;
  }

  #wonderhue-about-story .whas-bottom-message,
  #wonderhue-about-story .whas-bottom-next {
    min-width: 0;
    gap: 7px;

    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .05em;
  }

  #wonderhue-about-story .whas-bottom-next {
    flex-shrink: 0;
    text-align: right;
  }

  #wonderhue-about-story .whas-bottom-symbol,
  #wonderhue-about-story .whas-bottom-arrow {
    flex-shrink: 0;
    font-size: 19px;
  }

}


/* ==========================================================
   22 — SMALL MOBILE
   0px — 390px
   ========================================================== */

@media (max-width: 390px) {

  #wonderhue-about-story .whas-section {
    padding: 60px 17px 23px;
  }

  #wonderhue-about-story .whas-main {
    gap: 55px;
    padding: 59px 0 64px;
  }

  #wonderhue-about-story .whas-title {
    font-size: clamp(46px, 11.9vw, 53px);
  }

  #wonderhue-about-story .whas-story-lead {
    font-size: 24px;
  }

  #wonderhue-about-story .whas-story-paragraph {
    font-size: 14px;
  }

  #wonderhue-about-story .whas-color-signature {
    gap: 12px;
  }

  #wonderhue-about-story .whas-color-word {
    font-size: 9px;
  }

  #wonderhue-about-story .whas-bottom {
    gap: 8px;
  }

  #wonderhue-about-story .whas-bottom-message,
  #wonderhue-about-story .whas-bottom-next {
    font-size: 7px;
    letter-spacing: 0;
  }

}


/* ==========================================================
   23 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-story *,
  #wonderhue-about-story *::before,
  #wonderhue-about-story *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — OUR STORY CSS RESPONSIVE v1.0 *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59e0d07 *//* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 03
   WHAT WE BELIEVE — THE CREATIVE PRINCIPLES
   CSS DESKTOP v1.0
   ========================================================== */


/* ==========================================================
   01 — FOUNDATION
   ========================================================== */

#wonderhue-about-beliefs {
  --whab3-paper: #f7f0e6;
  --whab3-cream: #fff9f1;
  --whab3-ink: #17282c;
  --whab3-muted: #69746e;

  --whab3-coral: #f18b77;
  --whab3-teal: #83c9bd;
  --whab3-amber: #edbf86;

  --whab3-curiosity-bg: #f4d8c5;
  --whab3-imagination-bg: #dcebe3;
  --whab3-freedom-bg: #f4e5bf;

  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  overflow: hidden;
  isolation: isolate;

  background: var(--whab3-paper);
}

#wonderhue-about-beliefs,
#wonderhue-about-beliefs * {
  box-sizing: border-box;
}

#wonderhue-about-beliefs .whab3-section {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-width: 0;
  overflow: hidden;

  padding:
    105px
    clamp(30px, 5.8vw, 105px)
    35px;

  color: var(--whab3-ink);

  font-family: "Inter", sans-serif;

  background:
    radial-gradient(
      ellipse at 92% 8%,
      rgba(241,139,119,.09),
      transparent 35%
    ),
    radial-gradient(
      ellipse at 8% 82%,
      rgba(131,201,189,.13),
      transparent 37%
    ),
    linear-gradient(
      140deg,
      #faf5ec 0%,
      #f6eee3 100%
    );
}


/* ==========================================================
   02 — BACKGROUND ATMOSPHERE
   ========================================================== */

#wonderhue-about-beliefs .whab3-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;
  pointer-events: none;
}

#wonderhue-about-beliefs .whab3-glow {
  position: absolute;
  display: block;

  border-radius: 50%;
  pointer-events: none;
}

#wonderhue-about-beliefs .whab3-glow--coral {
  top: -280px;
  right: -260px;

  width: 620px;
  height: 620px;

  background: radial-gradient(
    circle,
    rgba(241,139,119,.20),
    transparent 70%
  );

  filter: blur(50px);
}

#wonderhue-about-beliefs .whab3-glow--teal {
  bottom: -350px;
  left: -310px;

  width: 720px;
  height: 720px;

  background: radial-gradient(
    circle,
    rgba(131,201,189,.18),
    transparent 72%
  );

  filter: blur(55px);
}

#wonderhue-about-beliefs .whab3-orbit {
  position: absolute;
  display: block;

  border: 1px solid rgba(23,40,44,.10);
  border-radius: 50%;
}

#wonderhue-about-beliefs .whab3-orbit--one {
  width: 720px;
  height: 720px;

  left: -510px;
  top: 14%;
}

#wonderhue-about-beliefs .whab3-orbit--two {
  width: 520px;
  height: 520px;

  right: -390px;
  bottom: 7%;
}

#wonderhue-about-beliefs .whab3-spark {
  position: absolute;
  display: block;

  line-height: 1;
  opacity: .5;
}

#wonderhue-about-beliefs .whab3-spark--one {
  top: 12%;
  right: 7%;

  color: #c57b68;
  font-size: 31px;
}

#wonderhue-about-beliefs .whab3-spark--two {
  bottom: 17%;
  left: 5%;

  color: #55988e;
  font-size: 23px;
}


/* ==========================================================
   03 — CONTENT CONTAINER
   ========================================================== */

#wonderhue-about-beliefs .whab3-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}


/* ==========================================================
   04 — TOP EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-beliefs .whab3-topline {
  display: flex;
  align-items: center;
  gap: 22px;

  width: 100%;
  padding-bottom: 25px;

  border-bottom: 1px solid rgba(23,40,44,.18);
}

#wonderhue-about-beliefs .whab3-topline-brand,
#wonderhue-about-beliefs .whab3-topline-number {
  color: #99765b;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
}

#wonderhue-about-beliefs .whab3-topline-number {
  color: #48877c;
}

#wonderhue-about-beliefs .whab3-topline-rule {
  display: block;
  flex: 1;

  height: 1px;

  background: rgba(23,40,44,.16);
}


/* ==========================================================
   05 — INTRO LAYOUT
   ========================================================== */

#wonderhue-about-beliefs .whab3-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(0, .55fr);

  align-items: end;
  gap: clamp(40px, 7vw, 125px);

  padding: 95px 0 75px;
}

#wonderhue-about-beliefs .whab3-intro-copy,
#wonderhue-about-beliefs .whab3-intro-aside {
  min-width: 0;
}


/* ==========================================================
   06 — EYEBROW & TITLE
   ========================================================== */

#wonderhue-about-beliefs .whab3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 31px;

  color: #9a7456;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

#wonderhue-about-beliefs .whab3-eyebrow span:first-child {
  color: var(--whab3-coral);
  font-size: 26px;
  line-height: 1;
}

#wonderhue-about-beliefs .whab3-title {
  margin: 0;
  padding: 0;

  color: var(--whab3-ink);

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(55px, 5.25vw, 94px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.065em;
}

#wonderhue-about-beliefs .whab3-title-line {
  display: block;
}

#wonderhue-about-beliefs .whab3-title em {
  color: #d77c68;
  font-style: italic;
}


/* ==========================================================
   07 — INTRO ASIDE
   ========================================================== */

#wonderhue-about-beliefs .whab3-intro-aside {
  max-width: 310px;
  padding-bottom: 12px;
}

#wonderhue-about-beliefs .whab3-aside-rule {
  display: block;

  width: 52px;
  height: 2px;

  margin-bottom: 25px;
  background: var(--whab3-coral);
}

#wonderhue-about-beliefs .whab3-intro-description {
  margin: 0 0 22px;

  color: #52625d;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(21px, 1.7vw, 28px);
  font-weight: 500;
  line-height: 1.45;
}

#wonderhue-about-beliefs .whab3-intro-aside-index {
  color: #9c806b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.7;
}


/* ==========================================================
   08 — ASYMMETRIC ART GALLERY
   ========================================================== */

#wonderhue-about-beliefs .whab3-gallery {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, .92fr);

  grid-template-rows:
    minmax(300px, auto)
    minmax(300px, auto);

  gap: 25px;

  align-items: stretch;
}

/* Shared art pieces */

#wonderhue-about-beliefs .whab3-piece {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  padding: clamp(27px, 2.6vw, 44px);

  border: 1px solid rgba(23,40,44,.08);
  border-radius: 25px;

  box-shadow:
    0 20px 55px rgba(78,69,55,.055),
    inset 0 1px rgba(255,255,255,.42);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
}

#wonderhue-about-beliefs .whab3-piece::before {
  content: "";
  position: absolute;

  inset: 0;
  z-index: 0;

  opacity: .6;

  background: radial-gradient(
    circle at 85% 5%,
    rgba(255,255,255,.75),
    transparent 53%
  );

  pointer-events: none;
}

#wonderhue-about-beliefs .whab3-piece > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {

  #wonderhue-about-beliefs .whab3-piece:hover {
    transform: translateY(-7px);

    box-shadow:
      0 28px 65px rgba(78,69,55,.13),
      inset 0 1px rgba(255,255,255,.4);
  }

}


/* ==========================================================
   09 — GALLERY GRID PLACEMENT
   ========================================================== */

#wonderhue-about-beliefs .whab3-piece--curiosity {
  grid-column: 1;
  grid-row: 1 / 3;

  min-height: 680px;

  background: linear-gradient(
    155deg,
    #f7dfcf 0%,
    #efcbb9 100%
  );
}

#wonderhue-about-beliefs .whab3-piece--imagination {
  grid-column: 2;
  grid-row: 1;

  background: linear-gradient(
    145deg,
    #e2f1e8 0%,
    #cce4dc 100%
  );
}

#wonderhue-about-beliefs .whab3-piece--freedom {
  grid-column: 2;
  grid-row: 2;

  background: linear-gradient(
    145deg,
    #f8eacb 0%,
    #efdaa7 100%
  );
}


/* ==========================================================
   10 — PIECE EDITORIAL HEADER
   ========================================================== */

#wonderhue-about-beliefs .whab3-piece-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  width: 100%;
}

#wonderhue-about-beliefs .whab3-piece-index {
  color: rgba(44,59,54,.66);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  white-space: nowrap;
}

#wonderhue-about-beliefs .whab3-piece-corner-symbol {
  color: rgba(44,59,54,.57);

  font-size: 25px;
  line-height: 1;
}


/* ==========================================================
   11 — PIECE COPY
   ========================================================== */

#wonderhue-about-beliefs .whab3-piece-copy {
  position: relative;
  min-width: 0;
}

#wonderhue-about-beliefs .whab3-piece-title {
  margin: 0 0 20px;
  padding: 0;

  color: #26342f;

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(39px, 3.4vw, 67px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
}

#wonderhue-about-beliefs .whab3-piece-title span {
  color: #a66d59;
}

#wonderhue-about-beliefs .whab3-piece-description {
  max-width: 390px;
  margin: 0;

  color: #5d6259;

  font-size: 15px;
  line-height: 1.8;
}


/* ==========================================================
   12 — CURIOSITY: FEATURE ARTWORK
   ========================================================== */

#wonderhue-about-beliefs .whab3-piece--curiosity
.whab3-piece-content {
  display: flex;
  flex-direction: column;
  flex: 1;

  justify-content: space-between;
  gap: 35px;

  margin-top: 50px;
}

#wonderhue-about-beliefs .whab3-piece--curiosity
.whab3-piece-title {
  font-size: clamp(57px, 5vw, 91px);
}

#wonderhue-about-beliefs .whab3-piece--curiosity
.whab3-piece-description {
  max-width: 430px;
  font-size: 17px;
}

#wonderhue-about-beliefs .whab3-piece-art {
  display: grid;
  place-items: center;

  width: 100%;
  min-width: 0;

  pointer-events: none;
}

#wonderhue-about-beliefs .whab3-piece-art--curiosity {
  flex: 1;
  min-height: 320px;
  margin: 12px 0 0;
}

#wonderhue-about-beliefs .whab3-art-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

#wonderhue-about-beliefs .whab3-art-svg--curiosity {
  max-width: 520px;
}

#wonderhue-about-beliefs .whab3-curiosity-spark {
  transform-box: fill-box;
  transform-origin: center;

  transition: transform .7s ease;
}

#wonderhue-about-beliefs .whab3-curiosity-path {
  transition: stroke-width .5s ease;
}

@media (hover: hover) {

  #wonderhue-about-beliefs .whab3-piece--curiosity:hover
  .whab3-curiosity-spark {
    transform: rotate(22deg) scale(1.08);
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity:hover
  .whab3-curiosity-path {
    stroke-width: 9;
  }

}


/* ==========================================================
   13 — IMAGINATION: FLOATING WORLD
   ========================================================== */

#wonderhue-about-beliefs .whab3-piece--imagination
.whab3-piece-art {
  max-height: 250px;
  margin: 12px auto 12px;
}

#wonderhue-about-beliefs .whab3-piece--imagination
.whab3-art-svg {
  max-width: 335px;
}

#wonderhue-about-beliefs .whab3-piece--imagination
.whab3-piece-copy {
  margin-top: auto;
}

#wonderhue-about-beliefs .whab3-piece--imagination
.whab3-piece-title {
  font-size: clamp(37px, 3vw, 56px);
}

#wonderhue-about-beliefs .whab3-imagination-orbit,
#wonderhue-about-beliefs .whab3-imagination-planet {
  transform-box: fill-box;
  transform-origin: center;

  transition: transform .8s ease;
}

@media (hover: hover) {

  #wonderhue-about-beliefs .whab3-piece--imagination:hover
  .whab3-imagination-orbit--one {
    transform: rotate(15deg);
  }

  #wonderhue-about-beliefs .whab3-piece--imagination:hover
  .whab3-imagination-orbit--two {
    transform: rotate(-15deg);
  }

  #wonderhue-about-beliefs .whab3-piece--imagination:hover
  .whab3-imagination-planet {
    transform: scale(1.065);
  }

}


/* ==========================================================
   14 — CREATIVE FREEDOM: FLOWING RIBBON
   ========================================================== */

#wonderhue-about-beliefs .whab3-piece--freedom
.whab3-piece-art {
  max-height: 240px;
  margin: 15px auto 8px;
}

#wonderhue-about-beliefs .whab3-piece--freedom
.whab3-art-svg {
  max-width: 340px;
}

#wonderhue-about-beliefs .whab3-piece--freedom
.whab3-piece-copy {
  margin-top: auto;
}

#wonderhue-about-beliefs .whab3-piece--freedom
.whab3-piece-title {
  font-size: clamp(36px, 2.9vw, 55px);
}

#wonderhue-about-beliefs .whab3-freedom-title-line {
  display: block;
}

#wonderhue-about-beliefs .whab3-freedom-ribbon {
  transition:
    stroke-width .5s ease,
    transform .7s ease;
}

@media (hover: hover) {

  #wonderhue-about-beliefs .whab3-piece--freedom:hover
  .whab3-freedom-ribbon {
    stroke-width: 29;
    transform: translateY(-5px);
  }

}


/* ==========================================================
   15 — PIECE BOTTOM SIGNATURE
   ========================================================== */

#wonderhue-about-beliefs .whab3-piece-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: 30px;
  padding-top: 22px;

  border-top: 1px solid rgba(38,52,47,.15);
}

#wonderhue-about-beliefs .whab3-piece-bottom span:first-child {
  color: rgba(38,52,47,.7);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

#wonderhue-about-beliefs .whab3-piece-bottom span:last-child {
  color: rgba(38,52,47,.75);

  font-size: 24px;
  line-height: 1;
  transition: transform .35s ease;
}

@media (hover: hover) {

  #wonderhue-about-beliefs .whab3-piece:hover
  .whab3-piece-bottom span:last-child {
    transform: translate(4px,-4px);
  }

}


/* ==========================================================
   16 — CLOSING STATEMENT
   ========================================================== */

#wonderhue-about-beliefs .whab3-closing {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 20px;
  padding: 74px 0 72px;

  text-align: center;
}

#wonderhue-about-beliefs .whab3-closing-mark {
  color: var(--whab3-coral);
  font-size: 35px;
  line-height: 1;
}

#wonderhue-about-beliefs .whab3-closing p {
  margin: 0;

  color: var(--whab3-ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(25px, 2.5vw, 43px);
  font-weight: 500;
  letter-spacing: -.035em;
}

#wonderhue-about-beliefs .whab3-closing strong {
  color: #cb755f;
  font-weight: 800;
}

#wonderhue-about-beliefs .whab3-closing-index {
  color: #9c806b;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}


/* ==========================================================
   17 — BOTTOM EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-beliefs .whab3-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;

  padding: 26px 0 7px;

  border-top: 1px solid rgba(23,40,44,.18);
}

#wonderhue-about-beliefs .whab3-bottom-left,
#wonderhue-about-beliefs .whab3-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  color: #7b7469;

  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .11em;
}

#wonderhue-about-beliefs .whab3-bottom-left span:first-child {
  color: var(--whab3-coral);
  font-size: 21px;
}

#wonderhue-about-beliefs .whab3-bottom-right span:last-child {
  color: #48877c;
  font-size: 23px;
  line-height: 1;
}


/* ==========================================================
   18 — COMPACT DESKTOP
   1025px — 1250px
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1250px) {

  #wonderhue-about-beliefs .whab3-section {
    padding-inline: 5vw;
  }

  #wonderhue-about-beliefs .whab3-intro {
    gap: 40px;
  }

  #wonderhue-about-beliefs .whab3-title {
    font-size: clamp(53px, 5vw, 65px);
  }

  #wonderhue-about-beliefs .whab3-gallery {
    gap: 18px;
  }

  #wonderhue-about-beliefs .whab3-piece {
    padding: 26px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-title {
    font-size: 65px;
  }

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-piece-title {
    font-size: 42px;
  }

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-piece-title {
    font-size: 41px;
  }

}


/* ==========================================================
   19 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-beliefs *,
  #wonderhue-about-beliefs *::before,
  #wonderhue-about-beliefs *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — WHAT WE BELIEVE CSS DESKTOP v1.0 */








/* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 03
   WHAT WE BELIEVE — THE CREATIVE PRINCIPLES
   CSS TABLET & MOBILE v1.0
   ========================================================== */


/* ==========================================================
   20 — TABLET
   768px — 1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* 01 — SECTION FOUNDATION */

  #wonderhue-about-beliefs .whab3-section {
    padding: 82px 5vw 30px;
  }

  /* 02 — BACKGROUND ATMOSPHERE */

  #wonderhue-about-beliefs .whab3-glow--coral {
    width: 450px;
    height: 450px;
    top: -220px;
    right: -250px;
    filter: blur(35px);
  }

  #wonderhue-about-beliefs .whab3-glow--teal {
    width: 500px;
    height: 500px;
    bottom: -290px;
    left: -280px;
    filter: blur(40px);
  }

  #wonderhue-about-beliefs .whab3-orbit--one {
    width: 480px;
    height: 480px;
    left: -360px;
  }

  #wonderhue-about-beliefs .whab3-orbit--two {
    width: 380px;
    height: 380px;
    right: -290px;
  }

  /* 03 — TOP EDITORIAL STRIP */

  #wonderhue-about-beliefs .whab3-topline {
    gap: 15px;
    padding-bottom: 20px;
  }

  #wonderhue-about-beliefs .whab3-topline-brand,
  #wonderhue-about-beliefs .whab3-topline-number {
    font-size: 9px;
    letter-spacing: .11em;
  }

  /* 04 — INTRO */

  #wonderhue-about-beliefs .whab3-intro {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(0, .8fr);

    align-items: end;
    gap: 28px;

    padding: 70px 0 58px;
  }

  #wonderhue-about-beliefs .whab3-eyebrow {
    gap: 9px;
    margin-bottom: 24px;
    font-size: 9px;
  }

  #wonderhue-about-beliefs .whab3-eyebrow span:first-child {
    font-size: 23px;
  }

  #wonderhue-about-beliefs .whab3-title {
    font-size: clamp(43px, 5.2vw, 58px);
    line-height: 1.04;
    letter-spacing: -.06em;
  }

  #wonderhue-about-beliefs .whab3-aside-rule {
    width: 35px;
    margin-bottom: 18px;
  }

  #wonderhue-about-beliefs .whab3-intro-description {
    font-size: clamp(17px, 2.1vw, 22px);
    line-height: 1.5;
  }

  #wonderhue-about-beliefs .whab3-intro-aside-index {
    font-size: 8px;
    letter-spacing: .08em;
  }

  /* 05 — GALLERY GRID */

  #wonderhue-about-beliefs .whab3-gallery {
    grid-template-columns:
      minmax(0, 1.03fr)
      minmax(0, .97fr);

    grid-template-rows: auto auto;
    gap: 16px;
    align-items: stretch;
  }

  #wonderhue-about-beliefs .whab3-piece {
    padding: 22px;
    border-radius: 20px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 620px;
  }

  #wonderhue-about-beliefs .whab3-piece--imagination {
    grid-column: 2;
    grid-row: 1;
  }

  #wonderhue-about-beliefs .whab3-piece--freedom {
    grid-column: 2;
    grid-row: 2;
  }

  /* 06 — ART PIECE HEADERS */

  #wonderhue-about-beliefs .whab3-piece-index {
    font-size: 8px;
    letter-spacing: .1em;
  }

  #wonderhue-about-beliefs .whab3-piece-corner-symbol {
    font-size: 21px;
  }

  /* 07 — CURIOSITY */

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-content {
    gap: 25px;
    margin-top: 36px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-title {
    font-size: clamp(42px, 5vw, 59px);
    margin-bottom: 16px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-description {
    font-size: 14px;
    line-height: 1.75;
  }

  #wonderhue-about-beliefs .whab3-piece-art--curiosity {
    min-height: 220px;
    margin-top: 10px;
  }

  #wonderhue-about-beliefs .whab3-art-svg--curiosity {
    max-width: 350px;
  }

  /* 08 — IMAGINATION */

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-piece-art {
    max-height: 175px;
    margin: 12px auto;
  }

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-art-svg {
    max-width: 230px;
    max-height: 170px;
  }

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-piece-title {
    font-size: clamp(30px, 3.5vw, 39px);
    margin-bottom: 11px;
  }

  /* 09 — CREATIVE FREEDOM */

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-piece-art {
    max-height: 165px;
    margin: 10px auto;
  }

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-art-svg {
    max-width: 230px;
    max-height: 155px;
  }

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-piece-title {
    font-size: clamp(29px, 3.3vw, 38px);
    margin-bottom: 11px;
  }

  /* 10 — SHARED DESCRIPTION */

  #wonderhue-about-beliefs .whab3-piece-description {
    font-size: 13px;
    line-height: 1.7;
  }

  /* 11 — PIECE FOOTERS */

  #wonderhue-about-beliefs .whab3-piece-bottom {
    gap: 9px;
    margin-top: 20px;
    padding-top: 16px;
  }

  #wonderhue-about-beliefs .whab3-piece-bottom span:first-child {
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .06em;
  }

  #wonderhue-about-beliefs .whab3-piece-bottom span:last-child {
    font-size: 20px;
  }

  /* 12 — CLOSING */

  #wonderhue-about-beliefs .whab3-closing {
    gap: 15px;
    padding: 65px 0 60px;
  }

  #wonderhue-about-beliefs .whab3-closing p {
    font-size: clamp(26px, 3.2vw, 35px);
  }

  #wonderhue-about-beliefs .whab3-closing-index {
    font-size: 8px;
  }

  /* 13 — BOTTOM STRIP */

  #wonderhue-about-beliefs .whab3-bottom {
    gap: 15px;
    padding-top: 22px;
  }

  #wonderhue-about-beliefs .whab3-bottom-left,
  #wonderhue-about-beliefs .whab3-bottom-right {
    gap: 8px;
    font-size: 8px;
    letter-spacing: .06em;
  }

}


/* ==========================================================
   21 — MOBILE
   0px — 767px
   ========================================================== */

@media (max-width: 767px) {

  /* 01 — SECTION FOUNDATION */

  #wonderhue-about-beliefs .whab3-section {
    padding: 67px 22px 25px;
  }

  /* 02 — BACKGROUND ATMOSPHERE */

  #wonderhue-about-beliefs .whab3-glow--coral {
    width: 360px;
    height: 360px;
    top: -180px;
    right: -230px;
    filter: blur(32px);
  }

  #wonderhue-about-beliefs .whab3-glow--teal {
    width: 380px;
    height: 380px;
    bottom: -260px;
    left: -240px;
    filter: blur(35px);
  }

  #wonderhue-about-beliefs .whab3-orbit--one {
    width: 350px;
    height: 350px;
    left: -270px;
  }

  #wonderhue-about-beliefs .whab3-orbit--two {
    width: 290px;
    height: 290px;
    right: -230px;
  }

  #wonderhue-about-beliefs .whab3-spark--one {
    top: 9%;
    right: 6%;
    font-size: 23px;
  }

  #wonderhue-about-beliefs .whab3-spark--two {
    left: 5%;
    bottom: 13%;
    font-size: 19px;
  }

  /* 03 — TOP EDITORIAL STRIP */

  #wonderhue-about-beliefs .whab3-topline {
    gap: 11px;
    padding-bottom: 18px;
  }

  #wonderhue-about-beliefs .whab3-topline-brand,
  #wonderhue-about-beliefs .whab3-topline-number {
    font-size: 8px;
    letter-spacing: .06em;
  }

  /* 04 — INTRO LAYOUT */

  #wonderhue-about-beliefs .whab3-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 29px;
    align-items: start;
    padding: 59px 0 48px;
  }

  #wonderhue-about-beliefs .whab3-eyebrow {
    gap: 9px;
    margin-bottom: 25px;
    font-size: 9px;
    letter-spacing: .1em;
  }

  #wonderhue-about-beliefs .whab3-eyebrow span:first-child {
    font-size: 23px;
  }

  #wonderhue-about-beliefs .whab3-title {
    font-size: clamp(39px, 10.8vw, 66px);
    line-height: 1.04;
    letter-spacing: -.063em;
    overflow-wrap: normal;
  }

  #wonderhue-about-beliefs .whab3-title-line {
    display: block;
  }

  #wonderhue-about-beliefs .whab3-intro-aside {
    max-width: 420px;
    padding-bottom: 0;
  }

  #wonderhue-about-beliefs .whab3-aside-rule {
    width: 38px;
    margin-bottom: 19px;
  }

  #wonderhue-about-beliefs .whab3-intro-description {
    margin-bottom: 13px;
    font-size: 20px;
  }

  #wonderhue-about-beliefs .whab3-intro-aside-index {
    font-size: 8px;
    letter-spacing: .08em;
  }

  /* 05 — GALLERY VERTICAL */

  #wonderhue-about-beliefs .whab3-gallery {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
  }

  #wonderhue-about-beliefs .whab3-piece {
    width: 100%;
    min-width: 0;
    min-height: auto;
    padding: 25px 23px;
    border-radius: 20px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity,
  #wonderhue-about-beliefs .whab3-piece--imagination,
  #wonderhue-about-beliefs .whab3-piece--freedom {
    grid-column: auto;
    grid-row: auto;
  }

  /* 06 — COMMON ART HEADERS */

  #wonderhue-about-beliefs .whab3-piece-index {
    font-size: 9px;
    letter-spacing: .11em;
  }

  #wonderhue-about-beliefs .whab3-piece-corner-symbol {
    font-size: 23px;
  }

  /* 07 — CURIOSITY */

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-content {
    gap: 18px;
    margin-top: 37px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-title {
    font-size: clamp(46px, 12vw, 70px);
    margin-bottom: 16px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-description {
    font-size: 15px;
    line-height: 1.75;
  }

  #wonderhue-about-beliefs .whab3-piece-art--curiosity {
    min-height: auto;
    margin: 8px 0 0;
  }

  #wonderhue-about-beliefs .whab3-art-svg--curiosity {
    max-width: 430px;
  }

  /* 08 — IMAGINATION */

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-piece-art {
    max-height: none;
    margin: 20px auto 22px;
  }

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-art-svg {
    max-width: 330px;
    max-height: none;
  }

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-piece-title {
    font-size: clamp(37px, 10vw, 55px);
    margin-bottom: 15px;
  }

  /* 09 — CREATIVE FREEDOM */

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-piece-art {
    max-height: none;
    margin: 20px auto;
  }

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-art-svg {
    max-width: 330px;
    max-height: none;
  }

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-piece-title {
    font-size: clamp(37px, 9.8vw, 54px);
    margin-bottom: 15px;
  }

  /* 10 — SHARED BODY */

  #wonderhue-about-beliefs .whab3-piece-description {
    font-size: 15px;
    line-height: 1.8;
  }

  /* 11 — PIECE FOOTERS */

  #wonderhue-about-beliefs .whab3-piece-bottom {
    gap: 13px;
    margin-top: 25px;
    padding-top: 19px;
  }

  #wonderhue-about-beliefs .whab3-piece-bottom span:first-child {
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .08em;
  }

  #wonderhue-about-beliefs .whab3-piece-bottom span:last-child {
    font-size: 22px;
  }

  /* 12 — CLOSING STATEMENT */

  #wonderhue-about-beliefs .whab3-closing {
    flex-direction: column;
    gap: 12px;
    padding: 55px 0 53px;
  }

  #wonderhue-about-beliefs .whab3-closing-mark {
    font-size: 31px;
  }

  #wonderhue-about-beliefs .whab3-closing p {
    font-size: clamp(26px, 7.5vw, 37px);
    line-height: 1.3;
  }

  #wonderhue-about-beliefs .whab3-closing-index {
    font-size: 8px;
    letter-spacing: .1em;
  }

  /* 13 — BOTTOM STRIP */

  #wonderhue-about-beliefs .whab3-bottom {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 11px;
    padding-top: 22px;
  }

  #wonderhue-about-beliefs .whab3-bottom-left,
  #wonderhue-about-beliefs .whab3-bottom-right {
    min-width: 0;
    gap: 7px;
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .03em;
  }

  #wonderhue-about-beliefs .whab3-bottom-right {
    text-align: right;
  }

  #wonderhue-about-beliefs .whab3-bottom-left span:first-child,
  #wonderhue-about-beliefs .whab3-bottom-right span:last-child {
    flex-shrink: 0;
  }

}


/* ==========================================================
   22 — SMALL MOBILE
   0px — 390px
   ========================================================== */

@media (max-width: 390px) {

  #wonderhue-about-beliefs .whab3-section {
    padding: 59px 17px 23px;
  }

  #wonderhue-about-beliefs .whab3-topline-brand,
  #wonderhue-about-beliefs .whab3-topline-number {
    font-size: 7px;
    letter-spacing: .03em;
  }

  #wonderhue-about-beliefs .whab3-title {
    font-size: clamp(36px, 10.4vw, 43px);
  }

  #wonderhue-about-beliefs .whab3-piece {
    padding: 22px 19px;
  }

  #wonderhue-about-beliefs .whab3-piece--curiosity
  .whab3-piece-title {
    font-size: clamp(40px, 11vw, 49px);
  }

  #wonderhue-about-beliefs .whab3-piece--imagination
  .whab3-piece-title {
    font-size: clamp(32px, 9.2vw, 40px);
  }

  #wonderhue-about-beliefs .whab3-piece--freedom
  .whab3-piece-title {
    font-size: clamp(32px, 9vw, 39px);
  }

  #wonderhue-about-beliefs .whab3-piece-description {
    font-size: 14px;
  }

  #wonderhue-about-beliefs .whab3-piece-bottom span:first-child {
    font-size: 8px;
  }

  #wonderhue-about-beliefs .whab3-bottom {
    gap: 8px;
  }

  #wonderhue-about-beliefs .whab3-bottom-left,
  #wonderhue-about-beliefs .whab3-bottom-right {
    font-size: 7px;
    letter-spacing: 0;
  }

}


/* ==========================================================
   23 — TOUCH DEVICES
   ========================================================== */

@media (hover: none) {

  #wonderhue-about-beliefs .whab3-piece {
    transform: none;
  }

}


/* ==========================================================
   24 — ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-beliefs *,
  #wonderhue-about-beliefs *::before,
  #wonderhue-about-beliefs *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — WHAT WE BELIEVE CSS RESPONSIVE v1.0 *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-987065a *//* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 04
   MADE FOR EVERY STAGE
   THE CREATIVE TIMELINE — CSS DESKTOP v1.0
   ========================================================== */


/* ==========================================================
   01 — SECTION FOUNDATION
   ========================================================== */

#wonderhue-about-stages {
  --whab4-ink: #101d22;
  --whab4-deep: #0b161b;
  --whab4-paper: #fff4e8;
  --whab4-muted: #b5c9c3;

  --whab4-coral: #f18b77;
  --whab4-teal: #83c9bd;
  --whab4-amber: #edbf86;

  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  isolation: isolate;
  overflow: hidden;

  background: var(--whab4-deep);
}

#wonderhue-about-stages,
#wonderhue-about-stages * {
  box-sizing: border-box;
}

#wonderhue-about-stages .whab4-section {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;

  padding: 105px clamp(30px, 6vw, 110px) 35px;

  color: var(--whab4-paper);
  font-family: "Inter", sans-serif;

  background:
    radial-gradient(
      ellipse at 78% 19%,
      rgba(57, 135, 129, .15),
      transparent 44%
    ),
    radial-gradient(
      ellipse at 17% 77%,
      rgba(154, 83, 92, .12),
      transparent 39%
    ),
    linear-gradient(
      150deg,
      #14282d 0%,
      #101d23 47%,
      #0b161c 100%
    );
}


/* ==========================================================
   02 — BACKGROUND ATMOSPHERE
   ========================================================== */

#wonderhue-about-stages .whab4-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#wonderhue-about-stages .whab4-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
}

#wonderhue-about-stages .whab4-glow--teal {
  width: 780px;
  height: 780px;
  top: 5%;
  right: -360px;

  background: radial-gradient(
    circle,
    rgba(80, 181, 169, .16),
    transparent 70%
  );

  filter: blur(55px);
}

#wonderhue-about-stages .whab4-glow--coral {
  width: 740px;
  height: 740px;
  top: 43%;
  left: -400px;

  background: radial-gradient(
    circle,
    rgba(241, 139, 119, .12),
    transparent 70%
  );

  filter: blur(60px);
}

#wonderhue-about-stages .whab4-glow--amber {
  width: 580px;
  height: 580px;
  bottom: -320px;
  right: -180px;

  background: radial-gradient(
    circle,
    rgba(237, 191, 134, .12),
    transparent 72%
  );

  filter: blur(55px);
}

#wonderhue-about-stages .whab4-orbit {
  position: absolute;
  display: block;
  border: 1px solid rgba(131, 201, 189, .11);
  border-radius: 50%;
}

#wonderhue-about-stages .whab4-orbit--one {
  width: 760px;
  height: 760px;
  top: -390px;
  left: -500px;
}

#wonderhue-about-stages .whab4-orbit--two {
  width: 660px;
  height: 660px;
  bottom: 8%;
  right: -470px;

  border-color: rgba(237, 191, 134, .10);
}

#wonderhue-about-stages .whab4-spark {
  position: absolute;
  line-height: 1;
  opacity: .45;
}

#wonderhue-about-stages .whab4-spark--one {
  top: 13%;
  right: 9%;
  color: var(--whab4-amber);
  font-size: 29px;
}

#wonderhue-about-stages .whab4-spark--two {
  top: 47%;
  left: 6%;
  color: var(--whab4-coral);
  font-size: 24px;
}

#wonderhue-about-stages .whab4-spark--three {
  bottom: 15%;
  right: 8%;
  color: var(--whab4-teal);
  font-size: 25px;
}


/* ==========================================================
   03 — MAIN CONTENT CONTAINER
   ========================================================== */

#wonderhue-about-stages .whab4-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}


/* ==========================================================
   04 — TOP EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-stages .whab4-topline {
  display: flex;
  align-items: center;
  gap: 22px;

  width: 100%;
  padding-bottom: 26px;

  border-bottom: 1px solid rgba(255,255,255,.15);
}

#wonderhue-about-stages .whab4-topline-brand,
#wonderhue-about-stages .whab4-topline-number {
  color: var(--whab4-amber);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
}

#wonderhue-about-stages .whab4-topline-number {
  color: var(--whab4-teal);
}

#wonderhue-about-stages .whab4-topline-rule {
  flex: 1;
  height: 1px;
  background: rgba(237,191,134,.22);
}


/* ==========================================================
   05 — EDITORIAL INTRO
   ========================================================== */

#wonderhue-about-stages .whab4-intro {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;

  padding: 105px 0 90px;
  text-align: center;
}

#wonderhue-about-stages .whab4-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  margin-bottom: 30px;

  color: var(--whab4-amber);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

#wonderhue-about-stages .whab4-eyebrow span:first-child {
  color: var(--whab4-coral);
  font-size: 27px;
  line-height: 1;
}

#wonderhue-about-stages .whab4-title {
  margin: 0;
  color: var(--whab4-paper);

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(60px, 6.2vw, 112px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.065em;
}

#wonderhue-about-stages .whab4-title-line {
  display: block;
}

#wonderhue-about-stages .whab4-title em {
  color: var(--whab4-teal);
  font-style: italic;
}

#wonderhue-about-stages .whab4-description {
  max-width: 680px;
  margin: 35px auto 0;

  color: var(--whab4-muted);
  font-size: 17px;
  line-height: 1.9;
}

#wonderhue-about-stages .whab4-intro-signature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  margin-top: 31px;

  color: var(--whab4-amber);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

#wonderhue-about-stages .whab4-intro-signature span:first-child {
  color: var(--whab4-coral);
  font-size: 21px;
}


/* ==========================================================
   06 — TIMELINE FOUNDATION
   ========================================================== */

#wonderhue-about-stages .whab4-timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(6, minmax(205px, auto));

  gap: 36px;
  width: 100%;

  padding: 45px 0 85px;
  isolation: isolate;
}


/* ==========================================================
   07 — CENTRAL ARTISTIC PATH
   ========================================================== */

#wonderhue-about-stages .whab4-timeline-svg {
  position: absolute;
  z-index: 0;

  top: 45px;
  bottom: 85px;
  left: 0;

  width: 100%;
  height: calc(100% - 130px);

  overflow: visible;
  pointer-events: none;
}

#wonderhue-about-stages .whab4-path-base {
  fill: none;
}

#wonderhue-about-stages .whab4-path-progress {
  fill: none;
  opacity: .95;

  filter: drop-shadow(
    0 0 8px rgba(131,201,189,.18)
  );
}


/* ==========================================================
   08 — TIMELINE STAGE FOUNDATION
   ========================================================== */

#wonderhue-about-stages .whab4-stage {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height: 205px;
}

#wonderhue-about-stages .whab4-stage-marker {
  grid-column: 2;
  grid-row: 1;

  position: relative;
  z-index: 3;

  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;
  margin-inline: auto;

  border: 5px solid #11232a;
  border-radius: 50%;

  background: var(--whab4-stage-color);
  color: #182c30;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 0 11px rgba(131,201,189,.055),
    0 0 25px rgba(131,201,189,.15);

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}

#wonderhue-about-stages .whab4-stage-marker span {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 32px;
  line-height: 1;
}


/* ==========================================================
   09 — STAGE CONTENT
   ========================================================== */

#wonderhue-about-stages .whab4-stage-content {
  position: relative;
  min-width: 0;

  padding: 26px 32px;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 19px;

  background:
    linear-gradient(
      130deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow: 0 15px 45px rgba(0,0,0,.10);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

/* Small color line at the top of each stage */

#wonderhue-about-stages .whab4-stage-content::before {
  content: "";
  position: absolute;

  top: 0;
  left: 32px;

  width: 65px;
  height: 3px;

  border-radius: 0 0 8px 8px;
  background: var(--whab4-stage-color);
}


/* ==========================================================
   10 — ALTERNATING STAGES
   ========================================================== */

#wonderhue-about-stages .whab4-stage--left
.whab4-stage-content {
  grid-column: 1;
  grid-row: 1;

  margin-right: 15px;
  text-align: right;
}

#wonderhue-about-stages .whab4-stage--right
.whab4-stage-content {
  grid-column: 3;
  grid-row: 1;

  margin-left: 15px;
  text-align: left;
}

#wonderhue-about-stages .whab4-stage--left
.whab4-stage-content::before {
  left: auto;
  right: 32px;
}


/* ==========================================================
   11 — STAGE TYPOGRAPHY
   ========================================================== */

#wonderhue-about-stages .whab4-stage-index {
  display: block;

  margin-bottom: 21px;

  color: rgba(255,244,232,.48);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

#wonderhue-about-stages .whab4-stage-age {
  display: block;

  margin-bottom: 12px;

  color: var(--whab4-stage-color);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
}

#wonderhue-about-stages .whab4-stage-title {
  margin: 0 0 14px;
  padding: 0;

  color: var(--whab4-paper);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(29px, 2.6vw, 46px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.045em;
}

#wonderhue-about-stages .whab4-stage-description {
  max-width: 380px;
  margin: 0;

  color: var(--whab4-muted);
  font-size: 15px;
  line-height: 1.8;
}

#wonderhue-about-stages .whab4-stage--left
.whab4-stage-description {
  margin-left: auto;
}

#wonderhue-about-stages .whab4-stage-tag {
  display: inline-block;
  margin-top: 22px;

  color: var(--whab4-stage-color);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.6;
}


/* ==========================================================
   12 — STAGE HOVER
   ========================================================== */

@media (hover: hover) {

  #wonderhue-about-stages .whab4-stage:hover
  .whab4-stage-marker {
    transform: scale(1.12);

    box-shadow:
      0 0 0 1px rgba(255,255,255,.16),
      0 0 0 13px rgba(131,201,189,.08),
      0 0 38px rgba(131,201,189,.25);
  }

  #wonderhue-about-stages .whab4-stage:hover
  .whab4-stage-content {
    border-color: var(--whab4-stage-color);
    box-shadow: 0 20px 48px rgba(0,0,0,.18);
  }

  #wonderhue-about-stages .whab4-stage--left:hover
  .whab4-stage-content {
    transform: translateX(-7px);
  }

  #wonderhue-about-stages .whab4-stage--right:hover
  .whab4-stage-content {
    transform: translateX(7px);
  }

}


/* ==========================================================
   13 — JOURNEY CONCLUSION
   ========================================================== */

#wonderhue-about-stages .whab4-conclusion {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 950px;
  margin: 35px auto 90px;

  padding: 55px 35px 15px;
  text-align: center;

  border-top: 1px solid rgba(255,255,255,.13);
}

#wonderhue-about-stages .whab4-conclusion-symbol {
  display: block;
  margin-bottom: 22px;

  color: var(--whab4-coral);
  font-size: 38px;
  line-height: 1;
}

#wonderhue-about-stages .whab4-conclusion p {
  margin: 0 0 34px;

  color: var(--whab4-paper);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(36px, 3.8vw, 65px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.045em;
}

#wonderhue-about-stages .whab4-conclusion strong {
  display: block;
  color: var(--whab4-teal);
  font-weight: 800;
}


/* ==========================================================
   14 — PRIMARY CTA
   ========================================================== */

#wonderhue-about-stages .whab4-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  min-height: 60px;
  padding: 12px 15px 12px 29px;

  border: 1px solid var(--whab4-coral);
  border-radius: 50px;

  background: var(--whab4-coral);
  color: #14262b;

  font-size: 13px;
  font-weight: 800;
  text-decoration: none;

  box-shadow: 0 12px 28px rgba(241,139,119,.18);

  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

#wonderhue-about-stages .whab4-cta-arrow {
  display: grid;
  place-items: center;

  width: 35px;
  height: 35px;

  border-radius: 50%;
  background: rgba(20,38,43,.12);
  font-size: 20px;
  line-height: 1;

  transition: transform .35s ease;
}

@media (hover: hover) {

  #wonderhue-about-stages .whab4-cta:hover {
    transform: translateY(-4px);
    background: #f6a08d;

    box-shadow: 0 18px 35px rgba(241,139,119,.28);
  }

  #wonderhue-about-stages .whab4-cta:hover
  .whab4-cta-arrow {
    transform: translate(3px,-3px);
  }

}

#wonderhue-about-stages .whab4-cta:focus-visible {
  outline: 3px solid var(--whab4-teal);
  outline-offset: 5px;
}


/* ==========================================================
   15 — BOTTOM EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-stages .whab4-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding: 27px 0 7px;

  border-top: 1px solid rgba(255,255,255,.14);
}

#wonderhue-about-stages .whab4-bottom-left,
#wonderhue-about-stages .whab4-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: rgba(255,244,232,.7);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.6;
}

#wonderhue-about-stages .whab4-bottom-left span:first-child {
  color: var(--whab4-coral);
  font-size: 22px;
  line-height: 1;
}

#wonderhue-about-stages .whab4-bottom-right {
  color: var(--whab4-amber);
}

#wonderhue-about-stages .whab4-bottom-right span:last-child {
  color: var(--whab4-teal);
  font-size: 23px;
  line-height: 1;
}


/* ==========================================================
   16 — COMPACT DESKTOP
   1025px — 1250px
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1250px) {

  #wonderhue-about-stages .whab4-section {
    padding-inline: 5vw;
  }

  #wonderhue-about-stages .whab4-title {
    font-size: clamp(58px, 5.9vw, 78px);
  }

  #wonderhue-about-stages .whab4-timeline {
    gap: 27px;
  }

  #wonderhue-about-stages .whab4-stage {
    grid-template-columns:
      minmax(0, 1fr)
      85px
      minmax(0, 1fr);
  }

  #wonderhue-about-stages .whab4-stage-content {
    padding: 24px;
  }

  #wonderhue-about-stages .whab4-stage-title {
    font-size: 32px;
  }

  #wonderhue-about-stages .whab4-stage-description {
    font-size: 14px;
  }

}


/* ==========================================================
   17 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-stages *,
  #wonderhue-about-stages *::before,
  #wonderhue-about-stages *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — SECTION 04 CSS DESKTOP v1.0 */








/* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 04
   MADE FOR EVERY STAGE
   THE CREATIVE TIMELINE
   CSS TABLET & MOBILE v1.0
   ========================================================== */


/* ==========================================================
   18 — TABLET
   768px — 1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* FOUNDATION */

  #wonderhue-about-stages .whab4-section {
    padding: 85px 5vw 30px;
  }

  /* ATMOSPHERE */

  #wonderhue-about-stages .whab4-glow--teal {
    width: 550px;
    height: 550px;
    right: -300px;
    filter: blur(42px);
  }

  #wonderhue-about-stages .whab4-glow--coral {
    width: 520px;
    height: 520px;
    left: -320px;
    filter: blur(45px);
  }

  #wonderhue-about-stages .whab4-glow--amber {
    width: 430px;
    height: 430px;
    right: -220px;
  }

  #wonderhue-about-stages .whab4-orbit--one {
    width: 520px;
    height: 520px;
    left: -360px;
  }

  #wonderhue-about-stages .whab4-orbit--two {
    width: 440px;
    height: 440px;
    right: -330px;
  }

  /* TOP STRIP */

  #wonderhue-about-stages .whab4-topline {
    gap: 15px;
    padding-bottom: 22px;
  }

  #wonderhue-about-stages .whab4-topline-brand,
  #wonderhue-about-stages .whab4-topline-number {
    font-size: 9px;
    letter-spacing: .1em;
  }

  /* INTRO */

  #wonderhue-about-stages .whab4-intro {
    padding: 82px 0 75px;
  }

  #wonderhue-about-stages .whab4-title {
    font-size: clamp(53px, 6.5vw, 76px);
    line-height: 1.05;
  }

  #wonderhue-about-stages .whab4-description {
    max-width: 610px;
    margin-top: 29px;
    font-size: 16px;
  }

  #wonderhue-about-stages .whab4-intro-signature {
    font-size: 9px;
  }

  /* TIMELINE */

  #wonderhue-about-stages .whab4-timeline {
    grid-template-rows: repeat(6, minmax(185px, auto));
    gap: 28px;
    padding: 35px 0 75px;
  }

  #wonderhue-about-stages .whab4-timeline-svg {
    top: 35px;
    bottom: 75px;
    height: calc(100% - 110px);
  }

  /* STAGES */

  #wonderhue-about-stages .whab4-stage {
    grid-template-columns:
      minmax(0, 1fr)
      67px
      minmax(0, 1fr);

    min-height: 185px;
  }

  #wonderhue-about-stages .whab4-stage-marker {
    width: 57px;
    height: 57px;
    border-width: 4px;
  }

  #wonderhue-about-stages .whab4-stage-marker span {
    font-size: 25px;
  }

  #wonderhue-about-stages .whab4-stage-content {
    padding: 21px 19px;
    border-radius: 16px;
  }

  #wonderhue-about-stages .whab4-stage--left
  .whab4-stage-content {
    margin-right: 7px;
  }

  #wonderhue-about-stages .whab4-stage--right
  .whab4-stage-content {
    margin-left: 7px;
  }

  #wonderhue-about-stages .whab4-stage-content::before {
    left: 19px;
    width: 48px;
  }

  #wonderhue-about-stages .whab4-stage--left
  .whab4-stage-content::before {
    left: auto;
    right: 19px;
  }

  /* TYPOGRAPHY */

  #wonderhue-about-stages .whab4-stage-index {
    margin-bottom: 15px;
    font-size: 8px;
    letter-spacing: .08em;
  }

  #wonderhue-about-stages .whab4-stage-age {
    margin-bottom: 10px;
    font-size: 10px;
  }

  #wonderhue-about-stages .whab4-stage-title {
    margin-bottom: 11px;
    font-size: clamp(23px, 2.8vw, 31px);
    line-height: 1.16;
  }

  #wonderhue-about-stages .whab4-stage-description {
    font-size: 13px;
    line-height: 1.7;
  }

  #wonderhue-about-stages .whab4-stage-tag {
    margin-top: 16px;
    font-size: 8px;
    letter-spacing: .07em;
  }

  /* CONCLUSION */

  #wonderhue-about-stages .whab4-conclusion {
    margin: 20px auto 70px;
    padding-top: 45px;
  }

  #wonderhue-about-stages .whab4-conclusion p {
    font-size: clamp(36px, 4.7vw, 52px);
  }

  /* BOTTOM STRIP */

  #wonderhue-about-stages .whab4-bottom {
    gap: 16px;
    padding-top: 24px;
  }

  #wonderhue-about-stages .whab4-bottom-left,
  #wonderhue-about-stages .whab4-bottom-right {
    font-size: 9px;
    letter-spacing: .07em;
  }

}


/* ==========================================================
   19 — MOBILE
   0px — 767px
   ========================================================== */

@media (max-width: 767px) {

  /* FOUNDATION */

  #wonderhue-about-stages .whab4-section {
    padding: 68px 22px 26px;
  }

  /* ATMOSPHERE */

  #wonderhue-about-stages .whab4-glow--teal {
    width: 390px;
    height: 390px;
    top: 5%;
    right: -250px;
    filter: blur(34px);
  }

  #wonderhue-about-stages .whab4-glow--coral {
    width: 380px;
    height: 380px;
    top: 45%;
    left: -260px;
    filter: blur(36px);
  }

  #wonderhue-about-stages .whab4-glow--amber {
    width: 320px;
    height: 320px;
    bottom: -200px;
    right: -200px;
    filter: blur(35px);
  }

  #wonderhue-about-stages .whab4-orbit--one {
    width: 360px;
    height: 360px;
    top: -210px;
    left: -270px;
  }

  #wonderhue-about-stages .whab4-orbit--two {
    width: 320px;
    height: 320px;
    right: -250px;
  }

  #wonderhue-about-stages .whab4-spark--one {
    font-size: 21px;
    right: 6%;
  }

  #wonderhue-about-stages .whab4-spark--two {
    font-size: 18px;
  }

  #wonderhue-about-stages .whab4-spark--three {
    font-size: 19px;
  }

  /* TOP STRIP */

  #wonderhue-about-stages .whab4-topline {
    gap: 10px;
    padding-bottom: 19px;
  }

  #wonderhue-about-stages .whab4-topline-brand,
  #wonderhue-about-stages .whab4-topline-number {
    font-size: 8px;
    letter-spacing: .06em;
  }

  /* INTRO */

  #wonderhue-about-stages .whab4-intro {
    padding: 65px 0 57px;
  }

  #wonderhue-about-stages .whab4-eyebrow {
    gap: 9px;
    margin-bottom: 25px;
    font-size: 9px;
    letter-spacing: .1em;
  }

  #wonderhue-about-stages .whab4-eyebrow span:first-child {
    font-size: 23px;
  }

  #wonderhue-about-stages .whab4-title {
    font-size: clamp(39px, 10.2vw, 65px);
    line-height: 1.06;
    letter-spacing: -.06em;
  }

  #wonderhue-about-stages .whab4-title-line {
    display: block;
  }

  #wonderhue-about-stages .whab4-description {
    margin-top: 27px;
    font-size: 15px;
    line-height: 1.8;
  }

  #wonderhue-about-stages .whab4-intro-signature {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
    font-size: 8px;
    line-height: 1.6;
    letter-spacing: .07em;
  }

  /* TIMELINE — VERTICAL SIDE PATH */

  #wonderhue-about-stages .whab4-timeline {
    display: flex;
    flex-direction: column;
    gap: 28px;

    padding: 26px 0 60px 0;
  }

  /*
   * On mobile the artistic curve becomes
   * a clean vertical line, aligned with
   * the six stage markers.
   */

  #wonderhue-about-stages .whab4-timeline-svg {
    display: none;
  }

  #wonderhue-about-stages .whab4-timeline::before {
    content: "";
    position: absolute;
    z-index: 0;

    top: 49px;
    bottom: 85px;
    left: 23px;

    width: 4px;
    border-radius: 50px;

    background: linear-gradient(
      to bottom,
      #edbf86 0%,
      #f18b77 21%,
      #83c9bd 42%,
      #af9cd4 63%,
      #e0a98b 83%,
      #a8d6bb 100%
    );

    box-shadow: 0 0 16px rgba(131,201,189,.15);
  }

  /* STAGES — SIDE-BY-SIDE MARKER + CONTENT */

  #wonderhue-about-stages .whab4-stage {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto;

    gap: 15px;
    align-items: start;

    min-height: auto;
  }

  #wonderhue-about-stages .whab4-stage-marker {
    grid-column: 1;
    grid-row: 1;

    width: 46px;
    height: 46px;
    margin: 0;

    border: 4px solid #11232a;
    box-shadow: 0 0 0 5px rgba(131,201,189,.06);
  }

  #wonderhue-about-stages .whab4-stage-marker span {
    font-size: 20px;
  }

  #wonderhue-about-stages .whab4-stage-content,
  #wonderhue-about-stages .whab4-stage--left
  .whab4-stage-content,
  #wonderhue-about-stages .whab4-stage--right
  .whab4-stage-content {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 22px 18px;

    border-radius: 16px;
    text-align: left;
  }

  #wonderhue-about-stages .whab4-stage-content::before,
  #wonderhue-about-stages .whab4-stage--left
  .whab4-stage-content::before {
    left: 18px;
    right: auto;
    width: 45px;
  }

  /* TYPOGRAPHY */

  #wonderhue-about-stages .whab4-stage-index {
    margin-bottom: 15px;
    font-size: 8px;
    letter-spacing: .08em;
  }

  #wonderhue-about-stages .whab4-stage-age {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  #wonderhue-about-stages .whab4-stage-title {
    margin-bottom: 12px;
    font-size: clamp(25px, 6.5vw, 36px);
    line-height: 1.15;
  }

  #wonderhue-about-stages .whab4-stage-description {
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
  }

  #wonderhue-about-stages .whab4-stage-tag {
    margin-top: 17px;
    font-size: 8px;
    line-height: 1.6;
    letter-spacing: .07em;
  }

  /* CONCLUSION */

  #wonderhue-about-stages .whab4-conclusion {
    margin: 18px auto 65px;
    padding: 45px 12px 10px;
  }

  #wonderhue-about-stages .whab4-conclusion-symbol {
    margin-bottom: 19px;
    font-size: 31px;
  }

  #wonderhue-about-stages .whab4-conclusion p {
    margin-bottom: 29px;
    font-size: clamp(31px, 8vw, 48px);
    line-height: 1.2;
  }

  #wonderhue-about-stages .whab4-cta {
    min-height: 55px;
    padding: 10px 12px 10px 24px;
    font-size: 12px;
    gap: 25px;
  }

  #wonderhue-about-stages .whab4-cta-arrow {
    width: 32px;
    height: 32px;
  }

  /* BOTTOM STRIP */

  #wonderhue-about-stages .whab4-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-top: 22px;
  }

  #wonderhue-about-stages .whab4-bottom-left,
  #wonderhue-about-stages .whab4-bottom-right {
    min-width: 0;
    gap: 7px;

    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .04em;
  }

  #wonderhue-about-stages .whab4-bottom-right {
    text-align: right;
  }

  #wonderhue-about-stages .whab4-bottom-left span:first-child,
  #wonderhue-about-stages .whab4-bottom-right span:last-child {
    flex-shrink: 0;
  }

}


/* ==========================================================
   20 — SMALL MOBILE
   Up to 390px
   ========================================================== */

@media (max-width: 390px) {

  #wonderhue-about-stages .whab4-section {
    padding: 61px 17px 23px;
  }

  #wonderhue-about-stages .whab4-topline-brand,
  #wonderhue-about-stages .whab4-topline-number {
    font-size: 7px;
    letter-spacing: .03em;
  }

  #wonderhue-about-stages .whab4-title {
    font-size: clamp(36px, 9.8vw, 43px);
  }

  #wonderhue-about-stages .whab4-timeline {
    gap: 23px;
  }

  #wonderhue-about-stages .whab4-stage {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 11px;
  }

  #wonderhue-about-stages .whab4-stage-marker {
    width: 42px;
    height: 42px;
  }

  #wonderhue-about-stages .whab4-stage-marker span {
    font-size: 18px;
  }

  #wonderhue-about-stages .whab4-timeline::before {
    left: 21px;
  }

  #wonderhue-about-stages .whab4-stage-content,
  #wonderhue-about-stages .whab4-stage--left
  .whab4-stage-content,
  #wonderhue-about-stages .whab4-stage--right
  .whab4-stage-content {
    padding: 20px 15px;
  }

  #wonderhue-about-stages .whab4-stage-title {
    font-size: clamp(23px, 6.1vw, 29px);
  }

  #wonderhue-about-stages .whab4-stage-description {
    font-size: 13px;
  }

  #wonderhue-about-stages .whab4-stage-tag {
    font-size: 7px;
  }

  #wonderhue-about-stages .whab4-bottom {
    gap: 8px;
  }

  #wonderhue-about-stages .whab4-bottom-left,
  #wonderhue-about-stages .whab4-bottom-right {
    font-size: 7px;
    letter-spacing: 0;
  }

}


/* ==========================================================
   21 — TOUCH DEVICES
   ========================================================== */

@media (hover: none) {

  #wonderhue-about-stages .whab4-stage-content,
  #wonderhue-about-stages .whab4-stage-marker {
    transition: none;
  }

}


/* ==========================================================
   22 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-stages *,
  #wonderhue-about-stages *::before,
  #wonderhue-about-stages *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — SECTION 04 CSS RESPONSIVE v1.0 */







/* ==========================================================
   ABOUT US — SECTION 04
   MOBILE SCROLL PATH REVEAL v1.0
   ========================================================== */

@media (max-width: 767px) {

  #wonderhue-about-stages
  .whab4-timeline.whab4-scroll-ready::before {

    background: linear-gradient(
      to bottom,
      #edbf86 0%,
      #f18b77 21%,
      #83c9bd 42%,
      #af9cd4 63%,
      #e0a98b 83%,
      #a8d6bb 100%
    );

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--whab4-reveal, 100%),
      transparent var(--whab4-reveal, 100%),
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--whab4-reveal, 100%),
      transparent var(--whab4-reveal, 100%),
      transparent 100%
    );

  }

}

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-stages
  .whab4-timeline.whab4-scroll-ready::before {
    -webkit-mask-image: none;
    mask-image: none;
  }

}

/* END ABOUT US — SECTION 04 SCROLL REVEAL v1.0 *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4403a2d *//* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 05
   THE WONDER CONTINUES
   CSS DESKTOP v1.0
   ========================================================== */


/* ==========================================================
   01 — SECTION FOUNDATION
   ========================================================== */

#wonderhue-about-final {
  --whab5-paper: #f8efe4;
  --whab5-cream: #fff9f0;
  --whab5-ink: #17282c;
  --whab5-muted: #62736f;

  --whab5-coral: #f18b77;
  --whab5-teal: #83c9bd;
  --whab5-amber: #edbf86;

  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  overflow: hidden;
  isolation: isolate;

  background: var(--whab5-paper);
}

#wonderhue-about-final,
#wonderhue-about-final * {
  box-sizing: border-box;
}

#wonderhue-about-final .whab5-section {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-width: 0;
  min-height: 860px;

  padding: 95px clamp(30px, 5.8vw, 105px) 32px;
  overflow: hidden;

  color: var(--whab5-ink);
  font-family: "Inter", sans-serif;

  background:
    radial-gradient(
      ellipse at 50% 43%,
      rgba(255, 253, 247, .96) 0%,
      rgba(255, 250, 243, .62) 43%,
      transparent 79%
    ),
    radial-gradient(
      ellipse at 5% 15%,
      rgba(241, 139, 119, .13),
      transparent 39%
    ),
    radial-gradient(
      ellipse at 95% 76%,
      rgba(131, 201, 189, .16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #f8eee2 0%,
      #fff8ee 49%,
      #f2e7d8 100%
    );
}


/* ==========================================================
   02 — PAPER TEXTURE
   ========================================================== */

#wonderhue-about-final .whab5-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;

  opacity: .22;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(91, 73, 55, .035) 4px
    );

  background-size: 100% 11px;
}

#wonderhue-about-final .whab5-section::after {
  content: "";
  position: absolute;
  z-index: 0;

  left: 50%;
  top: 48%;

  width: min(90vw, 1120px);
  height: 650px;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(255,255,255,.76) 0%,
    rgba(255,255,255,.34) 48%,
    transparent 75%
  );

  pointer-events: none;
}


/* ==========================================================
   03 — BACKGROUND ATMOSPHERE
   ========================================================== */

#wonderhue-about-final .whab5-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#wonderhue-about-final .whab5-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
}

#wonderhue-about-final .whab5-glow--coral {
  width: 760px;
  height: 760px;
  left: -450px;
  top: -300px;

  background: radial-gradient(
    circle,
    rgba(241,139,119,.19),
    transparent 69%
  );

  filter: blur(52px);
}

#wonderhue-about-final .whab5-glow--teal {
  width: 760px;
  height: 760px;
  right: -440px;
  bottom: -370px;

  background: radial-gradient(
    circle,
    rgba(131,201,189,.23),
    transparent 70%
  );

  filter: blur(55px);
}

#wonderhue-about-final .whab5-glow--amber {
  width: 610px;
  height: 610px;
  top: 12%;
  left: 50%;

  transform: translateX(-50%);

  background: radial-gradient(
    circle,
    rgba(237,191,134,.13),
    transparent 70%
  );

  filter: blur(60px);
}

#wonderhue-about-final .whab5-orbit {
  position: absolute;
  display: block;

  border: 1px solid rgba(179,119,93,.12);
  border-radius: 50%;
}

#wonderhue-about-final .whab5-orbit--left {
  width: 760px;
  height: 760px;
  top: -450px;
  left: -520px;
}

#wonderhue-about-final .whab5-orbit--right {
  width: 700px;
  height: 700px;
  right: -480px;
  bottom: -420px;

  border-color: rgba(87,151,143,.14);
}


/* ==========================================================
   04 — DECORATIVE SVG ARTWORK
   ========================================================== */

#wonderhue-about-final .whab5-art {
  position: absolute;
  z-index: 1;

  width: clamp(260px, 30vw, 470px);
  height: auto;

  overflow: visible;
  pointer-events: none;

  opacity: .90;

  filter: drop-shadow(
    0 12px 20px rgba(165, 117, 89, .08)
  );
}

#wonderhue-about-final .whab5-art--left {
  left: clamp(-170px, -8vw, -70px);
  top: 21%;

  transform: rotate(-4deg);
}

#wonderhue-about-final .whab5-art--right {
  right: clamp(-170px, -8vw, -70px);
  top: 17%;

  transform: rotate(5deg);
}

#wonderhue-about-final .whab5-art-stroke {
  stroke-dasharray: 1800;
  stroke-dashoffset: 0;
}


/* ==========================================================
   05 — MAIN CONTENT
   ========================================================== */

#wonderhue-about-final .whab5-container {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: 1480px;
  min-height: 730px;

  margin-inline: auto;

  display: flex;
  flex-direction: column;
}


/* ==========================================================
   06 — TOP EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-final .whab5-topline {
  display: flex;
  align-items: center;
  gap: 22px;

  width: 100%;
  padding-bottom: 25px;

  border-bottom: 1px solid rgba(23,40,44,.18);
}

#wonderhue-about-final .whab5-topline-brand,
#wonderhue-about-final .whab5-topline-number {
  color: #916c58;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;

  white-space: nowrap;
}

#wonderhue-about-final .whab5-topline-number {
  color: #548a82;
}

#wonderhue-about-final .whab5-topline-rule {
  flex: 1;
  height: 1px;
  background: rgba(193,135,107,.25);
}


/* ==========================================================
   07 — FINAL EDITORIAL CONTENT
   ========================================================== */

#wonderhue-about-final .whab5-content {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  flex: 1;

  width: 100%;
  max-width: 1160px;

  margin: 0 auto;
  padding: 95px 30px 110px;

  text-align: center;
}


/* ==========================================================
   08 — EYEBROW
   ========================================================== */

#wonderhue-about-final .whab5-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  margin-bottom: 35px;

  color: #a46f52;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

#wonderhue-about-final .whab5-eyebrow span:first-child {
  color: var(--whab5-coral);
  font-size: 29px;
  line-height: 1;
}


/* ==========================================================
   09 — MONUMENTAL HEADLINE
   ========================================================== */

#wonderhue-about-final .whab5-title {
  margin: 0;
  padding: 0;

  color: var(--whab5-ink);

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(64px, 7.1vw, 126px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.075em;

  text-wrap: balance;
}

#wonderhue-about-final .whab5-title-line {
  display: block;
}

#wonderhue-about-final .whab5-title em {
  display: inline-block;
  position: relative;

  color: #d57965;
  font-style: italic;
  white-space: nowrap;
}

/* Hand-drawn underline */

#wonderhue-about-final .whab5-title em::after {
  content: "";
  position: absolute;

  left: 3%;
  right: 0;
  bottom: -10px;

  height: 11px;
  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      rgba(241,139,119,.15),
      rgba(241,139,119,.65) 42%,
      rgba(237,191,134,.75) 80%,
      rgba(131,201,189,.25)
    );

  transform: rotate(-2deg) skewX(-15deg);
  clip-path: polygon(
    0 43%,
    30% 24%,
    65% 42%,
    100% 16%,
    100% 73%,
    68% 84%,
    30% 72%,
    0 92%
  );
}


/* ==========================================================
   10 — DESCRIPTION
   ========================================================== */

#wonderhue-about-final .whab5-description {
  max-width: 680px;

  margin: 37px auto 0;
  padding: 0;

  color: var(--whab5-muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
}


/* ==========================================================
   11 — PRIMARY CTA
   ========================================================== */

#wonderhue-about-final .whab5-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;

  min-height: 65px;

  margin-top: 43px;
  padding: 12px 15px 12px 31px;

  border: 1px solid var(--whab5-coral);
  border-radius: 100px;

  background: var(--whab5-coral);
  color: var(--whab5-ink);

  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  text-decoration: none;

  box-shadow:
    0 14px 28px rgba(210,119,101,.18),
    inset 0 1px 0 rgba(255,255,255,.30);

  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

#wonderhue-about-final .whab5-cta-label {
  white-space: nowrap;
}

#wonderhue-about-final .whab5-cta-icon {
  display: grid;
  place-items: center;

  width: 37px;
  height: 37px;

  border-radius: 50%;
  background: rgba(23,40,44,.11);

  color: var(--whab5-ink);
  font-size: 21px;
  line-height: 1;

  transition: transform .35s ease;
}

@media (hover: hover) {

  #wonderhue-about-final .whab5-cta:hover {
    transform: translateY(-5px);

    background: #f5a08d;
    box-shadow: 0 19px 38px rgba(210,119,101,.27);
  }

  #wonderhue-about-final .whab5-cta:hover
  .whab5-cta-icon {
    transform: translate(3px, -3px);
  }

}

#wonderhue-about-final .whab5-cta:focus-visible {
  outline: 3px solid #428f84;
  outline-offset: 5px;
}


/* ==========================================================
   12 — CREATIVE SIGNATURE
   ========================================================== */

#wonderhue-about-final .whab5-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  width: 100%;
  max-width: 560px;

  margin-top: 72px;
}

#wonderhue-about-final .whab5-signature-rule {
  flex: 1;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(170,123,99,.36),
    transparent
  );
}

#wonderhue-about-final .whab5-signature-text {
  color: #a46f52;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  white-space: nowrap;
}


/* ==========================================================
   13 — BOTTOM EDITORIAL STRIP
   ========================================================== */

#wonderhue-about-final .whab5-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding: 26px 0 6px;

  border-top: 1px solid rgba(23,40,44,.17);
}

#wonderhue-about-final .whab5-bottom-left,
#wonderhue-about-final .whab5-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: #856f60;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.6;
}

#wonderhue-about-final .whab5-bottom-left span:first-child {
  color: #d57965;
  font-size: 22px;
  line-height: 1;
}

#wonderhue-about-final .whab5-bottom-right {
  color: #548a82;
}

#wonderhue-about-final .whab5-bottom-right span:last-child {
  color: var(--whab5-coral);
  font-size: 22px;
  line-height: 1;
}


/* ==========================================================
   14 — EDITORIAL HOVER DETAILS
   ========================================================== */

@media (hover: hover) {

  #wonderhue-about-final .whab5-art--left {
    transition: transform .7s ease, opacity .7s ease;
  }

  #wonderhue-about-final .whab5-art--right {
    transition: transform .7s ease, opacity .7s ease;
  }

  #wonderhue-about-final .whab5-section:hover
  .whab5-art--left {
    transform: rotate(-7deg) translateY(-8px);
  }

  #wonderhue-about-final .whab5-section:hover
  .whab5-art--right {
    transform: rotate(8deg) translateY(8px);
  }

}


/* ==========================================================
   15 — COMPACT DESKTOP
   1025px — 1250px
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1250px) {

  #wonderhue-about-final .whab5-section {
    min-height: 800px;
    padding-inline: 5vw;
  }

  #wonderhue-about-final .whab5-title {
    font-size: clamp(63px, 6.7vw, 87px);
  }

  #wonderhue-about-final .whab5-content {
    padding-inline: 24px;
  }

  #wonderhue-about-final .whab5-art {
    width: 320px;
    opacity: .66;
  }

  #wonderhue-about-final .whab5-art--left {
    left: -155px;
  }

  #wonderhue-about-final .whab5-art--right {
    right: -155px;
  }

}


/* ==========================================================
   16 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-final *,
  #wonderhue-about-final *::before,
  #wonderhue-about-final *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — SECTION 05 CSS DESKTOP v1.0 */









/* ==========================================================
   WONDERHUE STUDIO
   ABOUT US — SECTION 05
   THE WONDER CONTINUES
   CSS TABLET & MOBILE v1.0
   ========================================================== */


/* ==========================================================
   17 — TABLET
   768px — 1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* FOUNDATION */

  #wonderhue-about-final .whab5-section {
    min-height: 760px;
    padding: 80px 5vw 30px;
  }

  /* ATMOSPHERE */

  #wonderhue-about-final .whab5-glow--coral {
    width: 550px;
    height: 550px;
    left: -370px;
    top: -210px;
    filter: blur(42px);
  }

  #wonderhue-about-final .whab5-glow--teal {
    width: 550px;
    height: 550px;
    right: -360px;
    bottom: -290px;
    filter: blur(42px);
  }

  #wonderhue-about-final .whab5-glow--amber {
    width: 430px;
    height: 430px;
    filter: blur(45px);
  }

  #wonderhue-about-final .whab5-orbit--left {
    width: 530px;
    height: 530px;
    left: -390px;
    top: -320px;
  }

  #wonderhue-about-final .whab5-orbit--right {
    width: 500px;
    height: 500px;
    right: -360px;
    bottom: -310px;
  }

  /* DECORATIVE ARTWORK */

  #wonderhue-about-final .whab5-art {
    width: clamp(210px, 28vw, 290px);
    opacity: .57;
  }

  #wonderhue-about-final .whab5-art--left {
    left: -145px;
    top: 24%;
  }

  #wonderhue-about-final .whab5-art--right {
    right: -145px;
    top: 20%;
  }

  /* MAIN CONTAINER */

  #wonderhue-about-final .whab5-container {
    min-height: 645px;
  }

  /* TOP EDITORIAL STRIP */

  #wonderhue-about-final .whab5-topline {
    gap: 15px;
    padding-bottom: 21px;
  }

  #wonderhue-about-final .whab5-topline-brand,
  #wonderhue-about-final .whab5-topline-number {
    font-size: 9px;
    letter-spacing: .1em;
  }

  /* FINAL CONTENT */

  #wonderhue-about-final .whab5-content {
    padding: 80px 25px 90px;
  }

  #wonderhue-about-final .whab5-eyebrow {
    gap: 11px;
    margin-bottom: 30px;
    font-size: 10px;
  }

  #wonderhue-about-final .whab5-eyebrow span:first-child {
    font-size: 25px;
  }

  /* HEADLINE */

  #wonderhue-about-final .whab5-title {
    font-size: clamp(54px, 6.8vw, 75px);
    line-height: 1.05;
    letter-spacing: -.065em;
  }

  #wonderhue-about-final .whab5-title em::after {
    bottom: -8px;
    height: 9px;
  }

  /* DESCRIPTION */

  #wonderhue-about-final .whab5-description {
    max-width: 560px;
    margin-top: 32px;
    font-size: 16px;
    line-height: 1.85;
  }

  /* CTA */

  #wonderhue-about-final .whab5-cta {
    min-height: 60px;
    margin-top: 37px;
    gap: 29px;
    padding: 11px 14px 11px 27px;
  }

  #wonderhue-about-final .whab5-cta-icon {
    width: 34px;
    height: 34px;
  }

  /* SIGNATURE */

  #wonderhue-about-final .whab5-signature {
    max-width: 480px;
    margin-top: 56px;
  }

  #wonderhue-about-final .whab5-signature-text {
    font-size: 9px;
    letter-spacing: .12em;
  }

  /* BOTTOM EDITORIAL STRIP */

  #wonderhue-about-final .whab5-bottom {
    gap: 18px;
    padding-top: 23px;
  }

  #wonderhue-about-final .whab5-bottom-left,
  #wonderhue-about-final .whab5-bottom-right {
    font-size: 9px;
    letter-spacing: .08em;
  }

}


/* ==========================================================
   18 — MOBILE
   0px — 767px
   ========================================================== */

@media (max-width: 767px) {

  /* FOUNDATION */

  #wonderhue-about-final .whab5-section {
    min-height: auto;
    padding: 65px 22px 25px;
  }

  /* PAPER GLOW */

  #wonderhue-about-final .whab5-section::after {
    width: 115vw;
    height: 500px;
    top: 43%;
  }

  /* ATMOSPHERE */

  #wonderhue-about-final .whab5-glow--coral {
    width: 390px;
    height: 390px;
    left: -280px;
    top: -155px;
    filter: blur(35px);
  }

  #wonderhue-about-final .whab5-glow--teal {
    width: 390px;
    height: 390px;
    right: -285px;
    bottom: -185px;
    filter: blur(35px);
  }

  #wonderhue-about-final .whab5-glow--amber {
    width: 340px;
    height: 340px;
    top: 24%;
    filter: blur(42px);
  }

  #wonderhue-about-final .whab5-orbit--left {
    width: 365px;
    height: 365px;
    left: -280px;
    top: -215px;
  }

  #wonderhue-about-final .whab5-orbit--right {
    width: 335px;
    height: 335px;
    right: -265px;
    bottom: -205px;
  }

  /* SVG ARTWORK
     Decorative rather than competing with the copy */

  #wonderhue-about-final .whab5-art {
    width: 200px;
    opacity: .40;
  }

  #wonderhue-about-final .whab5-art--left {
    left: -145px;
    top: 15%;
    transform: rotate(-9deg);
  }

  #wonderhue-about-final .whab5-art--right {
    right: -150px;
    top: 37%;
    transform: rotate(9deg);
  }

  /* MAIN CONTAINER */

  #wonderhue-about-final .whab5-container {
    min-height: 0;
  }

  /* TOP EDITORIAL STRIP */

  #wonderhue-about-final .whab5-topline {
    gap: 10px;
    padding-bottom: 18px;
  }

  #wonderhue-about-final .whab5-topline-brand,
  #wonderhue-about-final .whab5-topline-number {
    font-size: 8px;
    letter-spacing: .05em;
  }

  /* FINAL CONTENT */

  #wonderhue-about-final .whab5-content {
    padding: 90px 0 83px;
    max-width: 100%;
  }

  /* EYEBROW */

  #wonderhue-about-final .whab5-eyebrow {
    gap: 9px;
    margin-bottom: 30px;
    font-size: 9px;
    letter-spacing: .1em;
  }

  #wonderhue-about-final .whab5-eyebrow span:first-child {
    font-size: 24px;
  }

  /* MONUMENTAL MOBILE HEADLINE */

  #wonderhue-about-final .whab5-title {
    width: 100%;
    font-size: clamp(37px, 9.2vw, 65px);
    line-height: 1.09;
    letter-spacing: -.065em;
  }

  #wonderhue-about-final .whab5-title-line {
    display: block;
  }

  #wonderhue-about-final .whab5-title em {
    white-space: normal;
  }

  #wonderhue-about-final .whab5-title em::after {
    bottom: -6px;
    height: 7px;
  }

  /* DESCRIPTION */

  #wonderhue-about-final .whab5-description {
    max-width: 480px;
    margin-top: 32px;
    font-size: 15px;
    line-height: 1.85;
  }

  /* PRIMARY CTA */

  #wonderhue-about-final .whab5-cta {
    min-height: 57px;
    margin-top: 36px;
    gap: 25px;
    padding: 10px 12px 10px 23px;
    font-size: 12px;
  }

  #wonderhue-about-final .whab5-cta-icon {
    width: 33px;
    height: 33px;
    font-size: 20px;
  }

  /* CREATIVE SIGNATURE */

  #wonderhue-about-final .whab5-signature {
    width: 100%;
    max-width: 360px;
    gap: 12px;
    margin-top: 60px;
  }

  #wonderhue-about-final .whab5-signature-text {
    font-size: 8px;
    letter-spacing: .08em;
  }

  /* BOTTOM EDITORIAL STRIP */

  #wonderhue-about-final .whab5-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-top: 22px;
  }

  #wonderhue-about-final .whab5-bottom-left,
  #wonderhue-about-final .whab5-bottom-right {
    min-width: 0;
    gap: 7px;

    font-size: 8px;
    line-height: 1.5;
    letter-spacing: .03em;
  }

  #wonderhue-about-final .whab5-bottom-right {
    text-align: right;
  }

  #wonderhue-about-final .whab5-bottom-left span:first-child,
  #wonderhue-about-final .whab5-bottom-right span:last-child {
    flex-shrink: 0;
  }

}


/* ==========================================================
   19 — SMALL MOBILE
   Up to 390px
   ========================================================== */

@media (max-width: 390px) {

  #wonderhue-about-final .whab5-section {
    padding: 60px 17px 23px;
  }

  #wonderhue-about-final .whab5-topline-brand,
  #wonderhue-about-final .whab5-topline-number {
    font-size: 7px;
    letter-spacing: .02em;
  }

  #wonderhue-about-final .whab5-content {
    padding: 78px 0 73px;
  }

  #wonderhue-about-final .whab5-title {
    font-size: clamp(34px, 9vw, 40px);
  }

  #wonderhue-about-final .whab5-description {
    font-size: 14px;
  }

  #wonderhue-about-final .whab5-signature {
    gap: 8px;
  }

  #wonderhue-about-final .whab5-signature-text {
    font-size: 7px;
    letter-spacing: .04em;
  }

  #wonderhue-about-final .whab5-bottom {
    gap: 8px;
  }

  #wonderhue-about-final .whab5-bottom-left,
  #wonderhue-about-final .whab5-bottom-right {
    font-size: 7px;
    letter-spacing: 0;
  }

}


/* ==========================================================
   20 — TOUCH DEVICES
   ========================================================== */

@media (hover: none) {

  #wonderhue-about-final .whab5-art--left,
  #wonderhue-about-final .whab5-art--right {
    transition: none;
  }

  #wonderhue-about-final .whab5-cta {
    -webkit-tap-highlight-color: transparent;
  }

}


/* ==========================================================
   21 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #wonderhue-about-final *,
  #wonderhue-about-final *::before,
  #wonderhue-about-final *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* END ABOUT US — SECTION 05 CSS RESPONSIVE v1.0 *//* End custom CSS */