/* Pure Beauty editorial art direction: distinctive, calm motion, no external assets. */
:root {
  --editorial-plum: #402b38;
  --editorial-berry: #883b50;
  --editorial-cream: #fbf7f1;
  --editorial-peach: #f2c4ad;
  --editorial-lilac: #dfd1e4;
}

.hero {
  width: min(1440px, calc(100% - 32px));
  min-height: min(780px, calc(100vh - 82px));
  min-height: min(780px, calc(100svh - 82px));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 2.5rem 2.5rem;
  background:
    radial-gradient(circle at 11% 12%, rgba(255, 255, 255, .84), transparent 35%),
    linear-gradient(124deg, #fbf5ec 0%, #f5e7df 53%, #e9dce9 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 670px;
  padding: 1rem 0 1rem clamp(.25rem, 2vw, 1.75rem);
}

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.25rem;
  padding: .48rem .78rem;
  border: 1px solid rgba(64, 43, 56, .12);
  border-radius: 999px;
  background: rgba(255, 253, 250, .72);
  color: var(--editorial-berry);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.hero-copy h1 {
  max-width: 11ch;
  margin: 0 0 1.2rem;
  font-size: clamp(3.45rem, 5.8vw, 6.1rem);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.hero-copy h1 em {
  color: var(--editorial-berry);
  font-style: italic;
  font-weight: 400;
}

.hero-copy .lead {
  max-width: 45ch;
  color: #554750;
  font-size: clamp(1.05rem, 1.45vw, 1.24rem);
  line-height: 1.55;
}

.hero-copy .actions {
  gap: .75rem;
  margin: 1.7rem 0 1.1rem;
}

.hero-copy .actions .button {
  transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease;
}

.hero-copy .actions .button:first-child {
  box-shadow: 0 10px 24px rgba(136, 59, 80, .19);
}

.hero-copy .actions .button:hover {
  transform: translateY(-2px);
}

.hero-copy .actions .button.secondary {
  border-color: rgba(64, 43, 56, .22);
  background: rgba(255, 253, 250, .72);
}

.hero-visual {
  position: relative;
  z-index: 1;
  min-height: clamp(460px, 52vw, 650px);
  display: grid;
  place-items: center;
  animation: editorial-image-in .9s .06s cubic-bezier(.2, .72, .2, 1) both;
}

.hero-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  width: min(98%, 550px);
  aspect-ratio: 1;
  border: 1px solid rgba(136, 59, 80, .12);
  border-radius: 47% 53% 49% 51%;
  background: linear-gradient(145deg, #f5d8ca 4%, #e8d5e3 58%, #d8c6dc 100%);
  opacity: .9;
  transform: translateY(-50%) rotate(-8deg);
  animation: editorial-halo-in .95s .08s cubic-bezier(.2, .72, .2, 1) both;
}


.portrait-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  aspect-ratio: .8;
  overflow: hidden;
  border: 5px solid rgba(255, 253, 250, .92);
  border-radius: 48% 48% 14px 14px;
  background: #e9d9cf;
  box-shadow: 0 28px 72px rgba(64, 43, 56, .2);
  transform: rotate(1deg);
  transition: transform .55s cubic-bezier(.2, .72, .2, 1), box-shadow .55s ease;
}

.portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transition: transform .8s cubic-bezier(.2, .72, .2, 1);
}

.hero-visual:hover .portrait-wrap {
  transform: rotate(0) translateY(-3px);
  box-shadow: 0 34px 82px rgba(64, 43, 56, .24);
}

.hero-visual:hover .portrait-wrap img {
  transform: scale(1.025);
}

.note-card {
  position: absolute;
  z-index: 4;
  bottom: 9%;
  left: 0;
  max-width: 250px;
  padding: 1.05rem 1.25rem;
  border: 1px solid rgba(64, 43, 56, .1);
  border-left: 5px solid var(--editorial-berry);
  border-radius: .7rem;
  background: rgba(255, 253, 250, .96);
  box-shadow: 0 18px 42px rgba(64, 43, 56, .16);
  transform: rotate(-3deg);
  animation: editorial-note-in .65s .38s cubic-bezier(.2, .72, .2, 1) both;
}

.note-card .eyebrow {
  margin: 0 0 .42rem;
  color: var(--editorial-berry);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .16em;
}

.note-card p {
  margin: 0;
  color: var(--editorial-plum);
  font: 1.13rem/1.32 Georgia, 'Times New Roman', serif;
}

.flower {
  z-index: 4;
  right: 4%;
  bottom: 18%;
  color: var(--editorial-berry);
  font-size: 3.6rem;
  animation: editorial-flower-in .65s .5s cubic-bezier(.2, .72, .2, 1) both;
}

.hero-copy > * {
  animation: editorial-copy-in .68s cubic-bezier(.2, .72, .2, 1) both;
}

.hero-copy > :nth-child(1) { animation-delay: .04s; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .28s; }
.hero-copy > :nth-child(5) { animation-delay: .34s; }

.trustline {
  border: 0;
  background: var(--editorial-plum);
  color: #fffaf6;
}

.trustline-inner {
  padding-block: 1.15rem;
}

.trustline strong {
  color: var(--editorial-peach);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.trustline-inner span {
  color: rgba(255, 250, 246, .82);
}

.value-card {
  border: 0;
  border-top: 1px solid rgba(64, 43, 56, .2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1.25rem 0;
  transition: transform .25s ease, border-color .25s ease;
}

.value-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--editorial-berry);
}

.service-card {
  border-color: rgba(64, 43, 56, .13);
  background: rgba(255, 253, 250, .7);
  box-shadow: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(136, 59, 80, .42);
  box-shadow: 0 16px 34px rgba(64, 43, 56, .09);
}

.quote-section {
  width: min(1440px, calc(100% - 32px));
  margin: clamp(3rem, 7vw, 6rem) auto;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
  overflow: hidden;
  border-radius: 2rem;
  background: var(--editorial-plum);
  color: #fffaf6;
  text-align: left;
}

.quote-section::before {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -62%;
  width: clamp(220px, 36vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 196, 173, .24);
  border-radius: 50%;
  pointer-events: none;
}

.quote-inner {
  width: min(950px, 100%);
}

.quote-inner .eyebrow {
  color: var(--editorial-peach);
}

.quote-mark {
  color: rgba(242, 196, 173, .76);
}

blockquote {
  max-width: 900px;
  margin-left: 0;
  color: #fffaf6;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.12;
}

.quote-credit {
  color: rgba(255, 250, 246, .76);
}

.quote-section .button.secondary {
  border-color: rgba(255, 250, 246, .52);
  background: transparent;
  color: #fffaf6;
}

@keyframes editorial-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes editorial-image-in {
  from { opacity: 0; transform: translateX(18px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes editorial-halo-in {
  from { opacity: 0; transform: translateY(-50%) rotate(-14deg) scale(.92); }
  to { opacity: .9; transform: translateY(-50%) rotate(-8deg) scale(1); }
}

@keyframes editorial-note-in {
  from { opacity: 0; transform: translateY(14px) rotate(-7deg); }
  to { opacity: 1; transform: translateY(0) rotate(-3deg); }
}


@keyframes editorial-flower-in {
  from { opacity: 0; transform: scale(.72) rotate(-34deg); }
  to { opacity: 1; transform: scale(1) rotate(-15deg); }
}

@media (max-width: 900px) {
  .hero {
    width: calc(100% - 32px);
    min-height: 570px;
    grid-template-columns: minmax(0, 1fr) minmax(270px, .82fr);
    gap: 1.2rem;
    padding-inline: 1.5rem;
  }

  .hero-copy h1 {
    font-size: clamp(3.15rem, 6.3vw, 5rem);
  }

  .hero-visual {
    min-height: 450px;
  }

  .portrait-wrap {
    width: min(100%, 355px);
  }

  .note-card {
    left: -.25rem;
    max-width: 225px;
  }
}

@media (max-width: 640px) {
  .hero {
    width: calc(100% - 24px);
    min-height: unset;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem .65rem 0;
    border-radius: 0 0 1.65rem 1.65rem;
  }

  .hero-visual {
    order: 1;
    width: 100%;
    min-height: clamp(350px, 100vw, 430px);
    margin: 0;
  }

  .hero-visual::before {
    top: 47%;
    right: 50%;
    width: min(87vw, 350px);
    transform: translate(50%, -50%) rotate(-8deg);
    animation-name: editorial-halo-in-mobile;
  }


  .portrait-wrap {
    width: min(93%, 340px);
  }

  .note-card {
    bottom: 4%;
    left: 1%;
    max-width: 200px;
    padding: .85rem 1rem;
  }

  .flower {
    right: 5%;
    bottom: 13%;
    font-size: 3rem;
  }

  .hero-copy {
    order: 2;
    max-width: none;
    margin: -1.65rem .45rem 0;
    padding: 1.35rem 1rem 1.4rem;
    border-radius: 1.4rem 1.4rem .8rem .8rem;
    background: rgba(251, 247, 241, .97);
    box-shadow: 0 16px 36px rgba(64, 43, 56, .12);
  }

  .hero-copy .eyebrow {
    margin-bottom: .9rem;
    font-size: .62rem;
  }

  .hero-copy h1 {
    max-width: 10ch;
    font-size: clamp(3rem, 12.4vw, 4.35rem);
    line-height: .96;
  }

  .hero-copy .lead {
    font-size: 1rem;
  }

  .hero-copy .actions {
    margin: 1.25rem 0 .75rem;
  }

  .hero-copy .actions .button {
    flex: 1 1 175px;
  }

  .trustline-inner {
    width: calc(100% - 32px);
    padding-block: 1rem;
  }

  .quote-section {
    width: calc(100% - 24px);
    margin: 3.5rem auto;
    padding: 3rem 1.3rem;
    border-radius: 1.4rem;
  }
}

@media (min-width: 641px) and (max-width: 760px) {
  .hero {
    width: calc(100% - 32px);
    min-height: unset;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2rem 1.25rem 0;
  }

  .hero-visual {
    order: 1;
    min-height: 520px;
  }

  .portrait-wrap {
    width: min(80%, 400px);
  }

  .hero-copy {
    order: 2;
    max-width: 720px;
    margin: -1.5rem auto 0;
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 1.5rem;
    background: rgba(251, 247, 241, .97);
    box-shadow: 0 16px 36px rgba(64, 43, 56, .12);
  }
}

@keyframes editorial-halo-in-mobile {
  from { opacity: 0; transform: translate(50%, -50%) rotate(-14deg) scale(.92); }
  to { opacity: .9; transform: translate(50%, -50%) rotate(-8deg) scale(1); }
}

[data-reveal].reveal-ready {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.2, .72, .2, 1), transform .62s cubic-bezier(.2, .72, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].reveal-ready.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.values-grid [data-reveal]:nth-child(2),
.services-grid [data-reveal]:nth-child(2) { --reveal-delay: 80ms; }
.values-grid [data-reveal]:nth-child(3),
.services-grid [data-reveal]:nth-child(3) { --reveal-delay: 150ms; }
.services-grid [data-reveal]:nth-child(4) { --reveal-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal-ready {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }


  .hero-copy > *,
  .hero-visual,
  .hero-visual::before,
  .note-card,
  .flower {
    animation: none !important;
    transition: none !important;
  }

  .hero-visual:hover .portrait-wrap,
  .hero-visual:hover .portrait-wrap img,
  .hero-copy .actions .button:hover,
  .value-card:hover,
  .service-card:hover {
    transform: none !important;
  }
}