@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Archivo+Black&family=Bricolage+Grotesque:opsz,wght@12..96,700..800&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Josefin+Sans:wght@600;700&family=Montserrat:wght@500;700;800&family=Newsreader:opsz,wght@6..72,400&display=swap");
/* Work: every project on one page (projects/work.html, .wk-*).
   Hero, the websites as laptop + phone cards with filter chips (work.js
   re-flows them with GSAP Flip), then print + brand as one flat-lay of real
   pieces. Loads after base.css, case.css and case-plus.css. */

/* ---------- Hero ---------- */
.wk-hero { padding-top: clamp(116px, 13vw, 168px); }
.wk-hero__grid { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.wk-hero__intro { display: grid; gap: 22px; justify-items: start; }
.wk-hero h1 { font-size: clamp(44px, 7vw, 104px); letter-spacing: -0.055em; line-height: 0.96; max-width: 17ch; }
.wk-hero__lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--grey-7); max-width: 50ch; }
.wk-facts dd { font-size: 16px; }
.wk-facts dd b { font-size: 1.25em; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Section bar: heading left, chips or a link right ---------- */
.wk-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 32px; margin-bottom: clamp(26px, 4vw, 44px); }
.wk-bar .cp-head { flex: 1 1 420px; margin-bottom: 0; }
.wk-bar__go { flex: none; }
.wk-bar__go svg { transition: translate 0.35s var(--ease-spring); }
.wk-bar__go:hover svg { translate: 4px 0; }
.wk-sites { padding-top: clamp(48px, 7vw, 96px); }

/* ---------- Filter chips ---------- */
.wk-filter {
  display: flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--grey-1);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.wk-filter::-webkit-scrollbar { display: none; }
.wk-filter button {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 999px;
  background: none; color: var(--grey-7); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.3s, color 0.3s, scale 0.3s var(--ease-spring);
}
.wk-filter button:hover { color: var(--ink); }
.wk-filter button:active { scale: 0.96; }
.wk-filter small { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--grey-2); font-size: 11px; font-weight: 700; text-align: center; transition: background 0.3s, color 0.3s; }
.wk-filter button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.wk-filter button[aria-pressed="true"] small { background: var(--hl-yellow); color: #18181a; }

/* ---------- Website cards ----------
   12 columns: two features (7 + 5), four smaller cards, then the features
   mirrored (5 + 7). The art is a size container, so the laptop and phone
   are sized off whichever is tighter, its width or its height. */
.wk-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 46px) clamp(14px, 1.8vw, 24px); }
.wk-card { grid-column: span 3; display: flex; flex-direction: column; gap: 14px; min-width: 0; text-decoration: none; color: inherit; }
.wk-card[hidden] { display: none; }
.wk-card--lg { grid-column: span 7; }
.wk-card--md { grid-column: span 5; }

.wk-card__art {
  --lw: min(70cqw, 100cqh);
  position: relative; flex: 1 1 auto; aspect-ratio: 4 / 3; container-type: size;
  border-radius: var(--radius-l); overflow: hidden; isolation: isolate; background: var(--brand);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: translate 0.6s var(--ease-spring);
}
.wk-card--lg .wk-card__art { aspect-ratio: 16 / 10.4; --lw: min(64cqw, 98cqh); }
.wk-card:not(.wk-card--lg):not(.wk-card--md) .wk-card__art { border-radius: var(--radius-m); }
.wk-card__glow { position: absolute; inset: -20% -10% 30% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(40% 45% at 55% 35%, rgb(255 255 255 / 0.38), transparent 70%); filter: blur(18px); }

.wk-card__laptop { position: absolute; z-index: 1; width: var(--lw); left: calc(50cqw - var(--lw) * 0.57); top: calc(50cqh - var(--lw) * 0.36); transition: translate 0.8s var(--ease-out), rotate 0.8s var(--ease-out); }
.wk-card__laptop .laptop__lid { border-radius: 8px 8px 3px 3px; padding: 2.4% 2.4% 3.2%; }
.wk-card__laptop .laptop__base { position: relative; height: max(5px, calc(var(--lw) * 0.026)); border-radius: 0 0 8px 8px; }
.wk-card__laptop .laptop__base::before { height: 3px; }
.wk-card__laptop .laptop__base::after { content: ""; position: absolute; left: 4%; right: 4%; top: 60%; height: 300%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.4), transparent); filter: blur(4px); }
.wk-card__laptop .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.wk-card__phone.phone { position: absolute; z-index: 2; width: calc(var(--lw) * 0.26); left: calc(50cqw + var(--lw) * 0.31); top: calc(50cqh - var(--lw) * 0.23); box-shadow: 0 16px 24px -12px rgb(0 0 0 / 0.55); transition: translate 0.8s var(--ease-out); }
.wk-card__phone .screen img { width: 100%; height: auto; }

.wk-card:hover .wk-card__art, .wk-card:focus-visible .wk-card__art { translate: 0 -4px; }
.wk-card:hover .wk-card__laptop { translate: -4px -6px; rotate: -1.2deg; }
.wk-card:hover .wk-card__phone { translate: 6px -10px; }

.wk-card__info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-inline: 2px; }
.wk-card__name { display: grid; gap: 2px; min-width: 0; }
.wk-card__name h3 { font-size: 19px; letter-spacing: -0.025em; line-height: 1.2; }
.wk-card__name span { font-size: 13.5px; color: var(--grey-5); line-height: 1.4; }
.wk-card--lg .wk-card__name h3, .wk-card--md .wk-card__name h3 { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -0.04em; }
.wk-card--lg .wk-card__name span, .wk-card--md .wk-card__name span { font-size: 14.5px; }
.wk-card__pages {
  flex: none; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 4px 11px 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--grey-7);
}
.wk-card__pages::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px var(--line); }
/* the smaller cards: name, then type and pages underneath */
.wk-card:not(.wk-card--lg):not(.wk-card--md) .wk-card__art { flex: none; }
.wk-card:not(.wk-card--lg):not(.wk-card--md) .wk-card__info { flex-direction: column; gap: 8px; }
.wk-card__desc { font-size: 15px; color: var(--grey-7); max-width: 52ch; padding-inline: 2px; margin-top: -6px; }

/* Filtered: a plain, even grid (work.js sets data-cols) */
.wk-grid[data-cols] .wk-card { grid-column: span 6; }
.wk-grid[data-cols="3"] .wk-card { grid-column: span 4; }
.wk-grid[data-cols] .wk-card__art { aspect-ratio: 16 / 11; --lw: min(66cqw, 98cqh); border-radius: var(--radius-l); }
.wk-grid[data-cols="3"] .wk-card__art { aspect-ratio: 4 / 3; --lw: min(70cqw, 100cqh); }
.wk-grid[data-cols="3"] .wk-card__name h3 { font-size: 22px; }
.wk-grid[data-cols] .wk-card .wk-card__art { flex: none; }
.wk-grid[data-cols] .wk-card .wk-card__info { flex-direction: row; gap: 12px; }
.wk-grid[data-cols="3"] .wk-card__desc { display: none; }

@media (max-width: 1100px) {
  .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-card, .wk-card--md, .wk-grid[data-cols] .wk-card, .wk-grid[data-cols="3"] .wk-card { grid-column: span 1; }
  .wk-card--lg { grid-column: 1 / -1; }
  .wk-card--lg .wk-card__art { aspect-ratio: 16 / 9; }
  .wk-grid[data-cols] .wk-card__art, .wk-grid[data-cols="3"] .wk-card__art { aspect-ratio: 4 / 3; }
  .wk-card:not(.wk-card--lg):not(.wk-card--md) .wk-card__art { border-radius: var(--radius-l); }
  .wk-card__name h3 { font-size: 21px; }
}
@media (max-width: 640px) {
  .wk-grid { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .wk-card--lg { grid-column: auto; }
  .wk-card__art, .wk-card--lg .wk-card__art, .wk-grid[data-cols] .wk-card__art { aspect-ratio: 4 / 3.1; }
  .wk-card__art { border-radius: var(--radius-m) !important; }
  .wk-bar { gap: 20px; }
  .wk-filter { width: 100%; gap: 2px; }
  .wk-filter button { flex: 1 0 auto; justify-content: center; padding: 9px 10px; font-size: 13.5px; }
  .wk-filter small { display: none; }
  /* the smaller cards: name, then type and pages underneath */
.wk-card:not(.wk-card--lg):not(.wk-card--md) .wk-card__art { flex: none; }
.wk-card:not(.wk-card--lg):not(.wk-card--md) .wk-card__info { flex-direction: column; gap: 8px; }
.wk-card__desc { font-size: 14.5px; }
}

/* ---------- Brand pieces around the devices (copied from home.css, .wpop / .wp-*) ----------
   The same pops as the home page work cards. Sizes are in em off the card art's
   width (a size container), so each piece keeps the scale of the devices. They only
   show in the default All layout: hidden when the grid is filtered, and on phones
   each card keeps its one data-sm piece. */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../projects/gosweet/fonts/Rubik.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../projects/gosweet/fonts/PlusJakartaSans.woff2) format("woff2"); }
.wp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wpop {
  position: absolute; z-index: 4; left: var(--x); top: var(--y); width: var(--w, auto);
  font-size: clamp(6px, 1.3cqw, 9.5px); line-height: 1.3; letter-spacing: 0; pointer-events: none;
  filter: drop-shadow(0 0.25em 0.3em rgb(10 10 20 / 0.16)) drop-shadow(0 1.6em 1.8em rgb(10 10 20 / 0.26));
}
.wpop > * { display: block; rotate: var(--r, 0deg); animation: wpop-float var(--d, 3.2s) ease-in-out infinite alternate; }
.wpop:nth-of-type(odd) > * { animation-delay: -1.4s; }
@keyframes wpop-float { from { translate: 0 0.4em; } to { translate: 0 -0.6em; } }
.wpop img { display: block; width: 100%; }

/* PATCH: enamel badge, business card, ambassadors chip */
.wp-stk { aspect-ratio: 1; }
.wp-stk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wp-stk__key { fill: none; stroke: #111318; stroke-width: 1.1; opacity: 0.9; }
.wp-stk__ring { transform-box: view-box; transform-origin: 100px 100px; animation: wp-spin 48s linear infinite; fill: #111318; }
.wp-stk__ring text { font-family: "Montserrat", var(--font); font-weight: 800; font-size: 13.5px; letter-spacing: 0.1em; }
.wp-stk__a { fill: #111318; }
@keyframes wp-spin { to { transform: rotate(360deg); } }
.wp-bc { aspect-ratio: 240.9 / 155.9; border-radius: 2px; overflow: hidden; background: #1b1c1c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.1); }
.wp-bc img { height: 100%; object-fit: cover; }
.wp-patch-chip { display: grid !important; justify-items: start; gap: 0.5em; padding: 1.2em 1.5em 1.3em; border-radius: 1.3em; background: #b3dd03; color: #111318; font-family: "Montserrat", var(--font); white-space: nowrap; }
.wp-patch-chip strong { font-size: 2.9em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.wp-patch-chip span { font-size: 0.95em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }

/* Birth-hood: package-finder result, scalloped sticker, sparkle */
.wp-bh-card { padding: 1.3em 1.3em 1.4em; border-radius: 1.5em; background: #fff; color: #111; }
.wp-bh-card__eye { display: block; font-size: 0.8em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #b83f93; }
.wp-bh-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; margin-top: 0.5em; }
.wp-bh-card__head b { font-size: 1.75em; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.wp-bh-card__head i { font-style: normal; font-size: 1.35em; white-space: nowrap; font-weight: 700; color: #b83f93; }
.wp-bh-card__tag { display: block; margin-top: 0.4em; font-size: 0.78em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #767676; }
.wp-bh-card__list { display: grid; gap: 0.4em; margin-top: 0.9em; font-size: 1em; line-height: 1.35; }
.wp-bh-card__list span { display: flex; gap: 0.5em; }
.wp-bh-card__list em { font-style: normal; font-weight: 800; color: #b83f93; }
.wp-bh-card__btn { display: block; margin-top: 1.1em; padding: 0.8em 0.4em; background: #111; color: #fff; border-radius: 2px; text-align: center; font-size: 0.72em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.wp-bh-scallop { position: relative; display: grid !important; gap: 0.25em; padding: 1.7em 2em 1.8em; color: #111; font-size: 1.15em; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.wp-bh-scallop > span { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5em; }
.wp-bh-scallop > span::before { content: ""; width: 0.55em; height: 0.55em; background: #b83f93; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.wp-bh-scallop::before, .wp-bh-scallop::after {
  content: ""; position: absolute; inset: 0; border-radius: 1.8em; --sr: 0.9em;
  background:
    linear-gradient(var(--f), var(--f)) center / calc(100% - 2 * var(--sr)) calc(100% - 2 * var(--sr)) no-repeat,
    radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) top / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-x,
    radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) bottom / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-x,
    radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) left / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-y,
    radial-gradient(circle var(--sr) at center, var(--f) 99%, #0000) right / calc(2 * var(--sr)) calc(2 * var(--sr)) repeat-y;
}
.wp-bh-scallop::before { --f: #b83f93; transform: translate(0.5em, 0.6em); }
.wp-bh-scallop::after { --f: #fff; }
.wp-bh-spark { display: grid !important; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.25em #f7d4ee; }
.wp-bh-spark svg { width: 58%; height: 58%; fill: #b83f93; animation: wp-twinkle 3s ease-in-out infinite; }
@keyframes wp-twinkle { 50% { transform: scale(0.82) rotate(18deg); } }

/* GoSweet: product card, SAVE roundel, free-delivery progress */
.wp-gs-card { overflow: hidden; border-radius: 1.6em; background: #fff; color: #1a1230; font-family: "Plus Jakarta Sans", var(--font); border: 1px solid #ebe3f7; }
.wp-gs-card__tile { display: block; margin: 0.8em 0.8em 0; aspect-ratio: 1; border-radius: 1.1em; overflow: hidden; background: #faf6ff; }
.wp-gs-card__tile img { height: 100%; object-fit: cover; }
.wp-gs-card__words { display: block; padding: 1em 1.2em 1em; }
.wp-gs-card__words small { display: block; font-size: 0.82em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6478; }
.wp-gs-card__words b { display: block; margin-top: 0.2em; font-size: 1.22em; font-weight: 700; line-height: 1.25; }
.wp-gs-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 1em 1.1em 1.2em; background: #faf8fc; border-top: 1px solid #ebe3f7; }
.wp-gs-card__price { display: grid; gap: 0.2em; }
.wp-gs-card__price strong { font: 700 1.7em/1 "Rubik", var(--font); color: #c2185b; }
.wp-gs-card__price s { font-size: 0.9em; color: #9189a0; }
.wp-gs-card__add { padding: 0.85em 1em; border-radius: 0.9em; background: #5c2a9d; color: #fff; font-size: 1em; font-weight: 700; white-space: nowrap; box-shadow: 0.22em 0.22em 0 #36146a; }
.wp-gs-roundel { display: grid !important; place-content: center; aspect-ratio: 1; border-radius: 50%; background: #e73e80; color: #fff; text-align: center; font: 800 2.7em/1 "Plus Jakarta Sans", var(--font); letter-spacing: -0.02em; box-shadow: 0 0 0 0.16em #fff; }
.wp-gs-roundel small { display: block; margin-bottom: 0.12em; font-size: 0.36em; letter-spacing: 0.12em; text-transform: uppercase; }
.wp-gs-ship { padding: 1.1em 1.3em 1.3em; border-radius: 1.3em; background: #fff; color: #1a1230; font-family: "Plus Jakarta Sans", var(--font); }
.wp-gs-ship__t { display: flex; align-items: center; gap: 0.7em; font-size: 1.15em; font-weight: 600; line-height: 1.3; }
.wp-gs-ship__t svg { flex: none; width: 1.4em; height: 1.4em; fill: #5c2a9d; }
.wp-gs-ship b { color: #5c2a9d; font-weight: 800; }
.wp-gs-ship__bar { position: relative; display: block; height: 0.8em; margin-top: 0.8em; border-radius: 1em; background: #f1e9fb; overflow: hidden; }
.wp-gs-ship__bar i { position: absolute; inset: 0 20% 0 0; border-radius: inherit; background: #5c2a9d; }

/* Nic Pouches: product card, Nic Points tier, strength chip */
.wp-np-card { padding: 0.7em 0.7em 0.9em; border-radius: 1.4em; background: #fff; color: #1d1d1f; font-family: "Archivo", var(--font); }
.wp-np-card__media { position: relative; display: block; aspect-ratio: 1 / 0.88; border-radius: 1em; background: #f4f4f4; }
.wp-np-card__media img { height: 100%; object-fit: contain; padding: 4%; }
.wp-np-pouch { position: absolute; top: 0.7em; right: 0.7em; display: grid; place-items: center; width: 4.4em; height: 2.7em; }
.wp-np-pouch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #fff; stroke: #ffb21a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wp-np-pouch > span { position: relative; display: flex; align-items: baseline; }
.wp-np-pouch b { font-size: 1.1em; font-weight: 700; font-stretch: 88%; }
.wp-np-pouch small { font-size: 0.8em; font-weight: 600; color: #717680; }
.wp-np-card__brand { display: block; margin: 0.7em 0.4em 0; font-size: 0.95em; font-weight: 800; font-stretch: 80%; letter-spacing: 0.07em; text-transform: uppercase; color: #717680; }
.wp-np-card__name { display: block; margin: 0.1em 0.4em 0; font-size: 1.3em; font-weight: 600; }
.wp-np-card__chips { display: flex !important; gap: 0.45em; margin: 0.7em 0.4em 0; }
.wp-np-card__chips i { flex: 1; display: grid; place-items: center; height: 2.4em; border-radius: 0.6em; background: #fafafa; box-shadow: inset 0 0 0 1px #e9eaeb; font-style: normal; font-size: 1em; font-weight: 500; }
.wp-np-card__chips i.on { background: #fff3da; color: #855800; box-shadow: inset 0 0 0 1px #ffb21a; font-weight: 600; }
.wp-np-card__price { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2em 0.4em; margin: 0.8em 0.4em 0; white-space: nowrap; }
.wp-np-card__price small { font-size: 0.9em; color: #717680; }
.wp-np-card__price b { margin: 0 0.15em; font-size: 1.45em; font-weight: 700; font-stretch: 92%; }
.wp-np-card__price em { font-style: normal; font-size: 0.95em; font-weight: 700; color: #106b45; }
.wp-np-tier { border-radius: 1.6em; background: #fff; color: #1d1d1f; font-family: "Archivo", var(--font); }
.wp-np-tier__top { position: relative; display: block; padding: 1.2em 7em 1.1em 1.3em; border-radius: 1.6em 1.6em 0 0; background: linear-gradient(135deg, #fef4e1 0%, #ffe6ac 52%, #cea442 100%); }
.wp-np-tier__top b { display: block; font: 700 2em/1.05 "Bricolage Grotesque", "Archivo", sans-serif; letter-spacing: -0.02em; }
.wp-np-tier__top small { display: block; font-size: 1.1em; font-weight: 600; color: #5e4a19; }
.wp-np-tier__top img { position: absolute; top: -1.8em; right: 0.6em; width: 6.6em; rotate: -9deg; filter: drop-shadow(0 1em 1em rgb(0 30 70 / 0.3)); }
.wp-np-tier__stub { display: grid; gap: 0.6em; padding: 1em 1.3em 1.2em; }
.wp-np-tier__rate { font-size: 1.05em; line-height: 1.35; color: #414651; }
.wp-np-tier__rate b { margin-right: 0.15em; font: 800 2.4em/1 "Bricolage Grotesque", "Archivo", sans-serif; letter-spacing: -0.02em; color: #856823; vertical-align: -0.12em; }
.wp-np-tier__spend { padding-top: 0.6em; border-top: 1px solid #ffe6ac; font-size: 1em; font-weight: 700; }
.wp-np-chip { display: inline-flex !important; align-items: center; gap: 0.8em; padding: 0.85em 1.4em; border-radius: 999px; background: #fff; color: #1d1d1f; font: 400 1.15em/1 "Archivo", var(--font); white-space: nowrap; }
.wp-np-chip b { font-weight: 800; }
.wp-np-meter { display: inline-flex; gap: 0.25em; }
.wp-np-meter i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #d5d7da; }
.wp-np-meter i.on { background: #ffb21a; }

/* VSL Trade: consultation step, app tile, next-day chip */
.wp-vsl-step { padding: 1.3em 1.4em 1.4em; border-radius: 1.6em; background: #fff; color: #0d1110; font-family: "Montserrat", var(--font); }
.wp-vsl-step__pill { display: inline-block; padding: 0.25em 0.85em; border-radius: 99px; background: #43b02a; color: #fff; font-size: 1em; font-weight: 800; }
.wp-vsl-step__bar { display: block; height: 0.6em; margin: 0.9em 0 1em; border-radius: 99px; background: #e6ebe6; overflow: hidden; }
.wp-vsl-step__bar i { display: block; width: 25%; height: 100%; border-radius: inherit; background: #43b02a; }
.wp-vsl-step b { display: block; font-size: 1.5em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.wp-vsl-step__opt { display: flex; align-items: center; gap: 0.6em; margin-top: 0.8em; padding: 0.7em 0.8em; border-radius: 0.8em; background: #edf7e9; box-shadow: inset 0 0 0 1.5px #43b02a; font-size: 0.95em; font-weight: 600; line-height: 1.3; }
.wp-vsl-step__opt i { flex: none; width: 1.1em; height: 1.1em; border-radius: 50%; border: 0.32em solid #43b02a; background: #fff; }
.wp-vsl-app { display: block; }
.wp-vsl-app__ic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 23%; background: radial-gradient(100% 120% at 20% 0%, #5fc444 0%, #43b02a 45%, #2a7a1f 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.wp-vsl-app__ic svg { width: 54%; height: 54%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wp-vsl-chip { display: flex !important; align-items: center; gap: 1em; padding: 0.9em 1.5em 0.9em 0.9em; border-radius: 1.2em; background: #fff; color: #0d1110; font-family: "Montserrat", var(--font); white-space: nowrap; }
.wp-vsl-chip__ic { flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 0.9em; background: #43b02a; }
.wp-vsl-chip__ic svg { width: 1.8em; height: 1.8em; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wp-vsl-chip b { display: block; font-size: 1.25em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.wp-vsl-chip span:last-child { font-size: 0.9em; font-weight: 500; line-height: 1.35; color: #5b645b; }

/* Birdie Blooms: shop card, B sticker, seasonal colour chip */
.wp-bb-card { display: grid !important; gap: 0.7em; padding: 0.8em 0.8em 1.1em; border-radius: 1em; background: #e0662c; color: #2b1a16; font-family: "Newsreader", Georgia, serif; }
.wp-bb-card__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.5em; }
.wp-bb-card__img img { height: 100%; object-fit: cover; }
.wp-bb-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.wp-bb-card__row b { font-size: 1.55em; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.wp-bb-card__row span { font-size: 1.3em; }
.wp-bb-card__btn { justify-self: start; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.8em 1.1em 0.6em; border-radius: 99px; background: #2b1a16; color: #e0662c; font: 700 0.85em/1 "Josefin Sans", var(--font); letter-spacing: 0.12em; text-transform: uppercase; }
.wp-bb-card__btn svg { width: 1.2em; height: 1.2em; margin-top: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wp-bb-sticker { position: relative; display: grid !important; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #e0662c; color: #2b1a16; border: 2px solid #2b1a16; box-shadow: 0.4em 0.5em 0 #2b1a16; }
.wp-bb-sticker__ring { position: absolute; inset: 5%; width: 90%; height: 90%; animation: wp-spin 22s linear infinite; }
.wp-bb-sticker__ring text { font: 700 13px "Josefin Sans", var(--font); letter-spacing: 0.24em; fill: currentColor; }
.wp-bb-b { width: 26%; aspect-ratio: 597 / 817; background: currentColor; -webkit-mask: url("../projects/birdie-blooms/monogram.svg") center / contain no-repeat; mask: url("../projects/birdie-blooms/monogram.svg") center / contain no-repeat; }
.wp-bb-chip { display: inline-flex !important; align-items: center; gap: 0.9em; padding: 0.8em 1.4em 0.7em 0.9em; border-radius: 99px; background: #fbf7f0; color: #2b1a16; border: 2px solid #2b1a16; box-shadow: 0.35em 0.4em 0 #2b1a16; font: 700 1em/1 "Josefin Sans", var(--font); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.wp-bb-chip__dots { display: flex; gap: 0.4em; margin-top: -0.2em; }
.wp-bb-chip__dots i { width: 1.3em; height: 1.3em; border-radius: 50%; border: 2px solid #2b1a16; background: var(--c); }
.wp-bb-chip__dots i.on { box-shadow: 0 0 0 2px #fbf7f0, 0 0 0 4px #2b1a16; }
.wp-bb-chip > span:last-child { display: grid; gap: 0.35em; }
.wp-bb-chip small { font-size: 0.75em; opacity: 0.7; }
.wp-bb-chip b { font-size: 1.15em; }

/* SCCC Heritage: decade card, cricket ball, years tag */
.wp-sc-card { position: relative; aspect-ratio: 1; overflow: hidden; background: #222; }
.wp-sc-card img { height: 100%; object-fit: cover; scale: 1.1; }
.wp-sc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent 70%); }
.wp-sc-card__slip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 34%; background: #1a472a; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); }
.wp-sc-card__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.2em; color: #fff; }
.wp-sc-card__txt b { display: block; font: 400 1.45em/1.08 "Archivo Black", "Archivo", sans-serif; }
.wp-sc-card__txt span { display: block; margin-top: 0.3em; font: 0.95em/1.3 "Archivo", sans-serif; opacity: 0.9; }
.wp-sc-ball { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 0.3em solid #fff; background: #fff; }
.wp-sc-ball img { height: 100%; object-fit: cover; animation: wp-spin 30s linear infinite; }
.wp-sc-tag { display: grid !important; justify-items: start; gap: 0.15em; padding: 1em 1.4em 1.1em; background: #f8f6f3; color: #8b1538; border-left: 0.45em solid #1a472a; }
.wp-sc-tag small { font: 600 0.8em/1 "Archivo", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #222; opacity: 0.7; }
.wp-sc-tag b { font: 400 3.2em/1 "Archivo Black", "Archivo", sans-serif; letter-spacing: -0.01em; }
.wp-sc-tag span { font: italic 1.05em/1.2 Georgia, serif; color: #222; }

/* Beetle Eyes: taped polaroid, No. 9 stamp, Curious Magpie label */
.wp-be-polaroid { position: relative; padding: 0.5em 0.5em 0; background: #fff; border-radius: 2px; }
.wp-be-polaroid img { aspect-ratio: 1; object-fit: cover; filter: saturate(0.9) contrast(1.02); }
.wp-be-polaroid span { display: block; padding: 0.5em 0 0.7em; text-align: center; font: italic 1.05em/1.2 "Fraunces", Georgia, serif; color: #5a3a32; }
.wp-be-polaroid::before, .wp-be-polaroid::after {
  content: ""; position: absolute; top: -0.7em; z-index: 2; width: 42%; height: 1.7em;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.14) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, rgb(224 196 199 / 0.5) 0%, rgb(224 196 199 / 0.92) 14%, rgb(224 196 199 / 0.92) 86%, rgb(224 196 199 / 0.5) 100%);
  box-shadow: 0 0.2em 0.5em rgb(28 29 24 / 0.18);
}
.wp-be-polaroid::before { left: -14%; rotate: -24deg; }
.wp-be-polaroid::after { right: -14%; rotate: 24deg; }
.wp-be-stamp { container-type: inline-size; background: #e0c4c7; color: #5a3a32; border: 1px solid rgb(184 122 130 / 0.35); text-align: center; }
.wp-be-stamp strong { display: block; padding: 13cqw 6cqw 0; margin-bottom: 0.3em; font: 600 21cqw/1 "Fraunces", Georgia, serif; letter-spacing: -0.01em; }
.wp-be-stamp span { display: block; padding: 0 6cqw 12cqw; font: italic 300 11cqw/1.35 "Fraunces", Georgia, serif; color: #3d2622; }
.wp-be-tag { padding: 0.8em 1.3em 0.9em; background: #e0c4c7; color: #5a3a32; border: 1px solid rgb(184 122 130 / 0.35); font: italic 1.35em/1.2 "Fraunces", Georgia, serif; white-space: nowrap; }
.wp-be-tag strong { display: block; margin-bottom: 0.25em; font: normal 600 0.47em/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }


.wpop { transition: opacity 0.45s var(--ease-out) 0.25s, visibility 0s linear 0s; }
.wk-grid[data-cols] .wpop { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s linear 0.25s; }
@media (max-width: 640px) {
  .wpop { font-size: calc(clamp(3.5px, 1.3cqw, 8px) * var(--sf, 1)); left: var(--sx, var(--x)); top: var(--sy, var(--y)); }
  .wpop:not([data-sm]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wpop > *, .wp-stk__ring, .wp-bb-sticker__ring, .wp-sc-ball img, .wp-bh-spark svg { animation: none; }
}

/* ---------- Print + brand: text left, one flat-lay of real pieces right ----------
   The group is a size container with a fixed ratio, so every piece is placed
   and sized in cqw and the whole lay-up scales as one. Pieces sit at true
   relative sizes: A4 covers 23cqw wide, landscape covers 34cqw, and so on. */
.wk-print { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 5vw, 72px); }
.work .contact-band { margin-top: clamp(40px, 5vw, 72px); }
.work .site-foot { margin-top: 0; } /* the contact band ends <main>, so the footer sits right under it */

.wk-print__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.wk-print__text { display: grid; gap: 18px; justify-items: start; }
.wk-print__text h2 { font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -0.05em; line-height: 1; }
.wk-print__text p { color: var(--grey-7); font-size: 17px; max-width: 40ch; }
.wk-print__text .btn { margin-top: 8px; }

.wk-group {
  --shadow-piece: 0 1px 1px rgb(30 24 14 / 0.08), 0 6px 10px -4px rgb(30 24 14 / 0.18), 0 22px 36px -18px rgb(30 24 14 / 0.34);
  position: relative; display: block; aspect-ratio: 1.2; container-type: size; isolation: isolate;
  transition: translate 0.6s var(--ease-spring);
}
.wk-group:hover { translate: 0 -6px; }

/* one tidy highlighter swipe behind the pile */
.wk-group__swipe {
  position: absolute; left: 1cqw; right: 1cqw; top: 31cqw; height: 25cqw; z-index: 0;
  border-radius: 1.4cqw 3cqw 2cqw 3.4cqw; background: var(--hl-yellow); rotate: -3deg; transform-origin: left center;
}

.wk-lay {
  position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); aspect-ratio: var(--ar);
  z-index: var(--z, 1); rotate: var(--r, 0deg);
  transition: rotate 0.7s var(--ease-spring), translate 0.7s var(--ease-spring);
}
.wk-lay > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0.4cqw; box-shadow: var(--shadow-piece); background: #fff; }
.wk-group:hover .wk-lay { translate: calc(var(--dx, 0) * 1cqw) calc(var(--dy, 0) * 1cqw); rotate: calc(var(--r, 0deg) * 1.35); }
.wk-group:hover .wk-lay--lead { rotate: 0deg; }

/* Whitley: just the spread, cropped out of its mock-up */
.wk-lay--crop { overflow: hidden; border-radius: 0.4cqw; box-shadow: var(--shadow-piece); background: #fff; }
.wk-lay--crop > img { width: 141.75%; height: auto; max-width: none; margin: -11.65% 0 0 -21.36%; box-shadow: none; border-radius: 0; }

/* Yalla: a tin, so no paper edge */
.wk-lay--tin > img { border-radius: 50%; box-shadow: none; background: none; filter: drop-shadow(0 1.6cqw 1.4cqw rgb(30 24 14 / 0.32)); }

@media (max-width: 900px) {
  .wk-print__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wk-print__text p { max-width: 46ch; }
  .wk-group:hover { translate: none; }
}
@media (max-width: 640px) {
  .wk-print__text p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-group, .wk-lay { transition: none; }
}

/* ---------- Websites: the stacked brand cards from the home page (copied from home.css) ---------- */
.work-stack { display: grid; gap: 24px; }
.feature {
  position: sticky; top: calc(96px + var(--k, 0) * 14px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px); align-items: center;
  min-height: min(620px, 78vh); padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-l); overflow: hidden;
  background: var(--brand); color: var(--brand-ink); text-decoration: none; isolation: isolate;
  box-shadow: 0 -20px 60px -30px rgb(24 24 26 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  transform-origin: 50% 0;
}
.feature__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; opacity: 0.8; }
.feature__tag b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pen); color: #18181a; font-size: 11px; }
.feature h3 { font-size: clamp(44px, 6vw, 92px); letter-spacing: -0.055em; margin-top: 10px; }
.feature p { margin-top: 12px; font-size: 17px; opacity: 0.8; max-width: 38ch; }
.feature__link { display: inline-flex; gap: 8px; margin-top: 26px; padding: 13px 22px; border-radius: 999px; background: var(--pen); color: #18181a; font-weight: 600; font-size: 15px; transition: gap 0.3s var(--ease-spring); }
.feature:hover .feature__link { gap: 14px; }
.feature__visual { position: relative; aspect-ratio: 16 / 11; }
.feature__glow { position: absolute; inset: 0 4% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pen) 55%, transparent), transparent); filter: blur(14px); }
.feature__laptop { position: absolute; left: 0; top: 8%; width: 84%; transition: translate 0.7s var(--ease-out), rotate 0.7s var(--ease-out); }
.feature__laptop .screen img { height: 100%; object-fit: cover; object-position: top; }
.feature__phone .screen img { height: auto; } /* thumbnails carry width/height attributes; keep their own aspect */
.feature__phone { position: absolute !important; right: 2%; bottom: 0; width: 22% !important; transition: translate 0.7s var(--ease-out), rotate 0.7s var(--ease-out); }
.feature:hover .feature__laptop { translate: -8px -8px; rotate: -1.5deg; }
.feature:hover .feature__phone { translate: 10px -14px; rotate: 3deg; }
@media (max-width: 860px) {
  .feature { position: sticky; top: calc(84px + var(--k, 0) * 10px); grid-template-columns: 1fr; min-height: 0; gap: 18px; padding: 24px 22px; }
  .feature h3 { font-size: clamp(40px, 12vw, 60px); margin-top: 6px; }
  .feature p { font-size: 15px; margin-top: 8px; }
  .feature__link { margin-top: 16px; padding: 11px 18px; font-size: 14px; }
  .feature__visual { aspect-ratio: 16 / 10.5; }
}


/* Phones: the sticky cards just stack (no scrub, see work.js); keep each card cheap to paint so a
   fast flick never shows half-rastered tiles: one small static shadow, no blurred glow, paint contained */
@media (max-width: 860px) {
  .feature { box-shadow: 0 -10px 24px -18px rgb(24 24 26 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.06); contain: paint; }
  .feature__glow { filter: none; }
}


/* Phones: sticky stack is back; cards three deep behind the top one are hidden (see home.js / work.js) */
.work-stack .feature.is-buried { visibility: hidden; }

/* What's in my Fridge card: three phones in a tight fan; bigger on phones so they fill the card */
@media (max-width: 860px) {
  .feature__visual:has(.wf-fan) { aspect-ratio: 1 / 0.93; margin-inline: -6px; }
  .wf-fan .phone:nth-child(1) { left: 5% !important; top: 11% !important; width: 31% !important; }
  .wf-fan .phone:nth-child(2) { left: 64% !important; top: 11% !important; width: 31% !important; }
  .wf-fan .phone:nth-child(3) { left: 31.5% !important; top: 1% !important; width: 37% !important; }
}
/* performance: the glow is already a soft radial gradient, the blur filter only cost repaints */
.feature__glow { filter: none !important; }
/* the card behind dims with a cheap overlay instead of a scrubbed brightness filter (that repainted the whole card every frame) */
.feature { --dim: 0; }
@media (min-width: 861px) { .feature { will-change: transform; } .feature::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: #000; opacity: var(--dim); pointer-events: none; } }

/* --dim only matters on the card itself: not inherited, so scrubbing it doesn't restyle the whole card */
@property --dim { syntax: '<number>'; inherits: false; initial-value: 0; }