/* PAAK v3 — /about.
   Structure referred from https://omnerat-template.webflow.io/about (probed 2026-08-16),
   the same template /work/ was replicated from (see work-index.css). Its About page is
   five moves, and only these are applicable to a one-person studio:

     hero        one full-bleed background image, giant word, 2-col foot bar
     offset      every heading/image pair placed on a 5-col grid starting at column
                 2, 3 or 4 — never centred, never symmetric. That asymmetry IS the
                 layout; drop it and the page is a stack of divs.
     alternate   portrait right / text left, then image left / text right
     staircase   the service cards place row1 cols1-2, row2 cols3-4
     label-cell  a section label that occupies a GRID CELL instead of sitting above

   Deliberately NOT ported, because we would have to invent the content:
     the awards table (no awards), the 4-up team grid (one person), the client
     logo-flip wall (no client logos on disk), and the stats block's invented
     numerals — its numeral-left/paragraph-right ROW is kept, filled with the
     studio's own three process steps, which are real.

   The reference's one background image is a decision, not an accident: photographic
   full-bleed at the top, flat sections for the whole rest of the page. Kept exactly.

   Type follows type-system.css. Colour follows tokens.css. No new type ramp.
*/

/* ---------- the shared 5-column grid ----------
   260.8px columns at a 1272px container in the reference. Expressed as fractions so
   it holds at every width, with the reference's 16px gutter. */
.pka-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* The reference's literal spacer divs, as margins. 140px major, 56px heading-to-content. */
.pka-gap-l { height: clamp(64px, 9vw, 140px); }
.pka-gap-s { height: clamp(32px, 4vw, 56px); }

/* ---------- 1. hero ----------
   The only background image on the page. Desaturated on purpose: the plate is a green
   production still and the portrait below it is black and white, so the page would
   otherwise open on a colour it never uses again. The scrim is the reference's own
   rgba(0,0,0,.2), deepened because our word sits directly over the lit screen. */
.pka-hero {
  position: relative;
  min-height: 100vh;
  padding: clamp(72px, 7vh, 120px) var(--section--padding-left-right, 2%) 0;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background: #0d0d0d;
  color: #fff;
}

.pka-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/about/hero-plate.webp");
  background-size: cover;
  background-position: center 42%;
  /* The plate is a lit green screen. Desaturating it is what lets this hero sit above
     a black-and-white portrait without the page opening on a colour it never uses
     again — and it turns the screen into the brightest thing in frame, which is
     where the word sits. */
  filter: grayscale(1) contrast(1.04);
}

.pka-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.52));
}

/* Same sizing decision as .pkw-hero__word on /work/: the word is the largest thing on
   the page without being the only thing. */
.pka-hero__word {
  font-size: clamp(64px, 20vw, 300px);
  font-weight: var(--pk-w-display, 400);
  letter-spacing: var(--pk-tr-xxl, -0.03em);
  line-height: 0.86;
  text-align: center;
  margin: 0 auto;
  align-self: center;
  white-space: nowrap;
  color: #fff;
}

/* The reference's foot bar: two equal columns pinned 40px off the section's bottom
   edge, statement left, supporting line right-aligned. */
.pka-hero__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  padding-bottom: 40px;
}

.pka-hero__statement {
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: var(--pk-w-sub, 600);
  letter-spacing: var(--pk-tr-l, -0.025em);
  line-height: var(--pk-lh-l, 1.08);
  max-width: 16ch;
  margin: 0;
  color: #fff;
  opacity: 1;
}

.pka-hero__support {
  justify-self: end;
  text-align: right;
  max-width: 30ch;
  margin: 0;
  font-size: var(--pk-text-read, 16px);
  line-height: var(--pk-lh-read, 1.5);
  color: #fff;
  opacity: 0.78;
}

.pka-stamp {
  display: block;
  font-family: var(--font--second-font, "IBM Plex Mono", monospace);
  font-size: var(--pk-text-label, 12px);
  font-weight: 400;
  letter-spacing: var(--pk-tr-label, 0.08em);
  line-height: var(--pk-lh-meta, 1.3);
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.9em;
}

/* ---------- shared band furniture ---------- */

/* Eyebrow + statement, the pattern under every heading block on the reference. */
.pka-head__title {
  font-size: clamp(28px, 3.1vw, 50px);
  font-weight: var(--pk-w-sub, 600);
  letter-spacing: var(--pk-tr-l, -0.025em);
  line-height: var(--pk-lh-l, 1.08);
  margin: 0;
}

.pka-head__sub {
  margin: 0.7em 0 0;
  font-size: var(--pk-text-read, 16px);
  line-height: var(--pk-lh-read, 1.5);
  max-width: 46ch;
  opacity: 0.72;
}

/* The three offset placements the reference alternates between. */
.pka-at-2-4 { grid-column: 2 / 5; }
.pka-at-1-3 { grid-column: 1 / 4; }
.pka-at-3-5 { grid-column: 3 / 6; }
.pka-at-2   { grid-column: 2 / 3; }
.pka-at-1-4 { grid-column: 1 / 5; }
.pka-at-4-6 { grid-column: 4 / 6; }

/* ---------- 3. quote + portrait ----------
   Portrait right at columns 3-5, quote alone at column 2 with a whole empty column 1
   beside it, its baseline aligned to the bottom of the frame. TJ's plate is 1083x1452
   = 0.746, which is the reference frame's 3:4 to within a pixel, so nothing is cropped
   away — object-fit: cover here is a safety net, not a crop. */
.pka-portrait__frame {
  position: relative;
  /* The reference's frame is 500px inside a 3-column span it does not fill — measured
     at 1512, its span is ~830px and the image box is 500. Ours filled the whole span
     and came out 814x1086, taller than the viewport, which made the portrait the
     page rather than a beat in it. Capped to the reference's proportion and pinned to
     the RIGHT of its span, so column 1 stays empty and the quote keeps its air. */
  max-width: clamp(260px, 38vw, 520px);
  margin-left: auto;
  aspect-ratio: 3 / 4;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(26, 26, 26, 0.06);
}

.pka-portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pka-quote {
  align-self: end;
  margin: 0;
  padding: 0 0 6px;
}

.pka-quote__text {
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: var(--pk-w-sub, 600);
  letter-spacing: var(--pk-tr-m, -0.02em);
  line-height: var(--pk-lh-m, 1.12);
  margin: 0;
}

.pka-quote__by {
  display: block;
  margin-top: 1.1em;
  font-family: var(--font--second-font, "IBM Plex Mono", monospace);
  font-size: var(--pk-text-label, 12px);
  letter-spacing: var(--pk-tr-label, 0.08em);
  text-transform: uppercase;
  opacity: 0.55;
  font-style: normal;
}

/* ---------- 4. why us ----------
   The mirror of block 3: landscape frame left at columns 1-4, copy at columns 4-6 so
   the two OVERLAP by one column. The overlap is the reference's move — the copy sits
   on the image's last column rather than beside it. */
.pka-why {
  align-items: stretch;
  column-gap: clamp(24px, 5vw, 100px);
}

/* The reference's image span (cols 1-4) and copy span (cols 4-6) SHARE column 4.
   CSS Grid will not let two auto-placed items claim the same column: it silently
   pushes the second one onto a new row, and the "side by side" block renders as
   image-then-text stacked. Both are pinned to row 1 so the overlap is honoured.
   Nothing visually collides — the frame caps at 740px and column 4 starts at ~880. */
.pka-why > .pka-at-1-4,
.pka-why > .pka-at-4-6 { grid-row: 1; }

.pka-why__frame {
  position: relative;
  /* Same correction as the portrait: the reference's landscape box is 726px inside a
     4-column span, not the full span. Filling it put the image at 1080px and left the
     copy column looking starved. */
  max-width: clamp(280px, 54vw, 740px);
  aspect-ratio: 3 / 2;
  border-radius: 7px;
  overflow: hidden;
  align-self: center;
}

.pka-why__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pka-why__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.pka-why__body {
  margin: 0.9em 0 0;
  font-size: var(--pk-text-read, 16px);
  line-height: var(--pk-lh-read, 1.5);
  opacity: 0.78;
}

.pka-link {
  align-self: flex-start;
  font-family: var(--font--second-font, "IBM Plex Mono", monospace);
  font-size: var(--pk-text-label, 12px);
  letter-spacing: var(--pk-tr-label, 0.08em);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.pka-link:hover { opacity: 1; }
.pka-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- 5-7. the dark band: what we do, services, how it runs ----------
   One 4-column grid carries both the service cards and the process rows, exactly as
   the reference shares one grid between its process cards and its stats block. */
.pka-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* The staircase. Cards 01 and 02 auto-place into row 1 columns 1-2; 03 and 04 are
   placed by hand into row 2 columns 3-4, leaving two deliberate holes. On the
   reference this is what stops four equal cards reading as a spec sheet. */
.pka-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  min-height: 260px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pka-card:hover { border-color: rgba(255, 255, 255, 0.42); transform: translateY(-4px); }
.pka-card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.pka-card:nth-child(3) { grid-column: 3; grid-row: 2; }
.pka-card:nth-child(4) { grid-column: 4; grid-row: 2; }

.pka-card__n,
.pka-run__n {
  font-family: var(--font--second-font, "IBM Plex Mono", monospace);
  font-size: var(--pk-text-label, 12px);
  letter-spacing: var(--pk-tr-label, 0.08em);
  opacity: 0.55;
}

.pka-card__title {
  margin: 0;
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: var(--pk-w-sub, 600);
  letter-spacing: var(--pk-tr-m, -0.02em);
  line-height: var(--pk-lh-m, 1.12);
}

.pka-card__body {
  margin: 0;
  font-size: var(--pk-text-read, 16px);
  line-height: var(--pk-lh-read, 1.5);
  opacity: 0.72;
  margin-top: auto;
}

/* The reference's stats block: row 3 of the same grid, columns 3-5 of 5 — here
   columns 3-4 of 4, so it sits under the staircase's lower half rather than
   restarting at the left margin. Oversized numeral left, paragraph right, no rules. */
.pka-runs {
  grid-column: 3 / 5;
  grid-row: 3;
  padding-top: clamp(40px, 5vw, 84px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 36px);
}

.pka-run {
  display: grid;
  grid-template-columns: minmax(72px, 0.42fr) 1fr;
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
}

.pka-run__num {
  font-size: clamp(52px, 6vw, 108px);
  font-weight: var(--pk-w-display, 400);
  letter-spacing: var(--pk-tr-xl, -0.03em);
  line-height: 0.82;
  margin: 0;
  opacity: 0.9;
}

.pka-run__title {
  margin: 0 0 0.45em;
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: var(--pk-w-sub, 600);
  letter-spacing: var(--pk-tr-s, -0.015em);
  line-height: var(--pk-lh-s, 1.2);
}

.pka-run__body {
  margin: 0;
  font-size: var(--pk-text-read, 16px);
  line-height: var(--pk-lh-read, 1.5);
  opacity: 0.72;
}

/* ---------- 8. selected work ----------
   The reference's client wall is a tile grid whose section LABEL occupies a grid cell
   instead of sitting above the grid. Kept, with real case artwork in place of logos:
   four tiles across row 1, then the label offset into row 2 column 2 and the link to
   the full index at row 2 column 4. */
.pka-work {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 32px) clamp(12px, 1.4vw, 20px);
  align-items: start;
}

.pka-tile { text-decoration: none; color: inherit; display: block; }

.pka-tile__frame {
  aspect-ratio: 4 / 3;
  border-radius: clamp(10px, 1.1vw, 16px);
  overflow: hidden;
  background: rgba(26, 26, 26, 0.06);
}

.pka-tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pka-tile:hover .pka-tile__frame img { transform: scale(1.04); }
.pka-tile:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.pka-tile__name {
  display: block;
  margin-top: 0.75em;
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: var(--pk-w-sub, 600);
  letter-spacing: var(--pk-tr-s, -0.015em);
}

.pka-tile__tags {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font--second-font, "IBM Plex Mono", monospace);
  font-size: var(--pk-text-label, 12px);
  letter-spacing: var(--pk-tr-label, 0.08em);
  text-transform: uppercase;
  opacity: 0.55;
}

.pka-work__label { grid-column: 2; grid-row: 2; align-self: center; }
.pka-work__more  { grid-column: 4; grid-row: 2; align-self: center; justify-self: start; }

/* ---------- responsive ----------
   Every offset placement collapses to a single column. The asymmetry is a desktop
   idea; on a phone it only produces orphan gutters. */
@media screen and (max-width: 991px) {
  .pka-band { grid-template-columns: repeat(2, 1fr); }
  .pka-card:nth-child(3),
  .pka-card:nth-child(4) { grid-column: auto; grid-row: auto; }
  .pka-runs { grid-column: 1 / -1; grid-row: auto; }
  .pka-work { grid-template-columns: repeat(2, 1fr); }
  .pka-work__label { grid-column: 1; grid-row: 3; }
  .pka-work__more  { grid-column: 2; grid-row: 3; justify-self: end; }
}

@media screen and (max-width: 767px) {
  .pka-hero { min-height: 82vh; }
  .pka-hero__foot { grid-template-columns: 1fr; gap: 20px; }
  .pka-hero__support { justify-self: start; text-align: left; }
  .pka-hero__statement { max-width: none; }

  .pka-grid { grid-template-columns: 1fr; gap: 28px; }
  .pka-at-2-4, .pka-at-1-3, .pka-at-3-5, .pka-at-2, .pka-at-1-4, .pka-at-4-6 {
    grid-column: 1 / -1;
  }
  /* one column means one item per row again */
  .pka-why > .pka-at-1-4,
  .pka-why > .pka-at-4-6 { grid-row: auto; }
  /* On one column the portrait must follow the quote it belongs to, not lead it. */
  .pka-quote { order: 2; align-self: start; }
  .pka-portrait { order: 1; }
  .pka-portrait__frame { max-width: 420px; margin-left: 0; }
  /* Both caps exist to stop a frame filling a wide multi-column span. On one column
     there is no span to overfill, and the clamp's 280px FLOOR was leaving the
     landscape image at 280 inside a 358px column — an image with a margin nobody
     asked for. */
  .pka-why__frame { max-width: none; }

  .pka-band { grid-template-columns: 1fr; }
  .pka-card { min-height: 0; }
  .pka-run { grid-template-columns: 84px 1fr; }
  .pka-work { grid-template-columns: 1fr; }
  .pka-work__label, .pka-work__more { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .pka-card,
  .pka-tile__frame img { transition: none; }
  .pka-card:hover { transform: none; }
  .pka-tile:hover .pka-tile__frame img { transform: none; }
}