/* =========================================================
   DIAMOND PHOTOGRAPHY — pages.css
   Styles for the standalone Contact and About pages. Built on
   the same tokens as style.css / gallery.css — load both of
   those first.
   ========================================================= */

/* ---------------------------------------------------------
   CONTACT PAGE — the .contact section is reused verbatim
   from index.html; this just gives it room under the fixed
   navbar since it's now the first thing on the page.
   --------------------------------------------------------- */
.contact--page{
  padding-top: clamp(120px,20vh,168px);
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* ---------------------------------------------------------
   Pinned media + scrolling story. On desktop the portrait
   stays put (position: sticky) while the text and map scroll
   past it, then releases naturally once the taller column
   runs out — no JS required. On mobile it simply stacks.
   --------------------------------------------------------- */
.about-pin{
  position: relative;
  background: var(--bg-cream);
  padding: clamp(60px,10vh,100px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(36px,6vh,56px);
}
.about-pin__media{ flex: 0 0 auto; }
.about-pin__frame{
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--line);
}
.about-pin__frame img{
  width:100%; height:100%; object-fit:cover;
  filter: sepia(.1) saturate(1.08) contrast(1.05) brightness(.98);
}
.about-pin__caption{
  margin-top: 1rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.about-pin__name{ font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.about-pin__role{ font-size: .68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); text-align:right; }

.about-pin__body{ display:flex; flex-direction:column; gap: 1.4rem; }
.about-pin__body p{ color: var(--ink-soft); font-size: var(--fs-body); max-width: 62ch; }
.about-pin__quote{
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: clamp(1.25rem,3.4vw,1.7rem); line-height:1.35; color: var(--ink);
  border-left: 2px solid var(--gold); padding-left: 1.2rem;
  max-width: 52ch;
}
.about-pin__map{
  width:100%; aspect-ratio: 16/9; margin-top: .4rem;
  border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line);
}
.about-pin__map iframe{ width:100%; height:100%; border:0; filter: grayscale(.2) sepia(.06); }
.about-pin__map-label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); margin-top:.6rem; }

@media (min-width: 1024px){
  .about-pin{
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(50px,6vw,90px);
  }
  .about-pin__media{
    flex: 0 0 38%;
    position: sticky;
    top: clamp(96px,14vh,132px);
    align-self: flex-start;
  }
  .about-pin__body{ flex: 1; padding-top: .3rem; }
}

/* ---------------------------------------------------------
   STATS — team, gear, clients, and other studio numbers,
   each with an icon.
   --------------------------------------------------------- */
.about-stats{
  position: relative;
  background: var(--bg-cream-alt);
  padding: clamp(70px,12vh,120px) var(--gutter);
}
.about-stats__top{ max-width: 720px; margin-bottom: clamp(36px,6vh,56px); }
.about-stats__intro{ margin-top: 1rem; color: var(--ink-soft); font-size: var(--fs-lead); max-width: 46ch; }

.about-stats__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat-card{
  display:flex; flex-direction:column; gap: .9rem;
  padding: clamp(22px,3vw,32px);
  background: var(--surface);
}
.stat-card__icon{
  width: 40px; height:40px; border-radius:50%;
  border: 1px solid var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
}
.stat-card__icon svg{ width:18px; height:18px; }
.stat-card__num{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.8rem,4vw,2.6rem); line-height:1; color: var(--ink);
}
.stat-card__num-suffix{ font-size: .55em; color: var(--gold); margin-left:.1em; }
.stat-card__label{ font-size: .7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }

@media (min-width: 640px){
  .about-stats__grid{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 1024px){
  .about-stats__grid{ grid-template-columns: repeat(6,1fr); }
}