/* PAAK What We Do — Huge Inc's capabilities run, copied.

   Measured off beta.hugeinc.com at 1512x900 with a slide at rest, then written
   as ratios of the content width so it holds at every desktop size:

     gutter                40px          -> 2.65vw, capped 44
     title top             y = 180       -> 20vh
     title                 112 / 112, weight 400, tracking -0.03em, ONE line
     title -> plate        64px
     plate                 x 40, w 616 = 44% of the 1399 content width, 16:9
     copy column           x 751 = 50.82% across, w 545 = 38.96%
     copy top              plate top + 24
     statement             40 / 40, tracking -0.03em
     statement -> button   23px, button 64 tall, label 20

   Theirs is black-on-white; this is the site's black chapter, so the two brand
   colours are flipped locally and everything inherits. Their grey "01"..."06"
   superscript is dropped. */

.content-effect._03.paak-capabilities {
  position: relative;
  /* 13, not 6: this chapter has to sit ABOVE the work section that follows (z 12), because
     it LIFTS off it — the chapter travels up as a solid page and the work section is
     revealed under its bottom edge, the same handover the Meet PAAK panel makes onto the
     film. Still below nothing it overlaps: the film before it is z 1 and stays underneath. */
  z-index: 13;
  margin-top: -30vh;
  overflow: clip;
  background: var(--colors--second-color);
  /* black chapter: the film fades to black, this panel rises out of that same
     black. Local var flip so every child that reads the two brand colours
     inverts with it. */
  --colors--second-color: #000;
  --colors--first-color: #fff;
}

/* margin stays 0 — the reveal is done with a transform in paak-wwd-lift (index.html), because
   a negative margin alone moves BOTH sections at the same speed and nothing is revealed. */
.content-effect._01 { margin-top: 0 !important; }

/* ---------- shell ---------- */

.pk-wwd {
  /* --------- the big-screen unit ---------
     Everything below was measured at the 1512x900 laptop and written as px caps.
     Above that width the caps froze while the columns kept widening, so on a
     large display the type read small, the copy rewrapped and the frame emptied
     out. --pk-u is one design pixel: 1px at the reference, and larger in step
     with the screen after it, bounded by BOTH axes so a wide-short monitor
     scales up without pushing the card off the bottom. It never goes below 1px —
     under 1512 the existing vw clamps still do the shrinking.
     Multiply any measured value by it: calc(96 * var(--pk-u)). */
  --pk-u: max(1px, min(100vw / 1512, 100vh / 900));

  --pk-wwd-gutter: clamp(20px, 2.65vw, calc(44 * var(--pk-u)));
  /* the content box: the laptop's 1432px slide, scaled — never wider than the
     screen allows. Capping it is what keeps the column ratios true, because they
     are percentages of this box, not of the viewport. */
  --pk-wwd-slide: min(calc(100vw - var(--pk-wwd-gutter) * 2), calc(1432 * var(--pk-u)));
  /* whatever is left over becomes side margin, so the chapter centres on a big
     screen the way every other section on the page does */
  --pk-wwd-pad: max(var(--pk-wwd-gutter), calc((100vw - var(--pk-wwd-slide)) / 2));
  /* must be >= the side margin, or the card either side of the one at rest pokes
     into that margin. At laptop the margin IS the gutter, so this is unchanged. */
  --pk-wwd-gap: var(--pk-wwd-pad);
  /* the three column ratios, straight off their grid */
  --pk-wwd-plate: 44%;
  --pk-wwd-copy: 38.96%;
  --pk-wwd-colgap: 6.82%;
}

.pk-wwd.section.dark {
  min-height: 100vh;
  padding: 0;
  background: var(--colors--second-color);
  color: var(--colors--first-color);
  overflow: hidden;
}

.pk-wwd > .container {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding: 0;
  position: relative;
}

/* ---------- intro ---------- */

/* The intro is slide zero. It sits on the SAME grid as a card — heading where
   every card title will land, lede where every card statement will land — so
   when it lifts away the first title arrives in the space the words just left,
   instead of the two blocks living in different places. */

.pk-wwd__intro {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  padding: clamp(96px, 20vh, calc(200 * var(--pk-u))) var(--pk-wwd-pad) 0;
  display: grid;
  grid-template-columns: var(--pk-wwd-plate) minmax(0, var(--pk-wwd-copy));
  grid-template-rows: auto auto;
  column-gap: var(--pk-wwd-colgap);
  row-gap: clamp(36px, 4.24vw, calc(64 * var(--pk-u)));
  justify-content: start;
  align-items: start;
  pointer-events: none;
}

/* The intro sits absolutely on top of card one, and only the scroll timeline
   takes it away. If that timeline never runs — a stalled asset, a window widened
   past 991 after load — it prints over the first card's title and copy. Park it
   invisible on desktop; motion.js turns it on the moment it owns the section, so
   no working JS means a clean card instead of two headings on one line. */
@media (min-width: 992px) {
  .pk-wwd__intro { opacity: 0; }
}

.pk-wwd__eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  /* the card title's exact size and tracking */
  font-size: clamp(34px, 6.35vw, calc(96 * var(--pk-u)));
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight--400);
  white-space: nowrap;
}

.pk-wwd__lede {
  grid-column: 2;
  grid-row: 2;
  /* the card statement's exact size and its 24px drop below the row */
  margin: calc(24 * var(--pk-u)) 0 0;
  font-size: clamp(20px, 2.65vw, calc(40 * var(--pk-u)));
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight--400);
}

/* The kiwi trail: four prints walking off toward the right edge — the side the
   cards enter from. Lives inside the intro so it lifts away with the words.
   Placed under the lede (top: 100% of the intro's content box), running to the
   section edge. Step placement is in each group's transform ATTRIBUTE, so no
   CSS transform rules here — they would wipe it. */

.pk-wwd__steps {
  position: absolute;
  top: 100%;
  right: 0;
  width: clamp(240px, 27vw, calc(410 * var(--pk-u)));
  height: auto;
  margin-top: clamp(24px, 3.5vh, calc(48 * var(--pk-u)));
  color: var(--colors--first-color);
  overflow: visible;
}

/* ---------- horizontal viewport ---------- */

.pk-wwd__viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.pk-wwd__track {
  display: flex;
  align-items: stretch;
  gap: var(--pk-wwd-gap);
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0 var(--pk-wwd-pad);
  list-style: none;
  will-change: transform;
}

/* ---------- slide: title full width, plate left, copy right ---------- */

.pk-wwd__slide {
  flex: 0 0 var(--pk-wwd-slide);
  height: 100%;
  /* the base sheet dims every li to .7 — these are panels, not list items */
  opacity: 1;
  display: grid;
  grid-template-columns: var(--pk-wwd-plate) minmax(0, var(--pk-wwd-copy));
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--pk-wwd-colgap);
  row-gap: clamp(36px, 4.24vw, calc(64 * var(--pk-u)));
  align-content: start;
  justify-content: start;
  padding-top: clamp(96px, 20vh, calc(200 * var(--pk-u)));
  padding-bottom: clamp(40px, 8vh, calc(96 * var(--pk-u)));
}

.pk-wwd__cardtitle {
  grid-column: 1 / -1;
  margin: 0;
  /* one line at every desktop width — 6.35vw is the size at which the longest
     of the four titles still fits the content width without wrapping */
  font-size: clamp(34px, 6.35vw, calc(96 * var(--pk-u)));
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight--400);
  white-space: nowrap;
}

.pk-wwd__shot {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  overflow: hidden;
  /* same corner as the Works cards (.photo-work-1/2/3) — one radius across
     every image plate on the page */
  border-radius: calc(20 * var(--pk-u));
  background: rgba(255, 255, 255, 0.06);
  aspect-ratio: 16 / 9;
  width: 100%;
}

.pk-wwd__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.pk-wwd__copy {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  /* theirs starts 24px below the top of the plate, not level with it */
  margin-top: calc(24 * var(--pk-u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pk-wwd__desc {
  /* theirs is 23px; TJ wanted the button to breathe, so this is roughly double */
  margin: 0 0 clamp(28px, 3.2vw, calc(48 * var(--pk-u)));
  font-size: clamp(20px, 2.65vw, calc(40 * var(--pk-u)));
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight--400);
}

.pk-wwd__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  min-height: calc(64 * var(--pk-u));
  padding: 0 clamp(20px, 1.85vw, calc(28 * var(--pk-u)));
  background: var(--colors--first-color);
  color: var(--colors--second-color);
  font-size: clamp(16px, 1.32vw, calc(20 * var(--pk-u)));
  font-weight: var(--font-weight--500);
  letter-spacing: -0.03em;
  text-decoration: none;
  border-radius: var(--radius-4);
  transition: background 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pk-wwd__cta:hover,
.pk-wwd__cta:focus-visible {
  background: transparent;
  color: var(--colors--first-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.pk-wwd__arrow {
  width: calc(15 * var(--pk-u));
  height: calc(15 * var(--pk-u));
  flex: 0 0 auto;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pk-wwd__cta:hover .pk-wwd__arrow,
.pk-wwd__cta:focus-visible .pk-wwd__arrow { transform: translate(2px, -2px); }

/* ---------- tablet / mobile: no pin, stacked, same order as theirs ---------- */

/* Also the reduced-motion layout at any width: nothing travels then, so the
   horizontal track and the intro parked over card one have to become a stack. */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
  .content-effect._03.paak-capabilities { margin-top: -22svh; }

  .pk-wwd.section.dark { min-height: auto; }

  .pk-wwd > .container {
    min-height: auto;
    padding: 110px var(--pk-wwd-gutter) 88px;
  }

  .pk-wwd__intro {
    position: static;
    padding: 0;
    margin-bottom: clamp(56px, 9vh, 96px);
    grid-template-columns: 1fr;
    gap: 20px;
    pointer-events: auto;
  }

  .pk-wwd__eyebrow {
    max-width: none;
    white-space: normal;
    font-size: clamp(30px, 7.4vw, 56px);
  }

  .pk-wwd__lede {
    grid-column: 1;
    grid-row: auto;
    max-width: 34ch;
    margin: 20px 0 0;
    font-size: clamp(19px, 4.4vw, 30px);
    line-height: 1.1;
  }

  /* stacked layout: cards come from below, not the right — the trail's cue is wrong here */
  .pk-wwd__steps { display: none; }

  .pk-wwd__viewport { position: static; overflow: visible; }

  .pk-wwd__track {
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: clamp(72px, 11vh, 120px);
    padding: 0;
  }

  .pk-wwd__slide {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    padding: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }

  /* theirs stacks title -> plate -> words, and lets the title wrap */
  .pk-wwd__cardtitle {
    white-space: normal;
    font-size: clamp(30px, 7.4vw, 56px);
  }

  /* the Works cards drop to --radius-5 under 991 too */
  .pk-wwd__shot { grid-column: 1; grid-row: 2; margin-top: 28px; border-radius: var(--radius-5); }

  .pk-wwd__copy { grid-column: 1; grid-row: 3; margin-top: 28px; }

  .pk-wwd__desc { font-size: clamp(20px, 4.6vw, 32px); line-height: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-wwd__intro { opacity: 1 !important; transform: none !important; }
  .pk-wwd__track { transform: none !important; }
  .pk-wwd__cardtitle,
  .pk-wwd__copy,
  .pk-wwd__shot { opacity: 1 !important; transform: none !important; }
}