/* =========================================================
   HOMEPAGE, second layout (Figma 1190:49)
   Loaded after styles.css and portfolio.css. Only the "Designing
   Experiences" cards and the "Our Portfolio" section differ.
   ========================================================= */

/* ---------- Designing Experiences: two columns, right one stepped down ---------- */
.wk2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(56 * var(--s));
  row-gap: calc(97 * var(--s));   /* a quarter of a frame's height between the rows */
  margin-top: calc(60 * var(--s));
  padding-bottom: calc(119 * var(--s));   /* room for the stepped right column */
}
.wk2-card {
  /* a framed square picture on the left, the text beside it on the right.
     Everything is a share of the card's width (cqw), so it scales as one. */
  --wk2-pad: 4.2cqw;           /* space between the frame and the picture */
  --wk2-fs: calc(5.4cqw * var(--wk2-k, 1));   /* text + client name (home2.js shares --wk2-k) */
  position: relative;
  /* (no will-change here: a separate layer would blur the 1-pixel frames) */
  container-type: inline-size;
  display: grid;
  /* (the card's own columns are in %, since its cqw units belong to its children) */
  grid-template-columns: 53% 1fr;
  grid-template-rows: 1fr auto auto;
  column-gap: 3.835%;   /* 35% less than before */
  min-width: 0;
}
.wk2-card--2, .wk2-card--4 { top: calc(119 * var(--s)); }
.wk2-card__media {
  grid-column: 1; grid-row: 1 / 4;
  position: relative;
  align-self: start;
  padding: var(--wk2-pad);   /* the same space on all four sides */
}
/* each picture is shown whole, at its own shape, centred in the frame */
.wk2-card__media img,
.wk2-card__media video { display: block; width: 100%; height: auto; }
.wk2-card__media video { aspect-ratio: 398 / 382; }
/* the data picture is see-through: it sits on a navy rectangle the same size
   as the video stills, so the page background never shows through it */
.wk2-card__media img { aspect-ratio: 398 / 382; object-fit: contain; background: #00001e; }
/* the frame: exactly one screen pixel thick on every screen (a hairline on
   sharp/retina screens), drawn at --dpr times the size and scaled back down
   (home2.js sets --dpr and keeps the frames on whole screen pixels) */
.wk2-card__media::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: calc(100% * var(--dpr, 1));
  height: calc(100% * var(--dpr, 1));
  box-sizing: border-box;
  border: 1px solid var(--frame);
  transform: scale(calc(1 / var(--dpr, 1)));
  transform-origin: 0 0;
  pointer-events: none;
}
/* the text block sits at the bottom: the client name's baseline area lines up
   with the bottom of the picture inside the frame */
.wk2-card__caption {
  grid-column: 2; grid-row: 2;
  margin: 0 0 .22em;
  font-size: var(--wk2-fs);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: wrap;
}
.wk2-card__client {
  grid-column: 2; grid-row: 3;
  margin: 0;               /* bottom of the text = bottom of the frame */
  font-size: var(--wk2-fs);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--frame);     /* same blue as the frame */
}
/* entrance: fade in and rise, one after another, once the visitor scrolls */
.js .wk2-card { opacity: 0; translate: 0 48px; transition: opacity 1.4s cubic-bezier(.4, 0, 0, 1), translate 1.4s cubic-bezier(.4, 0, 0, 1); }
.js .wk2-card.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .js .wk2-card { opacity: 1; translate: none; transition: none; } }

/* ---------- Our Portfolio: client list + square ---------- */
.plist-sec { padding: calc(147 * var(--s)) var(--gutter) calc(206 * var(--s)); }
.plist {
  --sq: calc(940 * var(--s));
  display: grid;
  grid-template-columns: 1fr var(--sq);
  grid-template-rows: auto auto;
  column-gap: calc(78 * var(--s));
  margin-top: calc(150 * var(--s));
}
.plist__stage, .psquare-pin { display: contents; }   /* desktop: rows and square sit straight in the grid */
.plist__rows {
  grid-column: 1; grid-row: 1;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.plist__rows li { min-height: 0; }
.plist__row {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-bottom: calc(20 * var(--s));
  --line: var(--frame);   /* same colour as the square's frame; darker blue when chosen */
}
.plist__logo {
  display: block;
  /* --lw: logo width in design px (set per logo); --lk shrinks them on small screens */
  width: calc(var(--lw) * var(--s) * var(--lk, 1) * .75);   /* logos 25% smaller */
  max-width: 100%;
  height: auto;
  transform-origin: 0 100%;
  transition: transform .3s cubic-bezier(.5, .3, .5, 1);
}
.plist__line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  transition: background-color .3s ease;
}
/* the arrowhead sits on the end of the line and slides in from it */
.plist__head {
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(16 * var(--s));
  min-width: 9px;
  height: auto;
  translate: 0 -50%;
  fill: var(--blue);
  opacity: 0;
  transform: translateX(-60%);
  transition: opacity .3s cubic-bezier(.5, .3, .5, 1), transform .3s cubic-bezier(.5, .3, .5, 1);
}
.plist__row.is-active { --line: var(--blue); }
.plist__row.is-active .plist__logo { transform: scale(1.08); }
.plist__row.is-active .plist__head { opacity: 1; transform: none; }

/* the square: flower by default, the project's card when one is chosen */
.psquare {
  grid-column: 2; grid-row: 1;
  position: relative;
  display: block;
  width: var(--sq);
  aspect-ratio: 1;
  border: 1px solid var(--frame);
  overflow: hidden;
  background: var(--mist);
  color: inherit;
}
.psquare__flower {
  position: absolute;
  inset: 2.1%;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: opacity .35s ease;
}
.psquare__flower .flower {
  position: absolute;
  width: 200%;   /* a little larger, so the artwork's edges never show in the corners as it turns */
  max-width: none;
  height: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.psquare__flower .flower__mark { position: relative; width: 6.6%; height: auto; }
.psquare .pcard {
  position: absolute;
  inset: -1px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.psquare .pcard.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.psquare.has-card .psquare__flower { opacity: 0; }
/* the card's corner triangles slide in, as on the portfolio page */
.psquare .pcard__photo::before,
.psquare .pcard__photo::after { opacity: 0; transition: opacity .3s cubic-bezier(.5, .3, .5, 1) .04s, transform .3s cubic-bezier(.5, .3, .5, 1) .04s; }
.psquare .pcard__photo::before { transform: translate(-19%, 19%); }
.psquare .pcard__photo::after  { transform: translate(19%, -19%); }
.psquare .pcard.is-active .pcard__photo::before,
.psquare .pcard.is-active .pcard__photo::after { opacity: 1; transform: none; }

/* "Check out our full portfolio": under the square, flush right */
.plist__cta {
  grid-column: 2; grid-row: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.15em;   /* space between the words and the arrow (your reference) */
  margin-top: calc(28 * var(--s));
  color: var(--blue);
  font-size: calc(59 * var(--s));
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.plist__cta-text { white-space: nowrap; text-align: left; }   /* box hugs the words, so the gap below is the real gap */
.plist__cta-arrow { width: calc(46 * var(--s)); min-width: 18px; height: auto; transition: transform .25s; }
.plist__cta:hover .plist__cta-arrow,
.plist__cta:focus-visible .plist__cta-arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .plist__logo, .plist__head, .psquare .pcard, .psquare__flower { transition: none; }
}

/* =========================================================
   TABLET + PHONE: one column. The square stays pinned under the nav
   while the client list scrolls up beneath it; whichever client passes
   just under the square is shown in it (home2.js).
   ========================================================= */
@media (max-width: 1099px) {
  .wk2-grid { column-gap: calc(28 * var(--s)); row-gap: calc(48 * var(--s)); padding-bottom: calc(60 * var(--s)); margin-top: calc(40 * var(--s)); }
  .wk2-card--2, .wk2-card--4 { top: calc(60 * var(--s)); }
}
/* side by side (as on desktop) on every screen 600px and up, tablets included;
   the pinned, scroll-driven version is for phones */
@media (min-width: 600px) and (max-width: 1099px) {
  .plist-sec { padding: calc(70 * var(--s)) var(--gutter) calc(80 * var(--s)); }
  /* the desktop layout, scaled down as one piece: --u is one desktop pixel,
     so every logo, line, gap and the square keep their desktop proportions */
  .plist {
    --u: calc((100vw - 2 * var(--gutter)) / 1520);
    --sq: calc(940 * var(--u));
    column-gap: calc(78 * var(--u));
    margin-top: calc(60 * var(--s));
  }
  .plist__logo { width: calc(var(--lw) * var(--u) * .75); }
  .plist__row { padding-bottom: calc(20 * var(--u)); }
  .plist__head { width: calc(16 * var(--u)); min-width: 0; }
  .plist__cta { margin-top: calc(28 * var(--u)); font-size: calc(59 * var(--u)); }
  .plist__cta-arrow { width: calc(46 * var(--u)); min-width: 0; }
}
@media (max-width: 599px) {

  .plist-sec { padding: calc(70 * var(--s)) var(--gutter) calc(80 * var(--s)); }
  .plist {
    --sq: 100%;   /* square spans the usual margins, centred */
    --lk: .8;
    grid-template-columns: 1fr;
    margin-top: calc(40 * var(--s));
  }
  /* the pinned band: as wide as the screen, in the page colour, so the
     client rows (logos, lines, arrowheads) slide away under it completely */
  .psquare-pin {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
    order: -1;
    margin: 0 calc(var(--gutter) * -1);
    padding: 16px var(--gutter) 12px;
    background: var(--mist);
  }
  .psquare {
    /* full width between the margins, but never so tall that fewer than two
       client rows show under it (phones on their side, short screens) */
    width: min(100%, calc(100svh - 16px - 250px));
  }
  .plist__rows {
    grid-column: 1; grid-row: 2;
    grid-template-rows: none;
    margin-top: calc(40 * var(--s));
  }
  .plist__row { height: auto; min-height: max(96px, calc(140 * var(--s))); }   /* tall rows: each client gets its moment in the square */
  /* the pinned square only stays pinned while the client list passes under
     it, then scrolls away, so everything after it (the link, the band) shows */
  /* the square stays pinned while every client scrolls up under it (and the
     flower returns), then lets go with the link sitting right under it */
  /* a little room after the last line, so it (and its arrowhead) slides fully
     under the square before the square lets go */
  .plist__stage { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; }
  .plist__stage::after { content: ''; flex: none; height: calc(max(9px, 16 * var(--s)) + 16px); }

  .plist__line { right: 30%; }
  /* logos keep the same size relative to their line as on desktop (line = 70% of the row here) */
  .plist__logo { width: calc(var(--lw) / 502 * 54.69%); }   /* 78% of the desktop proportion */
  .plist__row { padding-bottom: calc(20 / 502 * 70%); }   /* same gap above the line, relative to its length */
  /* the client list lines up under the square's left edge (and is as wide as it) */
  .plist__stage .plist__rows { width: min(100%, calc(100svh - 16px - 250px)); align-self: center; }   /* lines 70% long, arrowhead on their end */
  /* same size as "Find out more about what we do" */
  /* under the square, ending on its right edge (as on desktop) */
  .plist__cta { grid-column: 1; grid-row: 2; justify-self: center; justify-content: flex-end; width: min(100%, calc(100svh - 16px - 250px)); margin-top: 18px; font-size: max(21px, calc(30 * 100vw / 1000)); line-height: 1.18; }
  .plist__cta-arrow { width: .8em; min-width: 0; }
}
@media (max-width: 599px) {
  .wk2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .wk2-card--2, .wk2-card--4 { top: 0; }
  .wk2-grid { padding-bottom: 0; }
  /* phone: same size as the hero line "Unopen is a New York…" */
  .plist__row { min-height: 92px; }
  .plist { --lk: .92; }
  .plist__cta { font-size: 21.9px; }
}

/* the page below the cards is pulled up while they drift away (home2.js);
   stop the browser from "correcting" the scroll position when that happens */
html, body { overflow-anchor: none; }
/* same text-to-arrow spacing as "Connect with our team" (.72em); the arrow stays put, the words move to it */
.plist__cta { gap: .72em; }
/* pieces that fade in after their section title (home2.js) */
.js .rv-fade:not(.is-in) { opacity: 0; }
.js .rv-fade.is-in { animation: rv-in .9s cubic-bezier(.4, 0, 0, 1) backwards; }
@keyframes rv-in { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) { .js .rv-fade:not(.is-in) { opacity: 1; } .js .rv-fade.is-in { animation: none; } }