/* About Us Page Styles */
/* Component-specific styles for the About Us page */

.about-us-page {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: "Montserrat", var(--font-body, var(--font-primary, sans-serif));
}

/* The responsive_static_image helper wraps its <img> in a <picture class="static-picture">.
   Make that wrapper disappear from the box model so our positioning classes on the
   inner <img> behave as if it were a direct child. */
.about-hero .static-picture,
.about-care__images .static-picture,
.about-care__bg-band .static-picture {
  display: contents;
}

/* Accent color used inside two-tone headings */
.about-hero__title .accent,
.about-care__title .accent,
.about-care__bg-title .accent {
  color: #a5b59d;
}

.about-care__bg-title-break {
  display: none;
}

/* =========================================================
 * Hero Section
 * ========================================================= */
.about-hero {
  position: relative;
  min-height: 704px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #f5f5f0;
}

.about-hero__bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 1;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.62) 96%);
}

.about-hero__content {
  position: relative;
  z-index: 2;
  max-width: 782px;
  padding: 0 90px;
}

.about-hero__title {
  font-family: "Miller Banner", "Times New Roman", serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 1.05;
  color: #79613b;
  margin: 0 0 24px 0;
}

.about-hero__body {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.4;
  color: #5a431e;
}

.about-hero__body p {
  margin: 0 0 20px 0;
}

.about-hero__body p:last-child {
  margin-bottom: 0;
}

/* =========================================================
 * "From Our Care to Your Routine" Section
 * ========================================================= */
.about-care {
  position: relative;
  padding: 120px 0 0;
  overflow: hidden;
}

.about-care__inner {
  max-width: 1740px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
  padding: 0 90px;
}

.about-care__images {
  position: relative;
  flex: 0 0 844px;
  height: 726px;
}

.about-care__image {
  position: absolute;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Percentages (not pixels) so the collage scales fluidly at every breakpoint
   instead of only at the explicit mobile override below — the mobile export
   images are just scaled-down versions of the same 844x726 composition. */
.about-care__image--1 {
  left: 0;
  top: 0;
  width: 49.29%;
  height: 100%;
  z-index: 1;
}

.about-care__image--2 {
  left: 51.9%;
  top: 8.95%;
  width: 48.1%;
  height: 91.05%;
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.about-care__text {
  position: relative;
  flex: 1;
  max-width: 802px;
}

.about-care__leaf {
  position: absolute;
  width: 130px;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.about-care__leaf--top {
  top: -50px;
  left: -20px;
  transform: rotate(-18deg);
}

.about-care__leaf--bottom {
  right: -10px;
  bottom: -40px;
  transform: rotate(160deg) scaleY(-1);
}

.about-care__title {
  font-family: "Miller Banner", "Times New Roman", serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 1.05;
  color: #79613b;
  margin: 0 0 24px 0;
}

.about-care__paragraph {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.4;
  color: #5a431e;
  margin: 0;
}

.about-care__bg-band {
  position: relative;
  width: 100%;
  margin-top: 80px;
  display: flex;
  align-items: center;
  /* Matches the desktop image's own aspect ratio (loaded at >=1024px, see
     responsive_static_image's :desktop media query). Narrower breakpoints
     override this below since they load the (differently-proportioned)
     mobile image variant instead — object-fit:cover on the img crops it
     to whatever box shape applies. */
  aspect-ratio: 1920 / 921;
}

.about-care__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.about-care__bg-content {
  position: absolute;
  top: 50%;
  left: 90px;
  transform: translateY(-50%);
  max-width: 620px;
  z-index: 1;
}

.about-care__bg-title {
  font-family: "Miller Banner", "Times New Roman", serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.15;
  color: #79613b;
  margin: 0 0 24px 0;
}

.about-care__bg-paragraph {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: #5a431e;
  margin: 0 0 20px 0;
}

.about-care__bg-paragraph:last-child {
  margin-bottom: 0;
}

/* =========================================================
 * Contact / Help Section
 * ========================================================= */
.web-questions {
  position: relative;
  background: #ffffff;
  color: #79613b;
}

.web-questions__content {
  padding: 100px 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.web-questions__eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #79613b;
  margin: 0 0 16px 0;
}

.web-questions__divider {
  width: 60px;
  height: 1px;
  background: #79613b;
  margin: 0 auto 24px;
}

.web-questions__title {
  font-family: "Miller Banner", "Times New Roman", serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.15;
  color: #79613b;
  margin: 0 0 56px 0;
}

.web-questions__cards {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 56px;
}

.web-questions__card {
  width: 322px;
  height: 257px;
  background: #a5b59d;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}

.web-questions__card-badge {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: #fcf3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #79613b;
}

.web-questions__card-badge svg {
  width: 32px;
  height: 32px;
}

.web-questions__card-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fcf3f3;
  margin: 0;
}

.web-questions__card-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fcf3f3;
  margin: 0;
  word-break: break-word;
}

.web-questions__rows {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}

.web-questions__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.web-questions__row-badge {
  width: 48px;
  height: 48px;
  background: #a5b59d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #ffffff;
}

.web-questions__row-badge--square {
  border-radius: 12px;
}

.web-questions__row-badge--circle {
  border-radius: 50%;
}

.web-questions__row-badge svg {
  width: 20px;
  height: 20px;
}

.web-questions__row-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #79613b;
  margin: 0 0 4px 0;
}

.web-questions__row-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
  color: #5a431e;
  margin: 0;
}

/* =========================================================
 * Responsive Design
 * ========================================================= */
@media (max-width: 1440px) {
  .about-hero__content {
    padding: 0 60px;
  }

  .about-care__inner {
    padding: 0 60px;
    gap: 40px;
  }
}

@media (max-width: 1200px) {
  .about-hero__title,
  .about-care__title,
  .about-care__bg-title {
    font-size: 56px;
  }

  .about-hero__body,
  .about-care__paragraph {
    font-size: 22px;
  }

  .about-care__inner {
    padding: 0 40px;
  }

  .about-care__bg-content {
    left: 40px;
    max-width: 480px;
  }
}

@media (max-width: 1024px) {
  /* <1024px loads the portrait mobile hero image instead of the wide
     desktop one (see responsive_static_image's :desktop media query at
     min-width:1024px). A landscape crop of that portrait source either
     hides the product cluster or collides it with the text, so give it
     the same "text above, image below" treatment as true mobile instead
     of trying to force it into a wide banner shape. */
  .about-hero {
    min-height: auto;
    aspect-ratio: 390 / 973;
    align-items: flex-start;
    padding-top: 56px;
    justify-content: center;
  }

  .about-hero__bg-image {
    object-position: center;
  }

  .about-hero__content {
    padding: 0 40px;
    max-width: 100%;
    text-align: center;
  }

  .about-hero__title,
  .about-care__title,
  .about-care__bg-title {
    font-size: 44px;
  }

  .about-hero__title .accent {
    display: block;
  }

  .about-hero__body {
    font-size: 18px;
    text-align: center;
  }

  .about-care__paragraph {
    font-size: 18px;
  }

  .about-care {
    padding-top: 80px;
  }

  .about-care__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .about-care__text {
    order: 1;
  }

  .about-care__images {
    order: 2;
    flex: none;
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 844 / 726;
  }

  .about-care__bg-band {
    /* <1024px loads the mobile (portrait) image variant instead of desktop's
       — crop it into a shorter band via object-fit:cover rather than
       stretching it to its native tall aspect ratio. Biased toward a 4:3-ish
       ratio (rather than a wider 16:9) and object-position:bottom so the
       visible crop favors the actual product photo at the bottom of the
       source image instead of the plain gradient area at its top. */
    aspect-ratio: 4 / 3;
  }

  .about-care__bg-image {
    object-position: center bottom;
  }

  .about-care__bg-content {
    max-width: 400px;
  }

  .about-care__bg-paragraph {
    font-size: 15px;
  }

  .web-questions__title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  /* Deltas on top of the <1024px hero rules above — phone needs tighter
     padding and smaller body copy than tablet. */
  .about-hero__content {
    padding: 0 24px;
  }

  .about-hero__title {
    margin-bottom: 20px;
  }

  .about-care__bg-title-break {
    display: block;
  }

  .about-hero__body {
    font-size: 15px;
  }

  .about-hero__body p {
    margin-bottom: 14px;
  }

  .about-care {
    padding: 60px 0 0;
    text-align: center;
  }

  .about-care__inner {
    padding: 0 20px;
    gap: 32px;
    align-items: center;
  }

  .about-care__text {
    text-align: center;
  }

  .about-care__images {
    position: relative;
    width: 100%;
    max-width: 340px;
    height: auto;
    aspect-ratio: 844 / 726;
  }

  .about-care__title {
    font-size: 44px;
  }

  .about-care__leaf {
    width: 72px;
  }

  .about-care__leaf--top {
    top: -36px;
    left: -8px;
    transform: rotate(-18deg);
  }

  .about-care__leaf--bottom {
    top: -30px;
    right: -8px;
    bottom: auto;
    left: auto;
    transform: rotate(160deg) scaleY(-1) scaleX(-1);
  }

  .about-care__paragraph {
    font-size: 15px;
  }

  .about-care__bg-band {
    margin-top: 48px;
    justify-content: center;
    aspect-ratio: 390 / 1046;
  }

  .about-care__bg-image {
    object-position: center;
  }

  .about-care__bg-content {
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 48px);
    text-align: center;
  }

  .about-care__bg-title {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .about-care__bg-paragraph {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .web-questions__content {
    padding: 60px 20px;
  }

  .web-questions__title {
    font-size: 26px;
    margin-bottom: 40px;
  }

  .web-questions__cards {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .web-questions__rows {
    align-items: center;
  }

  .web-questions__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .web-questions__row-badge {
    width: 64px;
    height: 64px;
  }

  .web-questions__row-badge svg {
    width: 26px;
    height: 26px;
  }

  .web-questions__card {
    width: 100%;
    max-width: 322px;
    height: auto;
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .about-hero__title {
    font-size: 28px;
  }

  .about-hero__body {
    font-size: 14px;
  }

  .about-care__title {
    font-size: 24px;
  }

  .web-questions__title {
    font-size: 22px;
  }

  .web-questions__row-value {
    font-size: 14px;
  }
}

/* =========================================================
 * Accessibility / print / reduced motion
 * ========================================================= */
.about-hero__title,
.about-care__title,
.web-questions__title {
  scroll-margin-top: 100px;
}

@media print {
  .about-hero {
    background: none;
    color: #000;
    min-height: auto;
    padding: 20px 0;
  }

  .about-hero::before {
    display: none;
  }

  .about-care__images,
  .about-care__bg-band {
    display: none;
  }
}

@media (prefers-contrast: high) {
  .about-hero__title,
  .about-hero__body {
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-care__image,
  .web-questions__card {
    transition: none;
  }
}