/* ============================================================
   PRIME ACADEMY GROUP · primeacg.com — v4
   about.css — about page styles
   Lifted verbatim out of the single-file pages in www/website/.
   ============================================================ */
/* ============================================================
   ABOUT (v4) — page-scoped section styles, A1-A5.
   The shared v4 spine — tokens, primitives, nav, footer and the
   reveal scaffold — is base.css + components.css, both loaded
   ahead of this file. Nothing here adds to the spine or
   redefines a token - each rule is scoped to one .s-* section.
   ============================================================ */

/* Heading emphasis. Colour carries it, the weight stays at the
   display 600 so the line keeps one texture. Azure on navy, deep
   on light; on --deep blue neither reads, so A5 inverts instead
   (muted line, white emphasis) - see the A5 block. */
/* Two-colour headings are global now - see base.css. */

/* ---------- A1 · MASTHEAD ---------- */
/* Not its own component. The section reuses Home's .s-who block -
   plate, scrim, two columns - so following "More about us" from
   there lands on a continuation of that section rather than on a
   new shape. .s-mast adds only what a page hero needs on top of
   it: clearance for the nav island, which goes transparent below
   920px, and the same gradient edge the footer carries. */
.s-mast{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:74vh;
  padding-block:clamp(148px,17vw,210px) clamp(64px,8vw,98px);
}
/* Deeper than Home's scrim: this one carries an h1 and two buttons,
   and the plate has a bright wall down its right-hand third. */
.s-mast .s-who__scrim{
  background:
    linear-gradient(180deg,rgba(20,33,61,.93),rgba(20,33,61,.78)),
    radial-gradient(94% 74% at 88% -8%,rgba(33,150,243,.15),transparent 60%);
}
.s-mast .parallax-inner > img{ object-position:center 44%; }
.s-mast h1{ color:#fff; max-width:14ch; text-wrap:balance; }
.s-mast__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.s-mast__rule{  /* same 2px gradient edge the footer carries */
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:var(--prime-gradient);
}

@media (max-width:900px){
  .s-mast{ min-height:auto; }
  .s-mast h1{ max-width:none; }
}

/* ---------- A2 · WHO WE ARE ---------- */
/* Photograph with caption left, prose right. Home introduces the
   division; this says where the training comes from. */
/* Centred, not start-aligned: the 3/4 plate outgrows the prose as the
   column widens, and centring splits that slack above and below the
   text instead of dumping it all under the last line. */
.s-story .grid--2{ grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:stretch; }
.s-story__figure{
  margin:0; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  /* matches the text block's height, then overhangs it by 25px top and bottom. */
  align-self:stretch; position:relative; margin-block:-25px; min-height:340px;
}
.s-story__figure img{
  /* absolutely positioned so the picture contributes no intrinsic height:
     the row is then set by the text beside it, and the photo fills whatever
     that comes to instead of dictating its own height from its shape. */
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur) var(--ease);
}
.s-story__figure:hover img{ transform:scale(1.04); }
.s-story__body p + p{ margin-top:0; }
.s-story__more{ margin-top:clamp(20px,2.8vw,28px); }

@media (max-width:900px){
  .s-story .grid--2{ grid-template-columns:1fr; }
  .s-story__figure{ max-width:420px; }
}

/* ---------- A3 · THE RELATIONSHIP ---------- */
/* Was a navy org chart wired together out of CSS hairlines. The
   structure is now carried by the artwork - one base, two branches,
   red on the training side - and the copy beside it reads as two
   jobs rather than a diagram to decode.
   White, not mist: the illustration paints its own --mist ground
   edge to edge, so on a mist band it would have no edge at all.
   Figure treatment is Home's 007-ways card - flat vector on a
   deep-blue plate that shows only while the SVG loads. */
.s-rel__lede{ max-width:62ch; margin:clamp(14px,1.8vw,18px) 0 0; }
.s-rel__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,58px); align-items:center;
}
/* Copy left, photograph right. Done with order rather than by moving the figure
   in the markup, so the source keeps the picture first and it still leads when
   the grid drops to one column below 901px. */
@media (min-width:901px){ .s-rel__figure{ order:2; } }
/* 16/9, the site's shape for a photograph beside copy (.s-what .wwd-figure).
   It was 4/3 while this held a flat diagram, which made it taller than the two
   jobs next to it. The placeholder fill is flat, not the brand gradient: nothing
   of it is visible behind a photo that covers, and the gradient is gone
   elsewhere on the site. */
.s-rel__figure{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); background:#F1F2F6;
}
.s-rel__figure img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:transform var(--dur) var(--ease);
}
.s-rel__figure:hover img{ transform:scale(1.04); }
/* ---- one label style for the whole block ----
   There were four of these at four sizes (14.5 / 11 / 11 / 10px) and four
   trackings, which is what made the block read as a different site. They now
   ARE .eyebrow: 12px, .16em, weight 600, brand blue - the same label every
   other section on the site opens with. */
.s-rel__chip,
.rel-job__role,
.rel-job__flag{
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--deep);
}
.s-rel__chip{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:6px 9px; border-radius:var(--radius-sm);
  background:var(--glass-navy);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff;
}

/* The parent used to be named again here, above the two jobs. It repeated the
   lede, so it is gone and the lede carries "holds both arms of the business". */
.rel-jobs{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(24px,2.8vw,32px); }
/* A rule across the top, which is how every stepped list on the site marks its
   items (.t-run, .c-run). This used to be a bar down the left, the only one of
   its kind. The two arms still differ by colour so each picks up its own stem in
   the art, but both are blue now: red is the scarce accent in the tokens, and on
   one of two equal arms it read as a warning. */
/* No rule above each job. The eyebrow already opens it, same as the contact
   card's entries, and the gap between the two carries the separation. */
.rel-job{ position:relative; }
.rel-job__role{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; margin-bottom:9px;
}
/* The tag reads as the site's chip - solid brand fill, white, --radius-sm, same
   as .s-rel__chip beside it and .res-chip on Home. It used to be a red-then-blue
   outlined pill, which was a shape nothing else on the site uses. */
.rel-job__flag{
  padding:4px 8px 3px; border-radius:var(--radius-sm); border:0;
  background:var(--deep); color:#fff;
}
.rel-job h3{ margin:0; font-size:clamp(19px,1.5vw,22px); }
/* :not() so this never lands on .rel-job__role. It used to, and being both later
   and more specific it beat the label's own 11px - which is why that line was
   rendering at 14.5px with .16em tracking on top, louder than the title under it. */
.rel-job p:not(.rel-job__role){ margin:9px 0 0; font-size:14.5px; line-height:1.58; color:var(--slate); }
.rel-job__links{ display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:15px; }

@media (max-width:900px){
  .s-rel__grid{ grid-template-columns:1fr; }
  .s-rel__figure{ max-width:560px; }
}

/* ---------- A4 · PLATFORM CAPABILITIES ---------- */
/* The photograph used to fill the tile with the type sitting on it. That
   forced the overlay to .93 at the bottom to keep white copy legible, which
   left six pictures you could not actually see, and it was the only place on
   the site where copy sat on a photograph at all. Six stock images, a red rule
   on each, 5:4, and no border - none of it matched anything else here.
   It is the site's own card now, the same shape as .res-card on the home page:
   photograph on top, copy underneath on a flat panel. Freed of carrying text,
   the picture only needs the light tint every other photograph on the site
   wears, so it reads as a photograph again.
   The images are generated photography of the work the platform supports, NOT
   platform captures - the real screens sell each capability on Subscription
   Plans.
   Nothing is hidden until hover: .cap-tile is an <li> with no focusable child,
   so hover-revealed copy would be unreachable by keyboard. Hover only moves
   what is already visible. */
.caps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }

.cap-tile{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius); background:#F1F2F6;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cap-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(20,33,61,.45); }

/* 16:9, the site's shape for a photograph */
.cap-tile__fig{ position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; }
.cap-tile__fig img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur) var(--ease);
}
.cap-tile:hover .cap-tile__fig img{ transform:scale(1.04); }
/* the same tint .photo-tint puts on every other text-free photograph */
.cap-tile__fig::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,33,61,.14),rgba(13,71,161,.26));
}
/* geometry lifted from .s-news .res-chip so the two card families label the
   same way. One colour for all six: unlike the home page's three, these are
   six of the same kind of thing, not competing routes. */
.cap-tile__chip{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:6px 9px; gap:0; border:none; border-radius:var(--radius-sm);
  background:var(--glass-navy); color:var(--white);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}

.cap-tile__body{ display:flex; flex-direction:column; gap:8px; padding:clamp(18px,1.9vw,24px); }
.cap-tile__body h3{ margin:0; color:var(--ink); font-size:clamp(18px,1.35vw,20px); }
.cap-tile__body p{ margin:0; font-size:14px; line-height:1.58; color:var(--slate); }

@media (max-width:1080px){ .caps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .caps-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .cap-tile,.cap-tile__fig img{ transition:none; }
}