/* ============================================================
   Aleksandra — portfolio
   Design source: Figma "Frame 60" (1440px wide)

   Scaling model
   -------------
   On tablet/desktop 1rem == 1 "design pixel":
     html { font-size: 100vw / 1440 }  (capped at 0.75px: the Figma frame is
     drawn large, so 1:1 at 1440px looked oversized; from 1080px up the
     1440-unit canvas stays 1080px wide and centred)
   so every value copied from Figma is written in rem and the layout
   scales proportionally. Below 768px the page reflows with px values.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Cygre";
  src: url("../assets/fonts/Cygre-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cygre";
  src: url("../assets/fonts/Cygre-ExtraBold.woff2") format("woff2");
  font-weight: 700 800; /* design uses Cygre Bold; ExtraBold is the closest supplied weight */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cygre";
  src: url("../assets/fonts/Cygre-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --c-blue: #7184cd;        /* nav, headline, "Experience" */
  --c-blue-soft: #a2a9d6;   /* footer */
  --c-blue-pill: #909ccf;   /* "Soft/Hard skills" pills */
  --c-pink: #ffbddc;
  --c-cream: #fff9e9;
  --c-grey: #d9d9d9;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-muted: rgba(0, 0, 0, 0.4);
  --c-muted-60: rgba(0, 0, 0, 0.6);
  --c-sheet-border: #6e3737;

  --font: "Cygre", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: min(calc(100vw / 1440), 0.75px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html, body { overflow-x: hidden; }
#experience, #why { scroll-margin-top: 150rem; }   /* clear the sticky nav */

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.071;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
strong { font-weight: 800; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Every section centres a 1440-unit inner canvas */
.nav__inner, .hero__inner, .sheet__inner, .footer__inner {
  position: relative;
  width: 1440rem;
  margin: 0 auto;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 111rem;
  background: var(--c-blue);
  border-top: 2rem solid var(--c-black);
  border-bottom: 2rem solid var(--c-black);
}
.nav__inner { height: 100%; }

.nav__logo {
  position: absolute;
  left: 106rem;
  top: 22rem;              /* 24 in Figma minus the 2px top border */
  width: 91rem;
  height: 63rem;
  transition: transform 0.4s var(--ease-spring);
}
.nav__logo img { width: 100%; height: 100%; }
@media (min-width: 768px) { .nav__logo:hover { transform: rotate(-8deg) scale(1.06); } }

/* click: the dog runs off to the left, then trots back in */
.nav__logo.is-running { animation: run-away 1.1s cubic-bezier(0.5, 0, 0.9, 0.4) forwards; pointer-events: none; }
.nav__logo.is-returning { animation: run-back 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; pointer-events: none; }
@keyframes run-away {
  0%   { transform: translateX(0) rotate(0); }
  15%  { transform: translateX(6rem) rotate(6deg) scaleY(0.92); }
  40%  { transform: translateX(-120rem) rotate(-10deg) translateY(-8rem); }
  60%  { transform: translateX(-280rem) rotate(-6deg) translateY(4rem); }
  80%  { transform: translateX(-440rem) rotate(-12deg) translateY(-6rem); }
  100% { transform: translateX(-640rem) rotate(-8deg); opacity: 1; }
}
@keyframes run-away-phone {
  0%   { transform: translateX(0) rotate(0); }
  40%  { transform: translateX(-28px) rotate(-10deg) translateY(-4px); }
  70%  { transform: translateX(-75px) rotate(-6deg) translateY(2px); }
  100% { transform: translateX(-140px) rotate(-12deg); }
}
@keyframes run-back-phone {
  0%   { transform: translateX(-140px) rotate(-8deg); }
  60%  { transform: translateX(-30px) rotate(-6deg) translateY(-3px); }
  85%  { transform: translateX(3px) rotate(3deg) scaleY(0.94); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes run-back {
  0%   { transform: translateX(-640rem) rotate(-8deg); }
  50%  { transform: translateX(-200rem) rotate(-6deg) translateY(-6rem); }
  85%  { transform: translateX(10rem) rotate(4deg) scaleY(0.94); }
  100% { transform: translateX(0) rotate(0); }
}

.nav__link {
  position: absolute;
  top: 35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 32rem;
  line-height: 0.999;
  color: var(--c-white);
  white-space: nowrap;
  cursor: pointer;
}
.nav__link--work    { left: 648rem; top: 37rem; }
.nav__link--about   { left: 847rem; top: 37rem; }
.nav__link--blog    { left: 1075rem; }
.nav__link--contact { left: 1264rem; }

/* underline sweep on hover */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4rem;
  height: 2rem;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__link:focus-visible::after { transform: scaleX(1); }
@media (min-width: 768px) { .nav__link:hover::after { transform: scaleX(1); } }

/* ============================================================
   HERO (cream)  — frame y 111 → 1425
   ============================================================ */
.hero {
  position: relative;
  z-index: 2;              /* pills rest on top of the white sheet's edge */
  background: var(--c-cream);
}
.hero__inner { height: 1314rem; }

.hero__title {
  position: absolute;
  left: 128rem;             /* centred on x=714 like the Figma text box */
  top: 63rem;               /* frame y 174 */
  width: 1172rem;
  font-weight: 800;
  font-size: 128rem;
  line-height: 1.071;
  color: var(--c-blue);
  text-align: center;
}
.hero__line {
  display: block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: rise 0.9s var(--ease-out) forwards;
}
.hero__line:nth-child(1) { animation-delay: 0.05s; }
.hero__line:nth-child(2) { animation-delay: 0.17s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero__text {
  position: absolute;
  left: 106rem;             /* centred on x=728 */
  top: 412rem;              /* frame y 523 */
  width: 1244rem;
  font-size: 36rem;
  line-height: 1.26;
  text-align: center;
}

/* "View my work ↗" / "View my CV ↗" — frame x 582, centre y 820.5 / 875.5 */
.hero__cta {
  position: absolute;
  left: 582rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 18rem;
  font-weight: 500;         /* Cygre Medium in Figma */
  font-size: 36rem;
  line-height: 1.071;
  color: var(--c-blue-pill);
}
.hero__cta--work { top: 690rem; }
.hero__cta--cv   { top: 746rem; }
.hero__cta-arrow {
  width: 19rem;
  height: 19rem;
  fill: currentColor;
  transform: rotate(-90deg);          /* the Figma arrow points ↘; here it points ↗ */
  transition: transform 0.4s var(--ease-spring);
}
@media (min-width: 768px) { .hero__cta:hover .hero__cta-arrow { transform: rotate(-90deg) translate(-4rem, 4rem); } }
.hero__cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4rem;
  width: calc(100% - 37rem);
  height: 2rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
@media (min-width: 768px) { .hero__cta:hover::after { transform: scaleX(1); } }

/* ---------- Skills cluster ---------- */
/* Each pill carries its Figma centre (--x,--y in frame coords),
   width (--w) and rotation (--r) as inline custom properties. */
.skills { position: absolute; inset: 0; pointer-events: none; }   /* let the hero text/links underneath stay clickable */
.pill { pointer-events: auto; }

.pill {
  position: absolute;
  left: calc((var(--x) - var(--w) / 2) * 1rem);
  top: calc((var(--y) - 111 - 37.5) * 1rem);
  width: calc(var(--w) * 1rem);
  height: 75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rem solid var(--c-black);
  border-radius: 56rem;
  font-size: 40rem;
  line-height: 1.071;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(calc(var(--r) * 1deg));
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-out);
  cursor: default;
  will-change: transform;
  z-index: calc(var(--i, 0) + 1);   /* Figma layer order */
}
.pill--sm { font-size: 32rem; }
.pill--md { font-size: 36rem; }
.pill--pink  { background: var(--c-pink); }
.pill--white { background: var(--c-white); }
.pill--blue  { background: var(--c-blue-pill); color: var(--c-white); }

@media (min-width: 768px) { .pill:hover {
  transform: rotate(0deg) scale(1.06);
  z-index: 20;
  box-shadow: 0 10rem 24rem rgba(0, 0, 0, 0.12);
} }

/* desktop: the pills sit in their Figma pile from the start (no drop) */

/* Cygre's ascender (1.22em) is far taller than its descender (0.27em), so
   text centred by its line box sits ~0.12em too low; pill-shaped elements
   compensate with a little bottom padding so caps sit in the true middle. */
.pill, .project__next, .card__more { padding-bottom: 0.25em; }

/* ============================================================
   WHITE SHEET — frame y 1425 → 4939 (rounded, 1px #6e3737 outline)
   ============================================================ */
.sheet {
  position: relative;
  /* cream only shows behind the top rounded corners (y 1425 → 1583) */
  background: linear-gradient(var(--c-cream) 0 158rem, var(--c-white) 158rem);
}
.sheet__inner { height: 4290rem; }   /* the centred 1440-unit canvas, like every section */
/* the white sheet itself spans the whole window (its side borders just off-screen);
   it is drawn behind the canvas so the content stays centred on wide screens */
@media (min-width: 768px) {
  .sheet::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -1rem; right: -1rem;
    background: var(--c-white);
    border: 1rem solid var(--c-sheet-border);
    border-bottom: 0;
    border-radius: 104rem 104rem 0 0;
  }
}

/* ---------- Tools ticker ---------- */
.tools {
  position: absolute;
  left: calc(50% - 50vw); right: calc(50% - 50vw);   /* ticker runs the full window width */
  /* words fade out before they reach the sheet's rounded corners */
  --tools-clear: 40rem;  --tools-fade: 200rem;   /* fully hidden, then fully shown */
  -webkit-mask-image: linear-gradient(90deg, transparent var(--tools-clear), #000 var(--tools-fade), #000 calc(100% - var(--tools-fade)), transparent calc(100% - var(--tools-clear)));
          mask-image: linear-gradient(90deg, transparent var(--tools-clear), #000 var(--tools-fade), #000 calc(100% - var(--tools-fade)), transparent calc(100% - var(--tools-clear)));
  top: 80rem;               /* frame y 1505 */
  overflow: hidden;
  padding-bottom: 0.25em;   /* room for descenders (p, g, y): the clipping box ends at the line box */
  font-size: 32rem;
  line-height: 1.071;
  color: var(--c-muted);
  white-space: nowrap;
}
.tools__track {
  display: inline-flex;
  padding-left: 15rem;
  animation: ticker 60s linear infinite;
}
@media (min-width: 768px) { .tools:hover .tools__track { animation-play-state: paused; } }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Why work with me ---------- */
.why { position: absolute; inset: 0; }

.why__statement {
  position: absolute;
  left: 116rem;
  top: 255rem;              /* frame y 1680 */
  width: 801rem;
  font-weight: 800;
  font-size: 48rem;
  line-height: 1.071;
  color: var(--c-blue);
}

.why__intro {
  position: absolute;
  left: 114rem;
  top: 570rem;              /* frame y 1995 */
  width: 606rem;
  height: 493rem;
  background: var(--c-grey);
  border: 1rem solid var(--c-black);
  border-radius: 34rem;
}
.why__question {
  position: absolute;
  left: 45rem;              /* frame x 159 */
  top: 339rem;              /* frame y 2334 */
  width: 443rem;
  font-weight: 500;         /* Cygre Medium in Figma */
  font-size: 48rem;
  line-height: 0.999;
}
.why__arrow {
  position: absolute;
  fill: currentColor;
  left: 527rem;
  top: 354rem;              /* centred on frame y 2360 */
  width: 22rem;
  height: 22rem;
  transform: rotate(-45deg);          /* → */
  transition: transform 0.4s var(--ease-spring);
}
@media (min-width: 768px) { .why__intro:hover .why__arrow { transform: rotate(-45deg) translate(6rem, 6rem); } }

.why__cards { position: absolute; inset: 0; pointer-events: none; }
.why__card {
  position: absolute;
  width: 295rem;
  height: 246rem;
  background: var(--c-pink);
  border: 1rem solid var(--c-black);
  border-radius: 34rem;
  pointer-events: auto;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
@media (min-width: 768px) { .why__card:hover {
  transform: translateY(-6rem);
  box-shadow: 0 14rem 30rem rgba(0, 0, 0, 0.10);
} }
.why__card--1 { left: 720rem;  top: 570rem; }
.why__card--2 { left: 1015rem; top: 570rem; }
.why__card--3 { left: 720rem;  top: 812rem; height: 247rem; }
.why__card--4 { left: 1015rem; top: 812rem; height: 247rem; }

.why__card-title {
  position: absolute;
  left: 46rem;              /* frame x 819 / 1114 */
  top: 25rem;               /* frame y 2017 */
  width: 227rem;
  font-weight: 500;         /* Cygre Medium in Figma */
  font-size: 36rem;
  line-height: 0.999;
}

.why__card-text {
  position: absolute;
  left: 46rem;
  width: 227rem;
  font-size: 20rem;
  line-height: 0.999;
  color: var(--c-muted-60);
}
.why__card--3 .why__card-title, .why__card--4 .why__card-title { top: 30rem; }   /* frame y 2264 */
.why__card--1 .why__card-text { top: 140rem; }   /* frame y 2132 */
.why__card--2 .why__card-text { top: 139rem; }   /* frame y 2099 */
.why__card--3 .why__card-text { top: 144rem; }   /* frame y 2346 */
.why__card--4 .why__card-text { top: 123rem; }   /* frame y 2325 */

/* ---------- Experience ---------- */
.experience__title {
  position: absolute;
  left: 115rem;
  top: 1210rem;             /* frame y 2635 */
  font-weight: 800;
  font-size: 48rem;
  line-height: 1.071;
  color: var(--c-blue);
}
.experience__grid { position: absolute; inset: 0; pointer-events: none; }   /* full-sheet layer: don't block the "Why" cards above it */
.experience__grid .card, .experience__grid .top-row { pointer-events: auto; }

/* top row: one composite image (ribbons cross the gap) + two outlined cards */
.top-row {
  position: absolute;
  left: -36rem;
  top: 1321rem;             /* frame y 2746 */
  width: 1324rem;
  height: 1146rem;
}
.top-row__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.card--ngati, .card--3sixty {
  position: absolute;
  display: block;
  border: 2rem solid var(--c-black);
  overflow: hidden;
}
.card--ngati  { left: 150rem; top: -1rem; width: 510rem; height: 1142rem; border-radius: 35rem; }
.card--3sixty { left: 701rem; top: 1rem;  width: 623rem; height: 1142rem; border-radius: 34rem; }

.card--m-ngati, .card--m-3sixty { display: none; }

/* bottom row: exported images already carry their 2px outline */
.card--crispy, .card--seamoss {
  position: absolute;
  top: 2508rem;             /* frame y 3933 */
  overflow: hidden;
}
.card--crispy  { left: 114rem; width: 510rem; height: 993rem; border-radius: 47rem; }
.card--seamoss { left: 662rem; width: 626rem; height: 993rem; border-radius: 36rem; }
.card--crispy img, .card--seamoss img { width: 100%; height: 100%; }

/* freelance projects: heading + three framed cards (same frame as the Experience cards) */
.freelance__title {
  position: absolute; left: 115rem; top: 3581rem;
  margin: 0; font-weight: 800; font-size: 48rem; line-height: 1.071; color: var(--c-blue);
}
#freelance { scroll-margin-top: 150rem; }
.card--fl {
  position: absolute; top: 3681rem;
  width: 370rem; height: 520rem;
  overflow: hidden;
  border: 1rem solid var(--c-black);
  border-radius: 36rem;
}
.card--fl-1 { left: 114rem; }
.card--fl-2 { left: 516rem; }
.card--fl-3 { left: 918rem; }
.card--fl img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
@media (min-width: 768px) { .card--fl:hover { transform: translateY(-10rem); } }
@media (min-width: 768px) { .card--fl:hover img { transform: scale(1.03); } }
@media (min-width: 768px) { .card--fl.reveal.is-visible:hover { transform: translateY(-10rem); } }
.card--fl { transition: transform 0.5s var(--ease-out); }
.card--fl .card__plate { padding: 64rem 32rem 48rem 40rem; }
.card--fl .card__name { font-size: 40rem; }

/* ===== KYLIX page (white, free layout from the supplied composite) ===== */
.project--kylix, .project--kylix.page-project { background: var(--c-white); color: var(--c-black); }
.kx { position: relative; width: 1440rem; margin: 0 auto; padding: 60rem 95rem 90rem 75rem; box-sizing: border-box; }
.kx .kx__next { position: static; display: inline-flex; color: var(--c-blue); border-color: var(--c-blue); margin-bottom: 40rem; animation: none; opacity: 1; transform: none; }
@media (min-width: 768px) { .kx__next:hover { background: var(--c-blue); color: var(--c-white); } }
.kx .kx__title { position: static; margin: 0; font-weight: 800; font-size: 60rem; line-height: 1.1; letter-spacing: -0.01em; text-transform: none; color: var(--c-black); animation: none; opacity: 1; transform: none; }
.kx__title span { font-weight: 400; }
.kx__arrow { display: block; width: 40rem; height: 40rem; margin: 60rem 0 0 28rem; fill: var(--c-black); transform: rotate(45deg); }
.kx__grid { display: grid; grid-template-columns: 690rem 1fr; column-gap: 80rem; margin-top: 180rem; }
.kx__desc { margin: 0; font-size: 24rem; line-height: 1.3; text-align: justify; }
.kx__photo { margin: 180rem 0 0; }
.kx__photo img { display: block; width: 100%; height: auto; border-radius: 34rem; }
.kx__stage { position: relative; margin: 0 0 40rem; }
.kx__stage:first-child { margin-top: 100rem; }
.kx__stage img { display: block; width: 100%; height: auto; }
.kx__stage--char img { width: 78%; margin: 0 auto 0 0; }   /* character illustrations: keep them at their natural scale */
.kx__tag {
  position: absolute; right: 0; top: -24rem; z-index: 1;
  padding: 14rem 40rem 16rem; border-radius: 40rem;
  background: var(--c-blue); color: var(--c-white);
  font-weight: 500; font-size: 22rem; line-height: 1;
}
.kx__contrib { margin-top: 70rem; font-size: 22rem; line-height: 1.25; }
.kx__h { margin: 0 0 24rem; font-weight: 400; font-size: 22rem; }
.kx__contrib ul { margin: 0; padding: 0 0 0 20rem; list-style: "·  "; }
.kx__contrib li + li { margin-top: 24rem; }
.kx__contrib strong { font-weight: 700; display: block; }
.kx__tools { display: flex; gap: 14rem; margin: 40rem 0 0; padding: 0; list-style: none; }
.kx__tools img { width: 46rem; height: 46rem; border-radius: 10rem; }
/* tool icons: one rule for every project page — flush left, a clear gap under the last paragraph */
.kx .kx__contrib ul.kx__tools { display: flex; align-items: center; gap: 14rem; margin: 48rem 0 0; padding: 0; list-style: none; }
.kx .kx__contrib ul.kx__tools li { margin: 0; padding: 0; list-style: none; }
.kx .kx__contrib ul.kx__tools li::marker { content: none; }
.kx__cups { position: relative; margin-top: 110rem; }
.kx__tag--cups { position: relative; top: auto; right: auto; display: block; margin-left: auto; width: max-content; }
.kx__cups-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 40rem 0 0; padding: 0;
}
.kx__cups-row img { height: 440rem; width: auto; flex: none; }
.kx__cups-row img:nth-child(n+5) { display: none; }   /* keep three + one repeat on a 1270-wide row */
.kx__tag--boxes { margin-top: 140rem; }
.kx__tag--boxes + .kx__tubes { margin-top: 40rem; }
.kx__tubes { display: flex; align-items: flex-end; justify-content: space-between; gap: 40rem; margin-top: 140rem; }
.kx__tubes { justify-content: space-around; }
.kx__tubes img { width: auto; height: 400rem; max-width: 48%; object-fit: contain; object-position: bottom; }
/* veterinary clinic page */
.vt__intro { display: grid; grid-template-columns: 560rem 1fr; column-gap: 90rem; align-items: start; margin-top: 140rem; }
.vt__text { margin-top: 0; }
.vt__text ul { list-style: none; padding: 0; }
.vt__text li + li { margin-top: 28rem; }
.vt__text strong { margin-bottom: 4rem; }
.vt__stickers { margin: 0; }
.vt__stickers img, .vt__block img, .vt__pair img { display: block; width: 100%; height: auto; }
.vt__block { margin: 140rem 0 0; }
.vt__block--wide { margin-left: -75rem; margin-right: -95rem; }
.vt__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 60rem; margin-top: 140rem; }
.vt__pair img { box-shadow: 0 16rem 40rem rgba(0, 0, 0, 0.10); }
.vt__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 40rem 60rem; margin-top: 160rem; }
.vt__photos img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; border-radius: 34rem; }
.kx .project__footnav { position: static; margin: 160rem 0 0; }
.kx .project__footnav .project__next { animation: none; opacity: 1; transform: none; }
.kx .project__next { color: var(--c-blue); border-color: var(--c-blue); }
@media (min-width: 768px) { .kx .project__next:hover { background: var(--c-blue); color: var(--c-white); } }
.page-project.page-white .project__footnav .project__next { animation: none; opacity: 1; transform: none; }

figure.card, a.card--m-ngati, a.card--m-3sixty, a.card--crispy, a.card--seamoss { transition: transform 0.5s var(--ease-out); }
figure.card img, a.card--m-ngati, a.card--m-3sixty, a.card--crispy, a.card--seamoss img { transition: transform 0.8s var(--ease-out); }
a.card--m-ngati, a.card--m-3sixty, a.card--crispy { transform: translateY(-10rem); }
@media (min-width: 768px) { figure.card:hover, a.card--seamoss:hover { transform: translateY(-10rem); } }
a.card--m-ngati, a.card--m-3sixty, a.card--crispy { transform: scale(1.03); }
@media (min-width: 768px) { figure.card:hover img, a.card--seamoss:hover img { transform: scale(1.03); } }

/* ---- hover: a coloured plate slides up over the photo ---- */
.card { cursor: pointer; }
.card__plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 80rem 24rem 211rem 45rem;   /* measured from the supplied plates (510-wide) */
  color: var(--c-white);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.card__plate--blue { background: var(--c-blue-pill); }
.card__plate--pink { background: var(--c-pink); }
.card--3sixty .card__plate { padding-left: 88rem; padding-right: 60rem; }
.card--crispy .card__plate { padding-top: 94rem; padding-bottom: 104rem; }
.card--seamoss .card__plate { padding: 94rem 60rem 104rem 72rem; }

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 38rem;
  font-weight: 800;
  font-size: 28rem;
  line-height: 1;
}
.card__arrow {
  width: 34rem;
  height: 34rem;
  fill: currentColor;
  transform: rotate(-45deg);          /* → */
  transition: transform 0.4s var(--ease-spring);
}
@media (min-width: 768px) { .card:hover .card__arrow { transform: rotate(-45deg) translate(6rem, 6rem); transition-delay: 0.25s; } }

.card__name {
  margin-top: auto;
  font-weight: 800;
  font-size: 64rem;
  line-height: 1.071;
}
.card__result {
  margin-top: 28rem;
  padding-top: 22rem;
  border-top: 2rem solid currentColor;
  font-size: 24rem;
  line-height: 1.15;
  text-transform: none;
  opacity: 0.92;
}
.card__dates {
  margin-top: 70rem;
  font-size: 32rem;
  line-height: 1.071;
  text-transform: none;
}
.card:focus-visible .card__plate, .card.is-open .card__plate { opacity: 1; }
@media (min-width: 768px) { .card:hover .card__plate { opacity: 1; } }
.card:focus-visible { outline: 3rem solid var(--c-blue); outline-offset: 4rem; }

/* ============================================================
   REFERENCES — "available by request" note + contact button
   ============================================================ */
.refs { background: var(--c-white); padding: 120rem 0 160rem; }
.refs__title {
  width: 100%;
  margin: 0 0 56rem;
  font-weight: 800;
  font-size: 48rem;
  line-height: 1.071;
  color: var(--c-blue);
}
.refs__inner {
  position: relative;
  width: 1440rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40rem;
  padding: 0 95rem;
}
.refs__note {
  width: 100%;
  margin: 0 0 40rem;
  font-size: 32rem;
  line-height: 1.3;
  color: var(--c-black);
}
.refs .refs__ask { position: static; background: none; font-family: inherit; cursor: pointer; border-color: var(--c-blue); color: var(--c-blue); }
@media (min-width: 768px) { .refs .refs__ask:hover { background: var(--c-blue); color: var(--c-white); } }
/* "Back to top": same row as "Get in touch", right edge in line with the
   footer's address (75 units from the canvas edge; the row is padded 95) */
.refs .refs__top { position: static; margin: 0 -20rem 0 auto; border-color: var(--c-blue); color: var(--c-blue); }
@media (min-width: 768px) { .refs .refs__top:hover { background: var(--c-blue); color: var(--c-white); } }

/* ============================================================
   PROJECT PAGES — Figma Frames 68 (Ngāti) / 3SIXTY
   (frames are drawn 1603 wide incl. the nav overflow: x − 105)
   ============================================================ */
.project { background: var(--c-white); }
.project__inner {
  --head-bg: var(--c-blue-pill);
  position: relative;
  width: 1440rem;
  margin: 0 auto;
  min-height: var(--page-h, 3000rem);
  background: var(--head-bg);
  color: var(--c-white);
}
/* the header colour runs the full window width, not just the centred canvas */
@media (min-width: 768px) {
  .project__inner { border-image: linear-gradient(var(--head-bg) 0 0) fill 0 / 0 / 0 100vw; }
}
/* "Next project →" above the title */
.project__next {
  position: absolute;
  left: var(--col-l);
  top: calc(var(--title-t) - 84rem);
  display: inline-flex;
  align-items: center;
  gap: 14rem;
  height: 52rem;
  padding: 0 26rem 0.25em 28rem;
  border: 2rem solid var(--c-white);
  border-radius: 56rem;
  font-weight: 500;
  font-size: 22rem;
  line-height: 1;
  color: var(--c-white);
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-spring);
}
.project__next-arrow {
  width: 14rem;
  height: 14rem;
  fill: currentColor;
  transform: rotate(-45deg);          /* → */
  transition: transform 0.4s var(--ease-spring);
}
@media (min-width: 768px) { .project__next:hover { background: var(--c-white); color: var(--c-blue-pill); transform: translateY(-2rem); } }
@media (min-width: 768px) { .project__next:hover .project__next-arrow { transform: rotate(-45deg) translate(3rem, 3rem); } }

/* header entrance: title and place rise up, the right column slides in */
.page-project .project__next:not(.project__next--bottom):not(.project__next--top),
.page-project .project__title,
.page-project .project__place {
  opacity: 0;
  transform: translateY(28rem);
  animation: rise 0.9s var(--ease-out) forwards;
}
.page-project .project__next:not(.project__next--bottom):not(.project__next--top) { animation-delay: 0.05s; }
.page-project .project__title { animation-delay: 0.15s; }
.page-project .project__place { animation-delay: 0.35s; }
.page-project .project__about > * {
  opacity: 0;
  transform: translateX(36rem);
  animation: slide-in 0.9s var(--ease-out) forwards;
}
.page-project .project__desc { animation-delay: 0.45s; }
.page-project .project__what { animation-delay: 0.6s; }
.page-project .project__list { animation-delay: 0.75s; }
@keyframes slide-in { to { opacity: 1; transform: none; } }

/* bottom navigation: next project + back to top */
.project__footnav {
  position: absolute;
  left: var(--col-l);
  right: var(--col-l);
  bottom: 90rem;
  display: flex;
  justify-content: space-between;
  gap: 20rem;
}
.project__next--bottom, .project__next--top, .project__next--contact { position: static; }
.project__next--contact { margin-left: auto; margin-right: 24rem; font-family: inherit; background: none; }
.project__next-arrow--contact { transform: rotate(-90deg); }
.project__next-arrow--up { transform: rotate(-135deg); }   /* ↑ */
@media (min-width: 768px) { .project__next:hover .project__next-arrow--up { transform: rotate(-135deg) translate(3rem, 3rem); } }
/* crispy: the footnav sits at the end of the peach case-study body */
.cs .project__footnav, .project--crispy .cs .project__footnav, .project--seamoss .cs .project__footnav {
  position: static;
  margin: 140rem 103rem 0;
}
.project--crispy .cs .project__next { border-color: #a03f1b; color: #a03f1b; }
@media (min-width: 768px) { .project--crispy .cs .project__next:hover { background: #a03f1b; color: var(--c-white); } }

.project__title {
  position: absolute;
  left: var(--col-l);
  top: var(--title-t);
  width: 600rem;
  font-weight: 800;
  font-size: 96rem;
  line-height: 1.071;
  text-transform: uppercase;
}
.project__place {
  position: absolute;
  left: var(--col-l);
  top: var(--place-t);
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.071;
}
.project__about {
  position: absolute;
  left: var(--col-r);
  top: var(--about-t);
  width: var(--col-r-w);
}
.project__desc {
  font-size: 24rem;
  line-height: 1.05;
}
.project__what {
  margin: 44rem 0 0;
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.071;
}
.project__list {
  margin: 36rem 0 0;
  padding-left: 18rem;
  list-style: none;
  font-size: 24rem;
  line-height: 1.05;
}
.project__list li { position: relative; padding-left: 18rem; }
.project__list li + li { margin-top: 28rem; }
.project__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
}
.project__section { position: absolute; left: var(--col-l); right: 100rem; }
.project__label {
  margin: 0;
  font-weight: 500;
  font-size: 32rem;
  line-height: 1.071;
}
.project__brief {
  width: 605rem;
  margin-top: 22rem;
  font-size: 24rem;
  line-height: 1.25;
}
.project__brief p { margin: 0; }
.project__brief p + p { margin-top: 10rem; }
.project__brief strong { font-weight: 700; }
/* room reserved for the report images (not in the Figma frame yet) */
.project__gallery { height: 440rem; margin-top: 40rem; }

.project--ngati .project__inner {
  --page-h: 3364rem;
  /* same grid as Crispy / True Sea Moss (button, title, right column, text top-aligned
     with the title), moved down 111 because the nav sits on top of this photo */
  --col-l: 103rem; --title-t: 261rem; --place-t: 586rem;
  --col-r: 844rem; --col-r-w: 440rem; --about-t: 276rem;
}
/* Ngāti: the header text sits on a full-bleed photo of the printed Annual Report
   (1440 × 2160); the remaining report sections flow below it on the blue background */
.project--ngati, .project--ngati.page-project { background: var(--c-white); }
.project--ngati .project__inner { --head-bg: var(--c-white); min-height: 0; padding: 2300rem 0 90rem; box-sizing: border-box; color: var(--c-black); }
.project--ngati .project__title, .project--ngati .project__place { color: var(--c-white); }
.project--ngati .project__head > .project__next { color: var(--c-white); }
.project--ngati .project__footnav .project__next { color: var(--c-blue); border-color: var(--c-blue); text-shadow: none; }
@media (min-width: 768px) { .project--ngati .project__footnav .project__next:hover { background: var(--c-blue); color: var(--c-white); } }
.project--ngati .project__photo {
  position: absolute; left: 0; top: 0;
  width: 1440rem; height: 2160rem;
  background: url("../assets/img/ngati/annual-hero.webp") center top / cover no-repeat;
}
.project--ngati .project__photo::after {            /* soft darkening where the text sits */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 20, 10, 0.6) 0%, rgba(10, 20, 10, 0.5) 560rem, rgba(10, 20, 10, 0.3) 760rem, rgba(10, 20, 10, 0) 1000rem),   /* covers the What I did column too */
    linear-gradient(to top, rgba(10, 20, 10, 0.55) 0%, rgba(10, 20, 10, 0.25) 420rem, rgba(10, 20, 10, 0) 700rem);
}
.project--ngati .project__next,
.project--ngati .project__title, .project--ngati .project__place { z-index: 1; text-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35), 0 4rem 24rem rgba(0, 0, 0, 0.35); }
.project--ngati .project__next { text-shadow: none; }
.project--ngati .project__section {
  position: relative; left: auto; right: auto;
  display: grid;
  grid-template-columns: 605rem 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 72rem;
  align-items: start;
  margin: 0 100rem 0 103rem;   /* same left edge as the title */
}
.project--ngati .project__section + .project__section { margin-top: 140rem; }
/* the Annual Report brief sits on the dark grass at the bottom-left of the photo */
@media (min-width: 768px) {
  .project--ngati .project__section--1 {
    position: absolute; left: var(--col-l); top: 2070rem;
    transform: translateY(-100%);
    display: block; width: 605rem; margin: 0;
    color: var(--c-white);
    text-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35), 0 4rem 24rem rgba(0, 0, 0, 0.35);
  }
  .project--ngati .project__section--1 .project__label,
  .project--ngati .project__section--1 .project__brief { color: inherit; }
}
.project--ngati .project__section--2 { margin-top: 0; }
.project--ngati .project__label { grid-column: 1; }
.project--ngati .project__brief { grid-column: 1; }
.project--ngati .project__gallery { grid-column: 2; grid-row: 1 / span 2; height: auto; margin: 0; }
.project--ngati .project__gallery--row {
  grid-column: 1 / -1; grid-row: auto;
  display: flex; align-items: flex-start; gap: 56rem;
  margin-top: 56rem;
}
.project--ngati .project__mockup { display: block; width: 440rem; height: auto; flex: none; }
.project--ngati .project__spread-img { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: auto; margin-top: 40rem; border-radius: 12rem; box-shadow: 0 24rem 60rem rgba(0, 0, 0, 0.18); }
.project--ngati .project__list li + li { margin-top: 12rem; }
.project--ngati .project__about {              /* right column on the photo, like the other headers */
  color: var(--c-white);
  text-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35), 0 4rem 24rem rgba(0, 0, 0, 0.35);
}
.project--ngati .project__desc { margin: 0; }
.project--ngati .project__desc strong { font-weight: 700; }
/* "What I did": heading + bullet list, sized exactly like .project__what / .project__list */
.did { margin: 0; padding: 0; list-style: none; }
.did__cell { position: relative; padding-left: 36rem; font-size: 24rem; line-height: 1.05; }
.did__cell:not(.did__cell--title)::before { content: "·"; position: absolute; left: 18rem; top: 0; }
.did__cell.did__cell--title { padding: 0; }
.did__cell--title .project__what { margin: 44rem 0 36rem; font-weight: 500; font-size: 32rem; line-height: 1.071; }
.did__cell:not(.did__cell--title) + .did__cell { margin-top: 28rem; }
.project--ngati .project__spreads { margin: 0 103rem; }
.project--ngati .project__spreads-title { margin: 0 0 12rem; font-weight: 700; }
.project--ngati .project__spreads-intro { margin: 0 0 40rem; font-size: 24rem; line-height: 1.25; color: var(--c-black); }
.project--ngati .project__spread { margin: 0; }
.project--ngati .project__spread + .project__spread { margin-top: 48rem; }
.project--ngati .project__spread img { display: block; width: 100%; height: auto; border-radius: 12rem; box-shadow: 0 24rem 60rem rgba(0, 0, 0, 0.18); }
.project--ngati .project__spreads + .project__section { margin-top: 160rem; }
.project--ngati .project__footnav { position: static; margin: 160rem 103rem 0; }

.project--3sixty .project__inner {
  --page-h: 790rem;                         /* header only (same height as True Sea Moss); the work sits in .pbody below */
  /* same grid as Crispy / True Sea Moss; the title is three lines, so the place line sits lower */
  --col-l: 103rem; --title-t: 150rem; --place-t: 475rem;
  --col-r: 844rem; --col-r-w: 440rem; --about-t: 165rem;
}

/* white work area under a project header (3SIXTY) */
.project--3sixty, .project--3sixty.page-project { background: var(--c-white); }
.pbody { width: 1440rem; margin: 0 auto; padding: 140rem 100rem 90rem 103rem; box-sizing: border-box; color: var(--c-black); }   /* left edge = the title */
.pbody__section { display: grid; grid-template-columns: 605rem 1fr; grid-template-rows: auto 1fr; column-gap: 72rem; align-items: start; }
.pbody__section + .pbody__section { margin-top: 160rem; }
.pbody__section .project__label { grid-column: 1; }
.pbody__section .project__brief { grid-column: 1; }
.pbody__media { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.pbody__media img { display: block; width: 100%; height: auto; border-radius: 12rem; }
.pbody__media--tall { width: 440rem; justify-self: end; }
.pbody__grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32rem; margin-top: 56rem; }
.pbody__grid img { display: block; width: 100%; height: auto; border-radius: 12rem; box-shadow: 0 16rem 40rem rgba(0, 0, 0, 0.16); }
.pbody__dielines { grid-column: 1 / -1; margin-top: 64rem; }
.pbody__dielines img { display: block; width: 100%; height: auto; margin-top: 24rem; box-shadow: 0 12rem 30rem rgba(0, 0, 0, 0.12); }
.pbody__caption { margin: 0; font-size: 20rem; line-height: 1.3; opacity: 0.7; }
.pbody__pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 40rem; margin-top: 56rem; }
.pbody__pair img { display: block; width: 100%; height: auto; border-radius: 12rem; box-shadow: 0 16rem 40rem rgba(0, 0, 0, 0.16); }
.pbody .project__footnav { position: static; margin: 160rem 0 0; }
.pbody .project__next { color: var(--c-blue); border-color: var(--c-blue); }
@media (min-width: 768px) { .pbody .project__next:hover { background: var(--c-blue); color: var(--c-white); } }
.project--crispy .project__inner {
  --page-h: 750rem;                     /* blue header only (Figma Frame 70) */
  --col-l: 103rem; --title-t: 150rem; --place-t: 372rem;
  --col-r: 844rem; --col-r-w: 440rem; --about-t: 165rem;
  border-radius: 0;
}
.project--crispy .project__desc { text-align: justify; }
.project--crispy .project__what { margin-top: 56rem; }
.project--crispy .project__list { margin-top: 26rem; text-align: justify; line-height: 1.071; }
.project--crispy .project__list li + li { margin-top: 0; }

.project--seamoss .project__inner {
  --page-h: 850rem;                     /* blue header only; taller than the others: its text column is the longest */
  /* same grid as Crispy / 3SIXTY: button 66, title 150, text column top-aligned at 165 */
  --col-l: 103rem; --title-t: 150rem; --place-t: 370rem;
  --col-r: 844rem; --col-r-w: 440rem; --about-t: 165rem;
  border-radius: 0;
}
.project--seamoss .project__title { width: 640rem; }
.project--seamoss .project__desc, .project--seamoss .project__list { text-align: left; }
.project--seamoss .project__what { margin-top: 56rem; }
.project--seamoss .project__list li + li { margin-top: 28rem; }
.project__tools {
  position: absolute;
  left: var(--col-l);
  top: calc(var(--place-t) + 65rem);   /* just under the place line */
  display: flex;
  gap: 10rem;
  align-items: center;
  opacity: 0;
  animation: rise 0.9s var(--ease-out) 0.45s forwards;
}
.project__tools img { width: 54rem; height: 54rem; display: block; }
.cs--seamoss { padding: 84rem 0 160rem; }
.cs__captions {
  display: grid;
  grid-template-columns: 700rem 1fr;
  column-gap: 60rem;
  padding: 40rem 60rem 0 95rem;
}
.cs__caption {
  margin: 0;
  font-size: 22rem;
  line-height: 1.25;
  color: var(--c-black);
}
.cs__caption--boxes { width: 440rem; margin: 0 0 40rem 103rem; font-size: 24rem; line-height: 1.3; }   /* same left edge as the title and tool icons */
.project--seamoss.page-project, .project--seamoss { background: #f5f5f5; }   /* matches the open-box render background */
.project--seamoss .cs .project__next { border-color: var(--c-blue-pill); color: var(--c-blue-pill); }
@media (min-width: 768px) { .project--seamoss .cs .project__next:hover { background: var(--c-blue-pill); color: var(--c-white); } }

/* ---- Crispy case study: terracotta header on a peach page ---- */
.project--crispy.cs-page { background: #feedd9; }
.project--crispy .project__inner { --head-bg: #a03f1b; }
/* experience headers: the work shows through the header colour, across the whole
   window (desktop; phones set the same idea on .project__inner in the phone block) */
@media (min-width: 768px) {
  .project--3sixty .project__inner  { --head-tint: rgba(144, 156, 207, 0.82); --head-img: url("../assets/img/3sixty/leader-packs.webp"); --head-pos: center 30%; }
  .project--seamoss .project__inner { --head-tint: rgba(144, 156, 207, 0.82); --head-img: url("../assets/img/card-seamoss.webp");        --head-pos: center 40%; }
  .project--crispy .project__inner  { --head-tint: rgba(160, 63, 27, 0.82);   --head-img: url("../assets/img/crispy/menu-jars.webp");   --head-pos: center 35%; }
  .project--3sixty .project__inner::before,
  .project--seamoss .project__inner::before,
  .project--crispy .project__inner::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
    background: linear-gradient(var(--head-tint), var(--head-tint)), var(--head-img) var(--head-pos) / cover no-repeat;
    pointer-events: none;
  }
}
.project--crispy .project__next { border-color: var(--c-white); }
@media (min-width: 768px) { .project--crispy .project__next:hover { background: var(--c-white); color: #a03f1b; } }

.cs {
  position: relative;
  width: 1440rem;
  margin: 0 auto;
  padding: 110rem 0 160rem;
  color: var(--c-black);
}
.cs__section { position: relative; margin-top: 130rem; }
.cs__brief {
  width: 900rem;
  margin: 0 0 0 60rem;
  font-size: 24rem;
  line-height: 1.25;
}
.cs__brief p { margin: 0; }
.cs__brief p + p { margin-top: 10rem; }
.cs__brief strong { font-weight: 700; }
.cs__section:first-child { margin-top: 0; }
.cs__label {
  margin: 0 0 40rem 60rem;
  font-weight: 800;
  font-size: 64rem;
  line-height: 1.071;
  text-transform: uppercase;
  color: var(--c-black);
}
.cs__logo { display: block; width: 1343rem; height: auto; margin: 0 0 110rem 60rem; }
.cs__fonts { display: block; width: 1440rem; height: auto; }
.cs__full { display: block; width: 1440rem; height: auto; }
.cs__cards-merch { display: block; width: 1318rem; height: auto; margin: 0 0 0 60rem; }
.cs__section--tight { margin-top: 0; }

.cs__cards {
  display: grid;
  grid-template-columns: 557rem 617rem;
  column-gap: 60rem;
  row-gap: 40rem;
  padding-left: 107rem;
  align-items: center;
}
.cs__cards img { width: 100%; height: auto; border-radius: 26rem; }
.cs__note {
  margin: 0;
  font-size: 22rem;
  line-height: 1.25;
  text-align: justify;
}
.cs__note--cards { grid-column: 1 / -1; max-width: 430rem; margin-bottom: 20rem; }

/* notes laid over a composite export (positions in frame px) */
.cs__fig { position: relative; }
.cs__note--over {
  position: absolute;
  left: calc(var(--x) * 1rem);
  top: calc(var(--y) * 1rem);
  width: calc(var(--w) * 1rem);
  margin: 0;
  z-index: 1;
}

.cs__note--olive { color: #4d541a; font-weight: 500; font-size: 24rem; line-height: 1.1; text-align: left; }

/* ============================================================
   FOOTER — frame y 6491 → 6785
   ============================================================ */
.footer { background: var(--c-blue-soft); }
.page-project .footer { background: var(--c-blue-pill); }           /* same blue as the project header */
.page-project.cs-page--crispy .footer { background: #a03f1b; }       /* Crispy Eatery: terracotta */
/* Ngāti: no header bar — the menu floats transparently over the top of the photo */
.page-photo .nav { position: absolute; left: 0; right: 0; background: transparent; border-color: transparent; z-index: 60; }
.page-photo .nav__link { text-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35), 0 4rem 20rem rgba(0, 0, 0, 0.35); }
.page-photo .nav__logo img { filter: drop-shadow(0 2rem 10rem rgba(0, 0, 0, 0.35)); }
.cs-page--crispy .nav { background: #feedd9; }                          /* Crispy Eatery: beige header, terracotta links */
.cs-page--crispy .nav__link { color: #a03f1b; }
.cs-page--crispy .nav__link::after { background: #a03f1b; }
.footer__inner { height: 294rem; }
.footer__top { display: none; }   /* phone only; desktop has it beside "Get in touch" */
.footer__col { position: absolute; top: 72rem; display: flex; flex-direction: column; gap: 24rem; }
.footer__col--contact { left: 123rem; }
.footer__col--social  { left: 590rem; }
.footer__line {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  font-size: 24rem;
  line-height: 1.2;
  color: var(--c-white);
  white-space: nowrap;
  transition: opacity 0.3s;
}
@media (min-width: 768px) { .footer__line:hover { opacity: 0.75; } }
.footer__icon { width: 24rem; height: 24rem; flex: none; }
.footer__small {
  position: absolute;
  right: 75rem;
  top: 190rem;
  margin: 0;
  font-size: 16rem;
  line-height: 1.2;
  color: var(--c-white);
  white-space: nowrap;
}
.footer__credit {
  position: absolute;
  right: 75rem;
  top: 222rem;
  margin: 0;
  font-size: 16rem;
  line-height: 1;
  color: var(--c-white);
  opacity: 0.8;
  white-space: nowrap;
}

/* ============================================================
   CV MODAL — Figma Frame 66 (1041-wide blue panel, r52)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 40, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__panel {
  position: relative;
  width: 1041rem;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-blue);
  border: 1rem solid var(--c-black);
  border-radius: 52rem;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.modal__bar {
  flex: none;
  position: relative;
  height: 96rem;
  color: var(--c-white);
}
.modal__close {
  position: absolute;
  left: 78rem;              /* arrow at frame x 102 inside the 24-offset panel */
  top: 50%;
  transform: translateY(-50%);
  width: 56rem;
  height: 56rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s;
}
.modal__close svg { width: 24rem; height: 24rem; fill: currentColor; transition: transform 0.35s var(--ease-spring); }
@media (min-width: 768px) { .modal__close:hover { background: rgba(255, 255, 255, 0.18); } }
@media (min-width: 768px) { .modal__close:hover svg { transform: translate(3rem, 3rem); } }
.modal__download {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 242rem;            /* text starts at frame x 823 */
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 24rem;
  line-height: 1.071;
  color: inherit;
}
.modal__download::after {
  content: "";
  position: absolute;
  left: 0; bottom: 30rem;
  width: 134rem;
  height: 2rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
@media (min-width: 768px) { .modal__download:hover::after { transform: scaleX(1); } }
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-white);
  -webkit-overflow-scrolling: touch;
}
.modal__page { width: 100%; height: auto; }

/* contact variant — from the supplied mockup (658 × 345, header 84) */
.modal--contact .modal__panel { width: 658rem; border-radius: 34rem; }
.modal--contact .modal__bar { height: 84rem; }
.modal--contact .modal__close { left: 40rem; width: 56rem; height: 56rem; }
.modal--contact .modal__close svg { width: 34rem; height: 34rem; }
.modal__title {
  position: absolute;
  left: 130rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-weight: 500;
  font-size: 24rem;
  line-height: 1.071;
}
.contact {
  padding: 86rem 60rem 80rem 75rem;
  background: var(--c-cream);
}
.contact__list { margin: 0; }
.contact__row {
  display: grid;
  grid-template-columns: 147rem 1fr;
  align-items: baseline;
  font-size: 24rem;
  line-height: 1.071;
}
.contact__row + .contact__row { margin-top: 14rem; }
.contact__label { margin: 0; }
.contact__value { margin: 0; word-break: break-word; }
.contact__value a { transition: color 0.25s; }
@media (min-width: 768px) { .contact__value a:hover { color: var(--c-blue); } }

/* open/close animation */
.modal__backdrop { opacity: 0; transition: opacity 0.3s ease; }
.modal__panel { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
body.modal-lock { overflow: hidden; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28rem);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* keep hover lifts working after reveal */
a.card--m-ngati, a.card--m-3sixty, a.card--crispy { transform: translateY(-10rem); }
@media (min-width: 768px) { figure.card.reveal.is-visible:hover, a.card--seamoss.reveal.is-visible:hover { transform: translateY(-10rem); } }
@media (min-width: 768px) { .why__card.reveal.is-visible:hover { transform: translateY(-6rem); } }

/* "Why work with me?" entrance: the grey block slides in from the left,
   then the four pink cards pop in one after another with a little bounce */
.why__intro.reveal {
  transform: translateX(-60rem);
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
}
.why__intro.reveal.is-visible { transform: none; }
@keyframes why-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.why__card.reveal { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.why__card.reveal.is-visible {
  opacity: 1;
  transform-origin: 50% 100%;
  animation: why-pop 0.7s var(--ease-spring) backwards;   /* backwards: hover transform works once it has played */
}
.why__card--1.reveal.is-visible { animation-delay: 0.15s; }
.why__card--2.reveal.is-visible { animation-delay: 0.30s; }
.why__card--3.reveal.is-visible { animation-delay: 0.45s; }
.why__card--4.reveal.is-visible { animation-delay: 0.60s; }
@media (min-width: 768px) { .why__card.reveal.is-visible:hover { transform: translateY(-6rem) rotate(-1.5deg); } }
@media (min-width: 768px) { .why__card--2.reveal.is-visible:hover, .why__card--4.reveal.is-visible:hover { transform: translateY(-6rem) rotate(1.5deg); } }
@media (min-width: 768px) { .why__intro.reveal.is-visible:hover .why__arrow { transform: rotate(-45deg) translate(6rem, 6rem); } }

/* ============================================================
   MOBILE (< 768px) — reflowed layout
   ============================================================ */
@media (max-width: 767px) {
  html { font-size: 16px; }
  #experience, #why { scroll-margin-top: 80px; }

  .nav__inner, .hero__inner, .sheet__inner, .footer__inner {
    width: 100%;
    height: auto;
  }

  /* nav: stays pinned to the top. overflow-x: hidden on html and body
     makes body a scroll box that never scrolls, so sticky never kicks in;
     clip cuts off the sideways overflow the same way without that */
  html, body { overflow-x: clip; }
  .nav { height: auto; border-width: 2px; }
  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px 6px 16px;
  }
  .nav__logo { position: static; width: 52px; height: 36px; flex: none; }
  /* dog run: the desktop keyframes are in rem (16px each here), so the little
     hop to the right was ~100px and the run ~10,000px. Phone version in px:
     straight off to the left in 250ms, then back in */
  .nav__logo.is-running { animation: run-away-phone 0.25s cubic-bezier(0.5, 0, 0.9, 0.5) forwards; }
  .nav__logo.is-returning { animation: run-back-phone 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
  /* links share the free width as equal, finger-sized (44px+) tap cells */
  .nav__links { flex: 1; display: flex; justify-content: flex-end; gap: 2px; max-width: 360px; }
  .nav__link {
    position: static;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 4px;
    border-radius: 10px;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .nav__link::after { display: none; }
  .nav__link:active { background: rgba(255, 255, 255, 0.18); }
  .nav__link:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

  /* hero */
  .hero__inner { padding: 40px 16px 0; }
  .hero__title {
    position: static;
    width: auto;
    font-size: clamp(44px, 13vw, 72px);
  }
  .hero__text {
    position: static;
    width: auto;
    margin: 24px auto 0;
    max-width: 520px;
    font-size: 17px;
    line-height: 1.3;
  }
  .hero__text br { display: none; }
  .hero__cta { position: static; display: inline-flex; margin: 22px 12px 0; font-size: 18px; gap: 10px; }
  .hero__cta--cv { margin-top: 10px; }
  .hero__cta-arrow { width: 12px; height: 13px; }
  .hero__inner { text-align: center; }

  /* "Hard skills" / "Soft skills" label the two halves of the desktop cluster; a pile has no halves */
  .pill--label { display: none; }
  /* falling pills pass behind the greeting and buttons (and the sticky nav, z-index 50) */
  .hero__title, .hero__text, .hero__cta { position: relative; inset: auto; z-index: 30; }
  /* skills: one pile, first pill at the bottom; when the pile scrolls into
     view the pills fall in order and land on top of each other */
  .skills {
    position: static;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin: 44px auto 0;
    padding: 8px 0 2px;    /* the bottom pill rests on the white tab's edge, as on desktop (padding, not margin: a margin would collapse out of the hero) */
  }
  .pill,
  .pill--sm,
  .pill--md {
    position: static;
    flex: none;
    width: auto;
    height: 40px;
    margin: -3px 0;
    padding: 0 18px 0.25em;
    border-width: 2px;
    border-radius: 56px;
    font-size: 15px;
    --land: translateX(calc(var(--dx, 0) * 1px)) rotate(calc(var(--r) * 0.35deg));
    transform: var(--land);
  }
  .skills:not(.is-visible) .pill,
  .skills.is-visible .pill,
  .skills.is-visible .pill.is-settled { animation: none; transform: var(--land); }
  /* the drop itself is simulated in js/main.js; until a pill is dropped it stays hidden */
  .skills > .pill:first-child { --land: translateX(calc(var(--dx, 0) * 1px)); }   /* bottom pill: flat on the tab */
  .skills.is-sim .pill { opacity: 0; }
  .skills.is-sim .pill.is-live { opacity: 1; }
  /* phone: no hover lift. The JS drop writes a new transform every frame,
     so the desktop transform transition must be off or the pills lag behind */
  .pill { transition: none; cursor: inherit; }
  

  /* sheet */
  .sheet {
    background: linear-gradient(var(--c-cream) 0 40px, var(--c-white) 40px);
    padding-bottom: 40px;
  }
  .sheet__inner {
    width: calc(100% + 2px);
    margin-left: -1px;
    background: var(--c-white);
    border: 1px solid var(--c-sheet-border);
    border-bottom: 0;
    border-radius: 40px 40px 0 0;
    padding: 18px 0 40px;
  }

  .tools { position: static; font-size: 16px; margin-bottom: 32px; --tools-clear: 18px; --tools-fade: 80px; }
  .tools__track { padding-left: 16px; animation-duration: 40s; }

  /* why */
  .why { position: static; padding: 0 16px; }
  .why__statement {
    position: static;
    width: auto;
    font-size: 22px;
    line-height: 1.15;
    text-align: left;
    margin-bottom: 24px;
  }
  .why__intro {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    height: 128px;          /* compact on phones: the block only carries one line */
    border-width: 1px;
    border-radius: 24px;
  }
  .why__question {
    left: 24px; top: auto; bottom: 22px;
    width: auto;
    font-size: 22px;
    font-weight: 500;
  }
  .why__arrow { left: auto; right: 22px; top: auto; bottom: 24px; width: 18px; height: 18px; }
  .why__cards {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .why__card {
    position: relative;
    left: auto !important; top: auto !important;
    width: auto;
    height: auto;
    min-height: 150px;
    padding: 18px 16px 16px;
    border-width: 1px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .why__card-title,
  .why__card-text {
    position: static;
    width: auto;
    top: auto !important;
  }
  .why__card-title { font-size: 20px; font-weight: 500; }
  .why__card-text { font-size: 13px; line-height: 1.15; }

  /* experience */
  .experience { padding: 44px 16px 0; }
  .experience__title {
    position: static;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 24px;
  }
  .experience__grid {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 440px;
    margin: 0 auto;
  }
  .top-row { display: none; }
  .card--m-ngati, .card--m-3sixty {
    display: block;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--c-black);
    border-radius: 24px;
  }
  .card--m-ngati img, .card--m-3sixty img { width: 100%; height: auto; }
  .card--crispy, .card--seamoss {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    border-radius: 24px;
  }
  .card--crispy img, .card--seamoss img { height: auto; }
  a.card--m-ngati, a.card--m-3sixty, a.card--crispy, a.card--m-ngati, a.card--m-3sixty, a.card--crispy { transform: none; }

  .card__plate,
  .card--3sixty .card__plate, .card--crispy .card__plate, .card--seamoss .card__plate {
    padding: 28px 24px 40px;
  }
  .card__more { gap: 14px; font-size: 15px; }
  .card__arrow { width: 16px; height: 16px; }
  .card__name { font-size: 40px; }
  .card__dates { margin-top: 28px; font-size: 16px; line-height: 1.2; }
  .card__result { margin-top: 14px; padding-top: 12px; border-top-width: 1.5px; font-size: 13px; }

  /* cv modal */
  .modal { padding: 12px; }
  .modal__panel { border-radius: 24px; border-width: 1px; }
  .modal__bar { height: 56px; }
  .modal__download { width: auto; padding: 0 20px; font-size: 15px; }
  .modal__close { left: 8px; width: 40px; height: 40px; }
  .modal__close svg { width: 18px; height: 18px; }
  .modal--contact .modal__panel { border-radius: 24px; }
  .modal--contact .modal__bar { height: 56px; }
  .modal--contact .modal__close { left: 8px; width: 40px; height: 40px; }
  .modal--contact .modal__close svg { width: 20px; height: 20px; }
  .modal__title { left: 56px; font-size: 16px; }
  .contact { padding: 28px 20px 32px; }
  .contact__row { grid-template-columns: 72px 1fr; font-size: 16px; }
  .contact__row + .contact__row { margin-top: 12px; }

  /* reference letters */
  .refs { padding: 40px 16px 48px; }
  .refs__title { font-size: 28px; margin-bottom: 20px; }
  .refs__inner { width: 100%; padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; }
  .refs__note { font-size: 18px; margin-bottom: 4px; }
  .refs .refs__ask { margin-right: auto; }
  .refs .refs__ask { height: 40px; padding: 0 18px 0.2em 20px; font-size: 15px; gap: 8px; border-width: 2px; }
  .refs__ask .project__next-arrow { width: 10px; height: 10px; }

  /* project pages */
  .project__inner { width: 100%; min-height: 0; padding: 32px 20px 40px; }
  /* the 0.22em bottom padding lifts Cygre's text to the optical centre of the pill
     (its glyphs sit low in the line box); nowrap keeps every label on one line */
  .project__next { position: static; margin-bottom: 22px; height: 40px; padding: 0 18px 0.22em; border-width: 2px; border-radius: 56px; font-size: 15px; gap: 8px; white-space: nowrap; }
  .project__next .project__next-arrow { flex: none; }
  .project__footnav .project__next--contact { margin-left: 0; margin-right: 0; }   /* desktop pushes it right by 24rem, a third of a phone */
  .project__footnav { position: static; margin: 36px 0 0; flex-wrap: wrap; gap: 10px; }
  .cs .project__footnav, .project--crispy .cs .project__footnav, .project--seamoss .cs .project__footnav { margin: 36px 16px 0; }
  .project__footnav .project__next { margin-bottom: 0; }
  .project__next-arrow { width: 10px; height: 10px; }
  .project__title { position: static; width: auto; font-size: clamp(36px, 10vw, 56px); }
  .project__place { position: static; margin-top: 12px; font-size: 18px; }
  .project__about { position: static; width: auto; margin-top: 28px; }
  .project__desc { font-size: 16px; line-height: 1.3; }
  .project__what { margin-top: 24px; font-size: 20px; }
  .project__list { margin-top: 14px; padding-left: 0; font-size: 16px; line-height: 1.3; }
  .project__list li { padding-left: 14px; }
  .project__list li + li { margin-top: 12px; }
  .project__tools { position: static; margin-top: 16px; gap: 8px; }
  .project__tools img { width: 36px; height: 36px; }
  .project__section { position: static; margin-top: 40px; }
  .project__label { font-size: 20px; }
  .project__brief { width: auto; margin-top: 10px; font-size: 15px; line-height: 1.3; }
  .cs__brief { width: auto; margin: 0; padding: 0 16px; font-size: 15px; line-height: 1.3; }   /* same 16px gutter as the label above */
  .project__gallery { height: 160px; margin-top: 16px; }
  .page-photo .nav { position: sticky; background: var(--c-blue); border-color: var(--c-black); }
  .project--ngati .project__title, .project--ngati .project__place { color: var(--c-black); }
  .project--ngati .project__next:not(.project__footnav .project__next) { color: var(--c-blue); border-color: var(--c-blue); }
  .page-photo .nav__link { text-shadow: none; }
  .page-photo .nav__logo img { filter: none; }
  .kx { width: 100%; padding: 20px 16px 40px; }
  .kx .kx__next { margin-bottom: 20px; }
  .kx .kx__title { font-size: 34px; }
  .kx__arrow { width: 24px; height: 24px; margin: 24px 0 0 10px; }
  .kx__grid { display: block; margin-top: 36px; }
  .kx__desc { font-size: 15px; text-align: left; }
  .kx__photo { margin-top: 24px; }
  .kx__photo img { border-radius: 18px; }
  .kx__stage, .kx__stage:first-child { margin: 44px 0 0; }
  .kx__tag { top: -14px; padding: 8px 18px 9px; font-size: 14px; border-radius: 20px; }
  .kx__contrib { margin-top: 36px; font-size: 15px; }
  .kx__h { font-size: 16px; margin-bottom: 12px; }
  .kx__contrib ul { padding-left: 14px; }
  .kx__contrib li { padding-left: 0; }
  .kx__contrib li + li { margin-top: 12px; }
  .kx .kx__contrib ul.kx__tools { margin-top: 24px; justify-content: flex-start; gap: 10px; }
  .kx .kx__contrib ul.kx__tools li { flex: none; padding: 0; margin: 0; }
  .kx__tools img { width: 32px; height: 32px; }
  .kx__cups { margin-top: 48px; }
  .kx__cups-row { gap: 10px; margin: 20px 0 0; flex-wrap: wrap; justify-content: center; }
  .kx__cups-row img { height: 180px; }
  .kx__cups-row img:nth-child(4) { display: none; }
  .kx__tubes { flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; }
  .kx__tag--boxes { margin-top: 48px; }
  .kx__tag--boxes + .kx__tubes { margin-top: 20px; }
  .kx__tubes img { width: 100%; height: auto; max-width: 100%; }
  .vt__intro { display: block; margin-top: 32px; }
  .vt__text li + li { margin-top: 12px; }
  .vt__stickers { margin-top: 24px; }
  .vt__block { margin-top: 32px; }
  .vt__block--wide { margin-left: -16px; margin-right: -16px; }
  .vt__pair { gap: 10px; margin-top: 32px; }
  .vt__photos { gap: 10px; margin-top: 32px; }
  .vt__photos img { border-radius: 14px; }
  .kx .project__footnav { margin: 36px 0 0; }
  .kx .project__footnav .project__next { margin-bottom: 0; }
  .freelance__title { position: static; margin: 24px 0 0; font-size: 28px; }
  #freelance { scroll-margin-top: 80px; }
  .card--fl { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; border-width: 2px; border-radius: 24px; }
  
  .card--fl .card__plate { padding: 28px 20px 24px 24px; }
  .card--fl .card__name { font-size: 26px; }
  .pbody { width: 100%; padding: 32px 20px 40px; }
  .pbody__section { display: block; }
  .pbody__section + .pbody__section { margin-top: 40px; }
  .pbody__media { margin: 16px 0 0; }
  .pbody__media--tall { width: 70%; margin-left: auto; margin-right: auto; }
  .pbody__media img { border-radius: 8px; }
  .pbody__grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  .pbody__grid img { border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16); }
  .pbody__dielines { margin-top: 20px; }
  .pbody__dielines img { margin-top: 10px; }
  .pbody__caption { font-size: 13px; }
  .pbody__pair { gap: 10px; margin-top: 16px; }
  .pbody__pair img { border-radius: 6px; }
  .pbody .project__footnav { margin: 36px 0 0; }
  .project--ngati .project__inner { padding: 32px 20px 40px; }
  /* 3SIXTY, True Sea Moss and Crispy: the work shows through the coloured header behind the
     description, tinted in the page colour so the white text stays readable */
  .project--3sixty .project__inner {
    background: linear-gradient(rgba(144, 156, 207, 0.8), rgba(144, 156, 207, 0.86)),
                url("../assets/img/3sixty/leader-packs.webp") center 30% / cover no-repeat;
  }
  /* Ngāti: the header has the work sections below it in the same block, so
     the photo goes behind .project__head (bled to the screen edges) instead
     of sitting as a separate picture */
  .project--ngati .project__head {
    margin: -32px -20px 0;
    padding: 32px 20px 36px;
    background: linear-gradient(rgba(144, 156, 207, 0.8), rgba(144, 156, 207, 0.86)),
                url("../assets/img/ngati/annual-hero.webp") center / cover no-repeat;
    color: var(--c-white);
  }
  .project--ngati .project__head .project__photo { display: none; }
  .project--ngati .project__about { text-shadow: none; }
  .project--ngati .project__head .project__title,
  .project--ngati .project__head .project__place,
  .project--ngati .project__head .project__desc { color: var(--c-white); }
  .project--ngati .project__inner .project__head .project__next { color: var(--c-white); border-color: var(--c-white); }
  .project--seamoss .project__inner {
    background: linear-gradient(rgba(144, 156, 207, 0.8), rgba(144, 156, 207, 0.86)),
                url("../assets/img/card-seamoss.webp") center / cover no-repeat;
  }
  .project--crispy .project__inner {
    background: linear-gradient(rgba(160, 63, 27, 0.8), rgba(160, 63, 27, 0.86)),
                url("../assets/img/crispy/menu-jars.webp") center 35% / cover no-repeat;
  }
  /* Crispy and True Sea Moss set desktop gaps in rem (1rem = 16px on a phone):
     56rem above "What I did" became 896px. Back to the phone spacing, and
     left-aligned: justified text leaves wide gaps in a narrow column */
  .project--crispy .project__what, .project--seamoss .project__what { margin-top: 24px; }
  .project--crispy .project__list { margin-top: 14px; line-height: 1.3; }
  .project--crispy .project__list li + li, .project--seamoss .project__list li + li { margin-top: 12px; }
  .project--crispy .project__desc, .project--crispy .project__list { text-align: left; }
  .project--seamoss .project__title { width: auto; }   /* desktop 640rem = 10,240px here */
  .project--ngati .project__photo { position: static; width: 100%; height: auto; aspect-ratio: 2 / 3; margin-top: 28px; border-radius: 10px; }
  .project--ngati .project__photo::after { display: none; }
  .project--ngati .project__title, .project--ngati .project__place { text-shadow: none; }
  .project--ngati .project__section { position: static; display: block; width: auto; margin: 40px 0 0; }
  .project--ngati .project__gallery { height: auto; margin: 16px 0 0; }
  .project--ngati .project__gallery--row { flex-direction: column; gap: 18px; margin-top: 18px; }
  .project--ngati .project__mockup { width: 70%; margin: 0 auto; }
  .project--ngati .project__spread-img { margin-top: 0; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
  .project--ngati .project__gallery:empty { display: none; }
  .project--ngati .project__section + .project__section { margin-top: 40px; }
  .project--ngati .project__about { display: block; margin: 28px 0 0; }
  .project--ngati .project__desc { width: auto; font-size: 16px; }
  /* "What I did" at phone sizes (same as the other pages' list) */
  .did { width: auto; }
  .did__cell { padding-left: 14px; font-size: 16px; line-height: 1.3; }
  .did__cell:not(.did__cell--title)::before { left: 0; }
  .did .did__cell--title .project__what { margin: 24px 0 14px; font-size: 20px; }
  .did__cell:not(.did__cell--title) + .did__cell { margin-top: 12px; }
  .project--ngati .project__what { margin-top: 18px; }
  .project--ngati .project__spreads { margin: 28px 0 0; }
  .project--ngati .project__spreads-title { margin: 0 0 6px; }
  .project--ngati .project__spreads-intro { margin: 0 0 14px; font-size: 15px; }
  .project--ngati .project__spread + .project__spread { margin-top: 14px; }
  .project--ngati .project__spread img { border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
  .project--ngati .project__spreads + .project__section { margin-top: 40px; }
  .project--ngati .project__gallery img { border-radius: 10px; }
  .project__brief p + p, .cs__brief p + p { margin-top: 8px; }
  .project--ngati .project__footnav { margin: 36px 0 0; }

  /* crispy case study */
  .cs { width: 100%; padding: 36px 0 48px; }
  .cs__section { margin-top: 44px; }
  .cs__label { margin: 0 0 16px 16px; font-size: 28px; }
  .cs__logo { width: calc(100% - 32px); margin: 0 16px 28px; }
  .cs__fonts, .cs__full { width: 100%; }
  .cs__cards-merch { width: calc(100% - 32px); margin: 0 16px; }
  .cs__captions { grid-template-columns: 1fr; gap: 14px; padding: 20px 16px 0; }
  .cs__caption { font-size: 14px; line-height: 1.3; }
  .cs__caption--boxes { width: auto; margin: 16px 16px 24px; font-size: 15px; }
  .cs__cards { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
  .cs__cards img { border-radius: 12px; }
  .cs__note { font-size: 14px; line-height: 1.3; text-align: left; }
  .cs__note--cards { max-width: none; margin-bottom: 4px; }
  .cs__note--over { position: static; width: auto; margin: 0 16px 16px; }

  /* footer */
  .footer__inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px 16px 44px;
  }
  .footer__col { position: static; gap: 10px; align-items: flex-start; }
  /* "Back to top" at the top of the footer, above the contact lines */
  .footer__top { display: inline-flex; align-self: flex-start; margin: 0; }
  .refs .refs__top { display: none; }   /* phones use the one in the footer */
  .footer__line { font-size: 17px; gap: 8px; }
  .footer__icon { width: 18px; height: 18px; }
  .footer__small { position: static; margin-top: 6px; font-size: 13px; }
  .footer__credit { position: static; margin-top: 6px; font-size: 13px; white-space: normal; }

  .reveal { transform: translateY(20px); }

  /* experience cards: no hover on phones; the plate is revealed by the
     scroll stop in js/main.js, tinted at 80% so the work shows through */
  /* every card is the same height and fits between the sticky section title
     and the hint pill; freelance cards match the experience ones */
  .experience .card {
    height: min(calc(100svh - var(--nav-h, 64px) - 56px - 32px - 96px), 170vw);   /* nav, title, its fade, hint */
    aspect-ratio: auto;
  }
  .experience .card > img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
  /* the outline is drawn on top of the card, not as its border: Crispy and
     True Sea Moss had none, and while a card fades or slides the browser can
     paint the photo over a real border. clip-path keeps the rounded corners
     clipped during those animations too */
  .experience .card { position: relative; border: 0; clip-path: inset(0 round 24px); }
  .experience .card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 2px solid var(--c-black);
    border-radius: 24px;
    pointer-events: none;
  }
  .card--fl .card__plate { padding: 28px 24px 40px; }
  .card--fl .card__name { font-size: 40px; }
  /* section titles stay under the nav while their cards scroll by;
     "Freelance projects" slides up over "Experience" when its cards begin */
  .experience__title, .freelance__title {
    position: sticky;
    top: var(--nav-h, 64px);
    z-index: 5;
    margin: 0 -16px;
    padding: 12px 16px;
    background: var(--c-white);
    font-size: 32px;
    line-height: 1;
  }
  /* soft white fade under the title, so cards scroll into it instead of under a hard edge */
  .experience__title::after, .freelance__title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 32px;
    background: linear-gradient(var(--c-white), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  /* room under each title for its fade, so the first card sits clear of it too */
  .experience__title { margin-bottom: 36px; }
  .freelance__title { margin-bottom: 16px; }   /* + the grid's 20px gap */
  /* pinned titles fade in without the reveal's slide, so their fade never dips onto a resting card */
  .experience__title.reveal, .freelance__title.reveal { transform: none; }
  .freelance__title { z-index: 6; margin-top: 4px; }
  /* in the deck the freelance title shows only once its cards are reached */
  .experience.is-deck .experience__title,
  .experience.is-deck .freelance__title { transition: opacity 0.45s var(--ease-out); }
  .experience.is-deck .freelance__title { opacity: 0; }
  .experience.is-deck.is-fl .freelance__title { opacity: 1; }
  .experience.is-deck.is-fl .experience__title { opacity: 0; }   /* never peeks out behind "Freelance projects" */
  .card__plate--blue { background: rgba(144, 156, 207, 0.8); }   /* --c-blue-pill */
  .card__plate--pink { background: rgba(255, 189, 220, 0.8); }   /* --c-pink */
  .card__plate { transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
  .card__plate > * { opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out); }
  .card.is-open .card__plate,
  .card.is-open .card__plate > * { opacity: 1; transform: none; }
  .card.is-open .card__plate > :nth-child(1) { transition-delay: 0.15s; }
  .card.is-open .card__plate > :nth-child(2) { transition-delay: 0.25s; }
  .card.is-open .card__plate > :nth-child(3) { transition-delay: 0.35s; }
  .card.is-open .card__plate > :nth-child(4) { transition-delay: 0.45s; }
  .card.is-open .card__arrow { transform: rotate(-45deg) translate(3px, 3px); transition-delay: 0.6s; }

  /* experience deck: the page only moves by the deck's own glides */
  html.scroll-hold { overflow: hidden; overscroll-behavior: none; }   /* html only: hidden on body would unstick the nav */
  /* only the card in view shows; the one leaving fades out as the next fades in */
  .experience .card { transition: opacity 0.45s var(--ease-out); }
  .experience.is-deck .card { opacity: 0; }
  .experience.is-deck .card.is-current { opacity: 1; transition-duration: 0.6s; }

  /* deck position pill ("2 / 7 Next", then "Keep scrolling") */
  .scroll-hint {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px 0.2em 20px;
    border: 2px solid var(--c-black);
    border-radius: 56px;
    background: var(--c-blue);
    color: var(--c-white);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
  }
  .scroll-hint svg { width: 11px; height: 11px; fill: currentColor; transform: rotate(45deg); }   /* ↓ */
  .scroll-hint.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }   /* tap = next card */
  .scroll-hint:active { filter: brightness(0.92); }
  .scroll-hint.is-on svg { animation: hint-bob 1s ease-in-out infinite; }
  @keyframes hint-bob { 50% { transform: rotate(45deg) translate(3px, 3px); } }
  /* desktop slides this in from -60rem, which is -960px at the phone's 16px rem:
     the block sat off-screen, its observer never fired and it stayed invisible */
  .why__intro.reveal { transform: translateX(-24px); }
  .why__intro.reveal.is-visible { transform: none; }
}

/* Tablet: proportional scaling is kept, but tap targets get a floor */
@media (min-width: 768px) and (max-width: 1024px) {
  .nav__link { font-size: max(32rem, 15px); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__line { animation: none; opacity: 1; transform: none; }
  .page-project .project__tools,
  .page-project .project__next, .page-project .project__title, .page-project .project__place,
  .page-project .project__about > * { animation: none; opacity: 1; transform: none; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; animation: none; }
  .skills:not(.is-visible) .pill { opacity: 1; transform: rotate(calc(var(--r) * 1deg)); }
  .skills.is-visible .pill { animation: none; }
  .skills.is-sim .pill { opacity: 1; }
  .tools__track { animation: none; }
  .modal__backdrop, .modal__panel, .modal__close,
  .nav__logo.is-running, .nav__logo.is-returning { animation: none; }
  .pill, figure.card, figure.card img, .nav__logo, .why__card, .why__arrow,
  .card__plate, .card__plate > *, .card__arrow { transition: none; }
  .scroll-hint.is-on svg { animation: none; }
}