/* PATCH: brand tokens from the brand deck (V6, July 2026).
   Proxima Nova is an Adobe kit locked to the client's domain, so brand
   panels set Montserrat, its closest free match. */
body {
  --p-bg: #111318;
  --p-fg: #ffffff;
  --p-muted: rgb(255 255 255 / 0.62);
  --p-surface: rgb(255 255 255 / 0.06);
  --p-accent: #b3dd03;
  --p-font: "Montserrat", var(--font);
  --lime: #b3dd03;
}

/* Brand headlines follow the deck: extra-bold caps, lime full stop */
.patch-h { font-family: var(--p-font); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.98; }
.patch-h em { font-style: normal; color: var(--p-accent); }

/* Parade pop-outs */
.patch-chip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--lime); color: #111318; font-family: var(--p-font); }
.patch-chip strong { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.patch-chip span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
body { --project-pen: #c7f016; }

/* Solo parade: the film's route, stop by stop, beside the phone */
.patch-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-family: var(--p-font); color: var(--p-fg); }
.patch-route li {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 0; font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; letter-spacing: -0.01em;
}
.patch-route li + li { border-top: 1px solid rgb(255 255 255 / 0.1); }
.patch-route b {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--lime); color: #111318; font-size: 12px; font-weight: 800; letter-spacing: 0;
}
@media (max-width: 800px) {
  .patch-route { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .patch-route li { font-size: 14px; padding: 10px 0; }
  .patch-route li + li { border-top: 0; }
}

/* ---------- The sticker: an enamel badge. Lime disc, bevelled rim, two thin
   keylines, the line on a slow turn between them, the connected A pressed in ---------- */
.sticker { aspect-ratio: 1; filter: drop-shadow(0 2px 2px rgb(10 12 16 / 0.18)) drop-shadow(0 16px 22px rgb(10 12 16 / 0.26)); }
.sticker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sticker__key { fill: none; stroke: #111318; stroke-width: 1.1; opacity: 0.9; }
.sticker__ring { transform-box: view-box; transform-origin: 100px 100px; animation: stk-spin 48s linear infinite; fill: #111318; }
.sticker__ring text { font-family: var(--p-font); font-weight: 800; font-size: 13.5px; letter-spacing: 0.1em; }
.sticker__a { fill: #111318; }
@keyframes stk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sticker__ring { animation: none; } }

/* ---------- Business card: the real print file, live. Front is the artwork,
   the back is the blank artwork with name, title and number set in HTML.
   Flips on hover (pointer devices) and on click/tap. ---------- */
.bc { position: relative; aspect-ratio: 240.9 / 155.9; perspective: 1400px; cursor: pointer; outline-offset: 6px; }
/* final artwork, not a mock-up: square trimmed corners */
.bc__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.9s var(--ease-spring); }
.bc__face {
  position: absolute; inset: 0; border-radius: 1px; overflow: hidden; container-type: inline-size;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #1b1c1c;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 1px 1px rgb(0 0 0 / 0.18), 0 14px 24px -14px rgb(0 0 0 / 0.45);
}
.bc__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc__back { transform: rotateY(180deg); font-family: "Figtree", "Montserrat", var(--font); line-height: 1; white-space: nowrap; }
.bc__name, .bc__title, .bc__tel { position: absolute; }
.bc__name { left: 5.8%; top: 14.5%; font-weight: 700; font-size: 7.1cqw; color: #b2d234; letter-spacing: -0.01em; }
.bc__title { left: 5.8%; top: 26.6%; font-weight: 500; font-size: 4.9cqw; color: #fff; }
.bc__tel { left: 11.2%; top: 44%; font-weight: 600; font-size: 7.1cqw; color: #fff; letter-spacing: 0.005em; }
.bc.is-flipped .bc__in, .bc--back .bc__in { transform: rotateY(180deg); }
.bc--back.is-flipped .bc__in { transform: rotateY(0deg); }
@media (hover: hover) {
  .bc:hover .bc__in { transform: rotateY(180deg); }
  .bc.is-flipped:hover .bc__in, .bc--back:hover .bc__in { transform: rotateY(0deg); }
  .bc--back.is-flipped:hover .bc__in { transform: rotateY(180deg); }
}

/* ---------- Parade: a polaroid of the team drawing beside the phone ---------- */
.pk-polaroid { margin: 0; padding: 7% 7% 22%; background: #fbfbf8; border-radius: 4px; position: relative; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 22px 40px -18px rgb(0 0 0 / 0.55); }
.pk-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 38% 50%; border-radius: 1px; filter: contrast(1.04); }
.pk-polaroid::before { /* lime tape */
  content: ""; position: absolute; left: 50%; top: -5%; width: 38%; height: 11%; translate: -50% 0; rotate: -4deg;
  background: rgb(199 240 22 / 0.78); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
@media (max-width: 800px) {
  .pk-polaroid-pop { --x: 64% !important; --y: 47% !important; --w: 31vw !important; }
  .pk-sticker-pop { --x: 3% !important; --y: 3% !important; --w: 30vw !important; }
}

/* ---------- Up close: brand pieces breaking out of a lime and a black panel ---------- */
.pk-breakout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding-top: clamp(40px, 6vw, 90px); }
.pk-break { --sh: clamp(300px, 31vw, 450px); position: relative; margin: 0; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 18px; isolation: isolate; }
.pk-break__stage { grid-area: 1 / 1; position: relative; height: var(--sh); }
.pk-break__panel { grid-area: 1 / 1; align-self: end; height: calc(var(--sh) * 0.74); border-radius: var(--radius-l); z-index: -1; overflow: hidden; position: relative; }
.pk-break__panel--lime { background: radial-gradient(110% 120% at 18% 0%, #d4f24a 0%, #b3dd03 48%, #94b900 100%); }
.pk-break__panel--lime::after { /* the network, tone on tone, bleeding off the corner */
  content: ""; position: absolute; right: -8%; bottom: -22%; width: 70%; aspect-ratio: 614 / 350;
  background: url(../projects/patch/network.svg) no-repeat center / contain; filter: brightness(0); opacity: 0.1;
}
.pk-break__panel--black { background: radial-gradient(90% 110% at 85% 110%, rgb(179 221 3 / 0.22), transparent 55%), #111318; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.pk-break__panel--black img { position: absolute; left: -14%; bottom: -26%; width: 82%; opacity: 0.32; }
.pk-break__piece {
  position: absolute; left: var(--l); top: var(--t); width: var(--pw); rotate: var(--r, 0deg);
  filter: drop-shadow(0 2px 3px rgb(10 12 16 / 0.18)) drop-shadow(0 30px 34px rgb(10 12 16 / 0.36));
  transition: rotate 0.6s var(--ease-spring), translate 0.6s var(--ease-spring);
}
.pk-break__piece:nth-child(3) { z-index: 2; }
.pk-break__piece:hover { rotate: 0deg; translate: 0 -14px; z-index: 3; }
.pk-break figcaption { display: grid; gap: 4px; padding-inline: 4px; }
.pk-break figcaption b { font: 600 18px/1.3 var(--font); letter-spacing: -0.02em; }
.pk-break figcaption span { font-size: 15px; color: var(--grey-7); line-height: 1.55; max-width: 46ch; }

/* The ID badge: the real A6 artwork on a black lanyard, swinging gently.
   Front has a placeholder avatar (not a person) and a made-up name. */
.pb {
  --bw: clamp(150px, 14vw, 200px);
  position: absolute; left: 50%; bottom: 6%; width: var(--bw); margin-left: calc(var(--bw) / -2);
  transform-origin: 50% calc(var(--bw) * -0.9); animation: pb-swing 5s ease-in-out infinite;
}
@keyframes pb-swing { 0%, 100% { rotate: 3.5deg; } 50% { rotate: -2deg; } }
.pb__strap {
  position: absolute; left: 50%; bottom: calc(100% + 22px); width: 14%; height: calc(var(--bw) * 0.9); overflow: hidden;
  background: linear-gradient(90deg, #070809, #1c1e22 20% 80%, #070809); transform-origin: 50% 100%;
  translate: -88% 0; rotate: 12deg; display: grid; place-items: center; box-shadow: 0 10px 16px -10px rgb(0 0 0 / 0.6);
}
.pb__strap--r { translate: -12% 0; rotate: -12deg; }
.pb__strap i { writing-mode: vertical-rl; font: normal 800 calc(var(--bw) * 0.05) / 1 var(--p-font); letter-spacing: 0.22em; color: #e9ece4; white-space: nowrap; }
.pb__clip {
  position: absolute; left: 50%; bottom: calc(100% - 8px); width: 12%; height: 32px; translate: -50% 0; border-radius: 7px 7px 4px 4px; z-index: 1;
  background: linear-gradient(90deg, #2a2d33, #6a707a 45%, #23252b); box-shadow: 0 2px 4px rgb(0 0 0 / 0.45);
}
.pb__clip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 34%; height: 9px; translate: -50% 0; border-radius: 0 0 4px 4px; background: #3c4047; }
.pb__flip { position: relative; aspect-ratio: 297.6 / 419.5; perspective: 1400px; cursor: pointer; outline-offset: 6px; }
.pb__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.9s var(--ease-spring); }
.pb__face {
  position: absolute; inset: 0; border-radius: 5% / 3.6%; overflow: hidden; container-type: inline-size;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #1b1c1c;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.25), 0 34px 44px -20px rgb(0 0 0 / 0.6);
}
.pb__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb__face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(125deg, rgb(255 255 255 / 0.14), transparent 30%); pointer-events: none; }
.pb__back { transform: rotateY(180deg); }
.pb__photo { position: absolute; left: 27.2%; top: 28.1%; width: 45.7%; height: 44.3%; overflow: hidden; }
.pb__photo svg { display: block; width: 100%; height: 100%; }
.pb__name, .pb__title { position: absolute; left: 0; right: 0; text-align: center; font-family: "Montserrat", var(--font); line-height: 1; white-space: nowrap; }
.pb__name { top: 77.5%; font-weight: 700; font-size: 7.73cqw; color: #b2d234; }
.pb__title { top: 85.4%; font-weight: 500; font-size: 4.7cqw; color: #fff; }
.pb__flip.is-flipped .pb__in { transform: rotateY(180deg); }
@media (hover: hover) {
  .pb__flip:hover .pb__in { transform: rotateY(180deg); }
  .pb__flip.is-flipped:hover .pb__in { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) { .pb { animation: none; } }
.pk-break__panel--fog { background: radial-gradient(110% 120% at 80% 0%, #f3f6f8 0%, #e6ebf0 55%, #d6dde3 100%); }
.pk-break__panel--fog img { position: absolute; right: -16%; bottom: -30%; width: 84%; opacity: 0.45; }

/* Row two: the enquiry card and the sector switcher, wired together */
.pk-breakout--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(30px, 5vw, 70px); }
.pk-breakout--two .pk-break { grid-template-rows: 1fr auto; }
.pk-breakout--two .pk-break__panel { height: 68%; }
.pk-enq, .pk-ind {
  grid-area: 1 / 1; align-self: end; justify-self: center; width: min(88%, 480px); margin-bottom: 9%;
  font-family: var(--p-font); border-radius: 18px;
  box-shadow: 0 2px 4px rgb(10 12 16 / 0.12), 0 36px 60px -26px rgb(10 12 16 / 0.6);
  transition: rotate 0.7s var(--ease-spring);
}
.pk-enq { rotate: -4deg; translate: 0 -3%; position: relative; overflow: hidden; background: #fbfbf7; color: #16180f; padding: 22px 22px 20px; }
.pk-ind { rotate: 4deg; translate: 0 -6%; }
.pk-enq:hover, .pk-ind:hover { rotate: 0deg; }
.pk-enq__h { font: 800 21px/1.1 var(--p-font); letter-spacing: -0.02em; color: #16180f; margin-bottom: 14px; }
.pk-enq__group { display: grid; gap: 8px; margin-bottom: 14px; }
.pk-enq__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #787b6d; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-chip {
  appearance: none; font: 600 12.5px/1 var(--p-font); color: #16180f; cursor: pointer;
  padding: 8px 11px; border-radius: 999px; background: #f5f5f0; border: 1.5px solid #e2e1d7;
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-spring);
}
.pk-chip:hover { border-color: #16180f; }
.pk-chip.is-on { background: var(--lime); border-color: var(--lime); }
.pk-chip:active { transform: scale(0.95); }
.pk-enq__sum { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #ecebe3; margin-bottom: 14px; }
.pk-enq__sum p { font-size: 14px; line-height: 1.45; color: #43463b; }
.pk-enq__sum b { color: #16180f; font-weight: 700; }
.pk-enq__sum i { font-style: normal; color: #9a9d8f; margin-inline: 7px; }
.pk-enq__sum b.is-new { animation: pk-flash 0.7s var(--ease-out); }
@keyframes pk-flash { from { background: var(--lime); box-shadow: 0 0 0 3px var(--lime); border-radius: 3px; } }
.pk-enq__go {
  appearance: none; border: 0; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: 10px; background: var(--lime); color: #16180f; font: 700 14.5px/1 var(--p-font);
  box-shadow: 0 14px 30px -16px rgb(120 150 0 / 0.65); transition: transform 0.25s, background 0.25s;
}
.pk-enq__go svg { width: 16px; height: 16px; }
.pk-enq__go:hover { background: #c4ec12; transform: translateY(-2px); }
.pk-enq__done {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 24px;
  background: #fbfbf7; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
.pk-enq__done span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #16180f; margin-bottom: 4px; }
.pk-enq__done span svg { width: 26px; }
.pk-enq__done b { font: 800 20px/1.1 var(--p-font); }
.pk-enq__done p { font-size: 14px; color: #787b6d; max-width: 26ch; }
.pk-enq.is-sent .pk-enq__done { opacity: 1; visibility: visible; }

.pk-ind { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); overflow: hidden; background: linear-gradient(158deg, #0e1017, #06080f 72%); color: #fff; border: 1px solid rgb(255 255 255 / 0.08); }
.pk-ind__tabs { display: grid; align-content: center; gap: 2px; padding: 14px 8px 14px 12px; }
.pk-ind__tab {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left; color: rgb(255 255 255 / 0.62);
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font: 600 12.5px/1.2 var(--p-font);
  transition: background 0.25s, color 0.25s;
}
.pk-ind__tab svg { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 9px; color: var(--lime); border: 1px solid rgb(179 221 3 / 0.28); background: rgb(179 221 3 / 0.06); transition: background 0.25s, color 0.25s; }
.pk-ind__tab:hover { color: #fff; background: rgb(255 255 255 / 0.04); }
.pk-ind__tab.is-on { color: #fff; background: rgb(255 255 255 / 0.07); }
.pk-ind__tab.is-on svg { background: var(--lime); color: #111318; border-color: var(--lime); }
.pk-ind__panel { position: relative; min-height: 100%; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; }
.pk-ind__panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0b0d14 0%, transparent 30%), linear-gradient(0deg, rgb(6 8 15 / 0.92), transparent 46%); pointer-events: none; }
.pk-ind__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s, scale 0.9s var(--ease-out); }
.pk-ind__art.is-out { opacity: 0; scale: 1.06; }
.pk-ind__num { position: absolute; right: 14px; top: 14px; z-index: 2; font-size: 11px; letter-spacing: 0.14em; color: rgb(255 255 255 / 0.45); }
.pk-ind__lab { position: absolute; left: 16px; right: 14px; bottom: 16px; z-index: 2; }
.pk-ind__lab span { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin-bottom: 6px; }
.pk-ind__lab b { display: block; font-size: clamp(17px, 1.6vw, 22px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

@media (max-width: 900px) {
  .pk-breakout { grid-template-columns: 1fr; row-gap: 56px; }
  .pk-breakout--two { grid-template-columns: 1fr; }
  .pk-enq, .pk-ind { width: 92%; }
  .pk-break { --sh: min(68vw, 400px); }
  .pk-break--badge { --sh: min(100vw, 470px); }
  .pb { --bw: min(40vw, 190px); }
}

/* ---------- Quote: on the brand black, with a keyline in dark mode ---------- */
.pk-quote { font-family: var(--font); }

/* ---------- The kit: an editorial grid of the real mockups, no chrome ----------
   Each row is justified: tiles grow by their aspect ratio, so every image sits
   full-bleed at its own shape and the row edges line up. */
.pk-kit { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.pk-kit__row { display: flex; gap: clamp(10px, 1.2vw, 16px); }
.pk-tile {
  flex: var(--a) 1 0; min-width: 0; margin: 0; aspect-ratio: var(--a); position: relative; overflow: hidden;
  border-radius: clamp(14px, 1.6vw, 22px); background: #f1f1ef; cursor: zoom-in;
}
.pk-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-out); }
.pk-tile:not(.pk-tile--cards):hover img { scale: 1.045; }
.pk-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(17 19 24 / 0.05); pointer-events: none; }
.pk-tile--cards { cursor: default; background: radial-gradient(120% 100% at 30% 0%, #f4f4f2, #e3e3e0); }
.pk-tile__card { position: absolute; left: var(--l); top: var(--t); width: 52%; rotate: var(--r); filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.2)) drop-shadow(0 22px 26px rgb(0 0 0 / 0.3)); }
@media (max-width: 700px) {
  .pk-kit { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .pk-kit__row { display: contents; }
  .pk-tile { aspect-ratio: 4 / 5; }
  .pk-tile--wide { grid-column: span 2; aspect-ratio: 4 / 3; }
}

/* Parade: the PATCH network drifting behind the phone, faded away from the text column */
.parade--solo { position: relative; isolation: isolate; overflow: hidden; }
.pk-net {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 30%, #000 58%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent 0 30%, #000 58%, #000 88%, transparent);
}
.pk-net__l line { stroke: #b3dd03; stroke-width: 1.2; opacity: 0.22; stroke-dasharray: 6 10; animation: pk-flow 9s linear infinite; animation-delay: calc(var(--d) * -1); }
.pk-net__n circle { fill: #b3dd03; opacity: 0.38; transform-box: fill-box; transform-origin: center; animation: pk-pulse 4.5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.pk-net__drift { animation: pk-drift 26s ease-in-out infinite alternate; }
@keyframes pk-flow { to { stroke-dashoffset: -160; } }
@keyframes pk-pulse { 0%, 100% { scale: 1; opacity: 0.28; } 50% { scale: 1.7; opacity: 0.6; } }
@keyframes pk-drift { to { translate: -40px 18px; } }
@media (max-width: 900px) { .pk-net { -webkit-mask-image: linear-gradient(180deg, #000 0 55%, transparent 80%); mask-image: linear-gradient(180deg, #000 0 55%, transparent 80%); } }
@media (prefers-reduced-motion: reduce) { .pk-net__l line, .pk-net__n circle, .pk-net__drift { animation: none; } }