/* ================================================================
   BANO STUDIOS — ABOUT PAGE CSS (D03)
   About-specific styles extracted verbatim from
   Website Resources/BANO STUDIOS/d03-site/about.html lines 11–163.
   Loaded via $pageCSSFile = 'about-d03.css' by about-d03.php.
   Sits alongside the base tokens/chrome from assets/css/d03-theme.css.
   ================================================================ */

/* About-specific */
.about-hero {
  display: grid; grid-template-columns: 1.2fr 1fr;
  border-bottom: 2px solid var(--d03-ink);
}
.about-hero > .left {
  padding: clamp(40px,6vw,96px) clamp(20px,5vw,56px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 48px; min-height: 640px;
}
.about-hero > .right {
  border-left: 2px solid var(--d03-ink);
  min-height: 640px; position: relative; overflow: hidden;
}
.about-hero > .right img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.35) contrast(1.05);
}
.about-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; letter-spacing: -0.05em; line-height: 0.88;
  font-size: clamp(56px,11vw,172px); margin: 0;
}
.about-hero-meta {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  flex-wrap: wrap; gap: 12px;
}
.about-hero-stats {
  display: flex; gap: 0;
  border-top: 2px solid var(--d03-ink);
  border-bottom: 2px solid var(--d03-ink);
  background: var(--d03-ink); color: var(--d03-paper);
}
.about-hero-stats > div {
  flex: 1; padding: 24px 28px;
  border-right: 1px solid #ffffff22;
}
.about-hero-stats > div:last-child { border-right: none; }
.about-hero-stats .n {
  font-weight: 700; font-size: clamp(32px,4vw,56px);
  letter-spacing: -0.04em; line-height: 1;
}
.about-hero-stats .l {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  margin-top: 10px; opacity: 0.7;
}

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero > .right { border-left: none; border-top: 2px solid var(--d03-ink); min-height: 380px; }
  .about-hero > .left { min-height: auto; }
  .about-hero-stats { flex-wrap: wrap; }
  .about-hero-stats > div { flex: 1 1 50%; border-bottom: 1px solid #ffffff22; }
}
@media (max-width: 600px) {
  .about-hero-stats > div { flex: 1 1 100%; }
}

/* Journey */
.journey {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-bottom: 2px solid var(--d03-ink);
}
.journey > .left {
  padding: clamp(40px,6vw,96px) clamp(20px,5vw,56px);
  border-right: 2px solid var(--d03-ink);
}
.journey > .right {
  background: var(--d03-ink); color: var(--d03-paper);
  padding: clamp(40px,6vw,96px) clamp(20px,5vw,56px);
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 32px;
}
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; }
  .journey > .left { border-right: none; border-bottom: 2px solid var(--d03-ink); }
}

/* Vision/Mission/Purpose grid */
.vmp {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.vmp > div {
  padding: clamp(32px,4vw,64px) clamp(24px,3vw,48px);
  border-right: 2px solid var(--d03-ink);
  display: flex; flex-direction: column; gap: 24px;
  min-height: 440px;
}
.vmp > div:last-child { border-right: none; }
.vmp > div.active { background: var(--d03-red); color: #fff; }
@media (max-width: 900px) {
  .vmp { grid-template-columns: 1fr; }
  .vmp > div { border-right: none; border-bottom: 2px solid var(--d03-ink); min-height: auto; padding: 32px 24px; }
  .vmp > div:last-child { border-bottom: none; }
}

/* Team — 4 in a row on desktop, 2 on tablet, 1 on mobile */
.team {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.team > div {
  padding: clamp(24px,3vw,48px) clamp(20px,2.5vw,32px);
  border-right: 2px solid var(--d03-ink);
  min-height: 380px;
  display: flex; flex-direction: column; gap: 18px;
  justify-content: space-between;
}
.team > div:nth-child(4n) { border-right: none; }
@media (max-width: 1100px) {
  .team { grid-template-columns: 1fr 1fr; }
  .team > div { border-right: 2px solid var(--d03-ink); }
  .team > div:nth-child(4n) { border-right: 2px solid var(--d03-ink); }
  .team > div:nth-child(2n) { border-right: none; }
  .team > div:not(:nth-last-child(-n+2)) { border-bottom: 2px solid var(--d03-ink); }
}
@media (max-width: 600px) {
  .team { grid-template-columns: 1fr; }
  .team > div { border-right: none !important; border-bottom: 2px solid var(--d03-ink) !important; min-height: auto; }
  .team > div:last-child { border-bottom: none !important; }
}

/* Audience (4 cols) */
.audience {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.audience > div {
  padding: clamp(24px,3vw,40px);
  border-right: 2px solid var(--d03-ink);
  display: flex; flex-direction: column; gap: 20px;
  min-height: 360px;
}
.audience > div:last-child { border-right: none; }
@media (max-width: 900px) {
  .audience { grid-template-columns: 1fr 1fr; }
  .audience > div:nth-child(even) { border-right: none; }
  .audience > div { border-bottom: 2px solid var(--d03-ink); }
  .audience > div:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .audience { grid-template-columns: 1fr; }
  .audience > div, .audience > div:nth-child(even) {
    border-right: none; border-bottom: 2px solid var(--d03-ink); min-height: auto; padding: 32px 24px;
  }
  .audience > div:last-child { border-bottom: none; }
}

/* Values — 6 cells, 3x2 */
.values {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.values > div {
  padding: clamp(28px,3.5vw,56px);
  border-right: 2px solid var(--d03-ink);
  border-bottom: 2px solid var(--d03-ink);
  display: flex; flex-direction: column; gap: 20px;
  min-height: 360px;
}
.values > div:nth-child(3n) { border-right: none; }
.values > div:nth-last-child(-n+3) { border-bottom: none; }
.values .num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(56px,7vw,120px); font-weight: 700;
  letter-spacing: -0.05em; line-height: 0.85;
  color: var(--d03-red);
}
.values .name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(24px,2.6vw,36px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.0;
}
@media (max-width: 900px) {
  .values { grid-template-columns: 1fr 1fr; }
  .values > div { border-right: none !important; border-bottom: 2px solid var(--d03-ink) !important; }
  .values > div:nth-child(odd) { border-right: 2px solid var(--d03-ink) !important; }
}
@media (max-width: 600px) {
  .values { grid-template-columns: 1fr; }
  .values > div, .values > div:nth-child(odd) { border-right: none !important; min-height: auto; padding: 32px 24px; }
}

/* Milestones timeline */
.milestones {
  border-bottom: 2px solid var(--d03-ink);
  padding: clamp(48px,7vw,112px) 0;
}
.milestone {
  display: grid; grid-template-columns: 180px 1fr 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--d03-ink);
  align-items: start;
}
.milestone:last-child { border-bottom: 1px solid var(--d03-ink); }
.milestone .year {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.04em; line-height: 0.9;
  color: var(--d03-red);
}
.milestone .title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.6vw, 36px); line-height: 1.05;
}
.milestone .body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1.7; letter-spacing: 0.04em;
}
.milestone.award { background: #fff8f8; }
.milestone.award .year { color: var(--d03-red); }
@media (max-width: 900px) {
  .milestone { grid-template-columns: 120px 1fr; }
  .milestone .body { grid-column: 1/-1; margin-top: 8px; }
}
@media (max-width: 600px) {
  .milestone { grid-template-columns: 1fr; gap: 12px; }
}

/* Sets apart (4 cols) */
.sets-apart {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--d03-ink);
  background: var(--d03-ink); color: var(--d03-paper);
}
.sets-apart > div {
  padding: clamp(28px,3.5vw,48px);
  border-right: 1px solid #ffffff22;
  min-height: 320px;
  display: flex; flex-direction: column; gap: 16px;
}
.sets-apart > div:last-child { border-right: none; }
@media (max-width: 900px) {
  .sets-apart { grid-template-columns: 1fr 1fr; }
  .sets-apart > div:nth-child(2n) { border-right: none; }
  .sets-apart > div { border-bottom: 1px solid #ffffff22; }
  .sets-apart > div:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .sets-apart { grid-template-columns: 1fr; }
  .sets-apart > div, .sets-apart > div:nth-child(2n) {
    border-right: none; border-bottom: 1px solid #ffffff22; min-height: auto; padding: 32px 24px;
  }
  .sets-apart > div:last-child { border-bottom: none; }
}