/* Refined Performing Arts — "Who we are" page.
   Brand tokens live in brand.css (locked); shared furniture (header, footer, buttons,
   .eyebrow, .section-head, .clients marquee) comes from site.css.
   Only what is unique to this page lives here. */

/* ---------- header over the dark hero — ivory links instead of ink ---------- */

.page-about .site-nav a{ color:var(--ivory); }
.page-about .head-side a{ color:var(--ivory); }
.page-about .head-side a:hover{ color:var(--gold-light); }

/* ---------- hero — same anatomy as the services page hero ---------- */

.about-hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--ivory);
  min-height:clamp(13rem, 36svh, 22rem);
  display:grid; place-items:center; text-align:center;
  padding:6.5rem var(--gutter) 2.8rem;
}
.about-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
  /* the hero is far wider than the photo, so only a band of it shows —
     this keeps the band on the group's faces rather than cutting through them */
  object-position:50% 12%;
}
/* This photo is bright — white backdrop, pale clothing — so dropping the opacity alone
   leaves ivory type sitting on near-white. The scrim is what buys the contrast back;
   if the photo is ever swapped, re-check the type against it. */
.about-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(46,42,37,.5);
}
.about-hero-inner{ position:relative; z-index:2; max-width:56rem; }
.about-hero .eyebrow{ color:rgba(250,248,244,.8); }
.about-hero h1{ font-size:var(--step-3); margin-bottom:1.1rem; }
.about-hero-sub{
  color:rgba(250,248,244,.88); font-size:calc(var(--step-0) * 1.08);
  max-width:44rem; margin:0 auto;
}

/* ---------- founder ---------- */

/* sits directly under the hero, so it carries less than a full section gap on top */
.founder{ padding-top:clamp(2.75rem, 6vw, 4.5rem); }

.founder-grid{
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(2.5rem, 6vw, 5rem); align-items:center;
  max-width:var(--max); margin:0 auto;
}
.founder-copy h2{ font-size:var(--step-2); line-height:1.22; margin-bottom:1.4rem; }
/* no max-width — the grid column already sets the measure, and capping it here
   opened a dead gap between the text and the portraits */
.founder-copy p{
  color:var(--ink-soft); font-size:calc(var(--step-0) * 1.04);
  margin-bottom:1.1rem;
}
.founder-copy p:last-child{ margin-bottom:0; }

/* two portraits, offset — the stage on the left sits low and laps over the desk portrait */
.founder-media{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; align-items:start;
}
.founder-media figure{ margin:0; }
.founder-media img{
  width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:14px; background:var(--ivory-deep);
}
/* scoped so these outrank `.founder-media figure{margin:0}` above */
.founder-media .fm-stage{
  margin-top:clamp(1.5rem, 4vw, 3.25rem);
  margin-right:-7%;              /* the overlap */
  position:relative; z-index:2;
}
/* an ivory ring keeps the overlap reading as a deliberate stack, not a collision */
.founder-media .fm-stage img{ box-shadow:0 0 0 6px var(--ivory); }

.founder-wa{
  grid-column:1 / -1; justify-self:center;
  margin-top:clamp(1.75rem, 4vw, 2.75rem);
}
.founder-wa svg{ flex:none; }

/* ---------- three points ---------- */

/* sits between the ivory "Trusted by" strip and the ivory closing block */
.points{ background:var(--ivory-deep); }

.point-grid{
  list-style:none; margin:0 auto; padding:0; max-width:var(--max);
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem, 4vw, 3.5rem);
}
.point-num{
  display:block; font-family:var(--serif); font-size:var(--step-3);
  line-height:1; color:var(--gold); margin-bottom:1rem;
}
.point-grid h3{
  font-size:var(--step-1); line-height:1.25; margin-bottom:.85rem;
}
.point-grid p{ color:var(--ink-soft); }

/* ---------- team ---------- */

/* trimmed ~30px off the section's overall height at Jordi's request.
   Ivory-deep so it separates from the founder section above it. */
.team{
  background:var(--ivory-deep);
  padding-top:calc(var(--section) - 15px);
  padding-bottom:calc(var(--section) - 15px);
}
/* five across at full width; auto-fit so the row still works if someone is added or removed */
.team-grid{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--max);
  display:grid; gap:clamp(1rem, 2vw, 1.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.team-member figure{ margin:0; }
.team-member img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:14px; background:var(--ivory);
  /* portraits are cropped to 4:5 in the file, so no object-position needed */
}

/* empty slot — obviously provisional, so it can never be mistaken for a real person.
   Ivory on the section's deeper ground, so the slot still reads as a frame. */
.member-empty{
  aspect-ratio:4/5; border-radius:14px;
  background:var(--ivory); border:1px dashed var(--gold-pale);
  display:grid; place-items:center; padding:1rem; text-align:center;
}
.member-empty span{
  font-family:var(--sans); font-weight:300; font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
}
.is-empty .member-role{ font-style:normal; font-size:var(--step--1); opacity:.75; }
.team-member figcaption{ text-align:center; padding-top:1.3rem; }
.member-name{
  display:block; font-family:var(--sans); font-weight:400; font-size:.78rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink);
}
.member-role{
  display:block; margin-top:.5rem;
  font-family:var(--serif); font-style:italic;
  font-size:calc(var(--step-0) * 1.02); color:var(--ink-soft);
}

/* the marquee carries no top padding of its own (it hugs the homepage about block) */
.page-about .clients{ padding-top:calc(var(--section) * .6); }

/* ---------- closing ---------- */

.about-close{
  text-align:center;
  padding:clamp(3.5rem, 9vw, 6rem) var(--gutter) clamp(4rem, 10vw, 7rem);
}
.about-close::before{
  content:""; display:block; width:2.5rem; height:1px; background:var(--gold);
  margin:0 auto clamp(2rem, 5vw, 3rem);
}
.about-close h2{ font-size:var(--step-3); margin-bottom:1rem; }
.about-close p{
  color:var(--ink-soft); font-size:calc(var(--step-0) * 1.08);
  max-width:44ch; margin:0 auto 2.4rem;
}

/* ---------- mobile ---------- */

@media (max-width:840px){
  /* the burger is fixed and floats over the dark hero and the ivory sections below,
     so it carries a soft ink disc that reads on both grounds */
  .page-about .nav-burger{
    background:rgba(46,42,37,.32); border-radius:50%;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .page-about .nav-burger span,
  .page-about .nav-burger span::before,
  .page-about .nav-burger span::after{ background:var(--ivory); }
  .page-about .nav-toggle:checked ~ .nav-burger{
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .page-about .nav-toggle:checked ~ .nav-burger span,
  .page-about .nav-toggle:checked ~ .nav-burger span::before,
  .page-about .nav-toggle:checked ~ .nav-burger span::after{ background:var(--ink); }

  .about-hero{ min-height:clamp(12rem, 30svh, 17rem); padding-top:7rem; }

  .founder-grid{ grid-template-columns:1fr; }
  .founder-copy p{ max-width:none; }
  .founder-media{ max-width:34rem; }

  .point-grid{ grid-template-columns:1fr 1fr; gap:2.5rem; }

  /* five across is too tight below this width */
  .team-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:640px){
  /* two up on a phone — five people one-at-a-time would be an endless scroll */
  .team-grid{ grid-template-columns:1fr 1fr; }
  .point-grid{ grid-template-columns:1fr; }

  /* offsets and overlaps read as misalignment once things are this narrow */
  .founder-media{ gap:clamp(.75rem, 3vw, 1.25rem); }
  .founder-media .fm-stage{ margin-top:0; margin-right:0; }
  .founder-media .fm-stage img{ box-shadow:none; }
}