/* ============ Design tokens ============ */
:root {
  /* Colors */
  --color-text: #2C040D;
  --color-bg: #F8F3E0;
  --color-accent: #5C0015;    /* burgundy */
  --color-accent-2: #80AEE8;  /* blue */
  --color-dark: #150A0D;      /* dark bands (Vestige) */

  /* Work cards */
  --radius-card: clamp(20px, 2.2vw, 32px);

  /* Softened sparkle colors — mixed with the background so they don't shout */
  --star-blue: color-mix(in srgb, var(--color-accent-2) 80%, var(--color-bg));
  --star-bordo: color-mix(in srgb, var(--color-accent) 70%, var(--color-bg));
  --star-soft: color-mix(in srgb, var(--color-accent) 40%, var(--color-bg));

  /* Fonts */
  --font-logo: "Fascinate", system-ui, sans-serif;
  --font-main: "Open Sans", system-ui, sans-serif;

  /* Grid — 1440: 12 cols, margin 150, gutter 32 */
  --cols: 12;
  --margin: 150px;
  --gutter: 32px;
  --container: 1440px;
}

@media (max-width: 1439px) { :root { --margin: 80px; --gutter: 24px; } }
@media (max-width: 1023px) { :root { --cols: 8; --margin: 40px; --gutter: 20px; } }
@media (max-width: 767px)  { :root { --cols: 4; --margin: 20px; --gutter: 16px; } }

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;            /* hide the scrollbar, scrolling still works */
}
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
main { overflow-x: clip; }   /* side flowers peek past the screen edge; never let them widen the page */
img { display: block; width: auto; height: auto; }   /* width/height attributes only reserve space; CSS rules keep the real size */

/* ============ Nav ============ */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.4vw, 64px);
  padding: clamp(20px, 3.4vw, 48px) var(--margin) 0;
}
.nav__link {
  position: relative;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 0;
}
/* Hover: a hand-drawn burgundy stroke draws itself under the word, and rubs out on leave */
.nav__line {
  position: absolute;
  left: -6%;
  bottom: -5px;
  width: 112%;
  height: 10px;
  overflow: visible;
  pointer-events: none;
}
.nav__line path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;
  transition: stroke-dashoffset .35s ease-in;
}
.nav__link:hover .nav__line path,
.nav__link:focus-visible .nav__line path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s cubic-bezier(.3, .6, .3, 1);
}

/* Logo: letters hop one after another on hover */
.logo {
  font-family: var(--font-logo);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1;
  color: var(--color-accent);
  white-space: nowrap;
}
.logo span span { display: inline-block; }
.logo:hover span span,
.logo:focus-visible span span {
  animation: hop .6s cubic-bezier(.3, .7, .4, 1) calc(var(--i) * 45ms) both;
}
@keyframes hop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-9px) rotate(-6deg); color: var(--color-accent-2); }
  70%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: calc(100svh - 28px);   /* leaves the next band peeking */
  display: grid;
  place-items: center;
  padding: clamp(110px, 12vw, 160px) var(--margin) clamp(120px, 11vw, 170px);
  /* Clip only the sides: flowers may hang down into the next section, so there's no seam */
  overflow-x: clip;
  overflow-y: visible;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px;
}

/* Hand-drawn flower above the eyebrow */
.hero__content .hero__doodle {
  position: static;
  width: clamp(40px, 3.6vw, 54px);
  margin-bottom: 20px;
}

.hero__eyebrow {
  margin: 0 0 18px;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero__text {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  max-width: 470px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(32px, 3vw, 44px);
  --pad-x: 36px;
  display: inline-flex;
  align-items: center;
  padding: 18px var(--pad-x);
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  transition: color .3s ease .25s, padding .35s ease, transform .3s ease;
}
/* Blue fill rises from the bottom with a soft wave on top.
   ::before = main wave (#80AEE8), ::after = lighter wave behind it for depth.
   Wave colors are inside the data-URIs — update them if the palette changes. */
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 14px);
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(.5, 0, .25, 1);
  background-repeat: repeat-x, no-repeat;
  background-size: 64px 14px, 100% 100%;
  background-position: 0 0, 0 13px;
}
.btn::before {
  z-index: -1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cpath d='M0 7C16 0 16 0 32 7S48 14 64 7V14H0Z' fill='%2380AEE8'/%3E%3C/svg%3E"),
    linear-gradient(#80AEE8, #80AEE8);
  animation: wave 1.6s linear infinite paused;
}
.btn::after {
  z-index: -2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cpath d='M0 7C16 0 16 0 32 7S48 14 64 7V14H0Z' fill='%23BCD0E4'/%3E%3C/svg%3E"),
    linear-gradient(#BCD0E4, #BCD0E4);
  transition-duration: .6s;
  animation: wave-back 2.2s linear infinite paused;
}
.btn:hover::before,
.btn:hover::after { transform: translateY(-14px); animation-play-state: running; }
.btn:hover::after { transition-delay: 0s; }
.btn:hover::before { transition-delay: .06s; }

/* The wave crest keeps drifting sideways while the fill rises */
@keyframes wave      { to { background-position: 64px 0, 0 13px; } }
@keyframes wave-back { to { background-position: -64px 0, 0 13px; } }
.btn:hover { color: var(--color-text); }

/* Once the fill reaches the top, a star opens up next to the text.
   Side padding shrinks by the same amount, so the button keeps its width. */
.btn__star {
  width: 0;
  height: 1.1em;
  margin-left: 0;
  color: var(--color-bg);
  opacity: 0;
  transform: scale(.2) rotate(-90deg);
  transition: width .35s ease, margin .35s ease, transform .2s ease, opacity .15s ease;
}
.btn:hover {
  padding-inline: calc(var(--pad-x) - .85em);
  transition: color .3s ease .25s, padding .4s ease .5s, transform .3s ease;
}
.btn:hover .btn__star {
  width: 1.1em;
  margin-left: .6em;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: width .4s ease .5s, margin .4s ease .5s,
              transform .5s cubic-bezier(.3, .7, .4, 1.4) .6s, opacity .25s ease .6s;
}
.btn:active { transform: scale(.98); }

/* Small star sitting on the word "shine" */
.shine { position: relative; white-space: nowrap; }
.shine__star {
  position: absolute;
  top: -.12em;
  right: -.42em;
  width: .34em;
  height: .34em;
  color: var(--star-blue);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent-2) 50%, transparent));
  animation: twinkle 2.8s ease-in-out .4s infinite;
}
.hero.is-paused .shine__star { animation-play-state: paused; }

/* Flowers — desktop: pinned to the left and right edges */
.hero__flower {
  position: absolute;
  z-index: 1;
  top: 50%;
  pointer-events: none;
  user-select: none;
}
.hero__flower--left  { left: 0;  height: min(45vw, 86%); aspect-ratio: 432 / 752; transform: translateY(-46%); }
.hero__flower--right { right: 0; height: min(43vw, 84%); aspect-ratio: 493 / 721; transform: translateY(-54%); }

/* Entrance: flowers drop in from above, spinning, once their SVG is loaded */
.flower__move {
  width: 100%;
  height: 100%;
  transition: transform 1.8s cubic-bezier(.22, 1, .36, 1);
}
.hero__flower--left  .flower__move { transform-origin: -16% 38.5%; }
.hero__flower--right .flower__move { transform-origin: 93% 50%; transition-delay: .15s; }
.hero__flower--left:not(.is-in)  .flower__move { transform: translateY(-130vh) rotate(-220deg); }
.hero__flower--right:not(.is-in) .flower__move { transform: translateY(-130vh) rotate(220deg); }

/* Turns with scroll around the flower's center (set from main.js) */
.flower__move svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(var(--rot, 0deg));
}
.hero__flower--left  .flower__move svg { transform-origin: -16% 38.5%; }
.hero__flower--right .flower__move svg { transform-origin: 93% 50%; }

/* Petals spring from the center when the flower is hovered */
.flower__move path {
  pointer-events: visiblePainted;
  transform-box: view-box;
}
.hero__flower--left  path { transform-origin: -70px 290px; }
.hero__flower--right path { transform-origin: 460px 360px; }
.hero__flower.is-springing path {
  animation: spring .9s cubic-bezier(.3, .6, .35, 1) calc(var(--p, 0) * 40ms) both;
}
@keyframes spring {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.045); }
  50%  { transform: scale(.985); }
  72%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}


/* Transition line to the works */
.hero__next {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(32px, 3.6vw, 52px);
  transform: translateX(-50%);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  white-space: nowrap;
  margin: 0;
}

/* ============ Hand-drawn doodles ============ */
/* They draw themselves after the flowers land, then sway slowly */
.doodle {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 37 / 36;
  pointer-events: none;
  transform: rotate(var(--r, 0deg));
}
.doodle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: sway 7s ease-in-out infinite alternate;
}
.doodle path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;   /* a hair past 1, so the round caps don't show as dots */
}
.doodle.is-in path {
  transition: stroke-dashoffset .5s ease-out calc(var(--delay) + var(--p) * .22s);
  stroke-dashoffset: 0;
}
@keyframes sway {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}
.hero.is-paused .doodle svg { animation-play-state: paused; }

/* ============ Sparkles ============ */
.sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.sparkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  animation: twinkle var(--d, 3.5s) ease-in-out var(--delay, 0s) infinite;
  will-change: opacity, transform;
}
.sparkle--blue  { color: var(--star-blue);  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-accent-2) 45%, transparent)); }
.sparkle--bordo { color: var(--star-bordo); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-accent) 25%, transparent)); }
.sparkle--soft  { color: var(--star-soft);  filter: blur(1.5px); }

@keyframes twinkle {
  0%, 100% { opacity: .2;  transform: scale(.78) rotate(0deg); }
  50%      { opacity: .85; transform: scale(1)   rotate(10deg); }
}

/* Paused when their section is off-screen (toggled in main.js) */
.hero.is-paused .sparkle,
.work.is-paused .sparkle,
.services.is-paused .sparkle { animation-play-state: paused; }

/* Side margins are too narrow on phones — keep only the stars around the heading */
@media (max-width: 767px) {
  .work .sparkle--side,
  .services .sparkle--side { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle, .shine__star { animation: none; opacity: .6; }
  .doodle svg { animation: none; }
  .doodle path { stroke-dashoffset: 0 !important; transition: none !important; }
  .hero__flower .flower__move { transform: none !important; transition: none; }
  .hero__flower.is-springing path, .side-flower.is-springing path { animation: none; }
  .btn, .btn:hover, .btn::before, .btn::after, .btn__star, .btn:hover .btn__star { transition: none; animation: none; }
  .logo:hover span span { animation: none; }
  .nav__line path { transition: none; }
}

/* ============ Work ============ */
.work {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 128px) var(--margin) clamp(96px, 10vw, 160px);
}

.work__head,
.work .row { position: relative; z-index: 1; }   /* cards sit above the sparkles */
.work__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.work__title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.work__sub {
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}

/* One row per project: small tiles column + big card (3x wider) */
.row {
  display: grid;
  /* Big card keeps the cover's 16:9, tiles fill the column height */
  grid-template-columns: 1fr 3.8fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--gutter);
}
.row + .row { margin-top: var(--gutter); }
.row--flip { grid-template-columns: 3.8fr 1fr; }
.row .card-big { grid-column: 2; grid-row: 1 / span 2; }
.row--flip .card-big { grid-column: 1; }
.row--flip .tile { grid-column: 2; }

/* ---------- Big card: cover fills the whole card ---------- */
.card-big {
  --fill: var(--color-accent-2);
  --ink: var(--color-text);
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: #111;
  color: var(--color-bg);
}
.card-big--bordo { --fill: var(--color-accent); --ink: var(--color-bg); }
.card-big__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.card-big:hover .card-big__img { transform: scale(1.05); }

/* Color fill rises from the bottom with a wave on top, like the "Contact me" button */
.card-big__fill {
  position: absolute;
  z-index: 1;
  inset: 0 0 -20px;   /* extra 20px below, so the card stays covered when lifted */
  background: var(--fill);
  transform: translateY(calc(100% + 20px));
  transition: transform .75s cubic-bezier(.5, 0, .25, 1);
}
.card-big__fill::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -19px;
  height: 20px;
  background: var(--fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 20'%3E%3Cpath d='M0 10C22 0 23 0 45 10S68 20 90 10V20H0Z'/%3E%3C/svg%3E") 0 0 / 90px 20px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 20'%3E%3Cpath d='M0 10C22 0 23 0 45 10S68 20 90 10V20H0Z'/%3E%3C/svg%3E") 0 0 / 90px 20px repeat-x;
  animation: card-wave 1.8s linear infinite paused;
}
.card-big:hover .card-big__fill { transform: translateY(-20px); }
.card-big:hover .card-big__fill::before { animation-play-state: running; }
@keyframes card-wave { to { -webkit-mask-position: 90px 0; mask-position: 90px 0; } }

/* Description: appears at the top once the color has filled the card */
.card-big__desc {
  position: absolute;
  z-index: 2;
  top: clamp(22px, 2.6vw, 40px);
  left: clamp(22px, 2.6vw, 40px);
  right: clamp(22px, 2.6vw, 40px);
  max-width: 620px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .4s ease;
}
.card-big:hover .card-big__desc {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease .45s, transform .6s cubic-bezier(.22, 1, .36, 1) .45s;
}

/* Bottom bar: name + tags stay put, arrow pops in on hover */
.card-big__bar {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 1.8vw, 26px);
  right: clamp(16px, 1.8vw, 26px);
  bottom: clamp(16px, 1.8vw, 26px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-big__name,
.card-big__tag {
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
/* Soft shadow so light pills still read on light covers (Feral) */
.card-big__tag { box-shadow: 0 0 0 1px rgb(44 4 13 / .12), 0 4px 14px rgb(44 4 13 / .18); }
.card-big__name { background: var(--color-text); color: var(--color-bg); font-weight: 600; }
.card-big--bordo:hover .card-big__name { background: #1a0207; transition: background .3s ease .4s; }
.card-big__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.card-big__arrow {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(48px, 4.4vw, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-bg);
  opacity: 0;
  transform: scale(.4) rotate(-45deg);
  transition: opacity .2s ease, transform .3s ease;
}
.card-big--bordo .card-big__arrow { background: var(--color-bg); color: var(--color-accent); }
.card-big__arrow svg { width: 42%; height: 42%; transition: transform .3s ease; }
.card-big:hover .card-big__arrow {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease .55s, transform .5s cubic-bezier(.3, .7, .4, 1.5) .55s;
}
.card-big__arrow:hover svg { transform: translateX(3px); }

/* ---------- Small tiles ---------- */
.tile {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tile--bordo { background: var(--color-accent); }
.tile--blue  { background: var(--color-accent-2); }

/* Hand-drawn flower: wiggles on hover */
.tile__flower { width: 46%; transition: transform .6s cubic-bezier(.3, .7, .4, 1.5); }
.tile--bordo .tile__flower { filter: brightness(0) invert(95%) sepia(10%) saturate(500%) hue-rotate(350deg); }
.tile:hover .tile__flower { transform: rotate(-24deg) scale(1.08); }

/* Vestige trick: a torn note taped down; only its free corner curls on hover.
   Sizes use cqi so the note scales with the tile. */
.tile--paper {
  container-type: inline-size;
  background: #0d0b0b url("assets/work/vestige-noise.webp") center / cover;
}
@property --curl { syntax: "<length>"; inherits: true; initial-value: 0px; }
.paper__note {
  --curl: 0px;
  position: relative;
  width: 80%;
  transform: rotate(-3deg);
  filter: drop-shadow(0 4.5cqi 7cqi rgb(0 0 0 / .55));
  transition: --curl .5s cubic-bezier(.3, .7, .4, 1.2);
}
.tile--paper:hover .paper__note { --curl: 15cqi; }
.paper__cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--curl)), calc(100% - var(--curl)) 100%, 0 100%);
}
.paper__fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--curl);
  height: var(--curl);
  /* back side of the paper */
  background: linear-gradient(to top left, transparent 50%, #cfc7b3 50%, #f4efe2 100%);
  filter: drop-shadow(-1cqi -1cqi 1.3cqi rgb(0 0 0 / .28));
  pointer-events: none;
}
.paper__scrap {
  padding: 12.5cqi 8.5cqi 10cqi;
  background: #ece6d6 url("assets/work/v-paper.webp") center / cover;
  color: #0d0b0b;
  /* torn top and bottom edges */
  clip-path: polygon(0.0% 1.6%, 4.5% 2.0%, 9.1% 3.2%, 13.6% 1.6%, 18.2% 1.8%, 22.7% 2.1%, 27.3% 0.6%, 31.8% 1.8%, 36.4% 2.2%, 40.9% 2.8%, 45.5% 0.3%, 50.0% 1.1%, 54.5% 0.3%, 59.1% 2.8%, 63.6% 2.4%, 68.2% 0.1%, 72.7% 3.4%, 77.3% 3.4%, 81.8% 2.3%, 86.4% 2.2%, 90.9% 0.6%, 95.5% 0.1%, 100.0% 1.8%, 100.0% 99.7%, 95.5% 99.1%, 90.9% 98.9%, 86.4% 99.9%, 81.8% 97.9%, 77.3% 98.0%, 72.7% 96.2%, 68.2% 97.7%, 63.6% 97.1%, 59.1% 97.8%, 54.5% 97.0%, 50.0% 97.9%, 45.5% 98.7%, 40.9% 95.5%, 36.4% 95.5%, 31.8% 96.2%, 27.3% 96.8%, 22.7% 98.6%, 18.2% 99.0%, 13.6% 98.7%, 9.1% 99.7%, 4.5% 96.6%, 0.0% 98.2%);
}
.paper__title { margin: 0; font: 400 14.5cqi/.92 "Archivo Black", sans-serif; letter-spacing: -.01em; }
.paper__small { margin: 4.5cqi 0 0; font: 500 3.6cqi/1.3 "Space Grotesk", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
/* See-through tape across the top edge */
.paper__tape {
  position: absolute;
  left: 50%;
  top: 0;
  width: 52%;
  transform: translate(-50%, -48%) rotate(-5deg);
  opacity: .55;
  filter: brightness(1.2) contrast(1.1);
  pointer-events: none;
}

/* Feral trick: "Vibes over logic" on the lab grid; the text glitches
   (pink + lime layers split apart) — a tiny blip now and then, nonstop on hover */
.tile--glitch {
  container-type: inline-size;
  --pink: #FF5FC4;
  --lime: #B7E845;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 12.5cqi),
    repeating-linear-gradient(0deg,  rgb(0 0 0 / .06) 0 1px, transparent 1px 12.5cqi),
    #f2f1ec;
  color: #0a0a0b;
}
/* Corner brackets, like a camera frame */
.tile--glitch::before,
.tile--glitch::after {
  content: "";
  position: absolute;
  width: 8cqi; height: 8cqi;
  border: 2px solid #0a0a0b;
}
.tile--glitch::before { left: 6cqi; top: 6cqi; border-right: 0; border-bottom: 0; }
.tile--glitch::after  { right: 6cqi; bottom: 6cqi; border-left: 0; border-top: 0; }

.glitch__meta {
  position: absolute;
  margin: 0;
  font: 500 3.4cqi/1.35 "Roboto Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.glitch__meta--tl { left: 17cqi; top: 7cqi; }
.glitch__meta--br { right: 17cqi; bottom: 7cqi; text-align: right; }
.glitch__meta b { display: block; font-weight: 500; }
.glitch__meta--tl b { color: #5a7d1f; }
.glitch__meta--br b { color: var(--pink); }

.glitch {
  position: relative;
  margin: 0;
  font: 800 13.5cqi/.98 "Unbounded", sans-serif;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: .6cqi .6cqi 0 var(--pink);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: pre;
  text-shadow: none;
  opacity: 0;
  pointer-events: none;
}
.glitch::before { color: var(--pink); }
.glitch::after  { color: var(--lime); }

/* Idle: a short blip every few seconds */
.glitch::before { animation: glitch-a 4.5s steps(1) infinite; }
.glitch::after  { animation: glitch-b 4.5s steps(1) infinite; }
/* Hover: nonstop */
.tile--glitch:hover .glitch::before { animation: glitch-a-loop .9s steps(1) infinite; }
.tile--glitch:hover .glitch::after  { animation: glitch-b-loop .9s steps(1) infinite; }
.tile--glitch:hover .glitch { animation: glitch-shake .9s steps(1) infinite; }

@keyframes glitch-a {
  0%, 88%, 100% { opacity: 0; }
  90% { opacity: .9; transform: translate(-3cqi, 0); clip-path: inset(10% 0 62% 0); }
  93% { opacity: .9; transform: translate(2cqi, 0);  clip-path: inset(55% 0 20% 0); }
  96% { opacity: .9; transform: translate(-1cqi, 0); clip-path: inset(80% 0 4% 0); }
}
@keyframes glitch-b {
  0%, 89%, 100% { opacity: 0; }
  91% { opacity: .9; transform: translate(3cqi, 0);  clip-path: inset(38% 0 40% 0); }
  94% { opacity: .9; transform: translate(-2cqi, 0); clip-path: inset(4% 0 78% 0); }
  97% { opacity: .9; transform: translate(1.5cqi, 0); clip-path: inset(66% 0 12% 0); }
}
@keyframes glitch-a-loop {
  0%   { opacity: .9; transform: translate(-3cqi, 0); clip-path: inset(10% 0 62% 0); }
  20%  { opacity: .9; transform: translate(2cqi, 0);  clip-path: inset(55% 0 20% 0); }
  40%  { opacity: .9; transform: translate(-1cqi, 0); clip-path: inset(80% 0 4% 0); }
  60%  { opacity: .9; transform: translate(3cqi, 0);  clip-path: inset(28% 0 48% 0); }
  80%  { opacity: .9; transform: translate(-2cqi, 0); clip-path: inset(0 0 85% 0); }
}
@keyframes glitch-b-loop {
  0%   { opacity: .9; transform: translate(3cqi, 0);   clip-path: inset(38% 0 40% 0); }
  20%  { opacity: .9; transform: translate(-2cqi, 0);  clip-path: inset(4% 0 78% 0); }
  40%  { opacity: .9; transform: translate(1.5cqi, 0); clip-path: inset(66% 0 12% 0); }
  60%  { opacity: .9; transform: translate(-3cqi, 0);  clip-path: inset(18% 0 64% 0); }
  80%  { opacity: .9; transform: translate(2cqi, 0);   clip-path: inset(72% 0 6% 0); }
}
@keyframes glitch-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-.6cqi, .3cqi); }
  40% { transform: translate(.5cqi, -.3cqi); }
  60% { transform: translate(-.3cqi, 0); }
  80% { transform: translate(.4cqi, .3cqi); }
}

/* Touch screens: no hover, so the arrow is always visible */
@media (hover: none) {
  .card-big__arrow { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-big__fill, .card-big__desc, .card-big__arrow, .card-big__img { transition: none !important; }
  .card-big__fill::before { animation: none; }
  .paper__note { transition: none; }
  .glitch, .glitch::before, .glitch::after { animation: none !important; }
}

/* ---------- Tablets & phones ---------- */
@media (max-width: 767px) {
  .row, .row--flip { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .row .card-big, .row--flip .card-big { grid-column: 1 / -1; grid-row: 1; }
  .row .tile, .row--flip .tile { grid-column: auto; grid-row: 2; }
  .row .tile, .row--flip .tile { aspect-ratio: 1; }
  .card-big__bar { flex-wrap: wrap; align-items: flex-end; }
  .card-big__name, .card-big__tag { padding: 6px 12px; font-size: 13px; }
}

/* ============ Side flowers: the hero's big flowers, peeking in from the edge
   of later sections (alternating sides). Same SVG, turns with scroll. ============ */
.side-flower {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.side-flower--left {
  left: calc(50% - 50vw);   /* stick to the screen edge, not the container */
  top: 40%;
  height: min(31vw, 480px);   /* beside the fan/list, partly behind the first card */
  aspect-ratio: 432 / 752;
  transform: translateY(-20%);
}
/* Narrower screens: the list starts closer to the edge, so the flower moves up beside the heading */
@media (max-width: 1439px) {
  .side-flower--left { top: 0; height: 30vw; transform: none; }
}
.side-flower--right {
  right: calc(50% - 50vw);
  top: 60%;                  /* lower, beside the Feral row; burgundy reads well next to the blue tile */
  height: min(36vw, 540px);
  aspect-ratio: 493 / 721;
  transform: translate(13%, -50%);   /* center tucked further past the screen edge */
}
.side-flower--right .flower__move svg { transform-origin: 93% 50%; }
.side-flower--right path { transform-origin: 460px 360px; }
.side-flower .flower__move { transition: none; }
.side-flower--left .flower__move svg { transform-origin: -16% 38.5%; }
.side-flower--left path { transform-origin: -70px 290px; }
.side-flower.is-springing path {
  animation: spring .9s cubic-bezier(.3, .6, .35, 1) calc(var(--p, 0) * 40ms) both;
}

/* ============ Services ============ */
.services {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margin) clamp(96px, 10vw, 160px);
}
.services__head,
.fan,
.services__list { position: relative; z-index: 1; }   /* above the side flower */
.services__head { text-align: center; }
.services__title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.services__sub {
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}

/* Fan: cards lie in a slightly tilted row, each one overlapping the previous.
   Starts as a tight stack and spreads out when the section scrolls in. */
.fan {
  --w: clamp(120px, 13vw, 190px);   /* card width */
  --step: calc(var(--w) * .56);     /* distance between cards */
  position: relative;
  height: calc(var(--w) * 4 / 3 + var(--w) * .5);
  margin: clamp(40px, 5vw, 64px) auto clamp(32px, 4vw, 56px);
}
.fan__card {
  position: absolute;
  left: calc(50% - var(--w) / 2);
  top: calc(var(--w) * .2);
  width: var(--w);
  aspect-ratio: 3 / 4;
  z-index: calc(var(--i) + 5);
  transform: translateX(calc(var(--i) * var(--step) * .12)) rotate(calc(var(--i) * 1deg));
  transition: transform 1s cubic-bezier(.22, 1, .36, 1) calc((var(--i) + 4) * 45ms);
}
.fan.is-in .fan__card {
  /* Gentle arc: outer cards sit a bit lower and lean more */
  transform:
    translateX(calc(var(--i) * var(--step)))
    translateY(calc(var(--i) * var(--i) * var(--w) * .012))
    rotate(calc(var(--i) * 2.2deg + 6deg));
}
.fan__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: clamp(4px, .4vw, 6px) solid #fff;
  border-radius: clamp(14px, 1.4vw, 20px);
  box-shadow: 0 18px 36px -14px rgb(44 4 13 / .45);
}
.fan__lift {
  position: relative;
  height: 100%;
  transition: transform .45s cubic-bezier(.3, .7, .4, 1.4);
}
.fan__card:hover .fan__lift { transform: translateY(-14%) scale(1.04); }


/* Handwritten "my favourite" + drawn arrow, pointing at the Candy Land card (--i:-3).
   Appears after the fan has spread. */
.fan__note {
  position: absolute;
  z-index: 20;
  left: calc(50% - 3 * var(--step) - var(--w) * 1.05);
  top: calc(var(--w) * -.1);
  display: flex;
  align-items: flex-start;
  color: var(--color-accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease .9s;
}
.fan.is-in .fan__note { opacity: 1; }
.fan__note-text {
  font: 500 clamp(24px, 2.2vw, 32px)/1 "Caveat", cursive;
  transform: rotate(-8deg);
  white-space: nowrap;
}
.fan__note-arrow {
  width: calc(var(--w) * .42);
  margin: .5em 0 0 -4px;
}
.fan__note-arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s ease 1.2s;
}
.fan.is-in .fan__note-arrow path { stroke-dashoffset: 0; }

/* Services: names only, 3 columns filled top-to-bottom, dashed lines like the reference */
.services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: var(--gutter);
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.services__list li {
  padding: 16px 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 25%, transparent);
}
.services__list li:nth-child(3n) { border-bottom: 0; }   /* bottom of each column */

@media (max-width: 767px) {
  .fan { --w: clamp(96px, 26vw, 120px); --step: calc(var(--w) * .3); }
  .fan__note { left: 0; top: calc(var(--w) * -.38); }
  .side-flower--left { top: 0; height: 34vw; transform: none; }
  .side-flower--right { top: 0; height: 30vw; transform: none; }
  /* Phones: 2 columns, 5 + 4 */
  .services__list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); }
  .services__list li:nth-child(3n) { border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 25%, transparent); }
  .services__list li:nth-child(5), .services__list li:nth-child(9) { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fan__card, .fan__lift, .fan__note, .fan__note-arrow path { transition: none; }
}

/* ============ About: text on the left, taped polaroids on the right ============ */
.about {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margin) clamp(96px, 10vw, 160px);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  align-items: center;
}
.about.is-paused .sparkle { animation-play-state: paused; }
.about__text,
.polaroids { position: relative; z-index: 1; }   /* above the side flower */
.about__text { grid-column: 1 / span 5; }
.about__title {
  margin: 0 0 clamp(20px, 2vw, 28px);
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.about__text p {
  margin: 0 0 1em;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
}
.about__text p:last-child { margin-bottom: 0; }

/* Four polaroids in a loose 2x2, each tilted its own way (--r) */
.polaroids {
  grid-column: 7 / -1;
  justify-self: center;
  width: min(100%, 540px);   /* keeps the whole block within one screen on desktops */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px) clamp(16px, 2vw, 28px);
  padding-top: 18px;   /* room for the tape */
}
.polaroid:nth-child(2) { margin-top: 12%; }    /* stagger the right column */
.polaroid:nth-child(4) { margin-top: -6%; }
.polaroid:nth-child(3) { margin-top: -6%; }
.polaroid {
  position: relative;
  margin: 0;
  padding: clamp(8px, .8vw, 12px) clamp(8px, .8vw, 12px) 0;
  background: #fff;
  box-shadow: 0 18px 36px -16px rgb(44 4 13 / .4);
  transform: rotate(var(--r, 0deg));
  transition: transform .45s cubic-bezier(.3, .7, .4, 1.4), box-shadow .45s ease;
}
.polaroid:hover {
  z-index: 2;
  transform: rotate(0deg) translateY(-8px) scale(1.04);
  box-shadow: 0 28px 44px -18px rgb(44 4 13 / .45);
}
.polaroid__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.polaroid figcaption {
  padding: .35em 0 .45em;
  font: 500 clamp(20px, 1.7vw, 26px)/1 "Caveat", cursive;
  color: var(--color-accent);
  text-align: center;
}
/* Same see-through tape as the Vestige paper tile */
.polaroid__tape {
  position: absolute;
  left: 50%;
  top: 0;
  width: 46%;
  transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) * -1.4));
  opacity: .55;
  filter: brightness(1.2) contrast(1.1);
  pointer-events: none;
}

/* Burgundy flower: right edge, behind the photos */
.side-flower--about {
  top: 50%;
  height: min(36vw, 540px);
}

@media (max-width: 1023px) {
  .about__text { grid-column: 1 / -1; }
  .polaroids { grid-column: 1 / -1; max-width: 560px; margin: clamp(48px, 7vw, 64px) auto 0; }
  .side-flower--about { top: 62%; height: 40vw; }
  .about .sparkle:not(.sparkle--side) { display: none; }   /* would land on the text once it goes full width */
}
@media (max-width: 767px) {
  .side-flower--about { top: 0; height: 30vw; transform: none; }
  .about__text { padding-right: 18vw; }   /* keep the text clear of the flower */
}
@media (prefers-reduced-motion: reduce) {
  .polaroid { transition: none; }
}

/* ============ Laptops (1024–1279): flowers pushed a bit off-screen ============ */
@media (max-width: 1279px) {
  .hero__flower--left  { left: -4vw; }
  .hero__flower--right { right: -4vw; }
  .hero__content { max-width: 520px; }
}

/* ============ Tablets & phones: flowers move into the corners ============ */
@media (max-width: 1023px) {
  /* Big side sparkle would sit on top of the text — move it */
  .sparkles .sparkle:nth-child(1) { left: 8%; top: 14%; }
  .sparkles .sparkle:nth-child(2) { left: 10%; top: 30%; width: 40px; height: 40px; }
  .sparkles .sparkle:nth-child(3) { left: 46%; top: 14%; width: 36px; height: 36px; }
  .hero { place-items: center; }
  .hero__flower--left {
    left: -6vw; top: auto; bottom: -14vw;
    height: min(62vw, 42%);
    transform: rotate(-12deg);
  }
  .hero__flower--right {
    right: -12vw; top: 56px;
    height: min(52vw, 40%);
    transform: rotate(10deg);
  }
  .hero__content {
    max-width: 560px;
    padding: 28px 0;
  }
}

@media (max-width: 767px) {
  .sparkles .sparkle:nth-child(2) { left: 8%; top: 24%; width: 30px; height: 30px; }
  .sparkles .sparkle:nth-child(3) { left: 30%; top: 15%; width: 22px; height: 22px; }
  .sparkles .sparkle:nth-child(4) { left: 86%; top: 60%; }
  .hero { padding-top: 120px; padding-bottom: 96px; }
  .hero__flower--left  { left: -16vw; bottom: -22vw; height: 92vw; }
  .hero__flower--right { right: -30vw; top: 64px;   height: 70vw; }
  .hero__title { font-size: clamp(34px, 9.4vw, 44px); }
  .hero__content { padding: 40px 0; }
  .btn { --pad-x: 30px; padding-block: 16px; }
}

/* ============ Contact ============ */
.contact {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margin) clamp(96px, 10vw, 160px);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
}
.contact.is-paused .sparkle { animation-play-state: paused; }
.contact__wrap {
  position: relative;
  z-index: 2;                       /* card and tabs above the sparkles */
  grid-column: 3 / span 8;
  container-type: inline-size;      /* card sizes below are relative to the card width */
}
.contact__card {
  position: relative;
  z-index: 1;                       /* above the tabs */
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
  text-align: center;
  padding-top: 15cqi;
  transition: background-color .4s ease, color .4s ease;
}
/* Hover: fill goes away (card turns page-coloured, so the tab tops stay hidden), burgundy outline and text remain */
.contact__card:hover {
  background: var(--color-bg);
  color: var(--color-accent);
}
.contact__star {
  display: block;
  width: clamp(22px, 5cqi, 40px);
  height: clamp(22px, 5cqi, 40px);
  margin: 0 auto 5cqi;
}
.contact__kicker {
  margin: 0 0 9cqi;
  font-size: clamp(15px, 2.8cqi, 22px);
  font-weight: 400;
}
/* Huge words, cut off by the bottom edge of the card */
.contact__title {
  margin: 0 0 calc(clamp(12px, 3.4cqi, 28px) - .1em);   /* letters lifted a little off the bottom edge */
  font-size: 23cqi;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}

/* Folder tabs under the card */
.tabs {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  margin-top: -18px;                /* top of each tab hides under the card */
}
.tab {
  padding: 30px clamp(12px, 1.8vw, 26px) 14px;
  border-radius: 0 0 16px 16px;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
  color: var(--color-text);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.3, .7, .4, 1.3), background-color .3s ease;
}
.tab:hover,
.tab:focus-visible { transform: translateY(10px); background: var(--color-accent-2); }
.tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 1023px) {
  .contact__wrap { grid-column: 1 / -1; }
  /* Card goes full width: keep two stars in the free space under the tabs */
  .contact .sparkles .sparkle:nth-child(1) { left: 6%;  top: 88%; width: 26px; height: 26px; }
  .contact .sparkles .sparkle:nth-child(2) { left: 84%; top: 92%; width: 18px; height: 18px; }
  .contact .sparkles .sparkle:nth-child(n+3) { display: none; }
}
@media (max-width: 767px) {
  .contact__card { border-radius: 24px; }
  .tab { padding-inline: 10px; font-size: 13px; }
}

/* ============ Footer ============ */
.footer { position: relative; }
.footer__row {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margin) clamp(24px, 3vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.footer__logo {
  font-family: var(--font-logo);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  color: var(--color-accent);
}
.footer__copy { font-size: 14px; }

/* Flower bed: half flowers sit with their centre on the bottom edge */
.bed {
  --base: clamp(64px, 9vw, 140px);
  position: relative;
  height: calc(var(--base) * 1.3);
  overflow: hidden;
}
.bed__flower {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: 0;
  height: 0;
  --w: calc(var(--base) * var(--k));
  --petal: var(--color-accent);
  --core: var(--color-accent-2);
}
.bed__flower--blue { --petal: var(--color-accent-2); --core: var(--color-accent); }
.bed__flower svg {
  position: absolute;
  width: var(--w);
  overflow: visible;
  pointer-events: none;
}
/* flower 1: centre at (-70, 290) of 432×752, petals point right → turn them up */
.bed__flower--a svg {
  aspect-ratio: 432 / 752;
  left: calc(var(--w) * .162);
  top: calc(var(--w) * 752 / 432 * -.3856);
  transform-origin: -16.2% 38.56%;
  transform: rotate(calc(-90deg + var(--t)));
}
/* flower 2: centre at (460, 360) of 493×721, petals point left → turn them up */
.bed__flower--b svg {
  aspect-ratio: 493 / 721;
  left: calc(var(--w) * -.933);
  top: calc(var(--w) * 721 / 493 * -.499);
  transform-origin: 93.3% 49.9%;
  transform: rotate(calc(90deg + var(--t)));
}
.bed__flower path {
  fill: var(--petal);
  stroke: var(--petal);
  pointer-events: visiblePainted;
  transform-box: view-box;
}
.bed__flower path:first-child { fill: var(--core); stroke: var(--core); }
.bed__flower--a path { transform-origin: -70px 290px; }
.bed__flower--b path { transform-origin: 460px 360px; }
.bed__flower.is-springing path {
  animation: spring .9s cubic-bezier(.3, .6, .35, 1) calc(var(--p, 0) * 40ms) both;
}

@media (max-width: 767px) {
  .bed { --base: 84px; }
  .bed__flower:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab, .contact__card { transition: none; }
  .bed__flower.is-springing path { animation: none; }
}

/* ============ Grid overlay (press G) ============ */
.grid-overlay {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
  display: none;
}
.grid-overlay.is-on { display: block; }
.grid-overlay__inner {
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
}
.grid-overlay__inner > div { background: rgb(255 0 0 / .1); }

/* ============ Case page (vestige.html) ============ */
.case-head,
.case-cards,
.case-features,
.case-visual,
.case-next {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margin);
}
.case {
  --card: #FFFCF2;
  --line: color-mix(in srgb, var(--color-text) 12%, transparent);
  --gap: clamp(16px, 1.6vw, 24px);
}

/* Small label above a block: "What I did", "The challenge"… */
.case-label {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Header: name, one line, tags, then the cover */
.case-head { padding-top: clamp(130px, 13vw, 190px); }
.case-head__intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.case-head__title {
  margin: 0;
  font-size: clamp(56px, 8vw, 120px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.case-head__lead {
  max-width: 640px;
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4;
  text-wrap: balance;
}
.case-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(20px, 2vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}
.case-tags li {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  font-size: 14px;
  line-height: 1.2;
}
.case-cover {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-top: clamp(40px, 5vw, 72px);
  border-radius: var(--radius-card);
  background: #111;
}

/* ---------- Cards ---------- */
.case-card {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 1px 0 var(--line), 0 20px 40px -32px rgb(44 4 13 / .35);
}
.case-card--line { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.case-card__text {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.case-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.case-card__big {
  margin: 0;
  max-width: 14em;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Bigger drawn flower in the solution card */
.case-label--big .label-flower { width: 3.4em; height: 3.4em; }

/* Bento: what I did + challenge, then solution (wide) + logo tile */
.case-cards {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
}
.case-cards .case-card:nth-child(1) { grid-column: span 5; }
.case-cards .case-card:nth-child(2) { grid-column: span 7; }
.case-cards .case-card--wide {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(280px, 26vw, 400px);
}
.case-logo {
  grid-column: span 5;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  background: #0d0b0b url("assets/work/vestige-noise.webp") center / cover;
  container-type: inline-size;
}
.case-logo__word {
  margin: 0;
  font: 400 19cqi/.9 "Archivo Black", sans-serif;
  letter-spacing: -.02em;
  /* scanned paper inside the letters, like the real logo */
  background: #e9e2d0 url("assets/work/v-paper.webp") center / cover;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.case-logo__small {
  margin: 3.5cqi 0 0;
  font: 500 3.4cqi/1 "Space Grotesk", sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #cfc9c0;
}

/* ---------- Features: framed screenshot + text card + detail tile ---------- */
.case-features { padding-top: clamp(80px, 9vw, 140px); }
.feature {
  position: relative;
  z-index: 1;   /* above the side flowers */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--gap);
}
.feature + .feature { margin-top: clamp(64px, 8vw, 120px); }
.feature .frame        { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.feature__card         { grid-column: 9 / span 4; grid-row: 1; }
.feature .detail       { grid-column: 9 / span 4; grid-row: 2; }
.feature--flip .frame  { grid-column: 5 / span 8; }
.feature--flip .feature__card,
.feature--flip .detail { grid-column: 1 / span 4; }

.feature__name {
  margin: 0 0 clamp(8px, .8vw, 12px);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.feature__desc {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}

/* Dark frame: screenshots sit inside with a margin, like a presentation */
.frame {
  position: relative;
  z-index: 1;
  padding: clamp(14px, 3vw, 48px);
  border-radius: var(--radius-card);
  background: #0d0b0b url("assets/work/vestige-noise.webp") center / cover;
  display: grid;
  place-items: center;
}
.frame img {
  width: 100%;
  height: auto;
  border-radius: clamp(8px, 1vw, 14px);
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / .8);
}
.frame--board { padding: clamp(10px, 1.6vw, 24px); gap: 0; }
.frame--board img { border-radius: 0; box-shadow: none; }
.frame--board img:first-child { border-radius: clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px) 0 0; }
.frame--board img:last-child  { border-radius: 0 0 clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px); }

/* Detail tiles: a close-up of each feature */
.detail {
  position: relative;
  overflow: hidden;
  min-height: clamp(200px, 18vw, 280px);
  border-radius: var(--radius-card);
  container-type: size;
}
/* Map: the record hides behind the IGOR sleeve, slides halfway out on hover and keeps spinning.
   Sleeve + record are one centred pair; sizes are % of the tile (cqh came out 0 for absolute images on phones). */
.detail--vinyl { background: #0d0b0b url("assets/work/vestige-noise.webp") center / cover; }
.vinyl-pair {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 68%;
  aspect-ratio: 1.55;   /* sleeve + the half of the record that slides out */
  transform: translate(-50%, -50%);
}
.detail__sleeve {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: rotate(-4deg);
  box-shadow: 0 16px 30px -10px rgb(0 0 0 / .7);
}
.vinyl-pair__disc {
  position: absolute;
  left: 4%;
  top: 3%;
  height: 94%;
  aspect-ratio: 1;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.detail__vinyl {
  width: 100%;
  height: 100%;
  animation: spin 3.5s linear infinite paused;
}
.detail--vinyl:hover .vinyl-pair__disc,
.detail--vinyl.is-active .vinyl-pair__disc { transform: translateX(56%); }
.detail--vinyl:hover .detail__vinyl,
.detail--vinyl.is-active .detail__vinyl { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Mood: three mood cards fan out on hover */
.detail--moods {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
}
.detail--moods img {
  height: min(72cqh, 46cqw);   /* three cards always fit the tile width */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 3px solid var(--color-bg);
  border-radius: 10px;
  box-shadow: 0 14px 28px -12px rgb(0 0 0 / .6);
  margin: 0 -5%;
  transition: transform .6s cubic-bezier(.3, .7, .4, 1.3);
}
.detail--moods img:nth-child(1) { transform: rotate(-8deg) translateY(4%); }
.detail--moods img:nth-child(2) { position: relative; z-index: 1; }
.detail--moods img:nth-child(3) { transform: rotate(8deg) translateY(4%); }
.detail--moods:hover img:nth-child(1),
.detail--moods.is-active img:nth-child(1) { transform: rotate(-14deg) translate(-14%, 6%); }
.detail--moods:hover img:nth-child(2),
.detail--moods.is-active img:nth-child(2) { transform: translateY(-6%); }
.detail--moods:hover img:nth-child(3),
.detail--moods.is-active img:nth-child(3) { transform: rotate(14deg) translate(14%, 6%); }
/* Stories: In Rainbows taped to paper, straightens on hover */
.detail--taped {
  display: grid;
  place-items: center;
  background: #ece6d6 url("assets/work/v-paper.webp") center / cover;
}
.detail__cover {
  position: relative;
  height: 64cqh;
  aspect-ratio: 1;
  transform: rotate(3deg);
  transition: transform .5s cubic-bezier(.3, .7, .4, 1.3);
}
.detail__cover > img:first-child { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 16px 30px -12px rgb(0 0 0 / .5); }
.detail__tape {
  position: absolute;
  left: 50%;
  top: 0;
  width: 60%;
  transform: translate(-50%, -48%) rotate(-6deg);
  opacity: .6;
  filter: brightness(1.2) contrast(1.1);
}
.detail--taped:hover .detail__cover,
.detail--taped.is-active .detail__cover { transform: rotate(0deg) scale(1.04); }

/* Side flowers: burgundy left beside the map, blue right beside the mood picker */
.side-flower--case-a { top: 0;   height: min(34vw, 520px); transform: translate(-6%, -10%); }
.side-flower--case-b { top: 38%; height: min(32vw, 500px); transform: translate(13%, 0); }

/* ---------- Visual ---------- */
.case-visual {
  z-index: 1;
  display: grid;
  gap: var(--gap);
  padding-top: clamp(80px, 9vw, 140px);
}
.case-visual__card .case-card__text { max-width: 30em; }

/* Next project */
.case-next { padding-top: clamp(96px, 11vw, 176px); padding-bottom: clamp(96px, 10vw, 160px); }

.case-head.is-paused .sparkle { animation-play-state: paused; }

/* Hand-drawn flower in front of each label; lines draw in when it scrolls into view */
.label-flower {
  flex: none;
  width: 2em;
  height: 2em;
  overflow: visible;
  transform: rotate(-10deg);
}
.label-flower path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;
}
.label-flower.is-in path {
  transition: stroke-dashoffset .5s ease-out calc(var(--p) * .18s);
  stroke-dashoffset: 0;
}

@media (max-width: 1023px) {
  .case-cards .case-card:nth-child(1),
  .case-cards .case-card:nth-child(2) { grid-column: span 6; }
  .case-cards .case-card--wide { grid-column: 1 / -1; min-height: 0; gap: 24px; }
  .case-logo { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .feature .frame,
  .feature--flip .frame { grid-column: 1 / -1; grid-row: 1; }
  .feature__card,
  .feature--flip .feature__card { grid-column: 1 / span 6; grid-row: 2; }
  .feature .detail,
  .feature--flip .detail { grid-column: 7 / span 6; grid-row: 2; }
  .side-flower--case-a { top: -6vw; height: 40vw; transform: translateX(-30%); }
  .side-flower--case-b { top: 36%; height: 38vw; transform: translateX(30%); }
}
@media (max-width: 767px) {
  .case-head .sparkle:nth-child(n+3) { display: none; }
  .case-cards .case-card:nth-child(1),
  .case-cards .case-card:nth-child(2),
  .feature__card, .feature--flip .feature__card,
  .feature .detail, .feature--flip .detail { grid-column: 1 / -1; grid-row: auto; }
  .feature .frame, .feature--flip .frame { grid-row: auto; }
  .case-logo { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .label-flower path { stroke-dashoffset: 0 !important; transition: none !important; }
  .vinyl-pair__disc, .detail--moods img, .detail__cover { transition: none; }
  .detail__vinyl { animation: none; }
}

/* ---------- Feral case: lab grid instead of dark noise ---------- */
.case--feral {
  --pink: #FF5FC4;
  --lime: #B7E845;
  --lab:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg,  rgb(0 0 0 / .06) 0 1px, transparent 1px 48px),
    #f2f1ec;
}
.frame--lab { background: var(--lab); }
.frame--lab img { box-shadow: 0 24px 50px -24px rgb(0 0 0 / .45); }
.frame--dark { background: #0a0a0b; }

/* Logo tile: FERAL glitching on the lab grid, like the main-page tile */
.case-logo--lab { background: var(--lab); color: #0a0a0b; }
.case-logo__glitch { font-size: 19cqi; }
.case-logo--lab .case-logo__small { font-family: "Roboto Mono", monospace; letter-spacing: .14em; color: #0a0a0b; }
.case-logo--lab:hover .glitch::before,
.case-logo--lab.is-active .glitch::before { animation: glitch-a-loop .9s steps(1) infinite; }
.case-logo--lab:hover .glitch::after,
.case-logo--lab.is-active .glitch::after { animation: glitch-b-loop .9s steps(1) infinite; }
.case-logo--lab:hover .glitch,
.case-logo--lab.is-active .glitch { animation: glitch-shake .9s steps(1) infinite; }

/* Specimen: glasses on the grid with camera corners, a scan line runs over on hover */
.detail--specimen {
  display: grid;
  place-items: center;
  background: var(--lab);
}
.detail--specimen::before,
.detail--specimen::after {
  content: "";
  position: absolute;
  width: 10cqmin; height: 10cqmin;
  border: 2px solid #0a0a0b;
}
.detail--specimen::before { left: 8cqmin; top: 8cqmin; border-right: 0; border-bottom: 0; }
.detail--specimen::after  { right: 8cqmin; bottom: 8cqmin; border-left: 0; border-top: 0; }
/* Absolutely centred: as a grid item inside the size container it collapsed to 0 on phones */
.detail--specimen img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96%;
  height: 84%;
  object-fit: contain;   /* fits the tile on any width */
  transform: translate(-50%, -50%);
  transition: transform .6s cubic-bezier(.3, .7, .4, 1.3);
}
.detail--specimen:hover img,
.detail--specimen.is-active img { transform: translate(-50%, -50%) scale(1.06) rotate(-3deg); }
.detail__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  opacity: 0;
}
.detail--specimen:hover .detail__scan,
.detail--specimen.is-active .detail__scan { animation: scan 1.6s ease-in-out infinite; }
@keyframes scan {
  0%   { top: 8%;  opacity: 1; }
  50%  { top: 92%; opacity: 1; }
  100% { top: 8%;  opacity: 1; }
}

/* Field logs: one photo with a blinking REC mark */
.detail--rec img,
.detail--zoom img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.detail--rec:hover img,
.detail--zoom:hover img,
.detail--rec.is-active img,
.detail--zoom.is-active img { transform: scale(1.08); }
.detail__rec {
  position: absolute;
  left: 7cqmin;
  top: 7cqmin;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .4em .8em;
  background: rgb(10 10 11 / .7);
  color: #f2f1ec;
  font: 500 13px/1 "Roboto Mono", monospace;
  letter-spacing: .12em;
}
.detail__rec::before {
  content: "";
  width: .7em; height: .7em;
  border-radius: 50%;
  background: #ff3b3b;
  animation: rec 1.2s steps(1) infinite;
}
@keyframes rec { 50% { opacity: 0; } }
.detail--zoom { background: #f2f1ec; }

@media (prefers-reduced-motion: reduce) {
  .detail--specimen img, .detail--rec img, .detail--zoom img { transition: none; }
  .detail__scan, .detail__rec::before, .case-logo--lab .glitch, .case-logo--lab .glitch::before, .case-logo--lab .glitch::after { animation: none !important; }
}