/* ============================================================
   PRIME ACADEMY GROUP — v6.1.2
   home.css — the homepage ONLY, built on system.css + shared.css.

   Load order: fonts.css → system.css → shared.css → home.css

   The nav, the dark panel, the six tiles, the closing pair and the footer
   moved to shared.css when the About page needed them. What is left here is
   what no other page has:

     1 hero ......... the film, the scrim, the headline set on it
     2 options ...... three photographed cards
     3 timeline ..... the pinned six-step flow (inside shared.css's .deep)
     4 difference ... two equal columns of iconed rows

   Icons are Phosphor regular, one family at one weight, vendored in
   assets/icons and inlined as a sprite. Nothing here is hand drawn.
   ============================================================ */

/* ═══ 1 · HERO ═══
   The headline sits ON the photograph. Splitting them, as the first pass did,
   leaves a thin line of type above a picture and neither one carries the page. */
/* FIRST VIEW. The hero fills whatever is left of the screen under the nav, so
   the opening frame is exactly: nav, a gap, hero, a gap — and no sliver of the
   next section showing under it.

     16px  the page's own top gap
     88px  the nav
     24px  the gap under the hero

   svh, not vh: on a phone vh is measured against the tallest possible viewport,
   so with the browser bars showing the hero would overshoot the screen. The
   floor keeps it sensible on a short window. */
.hero{position:relative;max-width:var(--frame);margin:0 auto var(--s5);
  border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--lift);
  min-height:max(520px, calc(80svh - 128px));
  display:flex;align-items:flex-end;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
/* Anchored to the bottom of the frame and zoomed 12%.

   Sliding alone could not do this: the film is 16:9 and the hero is nearly the
   same shape, so there were only 42px of overflow to move within and the
   laptop stayed pinned to the bottom edge. The zoom buys the headroom; it
   costs about 115px off the sides, which are unlit desk. */
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;
  object-position:center 72%;display:block;
  transform:scale(1.12);transform-origin:center bottom}

/* Reduced motion: the film is stopped by the script and the poster shows in
   its place, so the hero still carries a picture rather than going flat. */
@media (prefers-reduced-motion:reduce){
  .hero-bg video{display:none}
  .hero-bg{background:url('../video/hero-poster.jpg') center 34%/cover no-repeat}
}
/* The v4.7 hero scrim, reproduced exactly: one vertical gradient, three stops,
   darkest at the top. No diagonal second layer — v4.7 had none. */
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(
    rgba(20, 33, 61, .93),
    rgb(12 18 33 / 85%) 60%,
    rgb(20 33 61 / 72%))}
.hero-in{position:relative;padding:var(--pad);padding-top:clamp(80px,14vw,150px);width:100%}
/* Montserrat, and the emphasis sits on the FIRST line: the hero names the
   product before it qualifies it, so "AI-Powered Online Training" is the
   heavier cut and the rest of the sentence runs light behind it. */
.hero h1{color:#fff;font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;
  font-size:clamp(2.1rem,4.5vw,3.65rem);line-height:1.25;
  max-width:980px;margin-bottom:var(--s5);text-wrap:balance}
.hero h1 b{font-weight:300;display:block;
  color:color-mix(in srgb, #fff 82%, var(--azure))}
.hero-lead{font-weight:300;font-size:var(--t-lead);line-height:var(--lh-lead);
  color:color-mix(in srgb, #fff 88%, var(--azure));max-width:75ch;margin-bottom:var(--s7)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ═══ 2 · THE FOUR OPTIONS ═══ */
.opts-head{max-width:940px;margin:0 auto var(--s7);text-align:center}
.opts-head h2{margin-bottom:var(--s4)}
.opts-head .lead{margin:0 auto;max-width:76ch}

/* THREE ACROSS, not two-by-two. Three cards in a two-column grid leaves an
   orphan on its own row; on one row they read as three equal choices, which is
   what they are. Each is narrower than it was at two-up, so the picture is
   deepened to 4:3 and the type steps up — the client asked for fewer options
   carrying more weight, not for the same cards made smaller. */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.opt{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
.opt:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:transparent}
.opt-fig{position:relative;aspect-ratio:4/2;overflow:hidden;background:var(--wash)}
.opt-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  /* Held back at rest so four different photographs read as one owned set,
     released to full colour on hover. */
  filter:saturate(.9) contrast(1.02);
  /* On the page's own hover speed. At 420ms and 620ms the card, the chip and
     the link had all finished and settled while the photograph was still
     moving, which read as two different hovers on one card. */
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
.opt:hover .opt-fig img{filter:none;transform:scale(1.035)}
/* Halved. Between a 74% saturation knock-down and a blue wash over the top,
   the photographs were reading grey — the treatment was doing more work than
   the pictures. Enough is left to tie the three together. */
.opt-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. It is the join between picture and card. */
.opt-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)}
/* Bright Blue on hover, the same step the card's link makes, so the chip and
   the link answer the hover as one. */
.opt:hover .opt-ico{background:var(--azure)}
/* 52px, not 64. The chip hangs 28px into the body, so the top padding is what
   sets the gap under it — at 64 that was 36px, wider than anything else inside
   the card. */
.opt-body{position:relative;padding:52px var(--s6) var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);flex:1}
/* No size of its own. Dropping the override puts these on the shared h3 step,
   which is the same size the two difference cards' titles carry. */
.opt-body p{font-size:var(--t-text);line-height:var(--lh-text);flex:1;max-width:none}


/* ── THE FIVE STEPS, as a pinned timeline ──
   The wrapper is three screens tall and the stage inside it sticks, so the
   section holds still while those three screens of scroll are spent. A single
   custom property, --p, runs 0 → 1 across that travel; the filled axis is
   drawn from it and each stop lights when the line reaches it.

   --p is 1 in the stylesheet, so with no scripting the timeline is simply
   complete and readable. The script sets 0 and takes over. */
/* The wrapper is only a scroll runway — it draws nothing. Its extra height is
   what the visitor spends while the panel, stuck to the top of the window,
   plays the line. The panel keeps its own natural height, so the section looks
   exactly as it did before; the only difference is that the page waits. */
.tlwrap{position:relative;height:calc(100vh + 150vh)}
.tlstage{position:sticky;top:var(--s4)}
/* 64px of daylight above the row, to match the 64px below it. The extra 2px
   is the lead's own line box: measured edge to edge, 66px here and 64px under
   the labels land on the same visible gap. */
.tlstage .head{margin-bottom:calc(var(--s8) + 2px)}

.tl{--p:1;position:relative;display:grid;grid-template-columns:repeat(6,1fr);
  list-style:none;margin:0 0 var(--s8);padding:0}
/* The axis runs node-centre to node-centre. Across six columns the first and
   last centres sit at 1/12 and 11/12, so the line spans 8.333% to 91.667% and
   starts and finishes ON a stop rather than trailing into the gutter.
   top:27px is the badge's own middle: the chip is 56px and starts at the top
   of the stop, so its centre is 28 and the 2px line sits one pixel above it. */
.tl::before,.tl::after{content:'';position:absolute;top:27px;height:2px;border-radius:1px}
.tl::before{left:8.3333%;right:8.3333%;background:color-mix(in srgb, #fff 18%, transparent)}
.tl::after{left:8.3333%;width:calc(83.3334% * var(--p));
  background:color-mix(in srgb, var(--azure) 80%, #fff)}

/* No side padding, so a stop is exactly one sixth of the row: the badge stays
   on the line's endpoints and the card fills its column. */
.tlstop{position:relative;text-align:center;padding:0}
/* Square on the card radius, the same chip the option cards use. */
.tlstop__badge{position:relative;z-index:1;
  width:56px;height:56px;border-radius:var(--r-card);margin:0 auto;
  display:flex;align-items:center;justify-content:center;font-size:25px;
  background:color-mix(in srgb, var(--deep) 76%, var(--navy));
  border:1px solid color-mix(in srgb, var(--azure) 44%, transparent);
  color:color-mix(in srgb, var(--azure) 45%, #fff);
  transition:background var(--fast) var(--ease),
             border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.tlstop.on .tlstop__badge{background:var(--deep);
  border-color:color-mix(in srgb, var(--azure) 90%, transparent);
  transform:scale(1.06)}
/* The last step is the finish, so it lands in Bright Blue rather than the Deep
   Blue the other five share — the line arrives somewhere different from where
   it has been. Square and title together, or a blue chip under a navy word
   reads as two unrelated things. */
.tlstop:last-child.on .tlstop__badge{background:var(--azure);
  border-color:var(--azure);color:#fff}
.tlstop:last-child.on .tlpop b{color:var(--azure)}
/* And its line of text steps up out of the muted grey the other five sit in,
   so the finish reads as the finish rather than as a sixth of the same. */
.tlstop:last-child.on .tlpop > span{color:color-mix(in srgb, #fff 92%, var(--azure))}

/* The words arrive with the stop, not before it. In flow rather than
   positioned, so the row reserves its height from the start and nothing below
   shifts as five of these appear. */
/* NO BOX. The six capability tiles sit directly below this row, and boxing the
   steps as well turned the panel into a wall of cards — the timeline stopped
   reading as a line of stops. Without a box the node is the object and the
   words are its label, and the label can share the badge's centring instead of
   sitting left-aligned inside a box under a centred chip. */
.tlpop{margin:var(--s5) auto 0;max-width:19ch;text-align:center;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--arrive) var(--ease),transform var(--arrive) var(--ease)}
.tlstop.on .tlpop{opacity:1;transform:none}
.tlpop b{display:block;font-family:var(--font-display);font-weight:500;
  font-size:1rem;line-height:1.3;letter-spacing:-.005em;margin-bottom:6px}

/* Direct child only. As `.tlpop span` this also caught the number inside the
   title and made it a block, so it dropped onto its own line above the word
   instead of sitting in front of it. */
.tlpop > span{display:block;font-size:var(--t-small);line-height:var(--lh-small);
  color:color-mix(in srgb, #fff 64%, var(--navy))}


/* ═══ 4 · THE DIFFERENCE ═══ */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* Even on all four sides. It was 32 top, 24 sides, 24 bottom, which put a
   different amount of air on every edge of the same box. */
/* A hover, but a quiet one: the surface warms and the edge picks up a little
   blue, and that is all. No lift and no hand cursor, because unlike the option
   cards these are not links and there is nothing to click — the same move the
   six capability tiles make on the dark panel. */
.diff-side{border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--s6);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.diff-side:hover{background:var(--wash);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
/* Both cards identical. One white and one grey read as primary and secondary,
   which these two are not — a learner and an organisation are equal halves of
   the same answer. The tag tells them apart instead. */
/* No rule under the head, so one gap does the separating rather than the two
   that used to sit either side of the line. 48px became 24px. */
.diff-head{margin-bottom:var(--s5)}
/* The card's own title, on the h3 step. It was 17px against 16px row titles,
   which is not a step at all — the two read as the same rank. */
.diff-head b{display:block;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.15rem,1.5vw,1.375rem);line-height:1.3;
  letter-spacing:-.01em;color:var(--ink)}
/* No hairlines between rows either. The icon column and the space between
   rows already mark where one ends and the next begins. The first and last
   rows drop their outer padding, so the card's own padding is the only thing
   holding the stack off the top and bottom edges. */
.diff-row{display:grid;grid-template-columns:40px minmax(0,1fr);
  column-gap:var(--s4);padding:var(--s5) 0}
/* In a chip, like the option cards and the timeline. A bare 22px line drawing
   on a white field read as decoration; in a square it reads as the row's
   marker, and the section stops being the one place with unhoused icons. */
.diff-chip{width:40px;height:40px;border-radius:var(--r-chip);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:color-mix(in srgb, var(--deep) 11%, var(--white));color:var(--deep);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.diff-side:hover .diff-chip{background:var(--deep);color:#fff}
.diff-row:first-of-type{padding-top:0}
.diff-row:last-of-type{padding-bottom:0}
.diff-chip > .ico{font-size:22px}
/* Same type as the six capability tiles: 1rem title, 6px under it, .875rem
   text at 1.55. The two sets are the same kind of thing — an iconed heading
   with a line under it — so they are set identically and nothing here is
   chosen independently. */
.diff-row h4{font-family:var(--font-display);font-weight:500;font-size:1rem;
  line-height:1.3;margin-bottom:6px;color:var(--ink)}
/* No 42ch cap. In this card that measure stopped the text 148px short of the
   right edge and left a dead strip down one side; the card's own width is
   already a comfortable line length. */
.diff-row p{font-size:var(--t-small);line-height:var(--lh-small);margin:0;max-width:none}


@media (max-width:1080px){
  /* No zoom. The 12% was bought to lift the laptop in a wide frame; in a
     narrow one the crop is already severe and the zoom leaves a meaningless
     slab of the screen — 471px of a 1920px-wide film on a phone. */
  .hero-bg video{transform:none;object-position:center 45%}
  /* Two across, and the third takes the full width beneath them rather than
     sitting half-empty next to a gap. */
  .opts{grid-template-columns:repeat(2,1fr)}
  .opt:last-child{grid-column:1/-1}
  .opt:last-child .opt-fig{aspect-ratio:21/9}
}
/* THE HOLD IS DESKTOP-ONLY, on three counts, and all three have to be true.

     wide enough    — under 1081px the row stacks and there is nothing to draw
     a real pointer — taking over the scroll under somebody's thumb is a
                      different thing entirely from doing it under a wheel.
                      This is what keeps every iPad out of it.

   Height is deliberately NOT a condition. On a 768px-high laptop the panel is
   taller than the window, but the panel sticks by its TOP, so what falls off
   is the tiles at the bottom — and the hold is what guarantees the visitor
   sees the whole line before the page moves on. The tiles arrive a moment
   later when the hold releases and the page scrolls normally again.

   Everywhere else the timeline is simply shown, complete. */
@media not all and (min-width:1081px) and (hover:hover) and (pointer:fine){
  .tlwrap{height:auto}
  .tlstage{position:static}
}
@media (max-width:880px){
  .opts,.diff{grid-template-columns:1fr}
  .opt:last-child{grid-column:auto}
  .opt:last-child .opt-fig{aspect-ratio:4/3}
  /* The axis turns vertical rather than losing steps: the sequence is the
     content, so it is re-laid, not reflowed away. */
  .tl{grid-template-columns:1fr;gap:var(--s5)}
  .tl::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .tl::after{left:27px;top:28px;width:2px;height:calc((100% - 56px) * var(--p))}
  .tlstop__n{grid-column:2;margin-bottom:4px;text-align:left}
  .tlstop{display:grid;grid-template-columns:56px minmax(0,1fr);
    column-gap:var(--s5);align-items:start;text-align:left;padding:0}
  .tlstop__badge{grid-row:1/3;grid-column:1;margin:0}
  /* Stacked, the label sits beside its badge, so it goes back to ranging left
     and takes whatever width the row gives it. */
  .tlpop{grid-column:2;margin:var(--s2) 0 0;max-width:none;text-align:left}
  /* Not full height here. At 350x716 the frame is half as wide as it is tall,
     and a widescreen film cropped into that shows almost nothing. A shorter
     hero is a less extreme shape, so more of the picture survives. */
  .hero{min-height:max(420px, 60svh)}
}
@media (max-width:560px){
  .opt-ico{width:48px;height:48px;font-size:22px}
}