/* ============================================================
   PRIME ACADEMY GROUP — v6.1.2
   page-about.css — About, and nothing else.

   Load order: fonts.css → system.css → shared.css → page-about.css

   Almost everything on this page is already in shared.css: the opening, the
   nav, the dark panel and its tiles, the closing pair, the footer, the
   eyebrow. Two arrangements are the page's own and live here:

     · the half-and-half text and photograph
     · the two cards on the navy panel
     · the six picture cards

   No new colour, radius, type size or easing. Everything below is built from
   tokens that already exist.
   ============================================================ */

/* ═══ 2 · A CONSULTANCY THAT BUILT A PLATFORM ═══
   Words one side, photograph the other, half each. `center`, not `stretch`:
   the text is shorter than the picture wants to be, and pinning both to the
   full row height would leave the paragraph floating against the top of a
   tall empty column. The relationship section below stretches instead,
   because there the two sides are the same kind of thing. */
/* THE GAP IS --pad, the panel's own padding.

   So the space between the words and the picture is exactly the space between
   the picture and the white edge beside it: one measurement, used twice, and
   the picture sits in equal air on both sides. It scales with the panel rather
   than holding still, which a fixed 48px did not. */
.who{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:stretch}
/* ONE LINE. It spans the panel rather than sitting in the text column,
   because a half column cannot hold it at the h2 size at any ordinary window
   and the alternative is shrinking the heading below the shared scale. No
   measure cap, so nothing pulls it back into two. */
/* 32px under the heading, against the 24px between the paragraphs below it.
   The gap that separates the title from the whole block has to be larger than
   the gaps inside that block, or the title reads as the first paragraph. At
   16 it was the smallest gap in the column, which had the hierarchy upside
   down. balance splits the heading evenly on the widths where it wraps. */
.who-text h2{margin-bottom:var(--s6);text-wrap:balance}
/* Both measures come off. The column is already a comfortable line length,
   and the shared 76ch and 65ch caps would stop the text well short of its own
   right edge and leave a dead strip beside the picture. */
/* pretty, not balance: this runs to five lines on a phone, past the point
   where balance stops working, and the thing to fix is the single word left
   on the last line. */
.who-text .lead{max-width:none;margin-bottom:var(--s5);text-wrap:pretty}
.who-text p{max-width:none}
/* 24px between paragraphs, against a 24px line. At 16 the break between two
   paragraphs was smaller than the leading inside them, so the second one read
   as a continuation rather than a new thought. */
.who-text p + p{margin-top:var(--s5)}
/* 32px above it, the same step the dark panel puts above its own button. */
.who-text .btn{margin-top:var(--s6)}

/* THE PICTURE MATCHES ITS COLUMN.
   It has no ratio of its own: the row is as tall as the words beside it and
   the photograph fills that, so the two sides always finish level. Stacked,
   there is no column to match and it takes 4:3.

   This is the site's rule for a picture beside words, and it is the same on
   About and on Subscription Plans. */
.who-fig{position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--wash)}
.who-fig{overflow:hidden}
.who-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02);
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
/* The photograph answers a pointer the way the homepage's option cards do:
   held back at rest so the pictures across the site read as one owned set, and
   released to full colour on hover. On the page's own hover speed, so nothing
   is still moving after the rest has settled.

   The figure is not a link and nothing here suggests it is: no lift, no hand
   cursor. The picture simply comes alive under the pointer. */
.who-fig:hover img{filter:none;transform:scale(1.035)}
.who-fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}

/* ═══ 3 · THE RELATIONSHIP, on the navy panel ═══
   The page's one dark section sits here rather than on the six capabilities,
   because this is the question the page exists to answer.

   Two cards, one per name. They are the capability tiles' own surface, scaled
   up: the same translucent white fill, the same hairline, the same warm on
   hover. Nothing new is introduced for them. */
.rel{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* THE WHOLE CARD IS THE LINK, so what looks like a link inside it is a span:
   a link cannot sit inside a link. Same construction as the homepage's option
   cards and the closing pair. */
.rel-card{display:flex;flex-direction:column;
  background:color-mix(in srgb, #fff 7%, transparent);
  border:1px solid color-mix(in srgb, #fff 13%, transparent);
  border-radius:var(--r-card);padding:var(--s6);
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),background var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
/* It lifts, because it is clickable, but takes no shadow: a navy shadow on a
   navy panel is nothing. The surface and the edge carry the change. */
.rel-card:hover{transform:translateY(-4px);
  background:color-mix(in srgb, #fff 12%, transparent);
  border-color:color-mix(in srgb, var(--azure) 46%, transparent)}
/* The address answers the card's hover, not its own. */
.rel-card:hover .link{color:#fff}
.rel-card:hover .link svg{transform:translateX(3px)}

/* The homepage's stepper badge, in the state it settles into once the line
   has reached it: solid Deep Blue with a bright azure edge. Not the unlit
   state, which is a duller blue mixed back into the navy behind it and reads
   as a different colour beside the homepage. Same 56px, same radius. */
.rel-ico{width:56px;height:56px;border-radius:var(--r-card);
  display:flex;align-items:center;justify-content:center;font-size:25px;
  margin-bottom:var(--s5);background:var(--deep);
  border:1px solid color-mix(in srgb, var(--azure) 90%, transparent);
  color:color-mix(in srgb, var(--azure) 45%, #fff)}

/* One of the two eyebrows wraps, and the shared rule is set at line-height 1
   for the single short line it carries elsewhere. */
.rel-card .tag{line-height:1.35}
.rel-card h3{margin-bottom:var(--s3)}
/* No measure, and the paragraph takes the space above the addresses so they
   sit on the floor of both cards rather than floating up under a short one. */
.rel-card p{max-width:none;flex:1;margin-bottom:var(--s5);
  color:color-mix(in srgb, #fff 64%, var(--navy))}
/* One line, both addresses. They wrap to a second only where the card is
   genuinely too narrow to hold them, which is a phone. */
.rel-links{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:var(--s5);row-gap:var(--s2)}
/* primeacg.com is where the reader already is, so it is stated rather than
   offered: no arrow, no accent, and the card's one destination is the platform.
   Two things wearing the link treatment for one destination would be a lie. */
.rel-here{font-size:var(--t-text);font-weight:500;
  color:color-mix(in srgb, #fff 58%, var(--navy))}

/* ═══ 4 · THE SIX CAPABILITIES ═══
   The homepage's picture card, six across two rows. Not links — all six lead
   to the same page, so the section's one button carries it and the cards stay
   quiet. */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  margin-bottom:var(--s6)}
.cap{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
/* The surface warms and the edge picks up blue, as the difference cards do.
   Still no lift and no hand cursor: the card is not a link. */
.cap:hover{background:var(--wash);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}

/* 16:10, which is the photographs' own shape, so nothing is cropped — and it
   is shorter than the 4:3 the homepage cards use, which is what six of them
   in one panel needs. */
.cap-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--wash)}
/* Held back at rest so six different photographs read as one owned set, and
   released to full colour on hover — the homepage option card's own move, on
   the page's one hover speed so the picture, the chip and the surface all
   finish together. */
.cap-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02);
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
.cap:hover .cap-fig img{filter:none;transform:scale(1.035)}
.cap-fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}

/* The chip straddles the image edge, exactly as it does on the homepage. */
.cap-ico{position:absolute;left:var(--s5);top:0;transform:translateY(-50%);z-index:3;
  width:56px;height:56px;border-radius:var(--r-card);background:var(--deep);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;
  transition:background var(--fast) var(--ease)}
.cap:hover .cap-ico{background:var(--azure)}
.cap-body{position:relative;padding:52px var(--s6) var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);flex:1}
.cap-body p{font-size:var(--t-text);line-height:var(--lh-text);flex:1;max-width:none}

/* Ranged right, and only as wide as its label, exactly as the dark panel puts
   its own button on the homepage. The panel is a flex column, so without the
   width the button would stretch the whole section. */
.caps-cta{align-self:flex-end;width:fit-content}

@media (max-width:1080px){
  /* Two across, and the sixth pairs off with the fifth. Three columns of
     picture card stop working before the two-column sections do. */
  .caps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  /* Words first, then the picture. Nothing to match, so it takes 4:3. */
  .who{grid-template-columns:1fr;gap:var(--s5)}
  .who-fig{aspect-ratio:4/3}
  .rel{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:560px){
  .caps{grid-template-columns:1fr}
  .rel-card{padding:var(--s5)}
  .cap-ico{width:48px;height:48px;font-size:22px}
}