/* About Us Page Styles
 * White canvas with teal + rust brand accents; the "Shaping Your Space"
 * banner and contact cards are the only sections with their own fill.
 */

.about-us-page {
  background-color: #ffffff;
  color: var(--brand-dark-gray, #333333);
  font-family: var(--font-body, var(--font-primary, "General Sans", sans-serif));
  overflow-x: hidden;
}

.about-us-page .static-picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Shared heading treatment: two-tone uppercase title */
.about-heading {
  font-family: var(--font-display, var(--font-primary, "General Sans", sans-serif));
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 28px 0;
  position: relative;
  padding-bottom: 20px;
}

.about-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-brand-secondary, #b05b34);
}

.about-heading__primary {
  display: block;
  color: var(--color-brand, #456362);
}

.about-heading__accent {
  display: block;
  color: var(--color-brand-secondary, #b05b34);
}

.about-highlight {
  color: var(--color-brand-secondary, #b05b34);
  font-weight: 700;
}

.about-copy {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--brand-gray, #666666);
  margin: 0 0 20px 0;
}

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

/* Used only inside the Shaping Your Space banner, which has its own
   dark teal image/fill behind the text. */
.about-copy--light {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* =========================================================
 * Made For Your Routine
 * ========================================================= */

.about-intro {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 100px 40px;
}

.about-intro__media {
  flex: 0 0 34%;
  max-width: 34%;
}

.about-intro__content {
  flex: 1 1 auto;
  min-width: 0;
}

.about-intro__accent {
  flex: 0 0 22%;
  max-width: 22%;
  align-self: stretch;
}

.about-intro__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
 * Equipping Your Daily Routine
 * ========================================================= */

.about-feature {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 40px 120px;
}

.about-feature__media {
  flex: 0 0 50%;
  max-width: 50%;
}

.about-feature__content {
  flex: 1 1 auto;
  min-width: 0;
}

.about-feature__image {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
 * Shaping Your Space
 * ========================================================= */

/* Text overlays the image's blank-sky area (top), same idea as the
   desktop treatment below. The image is anchored to the bottom at its
   own natural aspect ratio -- so the photo itself never moves or gets
   cropped -- and the section's background color matches the image's
   sky tone. If the text needs more vertical room than the image's own
   blank sky provides, the extra space above is just that matching
   solid color, so it reads as more sky, never as a gap and never
   overlapping the photo. */
.about-shaping {
  position: relative;
  overflow: hidden;
  background: var(--color-brand, #456362);
  /* Acts as a *minimum* height matching the mobile image's own aspect
     ratio (not a hard clip) -- normal-flow content below can still
     push the box taller than this if the text needs more room, but
     it never renders shorter, so the image's blank-sky top is always
     at least fully visible for the text to sit on. */
  aspect-ratio: 411 / 932;
}

.about-shaping__content {
  position: relative;
  z-index: 1;
  padding: 56px 24px 0;
}

.about-shaping__title {
  font-family: var(--font-display, var(--font-primary, "General Sans", sans-serif));
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0 0 28px 0;
  position: relative;
  padding-bottom: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.about-shaping__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-brand-secondary, #b05b34);
}

.about-shaping__title-bold {
  font-weight: 700;
}

.about-shaping__image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

/* =========================================================
 * Contact
 * ========================================================= */

.about-contact {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 40px 120px;
  text-align: center;
}

.about-contact__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-brand, #456362);
  margin: 0 0 16px 0;
  position: relative;
  padding-bottom: 20px;
}

.about-contact__eyebrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 3px;
  transform: translateX(-50%);
  background: var(--color-brand-secondary, #b05b34);
}

.about-contact__title {
  font-family: var(--font-display, var(--font-primary, "General Sans", sans-serif));
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-brand, #456362);
  letter-spacing: 0.5px;
  margin: 0 0 48px 0;
}

.about-contact__cards {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-width: 560px;
  margin: 0 auto 56px;
}

.about-contact__card {
  flex: 1 1 260px;
  max-width: 260px;
  background: var(--color-brand-accent, #f5e5c9);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 32px 20px;
}

.about-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-brand-secondary, #b05b34);
  color: #ffffff;
  margin-bottom: 16px;
}

.about-contact__icon svg {
  width: 22px;
  height: 22px;
}

.about-contact__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-brand-secondary, #b05b34);
  margin: 0 0 8px 0;
}

.about-contact__value {
  font-size: 16px;
  font-weight: 500;
  color: #2a2a2a;
  margin: 0;
  word-break: break-word;
}

.about-contact__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.about-contact__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.about-contact__meta-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-brand, #456362);
  color: #ffffff;
}

.about-contact__meta-icon svg {
  width: 20px;
  height: 20px;
}

.about-contact__meta-text {
  flex: 1 1 auto;
  min-width: 0;
}

.about-contact__meta-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-brand, #456362);
  margin: 0 0 4px 0;
}

.about-contact__meta-value {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brand-gray, #666666);
  margin: 0;
}

.about-contact__address {
  font-style: normal;
}

/* =========================================================
 * Responsive
 * ========================================================= */

@media (max-width: 1100px) {
  .about-intro {
    padding: 80px 32px;
    gap: 28px;
  }

  .about-feature {
    padding: 32px 32px 90px;
    gap: 36px;
  }

  .about-heading,
  .about-shaping__title {
    font-size: 28px;
  }

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

@media (max-width: 900px) {
  .about-intro {
    flex-direction: column;
    align-items: stretch;
    padding: 56px 24px;
    gap: 32px;
    text-align: center;
  }

  .about-intro__media,
  .about-intro__accent {
    max-width: 100%;
    flex: none;
  }

  .about-intro__media {
    max-width: 320px;
    margin: 0 auto;
  }

  .about-intro__accent {
    max-width: 280px;
    margin: 0 auto;
  }

  .about-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .about-feature {
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px 64px;
    gap: 28px;
    text-align: center;
  }

  .about-feature__media {
    order: 2;
    max-width: 100%;
  }

  .about-feature__content {
    order: 1;
  }

  .about-shaping__title {
    font-size: 26px;
  }

  .about-contact {
    padding: 64px 20px 80px;
  }

  .about-contact__title {
    font-size: 22px;
  }

  .about-contact__cards {
    flex-direction: column;
    align-items: stretch;
    max-width: 260px;
  }

  .about-contact__card {
    width: 100%;
  }

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

  .about-contact__meta-item {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .about-heading,
  .about-shaping__title {
    font-size: 22px;
  }

  .about-contact__title {
    font-size: 20px;
  }
}

/* Desktop: shaping banner keeps the same image-with-overlaid-content
   treatment as mobile, just with the wide desktop crop's aspect ratio
   and content anchored left/vertically-centered instead of top. */
/* Matches the 768px breakpoint where the picture element switches to
   the wide desktop-style crop (see responsive_static_image variants
   in the view) -- below this, the narrow portrait mobile image is
   used and the text stays full-width in normal flow above it. */
@media (min-width: 768px) {
  .about-shaping {
    aspect-ratio: auto;
  }

  .about-shaping__content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    padding: 90px 40px;
    margin-left: max(40px, calc((100% - 1320px) / 2));
  }

  /* From here up, the picture element serves the wide desktop-style
     crop (horizontal blank/photo split), so covering the full,
     content-driven section height never crops into the photo behind
     the text column. */
  .about-shaping__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 0;
  }
}

/* Reduced Motion / Print unaffected: page is static, no transitions used */