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

.about-us-page {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: var(--font-body);
}

/* Shared kicker label used above every section title.
   inline-block so the underline (::after) shrinks to the text's own
   width instead of a fixed guess — it just tracks whatever the kicker
   text renders at, and stays put wherever the parent aligns it. */
.about-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0;
}

.about-kicker::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-brand);
  margin-top: 8px;
}

.about-kicker--center::after {
  width: 64px;
  margin-left: auto;
  margin-right: auto;
}

/* Shared overlay sections: full-bleed background image with text laid over it */
.about-split {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background: #f5f3ee;
}

/* Mobile source images are tall crops with ~half blank wall up top and the
   photo subject in the bottom half. Revealing the whole image (old approach)
   meant the subject only appeared after all that blank space had scrolled
   past — worse on wider phones where the section grew even taller. Instead,
   pair a shorter fixed height with object-position: bottom below, so the
   crop favors the subject over the blank wall and the gap after the text
   stays short and consistent across phone sizes. */
.about-split--hero {
  min-height: 1260px;
}

.about-split--daily {
  min-height: 1220px;
}

.about-split__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-split__media .static-picture,
.about-split__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.about-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

/* Desktop-only left-edge scrim (see min-width: 600px). Empty on mobile so
   the photo shows through under the copy. */
.about-split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.about-split__text {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

/* Mobile: copy sits directly on the photo. The source images are shot
   with a large empty wall for this overlay, so an extra fill isn't needed
   for readability — and a sampled cream never matches the wall closely
   enough, so it reads as a box sitting on the image instead. */
.about-split__text-primary {
  box-sizing: border-box;
  padding: 56px 24px 24px;
}

.about-split--daily .about-split__text-primary {
  padding-top: 96px;
  padding-bottom: 4px;
}

.about-split__paragraph--narrow {
  max-width: 260px;
  box-sizing: border-box;
  margin: 0 auto !important;
  padding: 14px 20px 56px;
}

.about-split__paragraph--narrow-daily {
  max-width: 360px;
  box-sizing: border-box;
  margin: 0 auto !important;
  padding: 2px 20px 56px;
}

.about-split__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-brand-dark);
  margin: 14px 0 24px 0;
}

.about-split__paragraph {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #2a2a2a;
  margin: 0 0 20px 0;
}

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

.about-split__paragraph strong {
  /* Montserrat is Lato-Regular at every weight; use real Lato Bold. */
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--color-brand-dark);
}

@media (min-width: 600px) {
  .about-split {
    align-items: center;
    min-height: 640px;
  }

  .about-split__img {
    object-position: center;
  }

  .about-split::before {
    background: linear-gradient(
      to right,
      rgba(245, 243, 238, 0.96) 0%,
      rgba(245, 243, 238, 0.88) 38%,
      rgba(245, 243, 238, 0) 62%
    );
  }

  .about-split__text {
    max-width: 560px;
    margin: 0;
    text-align: left;
    padding: 0 24px 0 max(24px, calc((100vw - 1180px) / 2));
    background: none;
  }

  .about-split__text-primary,
  .about-split--daily .about-split__text-primary {
    padding: 0;
  }

  /* Hero's narrow paragraph follows another paragraph, which lost its own
     bottom margin when it became last-child of the new wrapper — restore
     the gap here instead. Daily's follows the title directly, whose own
     margin-bottom already provides that gap, so it resets to a plain 0. */
  .about-split__paragraph--narrow {
    max-width: none;
    margin: 20px 0 0 0 !important;
    padding: 0;
    background: none;
  }

  .about-split__paragraph--narrow-daily {
    max-width: none;
    margin: 0 !important;
    padding: 0;
    background: none;
  }

  .about-split__title {
    font-size: 56px;
  }
}

/* Desktop assets load at 1024px (see responsive_static_image). Size the
   section to the photo instead of a fixed 640px box + object-fit: cover,
   which zoomed in and cropped the furniture. */
@media (min-width: 1024px) {
  .about-split {
    display: block;
    min-height: 0;
  }

  .about-split--hero,
  .about-split--daily {
    min-height: 0;
  }

  .about-split__media {
    position: relative;
    inset: auto;
  }

  .about-split__media .static-picture,
  .about-split__media img,
  .about-split__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .about-split__text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Delivering Reliability section: contained image + text */
.about-reliability {
  background: #ffffff;
  padding: 100px 24px;
}

.about-reliability__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1146px;
  margin: 0 auto;
}

.about-reliability__image {
  flex: 1 1 480px;
  max-width: 480px;
}

.about-reliability__image .static-picture,
.about-reliability__image img {
  display: block;
  width: 100%;
}

.about-reliability__img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.about-reliability__text {
  flex: 1 1 480px;
}

/* Have More Questions / Contact section */
.about-help {
  background: #ffffff;
  padding: 100px 24px;
}

.about-help__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.about-help__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-brand-dark);
  margin: 18px 0 48px 0;
}

.about-help__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 48px;
}

.about-help__card {
  flex: 1 1 220px;
  max-width: 260px;
  background: var(--color-brand-secondary);
  border-radius: 16px;
  padding: 36px 32px;
}

.about-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: #ffffff;
  margin-bottom: 18px;
}

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

.about-help__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-brand-dark);
  margin: 0 0 8px 0;
}

.about-help__value {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  word-break: break-word;
}

.about-help__rows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: calc(260px * 2 + 24px);
  margin: 0 auto;
}

.about-help__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  text-align: left;
}

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

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

.about-help__row-content {
  flex: 1 1 auto;
}

.about-help__row-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-brand-dark);
  margin: 0 0 4px 0;
}

.about-help__row-value {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}

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

.about-help__address p {
  margin: 0;
}

/* Responsive Design */
@media (min-width: 600px) and (max-width: 1200px) {
  .about-split__title {
    font-size: 46px;
  }
}

@media (max-width: 1024px) {
  .about-reliability,
  .about-help {
    padding: 70px 24px;
  }

  .about-reliability__inner {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .about-reliability__inner {
    flex-direction: column;
  }

  .about-reliability__text {
    order: 0;
    text-align: center;
  }

  .about-reliability__image {
    order: 1;
    max-width: 100%;
  }

  .about-reliability,
  .about-help {
    padding: 48px 16px;
  }

  .about-help__title {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .about-help__cards {
    gap: 16px;
    margin-bottom: 32px;
  }

  .about-help__card {
    padding: 28px 20px;
  }

  .about-help__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

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

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

  .about-help__cards {
    flex-direction: column;
    align-items: stretch;
  }

  .about-help__card {
    max-width: 100%;
  }
}

/* Accessibility */
.about-split__title,
.about-help__title {
  scroll-margin-top: 100px;
}

@media (prefers-contrast: high) {
  .about-split__media img,
  .about-reliability__image img {
    border: 2px solid #000;
  }

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

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}

/* Print Styles */
@media print {
  .about-split__media,
  .about-reliability__image {
    display: none;
  }

  .about-split {
    background: none;
  }
}