/* =========================================================
   ABOUT PAGE — editorial "manifesto" layout
   Cover → scroll-lit statement → quote → two columns →
   stacking cards → closing statement
   ========================================================= */
/* statement / quote / two-column bands: the site's raised dark tone, so they
   still read as distinct bands against the cover and the card stack */
.page-about { --band: var(--surface); }

/* boxed label */
.ab-label {
  display: inline-block; padding: 0.5rem 0.7rem; border: 1px solid currentColor;
  font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: 0.2em; user-select: none;
}
@media (min-width: 1024px) { .ab-label { font-size: 11px; } }

/* ---------- 1 · cover ---------- */
.ab-cover { position: relative; background: var(--bg); color: var(--ink); }
.ab-cover__head {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem;
  padding: 9rem var(--pad) 0;
}
@media (min-width: 1024px) { .ab-cover__head { padding-top: 11rem; gap: 2.25rem; } }
.ab-cover__title { font-size: clamp(3rem, 10vw, 10rem); line-height: 0.9; letter-spacing: -0.02em; }
.ab-cover__sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.ab-cover__wrap { position: relative; height: 200vh; margin-top: 3rem; }
.ab-cover__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ab-cover__frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(16% 10% 16% 10% round 16px); }
@media (min-width: 768px) { .ab-cover__frame { clip-path: inset(14% 30% 14% 30% round 20px); } }
.ab-cover__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.ab-cover__video { display: block; background: #000; }

/* ---------- 2 / 6 · scroll-lit statement ---------- */
.ab-st { position: relative; z-index: 2; background: var(--band); color: var(--ink); }
.ab-st__stage { position: relative; height: 100vh; overflow: hidden; }
.ab-st__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem; padding: 0 var(--pad); text-align: center;
}
.ab-st__text { max-width: 62rem; font-size: clamp(1.5rem, 3.3vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.ab-st__text p + p { margin-top: 0.6em; }
.ab-st__text--caps { text-transform: uppercase; font-size: clamp(1.75rem, 4.6vw, 4.75rem); line-height: 0.98; letter-spacing: -0.04em; }
.ab-st__w { opacity: 0.16; }
.ab-st__cover { position: absolute; inset: 0; z-index: 2; overflow: hidden; clip-path: inset(100% 0 0 0); }
.ab-st__cover img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.ab-st__cta { margin-top: 0.5rem; }

/* ---------- 3 · centred quote ---------- */
.ab-quote {
  position: relative; z-index: 1; background: var(--band); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem;
  padding: 8rem var(--pad) 3rem;
}
@media (min-width: 1024px) { .ab-quote { padding-top: 12rem; } }
.ab-quote__h { max-width: 22ch; font-weight: 400; font-size: clamp(1.75rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; }
.ab-quote__asset { width: clamp(150px, 22vw, 340px); aspect-ratio: 1; margin-top: 1rem; border-radius: 50%; overflow: hidden; }
.ab-quote__asset img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4 · two columns ---------- */
.ab-cols { position: relative; z-index: 1; background: var(--band); color: var(--ink); padding: 3rem var(--pad) 8rem; }
@media (min-width: 1024px) { .ab-cols { padding-bottom: 12rem; } }
.ab-rule { height: 1px; border: 0; margin: 0; background: rgba(236, 229, 216, 0.3); transform-origin: left; }
.ab-cols__grid { display: grid; gap: 2rem; padding-top: 2rem; }
@media (min-width: 768px) { .ab-cols__grid { grid-template-columns: 6fr 1fr 5fr; padding-top: 5rem; } .ab-cols__body { grid-column: 3; } }
.ab-cols__h { font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.035em; max-width: 18ch; }
.ab-cols__body { display: grid; gap: 1em; font-size: 1rem; line-height: 1.5; color: rgba(236, 229, 216, 0.82); }
@media (min-width: 1024px) { .ab-cols__body { font-size: 1.125rem; } }

/* ---------- 5 · stacking cards ---------- */
.ab-stack { position: relative; z-index: 1; background: var(--bg); color: var(--ink); }
.ab-stack__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; padding: 8rem var(--pad) 5rem; }
@media (min-width: 1024px) { .ab-stack__head { padding: 12rem var(--pad) 7rem; } }
.ab-stack__title { font-size: clamp(2.5rem, 7vw, 7rem); line-height: 0.92; letter-spacing: -0.02em; }
.ab-card { position: sticky; top: 0; height: 100vh; padding: 0.625rem; }
@media (min-width: 768px) { .ab-card { padding: 1.5rem; } }
.ab-card__panel {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.25rem; border-radius: 22px; background: var(--surface); transform-origin: 50% 0;
}
@media (min-width: 768px) { .ab-card__panel { padding: 2.5rem; border-radius: 30px; } }
@media (min-width: 1280px) { .ab-card__panel { display: grid; grid-template-columns: 4fr 1fr 7fr; gap: 0; } }
.ab-card__text { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1280px) { .ab-card__text { justify-content: space-between; padding: 0.5rem 0 0.5rem 1rem; } }
.ab-card__num { font-size: 11px; letter-spacing: 0.16em; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-card__h { order: -1; font-weight: 500; text-transform: uppercase; font-size: clamp(1.75rem, 3.6vw, 3.5rem); line-height: 0.95; letter-spacing: -0.04em; }
@media (min-width: 1280px) { .ab-card__h { order: 0; margin-right: -3rem; } }
.ab-card__text p { max-width: 26rem; font-size: 0.9rem; line-height: 1.5; color: rgba(236, 229, 216, 0.8); }
@media (min-width: 1024px) { .ab-card__text p { font-size: 1rem; } }
.ab-card__media { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 14px; }
@media (min-width: 1280px) { .ab-card__media { grid-column: 3; } }
.ab-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-card__shade { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }

/* closing statement sits after the cards */
.ab-st--end { z-index: 3; }

/* ---------- "Discover our purpose": editorial type mix ----------
   sans base · Instrument Serif italic (in TGA orange) for feeling ·
   Michroma (wide, like the TGA logotype) for precision words */
.page-about { --tga-orange: #f0b060; }
.ab-st__text--mix { max-width: 66rem; font-size: clamp(1.4rem, 2.9vw, 2.9rem); line-height: 1.16; letter-spacing: -0.03em; }
.ab-st__text--mix p + p { margin-top: 0.75em; }
.ab-mix__lead { font-size: 1.32em; line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 0.2em; }
.f-ital {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.2em; line-height: 0.9; letter-spacing: -0.01em; color: var(--tga-orange);
}
.f-wide {
  font-family: "Michroma", var(--sans); font-weight: 400; text-transform: uppercase;
  font-size: 0.66em; letter-spacing: 0.04em; line-height: 1; vertical-align: 0.08em;
}