/* ==========================================================================
   Provision Homes — About page. Loads after base.css and components.css.

   Breakpoints follow the source design's viewport logic:
     ≥ 901px  two-column story, awards and closing CTA
     ≥ 821px  full nav bar (below: hamburger + sticky CTA) — in components.css
     ≥ 701px  two-column team and row-wise footer
   ========================================================================== */

/* The header here is the plain sticky bar from components.css — always
   visible — so there is nothing to override. */

.wrap--story { max-width: 1180px; }
.wrap--team  { max-width: 1000px; }

/* ---------- Company story ---------- */
.story {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}
.story__media { display: flex; flex-direction: column; gap: 24px; }
.story__portrait {
  position: relative;
  height: 320px;
  overflow: hidden;
  outline: 1px solid var(--rule-soft);
  outline-offset: 6px;
}
.story__portrait img { width: 100%; height: 100%; object-fit: cover; }
.story__extras { display: none; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.story__extra {
  position: relative;
  height: 150px;
  overflow: hidden;
  outline: 1px solid var(--rule-soft);
  outline-offset: 6px;
}
.story__extra img { width: 100%; height: 100%; object-fit: cover; }

.story__copy { display: flex; flex-direction: column; gap: 22px; }
.story__copy p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(0, 0, 0, .72);
  text-wrap: pretty;
}

/* ---------- Awards ---------- */
.awards {
  position: relative;
  background: var(--sand);
  padding: clamp(46px, 5vw, 70px) clamp(20px, 4vw, 80px);
}
.awards__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, transparent 47%, rgba(var(--rule-rgb), .035) 47%, rgba(var(--rule-rgb), .035) 53%, transparent 53%),
    linear-gradient(45deg,  transparent 47%, rgba(var(--rule-rgb), .035) 47%, rgba(var(--rule-rgb), .035) 53%, transparent 53%);
  background-size: 60px 60px;
}
.awards__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 38px);
}
.awards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}
.award {
  background: #fff;
  border: 1px solid rgba(var(--rule-rgb), .2);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.award__year {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: .10em;
  color: var(--gold);
}
.award__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
}
.award__org {
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(var(--rule-rgb), .65);
}
.award__note {
  margin-top: 4px;
  max-width: 34ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(0, 0, 0, .66);
  text-wrap: pretty;
}
.award--members { gap: 20px; justify-content: center; }
.award__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 38px);
  flex-wrap: wrap;
}
.award__logo { width: auto; filter: grayscale(1); opacity: .82; }
.award__logo--nahb { height: 56px; }
.award__logo--tab  { height: 44px; }

/* ---------- The team ---------- */
.team {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px);
}
.member { display: flex; flex-direction: column; gap: 20px; }
.member__photo {
  position: relative;
  height: 300px;
  overflow: hidden;
  outline: 1px solid var(--rule-soft);
  outline-offset: 6px;
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder frame for a portrait that hasn't been supplied yet.
   Replace the div with an <img> and this rule stops applying. */
.member__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  outline-style: dashed;
  outline-color: rgba(var(--rule-rgb), .35);
}
.member__photo--empty p {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--rule-rgb), .5);
  text-align: center;
  padding: 0 20px;
}

.member__copy { display: flex; flex-direction: column; gap: 10px; }
.member__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
}
.member__role {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--gold);
}
.member__bio {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0, 0, 0, .7);
  text-wrap: pretty;
}

/* ---------- Testimonials ---------- */
.testimonials {
  position: relative;
  background: var(--sand);
}
.testimonials__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, transparent 47%, rgba(var(--rule-rgb), .035) 47%, rgba(var(--rule-rgb), .035) 53%, transparent 53%),
    linear-gradient(45deg,  transparent 47%, rgba(var(--rule-rgb), .035) 47%, rgba(var(--rule-rgb), .035) 53%, transparent 53%);
  background-size: 60px 60px;
}
.testimonials .wrap { position: relative; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 701px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member__photo { height: 340px; }
}

@media (min-width: 901px) {
  .story {
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1fr);
  }
  .story__portrait { height: 460px; }
  .story__extras { display: grid; }

  .awards__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}