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

/* ---------------- Portrait collage ---------------- */
.abt-collage{
  display:grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(.7rem,1.6vw,1.4rem);
  align-items:start;
}
.abt-collage .frame{ border-radius: var(--r-md); }
.abt-collage .c1{ grid-column: 1 / span 7; aspect-ratio: 3/2; }
.abt-collage .c2{ grid-column: 8 / span 5; aspect-ratio: 1/1; margin-top: clamp(1.5rem,5vw,4rem); }
.abt-collage .c3{ grid-column: 3 / span 5; aspect-ratio: 3/2; margin-top:-6%; }
.abt-collage .c4{ grid-column: 8 / span 5; aspect-ratio: 4/3; }
@media (max-width:700px){
  .abt-collage .c1{ grid-column: 1 / span 12; }
  .abt-collage .c2{ grid-column: 1 / span 7; margin-top:0; }
  .abt-collage .c3{ grid-column: 8 / span 5; margin-top:0; }
  .abt-collage .c4{ grid-column: 1 / span 12; aspect-ratio:16/10; }
}

/* ---------------- Manifesto ---------------- */
.manifesto{
  position:relative; overflow:hidden;
  padding-block: clamp(4rem,9vw,9rem);
  background: var(--bg-invert); color: var(--text-invert);
  text-align:center;
}
.manifesto .motif-bg{ opacity:.05; }
.manifesto__halo{
  position:absolute; width:min(760px,110vw); aspect-ratio:1; border-radius:50%;
  left:50%; top:50%; translate:-50% -50%;
  background: radial-gradient(circle, var(--halo-1), transparent 66%);
  filter: blur(30px); animation: haloDrift 20s ease-in-out infinite; pointer-events:none;
}
.manifesto__in{ position:relative; z-index:2; }
.manifesto .quote{
  color: var(--text-invert);
  font-size: clamp(1.4rem, 3.4vw, 3rem); line-height:1.34;
  max-width: 22ch; margin-inline:auto;
}
.manifesto .quote__mark{ color: var(--accent); opacity:.55; }
.manifesto__by{
  margin-top: var(--s-4); font-size:var(--t-xs);
  letter-spacing:.28em; text-transform:uppercase;
  color: color-mix(in srgb, var(--text-invert) 58%, transparent);
}

/* ---------------- Full-bleed photo band ---------------- */
.photo-band{
  position:relative; overflow:hidden;
  background: var(--bg-alt);
  border-block:1px solid var(--line-soft);
  padding-block: clamp(1rem,2vw,1.6rem);
}
.photo-band__cell{
  display:block; flex:none;
  width: clamp(150px, 17vw, 250px); aspect-ratio: 4/3;
  margin-inline: clamp(.3rem,.7vw,.6rem);
  border-radius: var(--r-sm); overflow:hidden;
}
.photo-band__cell img{ width:100%; height:100%; object-fit:cover; }
.photo-band .marquee__track{ align-items:center; }

/* ---------------- Values ---------------- */
.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1.2rem,2.6vw,2.4rem); }
@media (max-width:900px){ .vals{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vals{ grid-template-columns:1fr; } }
.val{
  display:grid; gap:.75rem; align-content:start; height:100%;
  grid-template-rows: auto auto 1fr;
}
.val__shot{ position:relative; display:block; overflow:hidden; border-radius: var(--r-md); }
.val__shot .frame{ display:block; aspect-ratio: 4/3; border-radius: var(--r-md); }
.val__shot img{ width:100%; height:100%; object-fit:cover; }
.val:hover .val__shot img{ transform: scale(1.05); }
.val__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 55%, rgba(18,4,15,.55));
}
.val__n{
  position:absolute; left:.7rem; top:.7rem; z-index:3;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; color:#fff;
  padding:.34em .7em; border-radius: var(--r-pill);
  background-image: var(--grad-hot); box-shadow: var(--shadow-glow);
}
.val h3{ font-size: var(--t-md); margin-top:.35rem; }
.val p{ font-size:var(--t-sm); color:var(--text-mut); }

/* ---------------- Process cards ---------------- */
.tl{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap: clamp(1.1rem,2.4vw,2.1rem);
}
@media (max-width:900px){ .tl{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tl{ grid-template-columns:1fr; } }

.tl__card{ display:grid; gap:.7rem; align-content:start; height:100%; }
.tl__shot{ position:relative; display:block; overflow:hidden; border-radius: var(--r-md); }
.tl__shot .frame{ display:block; aspect-ratio: 3/2; border-radius: var(--r-md); }
.tl__shot img{ width:100%; height:100%; object-fit:cover; }
.tl__card:hover .tl__shot img{ transform: scale(1.05); }
.tl__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 52%, rgba(18,4,15,.58));
}
.tl__step{
  position:absolute; left:.7rem; bottom:.7rem; z-index:3;
  font-family:var(--f-display); font-size: clamp(1.4rem,2.6vw,2rem);
  line-height:1; color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.tl__card h3{ font-size: var(--t-md); }
.tl__card p{ color:var(--text-mut); font-size:var(--t-sm); }

/* ---------------- Crew ---------------- */
.crew{ display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(1rem,2vw,1.8rem); }
@media (max-width:900px){ .crew{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .crew{ grid-template-columns:1fr; } }
.crew__card{ display:grid; gap:.9rem; align-content:start; height:100%; }
.crew__card .frame{ aspect-ratio: 4/3; border-radius: var(--r-md); }
.crew__card h3{ font-size: var(--t-base); font-family:var(--f-display); }
.crew__card .role{ font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--text-mut); }

/* ---------------- Coverage map / areas ---------------- */
.areas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:1px; background: var(--line); border:1px solid var(--line);
  border-radius: var(--r-md); overflow:hidden;
}
.area-cell{
  background: var(--bg); padding: clamp(1.1rem,2.2vw,1.7rem);
  display:grid; gap:.35rem; transition: background-color .4s var(--e-out);
}
.area-cell:hover{ background: var(--accent-wash); }
.area-cell .n{ font-family:var(--f-display); font-size:var(--t-md); }
.area-cell .k{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-mut); }