/* ==========================================================================
   pages/top.css — top page sections

   Mobile-first: every rule below describes the phone layout. The single
   `@media (width >= 768px)` block at the end of the file raises it to the
   desktop composition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FV
   The hero is a collage reproduced as a proportional canvas: every layer is
   placed in percentages of the frame and text is sized in container units, so
   the whole composition scales as one piece. --fv-u is one design pixel of
   that frame (390 on phones, 1440 on desktop). Rotated layers pivot on their
   top-left corner, matching how the artwork is transformed in the design file.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   ABOUT ZINO
   On phones this is a plain stack. From tablet up the lead sticks while the
   right column scrolls past it, as annotated in the design, and the three
   canvases below take on their scattered desktop layouts.
   -------------------------------------------------------------------------- */

.p-about {
  position: relative;
  padding-block: 6rem 10rem;
  overflow: hidden;
  background-color: var(--color-black);
  color: var(--color-text-inverse);
}

.p-about__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-about__bg img {
  width: 100%;
  object-fit: cover;
}

.p-about__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
}

.p-about__splat {
  position: absolute;
  bottom: -12rem;
  left: 70.5%;
  z-index: 1;
  width: 45.694%;
  opacity: 0.9;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.p-about__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: 2rem;
}

.p-about__title {
  margin-top: 1.3rem;
  font-size: 3.2rem;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  white-space: nowrap;
}

.p-about__body {
  margin-top: 2.7rem;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.8;
}

.p-about__photos {
  display: none;
  position: relative;
  width: 100%;
  margin-top: 4.8rem;
  aspect-ratio: 531 / 322;
}

.p-about__photos img {
  position: absolute;
  object-fit: cover;
}

.p-about__photo--1 {
  top: 26.4%;
  left: 0;
  width: 40.11%;
  height: 73.6%;
}

.p-about__photo--2 {
  top: 0;
  left: 48.78%;
  width: 51.22%;
  height: 63.35%;
}

.p-about__main {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
}

.p-about__block-title {
  margin-bottom: 1.5rem;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 3rem;
}

.p-about__block-lead {
  margin-bottom: 1.8rem;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

/* --u is one design pixel of the canvas (680 wide in the desktop artwork). */
.p-about__canvas {
  position: relative;
  container-type: inline-size;
  --u: 0.2941cqw;
}

/* Tag cloud — a plain wrapping row until there is room to scatter it. */

.p-about__tags {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  padding-top: 0.5rem;
}

.p-about__tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 0.8rem;
  justify-content: flex-start;
  margin-inline: auto;
  width: fit-content;
}

.p-about__tags > .p-about__tag-container:nth-child(2) {
  width: 100%;
  max-width: 467px;
  flex-wrap: nowrap;
}

.p-about__tags > .p-about__tag-container:last-child {
  width: 100%;
  max-width: 467px;
}

.p-about__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  border: 1px solid currentcolor;
  border-radius: var(--radius-pill);
  font-size: clamp(12px, 3.58vw, 16px);
  font-weight: var(--fw-semibold);
  height: 4.5rem;
  white-space: nowrap;
}

html.js [data-pop] .p-about__tag,
html.js [data-pop] .p-about__circle {
  opacity: 0;
  transform: scale(0.2);
}

html.js [data-pop].is-popped .p-about__tag,
html.js [data-pop].is-popped .p-about__circle {
  animation: about-pop 0.6s var(--ease-out) var(--pop-delay, 0ms) both;
}

@keyframes about-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-pop] .p-about__tag,
  html.js [data-pop] .p-about__circle {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.p-about__tag.is-row-start {
  margin-left: auto;
}

@media (width >= 440px) {
  .p-about__tag-container {
    gap: 1.5rem clamp(1rem, 3.125vw, 2rem);
  }
  .p-about__tags > .p-about__tag-container:nth-child(2) {
    justify-content: flex-end;
  }
  .p-about__tag {
    padding-inline: clamp(1.2rem, 2.73vw, 1.5rem);
  }
}

/* Career circles */

.p-about__circles {
  display: block;
  aspect-ratio: 350 / 628;
  margin-inline: auto;
}

.p-about__circles > * {
  position: absolute;
}

.p-about__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  width: 41.6vw;
  aspect-ratio: 1;
  padding: 1rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
  text-align: center;
}

.p-about__circle dt {
  color: var(--zino-orange);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.667;
  white-space: nowrap;
}

.p-about__circle dd {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.5;
  white-space: nowrap;
}

.p-about__circle:nth-child(1) {
  top: -22px;
  left: 53.309%;
}
.p-about__circle:nth-child(2) {
  top: 5.0796%;
  left: 0.5%;
}
.p-about__circle:nth-child(3) {
  top: 44.586%;
  left: 0.5%;
}
.p-about__circle:nth-child(4) {
  top: 25.653%;
  left: 43.394%;
}
.p-about__circle:nth-child(5) {
  top: 53.981%;
  left: 53.429%;
}
.p-about__circle:nth-child(6) {
  top: 74.045%;
  left: 10.286%;
}

@media (width >= 560px) {
  .p-about__circles {
    aspect-ratio: 680 / 642;
  }

  .p-about__circle {
    width: 32.353%;
    padding: calc(var(--u) * 16);
  }
  .p-about__circle:nth-child(1) {
    top: 0;
    left: 36.765%;
  }
  .p-about__circle:nth-child(2) {
    top: 11.371%;
    left: 0;
  }
  .p-about__circle:nth-child(3) {
    top: 25.389%;
    left: 67.647%;
  }
  .p-about__circle:nth-child(4) {
    top: 38.629%;
    left: 29.853%;
  }
  .p-about__circle:nth-child(5) {
    top: 62.305%;
    left: 0;
  }
  .p-about__circle:nth-child(6) {
    top: 65.732%;
    left: 57.059%;
  }
}

/* Growth chart — always a proportional canvas. */

.p-about__chart {
  max-width: 672px;
}

/*
 * CSSのみで作る折れ線グラフ
 *
 * データ:
 * 2020 :   0
 * 2021 :   5
 * 2022 :  20
 * 2023 :  40
 * 2024 :  67
 * 未来 : 190
 *
 * Y軸最大値: 200
 */

.line-chart {
  --line-color: var(--zino-orange);
  --fill-color: var(--zino-orange);
  --axis-color: rgba(255, 255, 255, 0.4);
  --text-color: #666;
  aspect-ratio: 350 / 187;
  width: 100%;
  height: 100%;
  padding-left: 6.5714%;
}

/*
 * 実際にグラフを描画するエリア
 */
.chart-area {
  position: relative;
  aspect-ratio: 323 / 169;
  width: 100%;
  height: auto;
  border-left: 1px solid var(--axis-color);
  border-bottom: 1px solid var(--axis-color);
}

.chart-content {
  --draw-pad: 10px;
  position: absolute;
  aspect-ratio: 313 / 147;
  width: 97%;
  height: auto;
  left: 3%;
  bottom: 0;
}

html.js [data-draw] .chart-content {
  clip-path: polygon(
    calc(-1 * var(--draw-pad)) calc(-1 * var(--draw-pad)),
    calc(-1 * var(--draw-pad)) calc(-1 * var(--draw-pad)),
    calc(-1 * var(--draw-pad)) calc(100% + var(--draw-pad)),
    calc(-1 * var(--draw-pad)) calc(100% + var(--draw-pad))
  );
}

html.js [data-draw].is-drawn .chart-content {
  clip-path: polygon(
    calc(-1 * var(--draw-pad)) calc(-1 * var(--draw-pad)),
    calc(100% + var(--draw-pad)) calc(-1 * var(--draw-pad)),
    calc(100% + var(--draw-pad)) calc(100% + var(--draw-pad)),
    calc(-1 * var(--draw-pad)) calc(100% + var(--draw-pad))
  );
  transition: clip-path 2s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-draw] .chart-content {
    clip-path: none;
    transition: none;
  }
}

/* ------------------------------
   Y軸
------------------------------ */

.y-label {
  position: absolute;
  left: -45px;
  width: 35px;
  font-size: clamp(10px, 2.564vw, 13px);
  line-height: 1.5;
  color: var(--text-color);
  text-align: right;
  transform: translateY(50%);
}
.y-0 {
  bottom: 0;
}
.y-100 {
  bottom: 44%;
}
.y-200 {
  bottom: 88%;
}

/* ------------------------------
   グラフ下部の背景
------------------------------ */

.chart-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 80%;
  height: 100%;
  background: var(--fill-color);
  clip-path: polygon(0% 100%, 25% 96.5%, 50% 90%, 75% 80%, 100% 66.5%, 100% 100%);
  opacity: 0.1;
}

/* ------------------------------
   折れ線
------------------------------ */

.line-segment {
  position: absolute;
  z-index: 2;
}

.line-segment::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--line-color);

  /*
   * 四角形を細い斜線状に切り抜く。
   * 左下 → 右上を結ぶ。
   */
  clip-path: polygon(0 calc(100% - 2px), 0 100%, 100% 2px, 100% 0);
}

/*
 * 2024 → 未来だけ点線
 */
.line-segment--dashed::before {
  background: repeating-linear-gradient(
    to top right,
    var(--line-color) 0,
    var(--line-color) 5px,
    transparent 5px,
    transparent 8px
  );
}

/* ------------------------------
   データポイント
------------------------------ */

.point {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  background: var(--zino-orange);
  border: 2px solid var(--line-color);
  border-radius: 50%;
  transform: translate(-50%, 50%);
}

/*
 * 未来のポイント
 */
.point--future {
  background: var(--line-color);
}

.point--future::before {
  content: '計画';
  font-size: clamp(10px, 2.564vw, 13px);
  color: var(--text-color);
  position: absolute;
  left: -4em;
  white-space: nowrap;
}

/* ------------------------------
   X軸ラベル
------------------------------ */

.x-labels {
  position: absolute;
  left: 3%;
  bottom: -12%;
  width: 97%;
  height: 9.626%;
}

.x-labels span {
  position: absolute;
  font-size: clamp(10px, 2.564vw, 13px);
  line-height: 1.5;
  color: var(--text-color);
  white-space: nowrap;
  transform: translateX(-50%);
}


/* Growth phase cards */

.p-about__phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  width: 100%;
  margin-top: 2.4rem;
}

.p-about__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  border: 1px solid currentcolor;
  border-radius: 5.65px;
  text-align: center;
}

.p-about__phase-term {
  color: var(--zino-orange);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1.694;
}

.p-about__phase-title {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1.694;
}

.p-about__phase-note {
  font-size: 10px;
  line-height: 1.5;
}

@media (width >= 440px) {
  .p-about__phase-term {
    font-size: 12px;
  }
  .p-about__phase-title {
    font-size: 14px;
  }
  .p-about__phase-note {
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   NUMBERS
   -------------------------------------------------------------------------- */

.p-numbers {
  position: relative;
  padding-block: 4rem 8.2rem;
  color: var(--color-text-inverse);
}

/* NUMBERS and STAFF INTERVIEW share one gradient backdrop, flipped vertically
   as in the design, so they live inside a single band. */
.p-band {
  position: relative;
  overflow: hidden;
}

.p-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1 -1;
}

.p-numbers {
  overflow: hidden;
}

.p-numbers__splat {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.p-numbers__splat--right {
  max-width: none;
  width: 658px;
  height: auto;
  top: -154.8px;
  right: -301.8px;
  mix-blend-mode: multiply;
}

.p-numbers__splat--left {
  max-width: none;
  width: 658px;
  height: auto;
  top: 382px;
  left: -213px;
}

.p-numbers__inner {
  position: relative;
  z-index: 2;
}

.p-numbers__label {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: var(--fw-bold);
  line-height: 80%;
}

.p-numbers__title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  margin-top: 0.6rem;
}

.p-numbers__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 5.3rem;
}

.p-numbers__card {
  position: relative;
  min-height: 12.4rem;
  padding: 1rem 1.4rem 1.4rem;
  border-radius: 10px;
  container-type: inline-size;
  --n: 0.238095cqw; /* one design px of the 420px desktop card */
}

.p-numbers__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--zino-orange);
  opacity: 0.8;
  mix-blend-mode: multiply;
}

.p-numbers__card--tall {
  grid-column: span 2;
  min-height: 16rem;
}

.p-numbers__card-label,
.p-numbers__card-value {
  position: relative;
}

.p-numbers__card-label {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.p-numbers__card-label small {
  font-size: 13px;
}

.p-numbers__card-value {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: baseline;
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.p-numbers__card-value b {
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 62.8%;
  font-weight: var(--fw-bold);
  font-size-adjust: 0.5;
  letter-spacing: -0.05em;
  margin-right: 8px;
}

.p-numbers__card-value span {
  font-size: 1.8rem;
}

.p-numbers__card--tall .p-numbers__card-value b {
  font-size: 14rem;
  line-height: 62.8%;
}

.p-numbers__card--tall .p-numbers__card-value span {
  font-size: 3rem;
}

/* --------------------------------------------------------------------------
   STAFF INTERVIEW
   -------------------------------------------------------------------------- */

.p-interview {
  position: relative;
  isolation: isolate;
  padding-block: 5.2rem 6.7rem;
  overflow: hidden;
  color: var(--color-text-inverse);
}

.p-interview__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20%;
}

.p-interview__bg-splat {
  position: absolute;
  inset: 0 0 auto;
  width: 639px;
  max-width: none;
  height: auto;
  mix-blend-mode: multiply;
}
.p-interview__bg-graffiti {
  position: absolute;
  bottom: -28px;
  right: -26px;
  width: 456px;
  max-width: none;
  height: auto;
}

.p-interview__inner {
  position: relative;
}

.p-interview__head {
  display: block;
}

.p-interview__label {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 80%;
}

.p-interview__title {
  margin-top: 0.6rem;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}

.p-interview__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
  isolation: isolate;
}

.p-interview__filter button {
  min-height: 4rem;
  min-width: 10rem;
  padding-inline: 1.4rem;
  border: 2px solid var(--color-white);
  border-radius: 2rem;
  color: var(--color-text-inverse);
  font-size: 2rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.p-interview__filter button[aria-pressed='true'] {
  color: transparent;
  background-image: url('../../img/top/interview-bg-2.webp');
  background-position: 20% 32%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.p-interview__filter button[aria-pressed='true']::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-white);
  border-radius: inherit;
  z-index: -1;
}

/* Carousel */

.p-interview__track {
  padding-block: 2rem;
  padding-inline: 1.4rem;
}

/* .p-interview__viewport {
  overflow: hidden;
} */

.p-interview__rail {
  display: flex;
  gap: 0.8rem;
  position: relative;
  left: 0;
  transition: left var(--duration-base) var(--ease-out);
}

.p-interview__rail.is-instant {
  transition: none;
}

.p-interview__rail > a {
  flex: 0 0 100%;
  width: 100%;
}

/* --u is one design pixel of the 562px card.
   Do not put transform / container-type on the card or the wrapping <a>:
   both create a stacking context and isolate mix-blend-mode from __bg.
   Tilt lives on the panel itself (safe) and on .p-interview__tilt. */
.p-interview__card {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 536 / 548;
  scroll-snap-align: center;
  /* Track padding-inline is 1.4rem and overrides .l-container gutters. */
  --u: calc((100vw - 2.8rem) / 562);
}

.p-interview__card--1,
.p-interview__card--3 {
  --card-tilt: matrix(0.9962, 0.0872, -0.0872, 0.9962, 0, 0);
  --card-rotate: -8deg;
}

.p-interview__card--2 {
  --card-tilt: matrix(0.9962, -0.0872, 0.0872, 0.9962, 0, 0);
  --card-rotate: 8deg;
}

.p-interview__card > * {
  position: absolute;
}

/* Same box as the card so the panel and the content share one origin. */
.p-interview__tilt {
  inset: 0;
  transform: var(--card-tilt);
  transform-origin: center center;
  z-index: 1;
}

.p-interview__tilt > * {
  position: absolute;
}

a:hover .p-interview__tilt {
  animation: sway-card 1s ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes sway-card {
  0% {
    transform: var(--card-tilt);
  }
  100% {
    transform: var(--card-tilt) rotate(var(--card-rotate));
  }
}
/* Blend stays on this untransformed box. The fill tilts as a child so the
   panel still belongs to .p-interview's stacking context. */
.p-interview__panel {
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
}

.p-interview__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--card-color);
  clip-path: inset(17% 11.615% 0 1.785%);
  transform: var(--card-tilt);
  transform-origin: center center;
}

a:hover .p-interview__panel::before {
  animation: sway-card 1s ease-in-out;
  animation-fill-mode: forwards;
}

.p-interview__splash {
  bottom: 0;
  left: 1.785%;
  width: 67.352%;
  height: 83%;
  overflow: hidden;
}

.p-interview__splash img {
  position: absolute;
  top: 27.468%;
  left: -16.525%;
  width: 137.42%;
  height: auto;
  max-width: none;
  opacity: 0.8;
}

.p-interview__card--2 .p-interview__splash img {
  top: -13.3%;
  left: -38.347%;
  transform: rotate(-62.02deg);
}

.p-interview__card--3 .p-interview__splash img {
  top: 33.468%;
  left: -44.525%;
  transform: scaleX(-1) rotate(180deg);
}

.p-interview__photo {
  bottom: 0;
  left: 34.2%;
  width: auto;
  height: 89.369%;
  object-position: bottom;
  z-index: 1;
}
.p-interview__card--2 .p-interview__photo {
  left: 29.2%;
}

.p-interview__card--3 .p-interview__photo {
  left: 29.2%;
}

.p-interview__no {
  top: -2.6%;
  left: 0;
  font-family: var(--font-display);
  font-size: 24.231vw;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-display);
  line-height: 1.5;
}
.p-interview__meta {
  top: 29.181%;
  left: 6.343%;
  z-index: 2;
}

.p-interview__role {
  font-size: 3.462vw;
  font-weight: var(--fw-semibold);
  line-height: 1.481;
}

.p-interview__name {
  font-size: 6.923vw;
  font-weight: var(--fw-semibold);
  line-height: 1.444;
}

.p-interview__tags {
  display: grid;
  font-size: 2.769vw;
  font-weight: var(--fw-semibold);
  line-height: 1.481;
  margin-top: 2.459vw;
}

.p-interview__body {
  width: 13.5em;
  font-size: 2.769vw;
  font-weight: var(--fw-semibold);
  line-height: 1.875;
  margin-top: 3.685vw;
}

.p-interview__more {
  bottom: 6.4%;
  left: 6.343%;
  display: grid;
  place-items: center;
  width: 33.582%;
  height: 9.124%;
  border: calc(var(--u) * 2) solid var(--color-white);
  background-color: var(--card-button);
  color: var(--color-text-inverse);
  font-size: calc(var(--u) * 18);
  font-weight: var(--fw-semibold);
  line-height: 1.667;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
  z-index: 2;
}

a:hover .p-interview__more {
  animation: button-beat 1s ease-in-out infinite;
}

@keyframes button-beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.p-interview__more:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--card-color);
  border-color: var(--card-color);
}

.p-interview__nav {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 4rem;
}

.p-interview__nav[hidden] {
  opacity: 0.8;
  pointer-events: none;
  cursor: default;
}

.p-interview__nav button {
  width: 6.9rem;
  color: var(--color-text-inverse);
  transition: transform var(--duration-fast) var(--ease-out);
}

.p-interview__nav button:hover {
  animation: rotate-arrow 1s ease-in-out infinite;
}

@keyframes rotate-arrow {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  25% {
    transform: rotate(3deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }
  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

.p-interview__nav img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   REQUIREMENTS
   -------------------------------------------------------------------------- */

.p-requirements {
  position: relative;
  padding-block: 6.4rem 15.7rem;
  overflow: hidden;
  background-color: var(--color-black);
  color: var(--color-text-inverse);
}

/* Oversized, barely-there brand marks, as in the design. */
.p-requirements__marks {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.p-requirements__mark {
  position: absolute;
  max-width: none;
}

.p-requirements__mark--graffiti {
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 1339px;
}

.p-requirements__mark--splat {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1642px;
}

.p-requirements__mark--logo {
  bottom: 2%;
  left: -13%;
  width: 405px;
  rotate: -11.6deg;
  opacity: 0.1;
}

.p-requirements > .l-container {
  position: relative;
  z-index: 1;
}

.p-requirements__head {
  text-align: center;
}

.p-requirements__label {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: var(--fw-bold);
  line-height: 80%;
  max-width: 7em;
  margin-inline: auto;
}

.p-requirements__title {
  margin-top: 1.4rem;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  margin-inline: auto;
}

.p-requirements__lead {
  margin-top: 1.9rem;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.875;
}

.p-requirements__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  max-width: 97.5rem;
  margin: 5.6rem auto 0;
}

/* Job switch — a scrollable row on phones, a vertical list on wider screens.
   The active entry carries a brush stroke underneath. */
.p-requirements__switch {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 2rem;
  padding-bottom: 3rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.p-requirements__switch::-webkit-scrollbar {
  display: none;
}

.p-requirements__switch button {
  position: relative;
  flex: 0 0 auto;
  color: var(--color-text-inverse);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  white-space: nowrap;
  opacity: 0.3;
  transition: opacity var(--duration-base) var(--ease-out);
}

.p-requirements__switch button:nth-child(2) {
  padding-inline: 1em;
}

.p-requirements__switch button:hover {
  opacity: 0.9;
}

.p-requirements__switch button[aria-selected='true'] {
  opacity: 1;
}

.p-requirements__switch button[aria-selected='true']::after {
  content: '';
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: left center;
  width: 100%;
  height: 3rem;
  background: url('../../img/top/requirement-brush.png') no-repeat center / cover;
  z-index: -1;
}

.p-requirements__summary {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 3rem;
}

.p-requirements__table {
  width: 100%;
  max-width: 70rem;
  margin-top: 4rem;
}

.p-requirements__table th,
.p-requirements__table td {
  padding-block: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1.875;
  text-align: left;
  vertical-align: top;
}

.p-requirements__table tr:last-child th,
.p-requirements__table tr:last-child td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.p-requirements__table th {
  width: 9rem;
  color: var(--zino-orange);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.p-requirements__actions {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 3.2rem;
  margin-top: 6rem;
}

.p-requirements__actions .c-btn {
  width: 100%;
}

.p-requirements__actions .c-btn--tilt {
  background-color: var(--zino-orange);
  rotate: -5deg;
}

.p-requirements__actions .c-btn--tilt:hover {
  background-color: var(--zino-pale-orange);
  color: var(--zino-orange);
}

.p-requirements__actions .c-btn--primary {
  background-color: var(--zino-green);
  rotate: 0deg;
}

.p-requirements__actions .c-btn--primary:hover {
  background-color: var(--zino-pale-orange);
  color: var(--zino-green);
}

.p-requirements__arrow {
  position: absolute;
  right: 0;
  bottom: 7rem;
  width: 6rem;
  rotate: -19deg;
}

/* ==========================================================================
   From tablet up (>= 768px)
   The collages take on their desktop geometry: the hero widens to the 1440
   frame, the ABOUT canvases scatter, and the tables and cards spread out.
   ========================================================================== */

@media (width >= 768px) {
  /* --- FV --- */

  .p-fv {
    aspect-ratio: 1440 / 1003;
    background-size: cover;
    --fv-u: 0.06944cqw;
  }

  .p-fv__logo-container {
    justify-content: flex-start;
    padding-left: 2.1rem;
  }

  .p-fv__bg-logo {
    top: 37.288%;
    left: 1.367%;
    width: 45.625%;
    height: 43.472%;
  }

  .p-fv__splat--2 {
    top: 46.469%;
    left: 61.528%;
    width: 45.694%;
    height: 52.343%;
  }

  .p-fv__splat--1 {
    top: 1.603%;
    left: -2.153%;
    width: 45.694%;
    height: 52.343%;
  }

  .p-fv__drip {
    top: -5.683%;
    left: 83.125%;
    width: 15.539%;
    height: 33.436%;
  }

  .p-fv__person--back {
    top: 9.081%;
    left: 33.333%;
    width: 31.944%;
    height: 67.398%;
  }

  .p-fv__person--left {
    top: 28.223%;
    left: 16.944%;
    width: 36.319%;
    height: 58.524%;
  }

  .p-fv__person--right {
    top: 33.208%;
    left: 48.194%;
    width: 28.403%;
    height: 50.349%;
  }

  .p-fv__letter--a {
    top: 8.467%;
    left: 2.167%;
    width: 73.238%;
    height: 32.264%;
  }

  .p-fv__letter--c {
    top: 61.653%;
    left: 10.369%;
    width: 87.892%;
    height: 36.973%;
  }

  .p-fv__letter-window--b1 {
    top: 38.43%;
    left: -3.753%;
    width: 45.941%;
    height: 37.988%;
  }

  .p-fv__letter-window--b2 {
    top: 27.073%;
    left: 52.053%;
    width: 54.315%;
    height: 37.988%;
  }

  .p-fv__copy {
    display: block;
  }

  .p-fv__button {
    width: 20.833%;
    height: 7.976%;
    translate: none;
    transform-origin: bottom center;
    border-width: calc(var(--fv-u) * 3);
    font-size: calc(var(--fv-u) * 24);
  }

  .p-fv__button--primary {
    top: 86.241%;
    left: 27.639%;
  }

  .p-fv__button--primary .p-fv__button-swoosh {
    top: -37%;
    left: -17%;
  }

  .p-fv__button--apply {
    top: 86.241%;
    left: 51.325%;
  }

  .p-fv__button--apply .p-fv__button-swoosh {
    top: 16%;
    right: -24%;
  }

  .p-fv__button:hover .p-fv__button-swoosh {
    width: 35.3%;
    height: 62.75%;
  }

  /* --- ABOUT --- */

  .p-about {
    padding-block: 13.4rem 16.8rem;
    overflow: unset;
  }

  .p-about__inner {
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
    align-items: flex-start;
    padding-inline: 3rem;
  }

  .p-about__lead {
    position: sticky;
    top: calc(var(--header-height) + 4rem);
    width: 34.01%;
    padding-top: 1rem;
  }

  .p-about__body {
    font-size: 16px;
  }

  .p-about__photos {
    display: block;
    width: 122.07%;
    margin-top: 4.5rem;
  }

  .p-about__main {
    gap: 5.6rem;
    width: 53.17%;
  }

  .p-about__canvas {
    --u: 0.147059cqw;
  }

  .p-about__block-title {
    font-size: 20px;
  }

  .p-about__block-lead {
    font-size: 16px;
    margin-bottom: 5.6rem;
  }

  /* The tag cloud and the career circles scatter across a fixed design box. */

  .p-about__circles {
    aspect-ratio: 680 / 642;
  }

  .p-about__circle {
    width: 32.353%;
    padding: calc(var(--u) * 16);
  }

  .p-about__circle dt {
    font-size: max(1.2rem, calc(var(--u) * 18));
  }

  .p-about__circle dd {
    font-size: max(1.1rem, calc(var(--u) * 16));
  }

  .p-about__circle:nth-child(1) {
    top: 0;
    left: 36.765%;
  }
  .p-about__circle:nth-child(2) {
    top: 11.371%;
    left: 0;
  }
  .p-about__circle:nth-child(3) {
    top: 25.389%;
    left: 67.647%;
  }
  .p-about__circle:nth-child(4) {
    top: 38.629%;
    left: 29.853%;
  }
  .p-about__circle:nth-child(5) {
    top: 62.305%;
    left: 0;
  }
  .p-about__circle:nth-child(6) {
    top: 65.732%;
    left: 57.059%;
  }

  .p-about__phases {
    gap: 1.47%;
    margin-top: 3.2rem;
  }

  .p-about__phase {
    padding: 1.7rem 0;
  }

  /* --- NUMBERS --- */

  .p-numbers {
    padding-block: 8.3rem 9.2rem;
  }

  .p-band__bg {
    scale: unset;
  }

  .p-numbers__label {
    font-size: 7rem;
  }

  .p-numbers__title {
    font-size: 20px;
  }

  .p-numbers__splat--right {
    top: -19.8%;
    left: 70.556%;
  }

  .p-numbers__splat--left {
    top: 37.8%;
    left: -10%;
  }

  .p-numbers__grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 7rem;
  }

  .p-numbers__card {
    min-height: 16rem;
    padding: 1rem 2rem 2rem;
  }

  .p-numbers__card--tall {
    grid-column: auto;
    grid-row: span 2;
    min-height: 33rem;
  }

  .p-numbers__card-label {
    font-size: 2rem;
  }

  .p-numbers__card--tall .p-numbers__card-value {
    bottom: unset;
    top: 8.8rem;
  }

  .p-numbers__card-value b,
  .p-numbers__card--tall .p-numbers__card-value b {
    font-size: 10rem;
  }

  .p-numbers__card-value span,
  .p-numbers__card--tall .p-numbers__card-value span {
    font-size: 3rem;
  }

  /* --- STAFF INTERVIEW --- */

  .p-interview {
    padding-block: 11.4rem 4rem;
  }

  .p-interview__bg-splat {
    width: 852px;
  }

  .p-interview__bg-graffiti {
    width: 756px;
    bottom: -45px;
  }
  .p-interview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .p-interview__label {
    font-size: 7rem;
  }

  .p-interview__title {
    font-size: 2rem;
  }

  .p-interview__filter {
    flex-wrap: nowrap;
    margin-top: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .p-interview__filter button {
    font-size: var(--fs-md);
  }

  .p-interview__track {
    padding-inline: 3.2rem;
    /* Visible count ≈ (100vw - padding-inline * 2) / card width. */
    --interview-card-w: clamp(28.5rem, calc((100vw - 6.4rem) / 2.6), 53rem);
  }

  .p-interview__rail {
    gap: 0;
  }

  .p-interview__rail > a,
  .p-interview__card {
    flex-basis: var(--interview-card-w);
    width: var(--interview-card-w);
  }

  .p-interview__card {
    --u: calc(var(--interview-card-w) / 562);
  }

  /* The cards deliberately overlap, matching their spacing in the design. */

  .p-interview__nav {
    justify-content: flex-start;
    gap: 5rem;
  }

  .p-interview__nav button {
    width: 12.3rem;
  }

  .p-interview__no {
    font-size: clamp(74px, 9.722vw, 140px);
  }

  .p-interview__role {
    font-size: clamp(12px, 1.389vw, 20px);
  }
  .p-interview__name {
    font-size: clamp(20px, 2.778vw, 40px);
  }
  .p-interview__tags {
    font-size: clamp(10px, 1.111vw, 16px);
    margin-top: 0.972vw;
  }
  .p-interview__body {
    font-size: clamp(10px, 1.111vw, 16px);
    margin-top: 1.46vw;
  }

  /* --- REQUIREMENTS --- */

  .p-requirements {
    padding-block: 12.7rem 11.2rem;
  }

  .p-requirements__label {
    font-size: 7rem;
    max-width: unset;
  }

  .p-requirements__label .hyphen {
    display: none;
  }

  .p-requirements__title {
    font-size: 20px;
  }

  .p-requirements__lead {
    font-size: 16px;
  }

  .p-requirements__lead br {
    display: none;
  }

  .p-requirements__body {
    grid-template-columns: 21rem 1fr;
    gap: 6.4rem;
    margin-top: 10rem;
    max-width: 1024px;
  }

  .p-requirements__switch {
    flex-direction: column;
    justify-content: flex-start;
    gap: 6rem;
    padding-top: 0;
    padding-bottom: 0;
    overflow-x: visible;
  }

  .p-requirements__switch button {
    flex: 0 1 auto;
    font-size: var(--fs-lg);
    text-align: left;
    padding-inline: 1em;
  }

  .p-requirements__switch button[aria-selected='true']::after {
    top: 2.5rem;
    left: 0;
    transform: unset;
    width: 20.3rem;
    height: 3.4rem;
    background-size: contain;
  }

  .p-requirements__summary {
    font-size: 16px;
  }

  .p-requirements__table {
    margin-top: 7rem;
  }

  .p-requirements__table th,
  .p-requirements__table td {
    font-size: var(--fs-sm);
  }

  .p-requirements__table th {
    width: 13rem;
    font-size: var(--fs-md);
  }

  .p-requirements__actions {
    display: flex;
    gap: 4.6rem;
    margin-top: 8.6rem;
  }
}
@media (width >= 1024px) {
  .p-about__title {
    font-size: 4rem;
  }

  .p-about__inner {
    padding-inline: 4rem;
  }

  .p-about__block-lead br {
    display: none;
  }

  .p-about__chart {
    aspect-ratio: 598 / 147;
  }

  .line-chart {
    aspect-ratio: 598 / 147;
  }

  .chart-area {
    aspect-ratio: 570 / 125;
  }

  .chart-content {
    aspect-ratio: 538 / 122;
    width: 92%;
  }

  .x-labels {
    width: 92%;
  }

  .p-requirements__body {
    gap: 9.6rem;
  }

  .p-requirements__actions {
    flex-direction: row;
  }

}

@media (width >= 1280px) {
  .p-fv__logo {
    width: 11.6rem;
  }

  .p-about__inner {
    padding-inline: 8rem;
  }

  .p-numbers__card-value {
    right: 2rem;
  }

  .p-numbers__card--tall .p-numbers__card-value {
    top: 6.4rem;
    right: 2rem;
  }

  .p-numbers__card-value b,
  .p-numbers__card--tall .p-numbers__card-value b {
    font-size: 18rem;
    font-size-adjust: 0.4;
  }

  .p-numbers__card-value span,
  .p-numbers__card--tall .p-numbers__card-value span {
    font-size: 4rem;
  }
}