/* ==========================================================================
   Akademi Kinetiq — Home
   Figma frame "Html → Body" (10006:816)
   Section offsets below are the absolute Y positions from the mock, expressed
   as top margins so the vertical rhythm matches the design exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — node 10006:891
   The page entrance (nav drop, headline wipe, copy rise) is shared by all
   three pages and lives in layout.css.
   -------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min);
  /* Padding, not margin: the image runs full-bleed from y=0 and the
     translucent nav floats over it, as it does on the other two pages. */
  padding-top: var(--nav-h);
  overflow: hidden;
}

.home-hero__bg {
  position: absolute;
  inset: 0;
}

.home-hero__media {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  overflow: hidden;
}

/* The mock scaled this image to 521% of the frame — a 13x upscale of a 512px
   source, which is why the hero rendered soft. object-fit reproduces the
   framing without the upscale. */
.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Two layers: a left-to-right scrim so the now-centred copy keeps its contrast
   over the photo (the mock only darkened the bottom, which suited bottom-
   aligned text), plus the original bottom fade into the page background. */
.home-hero__gradient {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to right,
      #131313 0%,
      rgba(19, 19, 19, 0.4) 50%,
      rgba(19, 19, 19, 0) 100%
    ),
    linear-gradient(
      to top,
      #131313 0%,
      rgba(19, 19, 19, 0) 45%,
      rgba(19, 19, 19, 0) 100%
    );
}

.home-hero__content {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--container-max);
  padding: var(--hero-pad) var(--gutter);
}

.home-hero__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.2vw, 22.9px);
  width: 100%;
  max-width: 896px;
}

.home-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-off-white);
  width: 100%;
}

.home-hero__title-accent { color: var(--c-accent); }

.home-hero__lede {
  width: 100%;
  max-width: 672px;
  padding-bottom: 0.69px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--c-muted);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding-top: clamp(8px, 1.6vw, 17.11px);
}

.home-hero__btn--primary { padding: 16.5px 40px 17.09px; }
.home-hero__btn--ghost   { padding: 17px 41px; border-color: #ffffff; color: #ffffff; }

@media (min-width: 1200px) {
  .home-hero__lede { white-space: nowrap; }
}

@media (max-width: 599px) {
  .home-hero__actions { flex-direction: column; align-items: stretch; }
  .home-hero__btn--primary,
  .home-hero__btn--ghost { width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   Partnership — node 10006:818
   -------------------------------------------------------------------------- */

.home-partnership {
  background-color: #1c1b1b;
  border-bottom: 1px solid var(--c-line);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.home-partnership__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 48px);
}

/* The mock's supporting paragraph was dropped — the headline now carries the
   section on its own, opposite the RPO logo. */
.home-partnership__copy {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-partnership__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.home-partnership__title span { color: var(--c-line-bright); }

/* The mock has a white mix-blend-saturation layer over this group; it has no
   visible effect in the source render, so it is not reproduced. */
.home-partnership__marks {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 48px);
  opacity: 0.8;
}

/* The webp ships with its own navy plate baked in, so it sits as a block on
   the section rather than knocking out to the background. */
.home-partnership__logo {
  display: block;
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);
}

.home-partnership__logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   About — node 10006:910
   -------------------------------------------------------------------------- */

.home-about {
  background-color: var(--c-page);
  border-bottom: 1px solid var(--c-line);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.home-about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 48px);
}

.home-about__copy {
  grid-column: 1 / span 7;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 32px);
}

.home-about__eyebrow {
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-line-bright);
}

.home-about__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.home-about__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
  padding-top: 16px;
}

.home-about__columns p {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-muted);
}

@media (min-width: 1024px) {
  .home-about__columns p + p { padding-bottom: 24.5px; }
}

.home-about__figure {
  position: relative;
  grid-column: 8 / span 5;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-about__frame {
  width: 100%;
  border: 1px solid #444444;
  overflow: hidden;
}

.home-about__media {
  position: relative;
  width: 100%;
  height: clamp(320px, 45vw, 544.25px);
  overflow: hidden;
}

.home-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.home-about__badge {
  position: absolute;
  left: -32px;
  bottom: -32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(20px, 3vw, 32px);
  background-color: var(--c-accent);
}

.home-about__badge-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--c-accent-ink);
  white-space: nowrap;
}

.home-about__badge-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The Kinetiq Pathway (bento grid) — node 10006:838
   -------------------------------------------------------------------------- */

.home-pathway {
  margin-top: var(--space-section);
}

.home-pathway__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 80px);
}

.home-pathway__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.home-pathway__head-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.home-pathway__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.home-pathway__sub {
  max-width: 448px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-muted);
}

/* Outlined display type — transparent fill, 1px #444 stroke */
.outline-type {
  color: transparent;
  -webkit-text-stroke: 1px #444444;
}

.home-pathway__watermark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 28.8px;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

/* Three tracks, not four with one card spanning two.
   The card that is wide has to be able to CHANGE on hover, and a grid-column
   span is not an animatable property — grid-template-columns is. Expressed as
   tracks the proportions are identical to the old repeat(4) with a span-2
   card, but the wide slot can now travel. See the :has() block below. */
.home-pathway__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  width: 100%;
}

/* Every card carries the 9px frame and the 400px floor that used to belong to
   the wide card alone, because any of them can now be the wide one. The body's
   own padding brings the total inset back to the ~33px the narrow cards had.

   The floor matters more than it looks: it used to sit on --wide only, and the
   grid row stretched the others to match. With no card wide at rest there is
   nothing left to stretch against, and the row would collapse onto its copy. */
.pathway-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 400px;
  padding: 9px;
  background-color: var(--c-surface);
  border: 1px solid #444444;
}

.pathway-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: clamp(16px, 2.2vw, 24px);
}

.pathway-card__level {
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--c-line-bright);
}

.pathway-card__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-card);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.pathway-card__text {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-muted);
}

.pathway-card__media {
  position: relative;
  width: 100%;
  height: clamp(160px, 20vw, 192px);
  overflow: hidden;
}

/* Pinned to the foot of the box at its FINAL height rather than filling a box
   whose height is animating.

   With `height: 100%` the image re-crops on every frame of the open: it stays
   "cover" against a box that is growing, so the visible slice changes shape
   the whole way up. Fixed height means the picture is composed once and the
   growing box simply uncovers it from the bottom edge, which reads as a
   reveal rather than an unfolding.

   Chosen for how it looks, not for speed — measured, it makes no difference
   to layout cost. */
.pathway-card__media img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(160px, 20vw, 192px);
  object-fit: cover;
  object-position: 50% 42%;
}

.pathway-card__icon {
  width: 100%;
  padding: 32px clamp(16px, 2.2vw, 24px) clamp(16px, 2.2vw, 24px);
}

/* Height drives the size; width follows the glyph. The export had
   `width: 100%` here, which stretched the icon to the card's full width.

   One height for all three rather than the per-icon values the export carried:
   the award mark is 24x31.5 against the other two at 27x27, so sized natively
   it stands a fifth taller than its neighbours. Height is what the eye
   compares, so that is what is matched — matching widths instead would leave
   the tall narrow glyphs looking bigger. */
.pathway-card__icon img {
  display: block;
  height: 27px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Hover to open

   At rest all three cards are equal and closed: heading and icon, no photo,
   no paragraph. Hovering one widens it and opens its photo; the paragraph is
   handled by the shared block in base.css.

   Hover-only, so it is confined to the range that has a pointer and three
   side-by-side columns. Below 1024px the grid reflows to 2 then 1 column and
   behaves as it always did.

   Every rule fires on `:hover` OR `.is-open`. The class is what nav.js leaves
   behind on the last card you pointed at, so it stays open after the pointer
   goes — CSS has no selector for "was hovered a moment ago". With scripting
   off the :hover half still works on its own; it just does not persist.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* The doubled selector is not redundant.

     This grid carries `rv rv--d2 seq` for the staggered reveal, and base.css
     sets `transition: none` on `.js-rv .rv.seq` — three classes, which outrank
     a bare `.home-pathway__grid` no matter which file loads last. Declared
     only as the short selector, this line is silently dropped and the columns
     SNAP from one width to the next with no easing at all. That is not
     hypothetical: it is what shipped, and what it looked like. */
  .home-pathway__grid,
  .js-rv .home-pathway__grid.rv.seq {
    transition: grid-template-columns 520ms var(--ease-wipe);
  }

  /* Scopes each card's internal layout so the paragraph re-wrapping at a new
     width cannot force the rest of the page to be re-laid-out to find out
     whether it moved.

     Kept as a safeguard rather than a fix: measured over six trials, layout
     during the transition is about 7ms either way, so this is not what makes
     the animation smooth and should not be credited with it. It costs nothing
     — these cards already clip via overflow: hidden and already form a
     stacking context via isolation: isolate, both set in base.css — and it
     keeps the cost bounded if the copy in a card ever grows. */
  .pathway-card { contain: layout paint; }

  .home-pathway__grid:has(.pathway-card--l1:hover) { grid-template-columns: 2fr 1fr 1fr; }
  .home-pathway__grid:has(.pathway-card--l2:hover) { grid-template-columns: 1fr 2fr 1fr; }
  .home-pathway__grid:has(.pathway-card--l3:hover) { grid-template-columns: 1fr 1fr 2fr; }

  /* After the :hover trio so the remembered card wins any overlap. */
  .home-pathway__grid:has(.pathway-card--l1.is-open) { grid-template-columns: 2fr 1fr 1fr; }
  .home-pathway__grid:has(.pathway-card--l2.is-open) { grid-template-columns: 1fr 2fr 1fr; }
  .home-pathway__grid:has(.pathway-card--l3.is-open) { grid-template-columns: 1fr 1fr 2fr; }

  /* The icon marks the closed state. Taken out of flow on purpose: in flow its
     height would be part of the same box the photo is trying to grow into, and
     the two would fight over the card's 400px. */
  .pathway-card__icon {
    position: absolute;
    left: clamp(16px, 2.2vw, 24px);
    bottom: clamp(16px, 2.2vw, 24px);
    width: auto;
    padding: 0;
    opacity: 1;
    /* Out fast, so the photo never arrives on top of a visible icon. */
    transition: opacity 200ms linear;
  }

  .pathway-card__media {
    height: 0;
    opacity: 0;
    transition: height 520ms var(--ease-wipe), opacity 300ms linear 120ms;
  }

  .pathway-card:hover .pathway-card__media,
  .pathway-card.is-open .pathway-card__media {
    height: clamp(160px, 20vw, 192px);
    opacity: 1;
  }

  .pathway-card:hover .pathway-card__icon,
  .pathway-card.is-open .pathway-card__icon { opacity: 0; }

  /* --- Rest state: Level 01 open ---------------------------------------------
     Before anything is touched the section shows a designed layout rather than
     three equal boxes with nothing in them. Level 01 is the natural choice: it
     is the entry point of the pathway and reads first anyway.

     The columns are set as the plain default, so this is the state the grid
     paints in — no transition on load, and no dependence on scripting. The
     :has() rules above are three classes deep and take over the moment a card
     is hovered or remembered.

     The photo and icon cannot be defaults in the same way: they are properties
     of a card, and card 01 has to give them up when another card opens. Hence
     the guard, which is live only until the first card is touched. It is
     spelled out per property rather than shared, because the two grids sit in
     different files and a shared block would have to live in base.css and name
     internals of both. */
  .home-pathway__grid { grid-template-columns: 2fr 1fr 1fr; }

  .home-pathway__grid:not(:has(.pathway-card:hover)):not(:has(.pathway-card.is-open)) .pathway-card--l1 .pathway-card__media {
    height: clamp(160px, 20vw, 192px);
    opacity: 1;
  }

  .home-pathway__grid:not(:has(.pathway-card:hover)):not(:has(.pathway-card.is-open)) .pathway-card--l1 .pathway-card__icon {
    opacity: 0;
  }
}

/* Below 1024px there is no hover, so nothing opens and nothing closes: every
   card simply shows its photo, the way Level 01 always did. The paragraph is
   permanently visible too — the collapse in base.css is inside the same
   min-width query as the hover. So the small-screen card is the desktop card
   in its open state, minus the widening. */

.pathway-cta {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 40px);
  min-height: 254.8px;
  padding: clamp(28px, 4.5vw, 49px);
  border: 1px solid var(--c-line-bright);
}

.pathway-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 672px;
}

.pathway-cta__eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--c-line-bright);
}

.pathway-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.pathway-cta__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-muted);
}

.pathway-cta__btn { padding: 20px 48px; }

/* --------------------------------------------------------------------------
   Footer offset on this page
   -------------------------------------------------------------------------- */

.home-footer { margin-top: var(--space-section); }

/* ==========================================================================
   Home — responsive re-flow
   ========================================================================== */

/* ---- Tablet: the 12-column split and the 4-up bento stop holding ---- */
@media (max-width: 1023px) {
  .home-about__grid { display: block; }

  .home-about__copy,
  .home-about__figure { width: 100%; }

  .home-about__figure { margin-top: clamp(56px, 8vw, 72px); }

  /* Bento: 3 → 2 columns. Level 01 keeps its image across both. */
  .home-pathway__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pathway-card--l1 { grid-column: 1 / span 2; grid-row: auto; }
  .pathway-cta      { grid-column: 1 / span 2; grid-row: auto; }
}

/* ---- Phone: everything to a single column ---- */
@media (max-width: 599px) {
  /* Both blocks below flip to a column here, and flex-basis follows the main
     axis: the 380px and 240px bases that size the columns side by side become
     minimum HEIGHTS once stacked, padding each block out with dead space. The
     basis has to go back to content-driven; the grow/shrink values are moot in
     an auto-height column. */

  .home-partnership__inner { flex-direction: column; align-items: flex-start; }
  .home-partnership__marks { justify-content: flex-start; width: 100%; }
  .home-partnership__copy  { flex: 1 1 0; }

  .home-about__columns { flex-direction: column; gap: 20px; }
  .home-about__columns p { flex: 1 1 0; }

  /* A -32px overhang clips off-screen against a 20px gutter. */
  .home-about__badge {
    position: static;
    align-self: flex-start;
    margin-top: -1px;   /* sit flush against the frame's bottom rule */
  }

  .home-pathway__grid { grid-template-columns: minmax(0, 1fr); }

  .pathway-card--l1,
  .pathway-cta { grid-column: 1; }

  .pathway-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .pathway-cta__btn { width: 100%; padding-left: 16px; padding-right: 16px; }

  /* The 400px floor goes. Every card is over 400px on its own here — copy,
     icon and a 160px photo stacked in one column — so the floor can only add
     empty space to whichever card has the shortest paragraph. Height comes
     from content at this width. */
  .pathway-card { min-height: 0; }
}