/* ==========================================================
   Portfolio styles
   Colors and sizes you might want to tweak live in :root
   ========================================================== */

:root {
  /* fonts: Bricolage Grotesque for titles, DM Sans for text */
  --font: "DM Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --accent: #0400ff;
  --ink: #0b0b0b;
  --paper: #ffffff;
  --muted: #626262;  /* 6:1 on white, readable for small text */
  --faint: #d9d9d9;
  --frame: #ffffff; /* background behind project images (white, as requested) */
  --frame-line: #ececec;
  --radius: 18px;
  /* 8px grid: page margin on each side and gutter between the 12 columns, in fixed steps
     (see the media queries right below); content never wider than 1440px, centred on big screens */
  --gutter: 16px;
  --margin: 24px;
  --header-h: 72px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  /* --scale comes from Design > Text size in Pages CMS */
  --scale: 1;
  --t-big: calc(clamp(34px, 5.2vw, 76px) * var(--scale));
  /* type system: 4 levels used everywhere */
  --t-1: calc(clamp(34px, 5.2vw, 76px) * var(--scale));   /* display */
  --t-2: calc(clamp(26px, 2.6vw, 40px) * var(--scale));   /* title */
  --t-3: calc(clamp(16px, 1.15vw, 18px) * var(--scale));  /* body */
  --t-4: 13px;                                            /* label */
  --t-lg: calc(clamp(22px, 2.5vw, 36px) * var(--scale));
  --t-body: calc(clamp(16px, 1.15vw, 18px) * var(--scale));
}
/* --base-margin is the standard page margin; --margin is what a page uses (the home page widens it) */
:root { --base-margin: 24px; }
@media (min-width: 600px)  { :root { --margin: 40px; --base-margin: 40px; } }
@media (min-width: 840px)  { :root { --margin: 48px; --base-margin: 48px; --gutter: 24px; } }
@media (min-width: 1024px) { :root { --margin: 64px; --base-margin: 64px; } }
@media (min-width: 1440px) { :root { --margin: max(80px, calc((100vw - 1440px) / 2)); --base-margin: max(80px, calc((100vw - 1440px) / 2)); --gutter: 32px; } }
/* header pills, info card and back-to-top button sit on the standard text margin */
:root { --edge: var(--base-margin); }


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

main { padding: 0 var(--margin); }

.hash { margin-bottom: 1.2em; }

/* underlined text links */
.u-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* titles and big text use the display font */
.hero__title, .statement__text, .pill, .card__title, .feature__num, .feature__headline, .section__heading,
.project__lead, .site-footer__name, .not-found {
  font-family: var(--font-display);
}

/* ---------- Tag chips ---------- */

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags li {
  padding: .42em .8em .38em;
  border: 1px solid #8c8c8c;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3a3a3a;
  white-space: nowrap;
}
.project__meta .tags { margin: 12px 0 4px; }
.nda__card .tags { justify-content: center; margin: 0 0 18px; }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
  transition: color .3s;
}
.pill:hover { color: var(--ink); }

.pill--sm {
  font-size: 19px;
  line-height: 1;
  padding: .6em 1.1em;
}
/* name & About pills: a bouncy tilt to the side on hover (the curve overshoots, like a spring) */
.pill--sm { transition: color .3s, transform .7s cubic-bezier(.34, 2.2, .5, 1); }
.pill--sm:hover { color: var(--accent); transform: rotate(8deg); }

.pill--lg {
  font-size: var(--t-lg);
  line-height: 1;
  padding: .2em .2em .2em .9em;
  gap: 2.4em;
}

.pill__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
}

.pill--icon-left {
  font-size: 15px;
  line-height: 1.2;
  padding: .35em 1.4em .35em .35em;
  white-space: normal;
  max-width: 100%;
  text-align: left;
}
.pill--icon-left .pill__icon { width: 2.8em; height: 2.8em; }

/* arrows: one right-pointing arrow, rotated with --rot */
.arrow {
  --rot: 0deg;
  display: block;
  width: 66%;
  height: 66%;
  transform: rotate(var(--rot));
  transform-origin: 50% 50%;
  transition: transform .15s linear;
}
.arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow--down { --rot: 90deg; }
.arrow--left { --rot: 180deg; }
.arrow--up { --rot: -90deg; }

/* hover: the circle turns cobalt (the pill keeps its size) */
.pill__icon { transition: background .3s var(--ease); }
.pill:hover .pill__icon { background: var(--accent); }

/* ---------- Brand petal ---------- */

.petal { display: inline-block; flex: none; width: 1em; height: 1em; color: var(--accent); }
.petal svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* fixed angle of the petal (change --petal-angle to turn it) */
.petal { --petal-angle: 30deg; }
.petal svg { transform: rotate(var(--petal-angle)); }
.petal__fill { fill: currentColor; }
.petal__outline { display: none; fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
html[data-petal="outline"] .petal__outline { display: inline; }
html[data-petal="none"] .petal { display: none; }

/* in the name pill: small, up and to the right of the name (like the footer), turns a little on hover */
.brand-pill { display: inline-flex; align-items: flex-start; gap: .12em; }
.brand-pill .petal { width: .55em; height: .55em; margin: -.18em -.2em 0 0; }

/* in the footer: small, at the top right of the big name, like a superscript mark */
.site-footer__name { display: flex; align-items: flex-start; }
.petal--sup { width: .36em; height: .36em; margin: -.06em 0 0 .06em; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--edge);
  pointer-events: none;
}
.site-header > *, .site-header__right > * { pointer-events: auto; }
.site-header__right { display: flex; align-items: center; gap: 12px; }

.info-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  transition: transform .5s var(--ease);
}
.info-btn:hover { transform: scale(1.08); }
.info-btn span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity .3s, transform .5s var(--ease);
}
.info-btn__i { font-family: var(--font); }
.info-btn__x { opacity: 0; transform: rotate(-90deg); font-size: 26px; }
.info-btn[aria-expanded="true"] .info-btn__i { opacity: 0; transform: rotate(90deg); }
.info-btn[aria-expanded="true"] .info-btn__x { opacity: 1; transform: none; }

/* ---------- Info card ---------- */

.info-card {
  position: fixed;
  z-index: 49;
  top: calc(var(--header-h) - 4px);
  right: var(--edge);
  width: min(370px, calc(100vw - 2 * var(--edge)));
  padding: 20px 24px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.01em;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.info-card.is-open { opacity: 1; transform: none; }
.info-card__msg { white-space: pre-line; }
.info-card__social { margin-top: 1em; }
.info-card a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Rounded images ---------- */

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: #f1f1f1;
}

/* ---------- Home: hero ---------- */

/* the intro fills exactly one screen, text and images centered vertically */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  column-gap: var(--gutter);
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  padding-bottom: 24px;
}
.hero__text { position: relative; z-index: 2; }
.hero__title {
  font-size: var(--t-big);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 13.5em;
}
.hero__cluster {
  position: relative;
  justify-self: end;
  /* as big as the column allows, but never taller than the screen */
  width: min(100%, calc((100svh - var(--header-h) - 48px) / 1.02));
  aspect-ratio: 1 / 1.02;
}

.cluster-img {
  position: absolute;
  margin: 0;
  transition: transform .8s var(--ease);
}
.cluster-img .img { background: var(--frame); border: 1px solid var(--frame-line); box-shadow: 0 18px 40px -12px rgba(0,0,0,.14); }
.cluster-img .img img { object-position: left top; }
.cluster-img:hover { transform: rotate(var(--tilt, -4deg)) scale(1.03); z-index: 10; }
a.cluster-img { display: block; cursor: pointer; }
a.cluster-img:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* positions for up to 4 overlapping intro images */
/* four wide cards of the same size, cascading; every image shows whole */
.hero__cluster .cluster-img .img { object-fit: contain; object-position: center; }
.hero__cluster .cluster-img:nth-child(1) { left: 0;   top: 0;   width: 62%; aspect-ratio: 3/2; z-index: 1; --tilt: -4deg; }
.hero__cluster .cluster-img:nth-child(2) { left: 38%; top: 19%; width: 62%; aspect-ratio: 3/2; z-index: 2; --tilt: 4deg; }
.hero__cluster .cluster-img:nth-child(3) { left: 3%;  top: 39%; width: 62%; aspect-ratio: 3/2; z-index: 3; --tilt: -4deg; }
.hero__cluster .cluster-img:nth-child(4) { left: 36%; top: 58%; width: 62%; aspect-ratio: 3/2; z-index: 4; --tilt: 4deg; }
/* only two images: bigger cards in the screens' own shape, the whole screen visible */
.hero__cluster:not(:has(> :nth-child(3))) .cluster-img { aspect-ratio: 3 / 2; }
.hero__cluster:not(:has(> :nth-child(3))) .cluster-img img { object-fit: contain; object-position: center; }
.hero__cluster:not(:has(> :nth-child(3))) .cluster-img:nth-child(1) { left: 0;   top: 14%; width: 80%; }
.hero__cluster:not(:has(> :nth-child(3))) .cluster-img:nth-child(2) { left: 20%; top: 50%; width: 80%; }

/* ---------- Home: statement ---------- */

.statement {
  padding-top: clamp(64px, 9vw, 140px);
  padding-bottom: clamp(100px, 14vw, 220px);
}
.statement__text {
  font-size: var(--t-big);
  line-height: 1.08;
  letter-spacing: -.035em;
  max-width: 15em;
}
.statement__text .w { color: var(--faint); transition: color .25s linear; }
.about .statement__text { max-width: 17em; }

/* ---------- Home: projects ---------- */

.statement[hidden] + .projects { padding-top: clamp(16px, 2vw, 40px); }

.projects__list { margin-top: clamp(48px, 6vw, 96px); }

.projects__list--cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

/* rows layout: number, logo/meta, big headline, text, chips + moving images, alternating sides */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding: clamp(48px, 6vw, 96px) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
}
.feature:first-child { padding-top: 0; }
.feature:hover { color: var(--ink); }
.feature--flip .feature__text { order: 2; }
.feature__num {
  font-size: clamp(44px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 300;
}
.feature__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em .7em;
  margin-top: 18px;
  font-family: var(--font);
  font-size: 14px; letter-spacing: .02em; /* written as typed, no capitals forced */
  color: var(--muted);
}
.feature__logo { height: 24px; width: auto; max-width: none; object-fit: contain; margin-right: .2em; } /* height set per logo in main.js */
.feature__name { font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
.feature__dot { opacity: .6; }
.feature__headline {
  margin-top: 18px;
  font-size: clamp(30px, 3.2vw, 50px);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 13em;
  transition: color .3s;
}
.feature:hover .feature__headline { color: var(--accent); }
.feature__summary { margin-top: 18px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--muted); max-width: 30em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 2 lines max */
.feature .tags { margin-top: 24px; }
.feature__media {
  position: relative;
  aspect-ratio: 16 / 11;
}

/* a project card: moving images with a white label at the bottom left */
.card {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid #ececec;
  color: var(--ink);
}
.card:hover { color: var(--ink); }
/* image stack: the front card stays a few seconds, then slides behind the others
   and the next one comes forward (data-pos is set in main.js: 0 = front) */
.card__media { position: absolute; inset: 0; }
.card__slide {
  position: absolute;
  inset: 12% 10% 4% 4%;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .3);
  overflow: hidden;
  transform-origin: 70% 0%;
  transition: transform 1s cubic-bezier(.6, .05, .25, 1), opacity 1s ease, filter 1s ease;
}
.card__slide[data-pos="0"] { z-index: 3; transform: none; }
.card__slide[data-pos="1"] { z-index: 2; transform: translate(4%, -7%) scale(.93) rotate(2deg); }
.card__slide[data-pos="2"] { z-index: 1; transform: translate(8%, -14%) scale(.86) rotate(4deg); opacity: .85; }
/* the card leaving the front dips down before tucking in at the back */
.card__slide.is-leaving { z-index: 4; transform: translate(-6%, 8%) rotate(-5deg) scale(.96); opacity: 0; }
.card__slide .img {
  border-radius: 0;
  background: #fff;
  object-fit: scale-down; /* whole image, never stretched past its real size */
  padding: 5%;
}
.feature:hover .card__slide[data-pos="0"],
.card:hover .card__slide[data-pos="0"] { transform: translateY(-2%); }
.feature:hover .card__slide[data-pos="1"] { transform: translate(6%, -9%) scale(.93) rotate(3deg); }

.card__label {
  position: absolute;
  left: clamp(12px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
  max-width: calc(100% - 2 * clamp(12px, 1.6vw, 22px));
  padding: 14px 18px 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: calc(var(--radius) - 4px);
  transition: transform .5s var(--ease);
}
.card:hover .card__label { transform: translateY(-4px); }
.card__title { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; letter-spacing: -.01em; }
.card__year { color: var(--muted); }
.card__label .tags { margin-top: 10px; }

/* NDA: blurred images + a lock with "Under NDA" in the centre */
.card__slide--locked .img { filter: blur(14px) saturate(.85) brightness(1.05); transform: scale(1.08); }
.nda-lock {
  position: absolute; inset: 12% 10% 4% 4%; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.nda-lock .lock-icon { width: clamp(30px, 3vw, 42px); height: clamp(30px, 3vw, 42px); stroke-width: 1.6; }
.nda-lock span {
  font-family: var(--font);
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
}
.is-locked .nda-lock { opacity: 1; }

/* ---------- Home: about ---------- */

.about { padding-top: clamp(100px, 12vw, 200px); padding-bottom: clamp(32px, 4vw, 64px); }

.about__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(40px, 5vw, 80px);
  margin-top: clamp(48px, 6vw, 96px);
  line-height: 1.15;
  font-size: clamp(16px, 1.3vw, 20px);
}
.about__statement { margin-bottom: clamp(80px, 10vw, 160px); }
.about__statement[hidden] + .pill { margin-top: 0; }

.about__bio      { grid-column: 1 / 6;  grid-row: 1; align-self: start; max-width: 26em; font-size: clamp(16px, 1.25vw, 19px);
                   text-align: left; } /* left aligned, ragged right */
.about__photo    { grid-column: 6 / 8;  grid-row: 1; align-self: start; margin-top: 28%; aspect-ratio: 5/6; position: relative; z-index: 4; }
.about__images   { grid-column: 8 / 13; grid-row: 1; position: relative; aspect-ratio: 1 / .95; }
.about__grid > * { min-width: 0; }

/* the portrait starts over the images on the right and slides left and down
   into place (--drift goes 0 -> 1, set in main.js) */
.about__photo {
  --fx: 200%;
  --fy: -45%;
  transform: translate(calc(var(--fx) * (1 - var(--drift, 1))), calc(var(--fy) * (1 - var(--drift, 1))));
  will-change: transform;
}
.about__photo .img { height: 100%; }

.about__bio p + p { margin-top: .8em; }

/* company names in the bio: always underlined, cobalt on hover, logo pops up above */
.company {
  position: relative;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.company:hover { color: var(--accent); }
.company__logo {
  position: absolute; z-index: 5;
  left: 0; bottom: calc(100% + 8px);
  display: block;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transform-origin: left bottom;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
/* every logo in the same rounded square: square logos fill it, wide ones get white space around */
.company__logo img {
  display: block;
  width: 80px; height: 80px; max-width: none; /* never squeezed to the width of the name */
  padding: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .25);
}
/* wide logos (wordmarks) get breathing room inside the square */
.company__logo.is-wide img { padding: 12px; }
.company:hover .company__logo,
.company:focus-visible .company__logo { opacity: 1; transform: none; }

.about__images .cluster-img:nth-child(1) { left: 4%;  top: 8%;  width: 46%; aspect-ratio: 1/1;   z-index: 2; --tilt: -4deg; }
.about__images .cluster-img:nth-child(2) { left: 44%; top: 0;   width: 56%; aspect-ratio: 4/3.4; z-index: 1; --tilt: 4deg; }
.about__images .cluster-img:nth-child(3) { left: 22%; top: 50%; width: 58%; aspect-ratio: 4/3;   z-index: 3; --tilt: -3deg; }

/* ---------- Footer ---------- */

.site-footer {
  padding: 0 var(--margin) var(--gutter);
}
/* one compact row: big name | tagline + contact | social, aligned at the bottom */
.site-footer__main {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--gutter);
  align-items: end;
  border-top: 1px solid var(--ink);
  padding-top: clamp(36px, 4vw, 64px);
  line-height: 1.25;
}
.page-project .site-footer__main { border-top: 0; padding-top: 0; }
.site-footer__name {
  font-size: clamp(56px, 8vw, 140px);
  line-height: .9;
  letter-spacing: -.05em;
  padding-bottom: .04em;
}
.site-footer__tagline { margin-bottom: 1em; }
.site-footer__main .hash { margin-bottom: .15em; }
.site-footer__main a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.site-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 56px);
  padding: 12px 20px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  margin-right: calc(56px + 12px); /* room for the back-to-top button */
}

/* ---------- Back to top ---------- */

.to-top {
  position: fixed;
  z-index: 40;
  right: var(--edge);
  bottom: var(--edge);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(.8);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease), background .3s;
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); }
.to-top .arrow { width: 50%; height: 50%; }

/* ---------- Project page ---------- */

.project__top { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 80px)); }

.project__hero {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal frames */
  gap: var(--gutter);
  margin-top: clamp(40px, 5vw, 72px);
}
.project__hero figure { aspect-ratio: auto; height: clamp(320px, 40vw, 640px); background: var(--frame); border: 1px solid var(--frame-line); border-radius: var(--radius); overflow: hidden; }
.project__hero .img { object-fit: scale-down; padding: 5%; border-radius: 0; background: none; }
/* presentation images: the frame takes the image's own shape, so nothing is ever cropped */
.project__hero figure.is-fill { height: auto; align-self: start; }
.project__hero figure.is-fill .img { display: block; width: 100%; height: auto; object-fit: initial; padding: 0; }
.project__hero figure:only-child { grid-column: 1 / -1; }

.project__intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  padding: clamp(56px, 7vw, 120px) 0;
}
.project__meta { grid-column: 1 / 4; font-size: 15px; line-height: 1.35; }
.project__meta dl { margin: 1.2em 0 0; display: grid; gap: .9em; }
.project__meta dt { color: var(--muted); }
.project__meta dd { margin: 0; }
.project__lead {
  grid-column: 4 / 12;
  font-size: var(--t-lg);
  line-height: 1.18;
  letter-spacing: -.02em;
}

/* "Visit live site" chip (home rows and the top of the project page) */
.live-link {
  display: inline-flex; align-items: center; gap: .55em;
  margin-top: 10px;
  padding: .55em .9em .5em;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--font);
  font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s;
}
.live-link:hover, .live-link:focus-visible { color: #fff; background: var(--ink); }
.live-link svg { width: 9px; height: 9px; transition: transform .3s var(--ease); }
.live-link:hover svg, .live-link:focus-visible svg { transform: translate(2px, -2px); }
.live-link__dot { width: 6px; height: 6px; border-radius: 50%; background: #5df28b; box-shadow: 0 0 0 0 rgba(93,242,139,.6); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 6px rgba(93,242,139,0); } 100% { box-shadow: 0 0 0 0 rgba(93,242,139,0); } }
@media (prefers-reduced-motion: reduce) { .live-link__dot { animation: none; } }
.project__meta .live-link { margin: 14px 0 6px; }
.project__meta .live-link + dl { margin-top: 1.6em; }

/* devices: a laptop and a phone showing a full page that scrolls slowly by itself (and by hand) */
.section--devices .section__text { grid-column: 1 / 7; }
.devices {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, .72fr); /* phone a little shorter than the laptop */
  align-items: end;
  gap: clamp(40px, 7vw, 120px);
  padding: clamp(36px, 5vw, 80px) clamp(36px, 9vw, 150px);
  background: var(--frame);
  border: 1px solid var(--frame-line);
  border-radius: calc(var(--radius) + 4px);
}
.device__screen {
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  background: #fff;
}
.device__screen::-webkit-scrollbar { display: none; }
.device__screen img { display: block; width: 100%; height: auto; }
.device__screen--video { overflow: hidden; }
.device--laptop .device__screen--video { aspect-ratio: 16 / 9; }
.device__screen video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
/* small laptop with a video, beside the text */
.media-laptop { padding: 0 6% 4%; } /* the base sticks out a little: the side padding keeps it inside the margin */
/* a section with a video laptop: wider media column (7 of 12), centred on the text */
.section--text-left:has(.media-laptop) .section__media { grid-column: 7 / 13; align-self: center; }
.media-laptop .device--laptop .device__base { margin: 0 -6%; }
.device--laptop .device__lid {
  padding: 1.4% 1.4% 2.2%;
  background: #1b1b1d;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
}
.device--laptop .device__screen { aspect-ratio: 16 / 10; border-radius: 3px; }
.device--laptop .device__base {
  position: relative;
  height: 14px; margin: 0 -7%;
  background: linear-gradient(#dcdcde, #b9b9bc);
  border-radius: 0 0 14px 14px;
}
.device--laptop .device__base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px;
  transform: translateX(-50%); background: #a9a9ad; border-radius: 0 0 6px 6px;
}
/* iPhone frame: thin black bezel, metal edge, round corners that the screen follows
   (sizes in cqw = % of the phone's own width, so it looks right at any size) */
.device--phone {
  container-type: inline-size;
  position: relative;
}
/* the bezel and metal edge are drawn around the screen, so the corners always match */
.device--phone .device__screen {
  aspect-ratio: 9 / 19.5;
  margin: calc(2.8cqw + 3px);
  border-radius: 12.6cqw;
  box-shadow:
    0 0 0 2.8cqw #0f0f10,
    0 0 0 calc(2.8cqw + 1.5px) #a9a9ae,
    0 0 0 calc(2.8cqw + 3px) #dedee2,
    0 30px 50px -22px rgba(16, 24, 48, .38);
}
/* Dynamic Island, sitting in the status bar */
.device--phone::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 4.6cqw; width: 27cqw; height: 7.6cqw;
  transform: translateX(-50%); background: #0f0f10; border-radius: 99px;
}
.devices__hint { grid-column: 1 / -1; margin: 0; text-align: center; }
/* only a laptop: centred, a bit narrower */
.devices:not(:has(.device--phone)) { grid-template-columns: minmax(0, 1fr); padding-inline: clamp(28px, 10%, 160px); }
/* phones row: each screen fills its frame and stays still */
.device__screen--static { overflow: hidden; }
.device__screen--static img { height: auto; }
.device--phone .device__screen--static { aspect-ratio: auto; } /* the frame follows the screenshot, nothing is cut */
/* phones in one row that shrinks to fit (never wraps): up to 260px each */
.devices--phones { --pgap: clamp(12px, 3vw, 48px); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--pgap); padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 64px); }
.devices--phones .device--phone { flex: 0 1 calc((100% - 2 * var(--pgap)) / 3); max-width: 260px; min-width: 0; }
.devices--phones .devices__hint { flex-basis: 100%; }
/* one or two phones: text on the left, phones beside it (no frame box), smaller */
.section--phones:not(:has(.device--phone:nth-child(3))) .section__text { grid-column: 1 / 7; grid-row: 1; align-self: center; }
.section--phones .devices--phones:not(:has(> .device--phone:nth-child(3))) {
  grid-column: 8 / 13; grid-row: 1; align-self: center; /* same column as images beside text */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  background: none; border: 0; padding: 0;
}
/* screenshots already have their own status bar: no extra camera pill on top */
.section--phones .devices--phones:not(:has(> .device--phone:nth-child(3))) { gap: 24px; }
.section--phones .devices--phones:not(:has(> .device--phone:nth-child(3))) .device--phone { flex: 0 1 calc(50% - 12px); max-width: 230px; }
.section--phones .devices--phones:not(:has(> .device--phone:nth-child(3))) .devices__hint { flex-basis: 100%; }
@media (max-width: 900px) {
  .devices { grid-template-columns: 1fr; justify-items: center; padding: 20px; }
  .device--laptop { width: 100%; }
  .device--phone { width: min(62%, 260px); }
  .devices--phones { --pgap: 10px; padding: 14px; }
  .section--phones .section__text, .section--phones .devices--phones:not(:has(> .device--phone:nth-child(3))) { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .devices--phones .device--phone { max-width: 200px; }
}

/* stages: a few columns (e.g. round 1, round 2, final) with short titled items */
.section--stages .section__text { grid-column: 1 / 7; }
.stages {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gutter);
}
.stage { padding-top: 18px; border-top: 2px solid var(--ink); }
.stage__label {
  display: flex; align-items: center; gap: .7em;
  margin: 0 0 22px;
  font-family: var(--font);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.stage__label span { color: var(--accent); }
.stage__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.stage__items li { padding: 18px 20px; background: #f4f4f1; border-radius: calc(var(--radius) - 4px); }
.stage__title {
  display: flex; align-items: baseline; gap: .5em;
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em;
}
.stage__title::before { content: ""; flex: none; width: .38em; height: .38em; border-radius: 50%; background: var(--accent); transform: translateY(-.1em); }
.stage__text { margin: 0; color: var(--muted); line-height: 1.45; }
/* the last column reads as a numbered flow */
.stage:last-child .stage__items { counter-reset: flow; gap: 10px; }
.stage:last-child .stage__items li { counter-increment: flow; }
.stage:last-child .stage__title::before { content: counter(flow); width: 1.5em; height: 1.5em; display: grid; place-items: center; font-family: var(--font); font-size: 12px; color: #fff; transform: none; }

/* ---------- case study layout: sticky card on the left, content on the right ---------- */
.case-nav { display: none; }
@media (min-width: 1101px) {
  .case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .case-nav { display: block; grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 24px); }
  .case-main { grid-column: 4 / 13; min-width: 0; padding-left: clamp(32px, 4vw, 72px); } /* breathing room next to the card */
  .chapter-nav { display: none !important; }      /* the card replaces the dots */
  .case-main .project__meta dl { display: none; } /* role, client, timeline live in the card */
}
.case-nav__card {
  padding: 22px 22px 18px;
  background: var(--paper);
  border: 1px solid var(--frame-line);
  border-radius: calc(var(--radius) + 4px);
}
.case-nav__title { margin: 0 0 18px; font-family: var(--font-display); font-size: 22px; line-height: 1.1; letter-spacing: -.01em; }
.case-nav__logo { display: block; height: 26px; width: auto; max-width: 100%; margin: 0 0 18px; object-fit: contain; object-position: left; }
.case-nav__facts { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--frame-line); display: grid; gap: 12px; }
.case-nav__facts dt,
.case-nav__label { font-family: var(--font); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.case-nav__facts dd { margin: 3px 0 0; font-size: 14px; line-height: 1.35; }
.case-nav__label { margin: 0 0 10px; }
.case-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.case-nav__list a {
  position: relative; display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0 5px 14px; font-size: 14.5px; color: var(--muted);
  transition: color .25s var(--ease);
}
.case-nav__list a span { font-family: var(--font); font-size: 11px; color: var(--muted); }
.case-nav__list a::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--accent); border-radius: 2px; transform: translateY(-50%); transition: height .25s var(--ease); }
.case-nav__list a:hover { color: var(--ink); }
.case-nav__list a.is-active { color: var(--ink); }
.case-nav__list a.is-active::before { height: 70%; }
.case-nav__list a.is-active span { color: var(--accent); }
.case-nav__progress { margin-top: 18px; height: 2px; background: var(--frame-line); border-radius: 2px; overflow: hidden; }
.case-nav__progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.case-nav__pct { margin: 8px 0 0; font-family: var(--font); font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }

/* case snapshot: a row of short facts under the opening text */
.snapshot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gutter);
  margin: clamp(24px, 3vw, 48px) 0 0;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--ink);
}
.snapshot__item dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .7em;
}
.snapshot__item dd { margin: 0; color: var(--muted); line-height: 1.5; max-width: 30em; }

/* sections */
.section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  padding: clamp(36px, 4.5vw, 76px) 0;
}
.section__label { color: var(--accent); font-size: 15px; letter-spacing: .02em; margin-bottom: 1em; }
.section__heading { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: .8em; }

.rich { line-height: 1.55; }
.rich p + p, .rich p + ul, .rich ul + p, .rich p + ol, .rich ol + p { margin-top: 1em; }
.rich ul, .rich ol { padding-left: 1.2em; }
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li + li { margin-top: .35em; }
.rich a { text-decoration: underline; text-underline-offset: .2em; }
.rich strong { font-weight: 500; }
.rich h2, .rich h3 { font-size: 1.25em; margin: 1.4em 0 .6em; font-weight: 500; }
.rich img { border-radius: var(--radius); margin: 1.4em 0; }
.about__bio.rich { line-height: 1.45; }

/* every text block has the same width: 6 of 12 columns, max 36em */
.section__text { max-width: 36em; }
.section__media { display: grid; gap: var(--gutter); align-content: start; }
.section__media.is-grid { grid-template-columns: 1fr 1fr; }
.section__media figure { overflow: hidden; border-radius: var(--radius); background: var(--frame); border: 1px solid var(--frame-line); aspect-ratio: 4 / 3; }
/* phone screens get tall frames so they are not tiny inside wide boxes */
.section__media figure.is-tall { aspect-ratio: 3 / 4; }
.section__media .img { width: 100%; height: 100%; object-fit: scale-down; padding: 5%; border-radius: 0; background: none; }
/* very wide images (screen strips) get their own full-width row */
.section__media figure.is-wide { aspect-ratio: auto; grid-column: 1 / -1; }
.section__media figure.is-wide .img { height: auto; padding: 3%; }
.caption { font-size: 14px; color: var(--muted); margin-top: -.4em; grid-column: 1 / -1; }

/* text-left: sticky text on the left, images on the right */
.section--text-left .section__text  { grid-column: 1 / 7; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.section--text-left .section__media { grid-column: 8 / 13; grid-row: 1; }
.section--text-right .section__text  { grid-column: 7 / 13; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.section--text-right .section__media { grid-column: 1 / 6; grid-row: 1; }

/* key numbers: big figure, small label, thin cobalt line on the left */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  margin: clamp(28px, 3vw, 44px) 0 0;
}
.stat { border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; }
/* three numbers always share one row (narrower, slightly smaller) */
@media (min-width: 600px) {
  .stats:has(> .stat:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
  .stats:has(> .stat:nth-child(3)) .stat { padding-left: 14px; }
  .stats:has(> .stat:nth-child(3)) .stat__value { font-size: clamp(30px, 3vw, 46px); }
  .stats:has(> .stat:nth-child(3)) .stat__label { font-size: 11px; letter-spacing: .06em; }
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin: .7em 0 0;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* learnings: numbered cards */
.section--learnings .section__text { grid-column: 1 / 7; grid-row: 1; }
.learnings {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gutter);
}
/* 5 or more cards: 3 per row so the last row isn't a lonely card */
.learnings:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .learnings:has(> :nth-child(5)) { grid-template-columns: 1fr; } }
.learning {
  padding: clamp(24px, 2.6vw, 36px);
  background: #f4f4f1;
  border-radius: calc(var(--radius) + 4px);
}
.learning__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}
.learning__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.learning p { margin-top: 10px; line-height: 1.5; color: var(--muted); max-width: 32em; }

/* carousel: one big image at a time, arrows + counter below */
/* text on the left, carousel on the right; the image frame stretches down to the end of the text */
.section--carousel .section__text { grid-column: 1 / 7; grid-row: 1; align-self: start; }
.carousel { grid-column: 7 / 13; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; }
.carousel .carousel__frame { flex: 1; min-height: 360px; aspect-ratio: auto; }
/* a carousel without text uses the full width */
.section--carousel > .carousel:first-child { grid-column: 1 / -1; }
.section--carousel > .carousel:first-child .carousel__frame { aspect-ratio: 16 / 9; }
.carousel__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--frame);
  border: 1px solid var(--frame-line);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  outline-offset: 4px;
}
.carousel__slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* fixed area, so tall images shrink to fit */
  padding: 3%;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.carousel__slide.is-active { opacity: 1; }
/* fills the frame, but never grows past 1.6x its real size (set in main.js) so it stays sharp */
.carousel__slide .img { width: 100%; height: 100%; object-fit: contain; padding: 0; border-radius: 0; background: none; }
.carousel__bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.carousel__btn {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: background .3s;
}
.carousel__btn:hover { background: var(--accent); }
.carousel__btn .arrow { width: 50%; height: 50%; }
.carousel__count {
  min-width: 4.5em; text-align: center;
  font-family: var(--font);
  font-size: 14px; letter-spacing: .08em; color: var(--muted);
}
.carousel__count b { color: var(--ink); font-weight: 500; }
.carousel__caption { flex-basis: 100%; margin: 2px 0 0; text-align: center; }
@media (max-width: 900px) {
  .carousel__frame, .carousel .carousel__frame { aspect-ratio: 4 / 3; flex: none; min-height: 0; }
  .section--carousel .section__text, .carousel { grid-column: 1 / -1 !important; grid-row: auto !important; position: static !important; }
}

/* titled list: one row per item, big title left, text right, thin lines between */
.titled-list { grid-column: 1 / -1; grid-row: 2; border-bottom: 1px solid var(--ink); }
/* every row as tall as the tallest one, content centred, so the dividers are evenly spaced */
@media (min-width: 901px) {
  .titled-list { display: grid; grid-auto-rows: 1fr; }
  .titled-list .titled-row { align-items: center; }
}
.titled-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gutter);
  align-items: baseline;
  padding: clamp(10px, 1vw, 14px) 0;
  border-top: 1px solid var(--ink);
}
.titled-row__title {
  display: flex; align-items: baseline; gap: .55em;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.1;
  letter-spacing: -.02em;
  transition: color .3s;
}
.titled-row__title::before {
  content: "";
  flex: none;
  width: .38em; height: .38em;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-.08em);
}
.titled-row:hover .titled-row__title { color: var(--accent); }
.titled-row__text { color: var(--muted); line-height: 1.45; max-width: 36em; }
@media (max-width: 900px) {
  .titled-row { grid-template-columns: 1fr; gap: 6px; }
}

/* text-only sections line up on the left, with the other text columns */
.section--text-only .section__text { grid-column: 1 / 7; }
.section--text-only .section__media { grid-column: 1 / 7; }

.section--full-image .section__text,
.section--gallery .section__text { grid-column: 1 / 7; }
.section--full-image .section__media,
.section--gallery .section__media { grid-column: 1 / -1; }


/* next project */
.project__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ink);
  padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 120px);
}
.project__next .muted { color: var(--muted); }
/* fixed straight arrows, no rotation: left pill points left, right pill points right */
.project__next .arrow { transition: none; }
.project__next .pill:first-child .arrow { transform: rotate(180deg); }
.project__next .pill:last-child .arrow { transform: rotate(0deg); }

.not-found { padding: calc(var(--header-h) + 80px) 0 120px; font-size: var(--t-lg); }

/* ==========================================================
   Phones and small tablets
   ========================================================== */

@media (max-width: 900px) {
  :root { --header-h: 64px; --radius: 14px; }

  .pill--sm { font-size: 16px; }
  /* soft fade behind the top pills so scrolling text doesn't show between them */
  .site-header { background: linear-gradient(var(--paper) 70%, color-mix(in srgb, var(--paper) 0%, transparent)); }
  /* a long name never runs into the About pill: it ends with "…" */
  .site-header > .pill--sm { max-width: calc(100vw - 2 * var(--edge) - 140px); }
  .brand-pill__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .info-btn { width: 40px; height: 40px; font-size: 19px; }

  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--header-h) + 16px); padding-bottom: 40px; }
  .hero__cluster { grid-row: 1; justify-self: stretch; margin: 0 0 28px; width: 100%; aspect-ratio: 1 / .95; }
  .hero__text { grid-row: 2; }

  /* phones: one card per row; rows show the image first, then the text */
  .projects__list--cards { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; }
  .feature .feature__media { order: -1; }
  .feature--flip .feature__text { order: 0; }
  .feature__meta { font-size: 13px; margin-top: 12px; }
  .feature__headline { font-size: 30px; }
  .feature__summary { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card { aspect-ratio: 4 / 4.2; }
  .card__label { padding: 12px 14px 14px; }

  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__photo    { grid-column: 1 / -1; grid-row: 1; width: 48%; margin-top: 0; --fx: 90%; --fy: -25%; }
  .about__bio      { grid-column: 1 / -1; grid-row: 2; }
  .about__images   { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 1 / .8; }
  .about__images .cluster-img:nth-child(1) { left: 0; top: 4%; width: 46%; }
  .about__images .cluster-img:nth-child(2) { left: 44%; top: 0; width: 56%; }
  .about__images .cluster-img:nth-child(3) { left: 16%; top: 46%; width: 58%; }

  .site-footer__main { grid-template-columns: 1fr 1fr; row-gap: 28px; align-items: start; }
  .site-footer__name { grid-column: 1 / -1; }
  .site-footer__bar { border-radius: 24px; flex-direction: column; gap: 4px; margin-right: calc(48px + 10px); }

  .to-top { width: 48px; height: 48px; }

  .project__top .pill--lg { gap: 1.2em; font-size: 20px; max-width: 100%; }
  .project__top .pill__label { overflow: hidden; text-overflow: ellipsis; }
  .project__hero { grid-template-columns: 1fr; }
  .project__hero figure { height: auto; aspect-ratio: 4 / 3; }
  .project__intro { grid-template-columns: 1fr; }
  .project__meta, .project__lead { grid-column: 1; }
  .project__meta { order: 2; }
  .project__meta dl { grid-template-columns: 1fr 1fr; }

  .section { grid-template-columns: 1fr; }
  .section .section__text,
  .section .section__media { grid-column: 1 !important; grid-row: auto !important; position: static !important; }
  .section--text-right .section__text { order: -1; }
  .section__media.is-grid { grid-template-columns: 1fr; }
  .section--gallery .section__media.is-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Intro (home page) ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  cursor: pointer;
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}
.intro canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated; /* keep the square pixels sharp */
  image-rendering: crisp-edges;
}
.intro.is-gone { opacity: 0; pointer-events: none; }
.intro-active, .intro-active body { overflow: hidden; }

/* ---------- Project scroll guide ---------- */

.chapter-nav {
  position: fixed;
  z-index: 30;
  left: max(4px, calc(var(--margin) / 2 - 9px)); /* the dots sit centred in the page margin */
  top: 50%;
  height: min(56vh, 480px);
  transform: translate(-12px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.chapter-nav.is-shown { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }

.chapter-nav__track {
  position: relative;
  height: 100%;
  width: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* the thin line behind the dots, and its cobalt fill */
.chapter-nav__track::before,
.chapter-nav__fill {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 1.5px;
  margin-left: -.75px;
  background: var(--faint);
  height: calc(100% - 18px);
}
.chapter-nav__fill {
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
  transition: transform .2s linear;
}

.chapter-nav__dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #8c8c8c;
  background: var(--paper);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.chapter-nav__dot.is-past { border-color: var(--accent); }
.chapter-nav__dot.is-active {
  border-color: var(--accent);
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);
}

.chapter-nav__label,
.chapter-nav__current {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chapter-nav__label {
  position: absolute;
  width: max-content; max-width: 112px; white-space: normal; line-height: 1.35;
  left: 22px;
  top: 50%;
  transform: translate(-4px, -50%);
  transform-origin: left center;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.chapter-nav__label { background: var(--paper); padding: 4px 8px; border-radius: 6px; }
.chapter-nav__dot.is-active .chapter-nav__label { color: var(--accent); }
.chapter-nav:hover .chapter-nav__label { opacity: 1; transform: translate(0, -50%); }
.chapter-nav__dot:hover .chapter-nav__label { color: var(--accent); }
.chapter-nav__current { display: none; }

/* leave room for the guide on wide screens */
@media (min-width: 1101px) {
  /* content uses the full width between the margins; the stage guide lives in the left margin */
}

/* smaller screens: a small pill at the bottom with the current stage */
@media (max-width: 1100px) {
  .chapter-nav {
    top: auto;
    bottom: var(--gutter);
    height: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    transform: translateY(12px);
  }
  .chapter-nav.is-shown { transform: none; }
  .chapter-nav__track { flex-direction: row; height: 14px; width: auto; gap: 14px; }
  .chapter-nav__track::before,
  .chapter-nav__fill { top: 50%; left: 7px; width: calc(100% - 14px); height: 1.5px; margin: -.75px 0 0; }
  .chapter-nav__fill { transform-origin: left; transform: scaleX(var(--progress, 0)); }
  .chapter-nav__dot { width: 12px; height: 12px; }
  .chapter-nav__dot.is-active { transform: scale(1.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
  .chapter-nav__label { display: none; }
  .chapter-nav__current { display: block; color: var(--accent); max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- NDA projects ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lock-icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* home page: small badge + softly blurred images */
.nda-badge {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: .9em;
  padding: .3em .75em;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* project page: blurred cover with the lock card on top */
.nda {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  margin-bottom: clamp(64px, 8vw, 120px);
  min-height: min(78vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the card may never be wider than the frame */
  place-items: center;
  padding: clamp(24px, 5vw, 72px) var(--gutter);
  border-radius: calc(var(--radius) + 8px);
  overflow: hidden;
}
.nda__cover {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  filter: blur(28px) saturate(1.1);
  transform: scale(1.15);
}
.nda__cover .img { border-radius: 0; height: 100%; }
.nda__card {
  position: relative;
  min-width: 0;
  width: min(760px, 100%);
  padding: clamp(28px, 4vw, 52px);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 32px;
  text-align: center;
}
.nda__label {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.nda__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: .4em 0 .35em;
}
.nda__msg { white-space: pre-line; color: var(--muted); line-height: 1.5; max-width: 32em; margin: 0 auto; }
.nda__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: clamp(24px, 3vw, 36px) 0;
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  text-align: left;
  overflow: hidden;
}
.nda__facts div { padding: 16px 18px; }
.nda__facts div + div { border-left: 1px solid var(--ink); }
.nda__facts dt {
  font-family: var(--font);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .6em;
}
.nda__facts dd { margin: 0; line-height: 1.35; }

.nda__form { display: flex; justify-content: center; }
/* whole website locked: only the password screen (header with name + contact stays) */
body.is-locked main > :not(.site-gate), body.is-locked .site-footer, body.is-locked .to-top, body.is-locked [data-about-link] { display: none !important; }
.site-gate { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--header-h, 80px) + 24px) var(--margin) 48px; }
.site-gate[hidden] { display: none; }
.site-gate__card { position: relative; margin: 0; }
.site-gate__card .nda__form { margin-top: 24px; }
.nda__field {
  width: min(380px, 100%);
  padding: .3em .3em .3em 1.3em;
  font-size: 18px;
  gap: .6em;
  transition: border-color .3s, box-shadow .3s;
}
.nda__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.nda__field input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  font: inherit; color: var(--ink); letter-spacing: .08em;
}
.nda__field input::placeholder { color: var(--muted); letter-spacing: .04em; }
.nda__field .pill__icon { width: 2.4em; height: 2.4em; border: 0; cursor: pointer; }
.nda__field .pill__icon:hover { background: var(--accent); }
.nda__form.is-busy .pill__icon { background: var(--accent); animation: nda-pulse 1s ease-in-out infinite; }
.nda__form.is-wrong { animation: nda-shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes nda-pulse { 50% { opacity: .5; } }
@keyframes nda-shake {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.nda__error { min-height: 1.4em; margin-top: 12px; color: var(--accent); font-size: 14px; }

@media (max-width: 700px) {
  .nda__facts { grid-template-columns: 1fr; }
  .nda__facts div + div { border-left: 0; border-top: 1px solid var(--ink); }
  /* phones: the blurred cover becomes a band above a full-width card */
  .nda { padding: 72px 0 0; min-height: 0; margin-top: 24px; }
  .nda__card { padding: 26px 18px 22px; border-radius: 24px; }
  .nda__title { font-size: 30px; }
  .nda__msg { font-size: 15px; }
  .nda__field { width: 100%; font-size: 16px; }
}

/* =====================================================================
   TYPE SYSTEM: every text on the site uses one of 4 levels
   1 Display · 2 Title · 3 Body · 4 Label (kept last so it wins)
   ===================================================================== */
/* 1 Display */
.hero__title, .statement__text, .site-footer__name {
  font-family: var(--font-display); font-size: var(--t-1); line-height: 1.04; letter-spacing: -.035em; font-weight: 400;
}
/* 2 Title */
.section__heading, .feature__headline, .project__lead, .nda__title, .not-found,
.stat__value, .stats:has(> .stat:nth-child(3)) .stat__value, .feature__num, .learning__num, .card__title {
  font-family: var(--font-display); font-size: var(--t-2); line-height: 1.12; letter-spacing: -.02em; font-weight: 400;
}
/* 3 Body */
body, .rich, .feature__summary, .about__bio, .about__grid, .info-card, .caption, .nda__msg, .nda__error,
.project__meta, .project__meta dd, .snapshot__item dd, .titled-row__text, .stage__text, .learning p,
.case-nav__facts dd, .case-nav__list a, .site-footer__bar, .carousel__count, .feature__name {
  font-size: var(--t-3); line-height: 1.5;
}
/* 3 Body, as a card title: same size, display font, medium weight */
.titled-row__title, .learning__title, .stage__title, .case-nav__title, .rich h2, .rich h3 {
  font-family: var(--font-display); font-size: var(--t-3); line-height: 1.3; letter-spacing: -.005em; font-weight: 500;
}
/* 4 Label */
.tags li, .live-link, .feature__meta, .section__label, .stat__label, .stats:has(> .stat:nth-child(3)) .stat__label,
.snapshot__item dt, .project__meta dt, .stage__label, .case-nav__facts dt, .case-nav__label, .case-nav__pct, .case-nav__list a span,
.nda__label, .nda__facts dt, .nda-badge, .nda-lock span, .chapter-nav__label, .chapter-nav__current, .hash {
  font-family: var(--font); font-size: var(--t-4); line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; font-weight: 400;
}
.stage:last-child .stage__title::before { font-size: 11px; }

/* the project name in the meta line reads as a name, not a label */
.feature__meta .feature__name { font-family: var(--font-display); text-transform: none; letter-spacing: -.005em; font-weight: 500; color: var(--ink); }
/* the big section pills read as titles (level 2) */
.pill--lg, .project__top .pill--lg { font-size: var(--t-2); }


/* the big footer name keeps its original poster size */
.site-footer__name { font-size: clamp(56px, 8vw, 140px); line-height: .9; letter-spacing: -.05em; }
/* small header pills read at body size (level 3) */
.pill--sm, .site-header .pill--sm { font-size: var(--t-3); }
/* the case card starts on the same line as the top images, with space below the "Projects" pill */
@media (min-width: 1101px) { .case-nav { margin-top: clamp(40px, 5vw, 72px); } }
.project__top { padding-bottom: 8px; }
/* at the end of the page the card stops with the same space before the "Previous / Next" line */
@media (min-width: 1101px) { .case { margin-bottom: clamp(40px, 5vw, 72px); } }
/* compact case card: fixed narrow column, the rest goes to the content */
@media (min-width: 1101px) {
  .case { grid-template-columns: 208px minmax(0, 1fr); column-gap: 0; }
  .case-nav { grid-column: 1; }
  .case-main { grid-column: 2; padding-left: clamp(40px, 4vw, 64px); }
}
.case-nav__card { padding: 18px 18px 14px; }
.case-nav__title, .case-nav__logo { margin-bottom: 14px; }
.case-nav__facts { gap: 9px; margin-bottom: 14px; padding-bottom: 14px; }
.case-nav__facts dd { margin-top: 1px; line-height: 1.35; }
.case-nav__label { margin-bottom: 6px; }
.case-nav__list a { padding: 3px 0 3px 12px; line-height: 1.35; }
.case-nav__progress { margin-top: 14px; }
/* level 4 labels: DM Sans, medium, small capitals (only 2 typefaces on the site: Bricolage Grotesque + DM Sans) */
.tags li, .live-link, .feature__meta, .section__label, .stat__label, .stats:has(> .stat:nth-child(3)) .stat__label,
.snapshot__item dt, .project__meta dt, .stage__label, .case-nav__facts dt, .case-nav__label, .case-nav__pct, .case-nav__list a span,
.nda__label, .nda__facts dt, .nda-badge, .nda-lock span, .chapter-nav__label, .chapter-nav__current, .hash, .carousel__count {
  font-family: var(--font); font-weight: 500; letter-spacing: .1em;
}
/* the case card is navigation: everything at level 4 (small), values in sentence case */
.case-nav__facts dd, .case-nav__list a, .case-nav__title {
  font-size: var(--t-4); line-height: 1.4; letter-spacing: .01em; text-transform: none;
}
.case-nav__title { font-size: var(--t-3); }
.case-nav__facts { gap: 8px; }
.case-nav__list { gap: 0; }
.case-nav__list a { padding: 4px 0 4px 12px; }
/* numbers in the list line up (same width for every digit) */
.case-nav__list a span { font-variant-numeric: tabular-nums; min-width: 1.9em; }
.case-nav__pct { font-variant-numeric: tabular-nums; }

/* case card hierarchy by contrast (same size): light grey labels, dark medium values, grouped pairs */
.case-nav__facts { gap: 14px; }
.case-nav__facts dt, .case-nav__label { color: #9a9a9a; font-weight: 400; letter-spacing: .12em; }
.case-nav__facts dd { margin-top: 2px; color: var(--ink); font-weight: 500; }
.case-nav__label { margin-bottom: 8px; }
.case-nav__list a { color: #7a7a7a; }
.case-nav__list a.is-active { color: var(--ink); font-weight: 500; }

/* ---------- single-column project page: everything stacks and uses the full content width ---------- */
.is-single .project__intro { padding-top: clamp(40px, 5vw, 72px); }
.is-single .project__hero { grid-template-columns: 1fr; margin-top: 0; }
.is-single .project__hero figure { grid-column: 1 / -1; height: auto; }
.is-single .section > .section__text,
.is-single .section > .section__media,
.is-single .section > .carousel,
.is-single .section > .devices,
.is-single .section > .stages,
.is-single .section > .learnings,
.is-single .section > .titled-list {
  grid-column: 1 / -1 !important; grid-row: auto !important; position: static !important; align-self: auto !important; max-width: none;
}
.is-single .section__text { max-width: none; }
.is-single .section > .section__media { margin-top: clamp(16px, 2vw, 28px); }
/* images beside text become full-width frames */
.is-single .section__media figure { aspect-ratio: auto; }
.is-single .section__media figure .img { height: auto; }
/* carousel: one big wide frame */
.is-single .carousel { display: block; margin-top: clamp(16px, 2vw, 28px); }
.is-single .carousel .carousel__frame { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
/* phones beside text: centred row under the text */
.is-single .section--phones .devices--phones { margin-top: clamp(16px, 2vw, 28px); padding: clamp(28px, 4vw, 56px) 0; justify-content: center; }

/* single column: the laptop + phone mockup uses more of the width */
.is-single .devices:not(.devices--phones) { padding: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 64px); margin-top: clamp(16px, 2vw, 28px); }
/* phones: the long "Projects: name" pill uses body size so it always fits */
@media (max-width: 600px) { .project__top .pill--lg, .project__next .pill--lg { font-size: var(--t-3); max-width: 100%; } }
/* snapshot: an item with a list gets more room, and its list reads as separate results */
@media (min-width: 840px) {
  .snapshot:has(.snapshot__item--wide) { grid-template-columns: 1fr 1.6fr 1fr; }
}
.snapshot__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.snapshot__list li { position: relative; padding-left: 16px; color: var(--ink); }
.snapshot__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* wide carousel: text on top, the carousel below across the full content width */
.section--carousel-wide .section__text { grid-column: 1 / 7; grid-row: 1; }
.section--carousel-wide .carousel { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(16px, 2vw, 28px); display: block; }
.section--carousel-wide .carousel .carousel__frame { aspect-ratio: 16 / 10; min-height: 0; flex: none; }
.section--carousel-wide .carousel__slide { padding: 2.5%; }
/* wide carousel sections: the text uses the full width, its paragraphs side by side in columns */
.section--carousel-wide .section__text { grid-column: 1 / -1; max-width: none; }
@media (min-width: 900px) {
  .section--carousel-wide .rich { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--gutter); }
  .section--carousel-wide .rich p { margin: 0; padding-top: 14px; border-top: 1px solid var(--frame-line); }
}
.section--carousel-wide .rich strong { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 500; color: var(--ink); }
/* "Fix:" inside a titled row reads as a small cobalt label */
.titled-row__text em { font-style: normal; font-weight: 500; color: var(--accent); }

/* timeline: steps on one line, a dot on the line for each, the last one filled */
.section--timeline .section__text { grid-column: 1 / 7; }
.timeline {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gutter);
  counter-reset: step;
}
.step { position: relative; padding-top: 34px; counter-increment: step; }
.step::before { content: ""; position: absolute; top: 7px; left: 0; right: calc(-1 * var(--gutter)); height: 2px; background: #e4e4e0; }
.step:last-child::before { right: 0; }
.step::after {
  content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0;
  width: 16px; height: 16px; border-radius: 50%; background: var(--bg, #fff); border: 2px solid var(--accent);
  font-size: 0; box-sizing: border-box;
}
.step:last-child::after { background: var(--accent); }
.step__title { font-family: var(--font-display); font-size: var(--t-3); font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
.step__text { margin-top: 8px; color: var(--muted); line-height: 1.5; font-size: var(--t-3); max-width: 26em; }
@media (max-width: 700px) {
  .timeline { grid-template-columns: 1fr; gap: 24px; }
  .step { padding: 0 0 0 32px; }
  .step::before { top: 16px; bottom: -24px; left: 7px; right: auto; width: 2px; height: auto; }
  .step:last-child::before { display: none; }
}
/* a drawn chart at full width shows at its own shape, edge to edge, with no frame padding */
.section--full-image figure:has(> img[src$=".svg"]) { aspect-ratio: auto; background: none; }
.section--full-image figure > img[src$=".svg"] { padding: 0; height: auto; object-fit: initial; }
/* every section: the title stays on one line, the text under it keeps the same column width */
.section__heading { width: max-content; max-width: calc(100vw - 2 * var(--base-margin)); }
@media (min-width: 1101px) {
  .case:not(.is-single) .section__heading { max-width: calc(100vw - 2 * var(--base-margin) - 208px - clamp(40px, 4vw, 64px)); }
}
/* beside images the title wraps instead of running into them */
:is(.section--text-left, .section--text-right, .section--carousel:not(.section--carousel-wide)) .section__heading { max-width: 100%; }
/* project card: the error line only takes space when there is an error, so the card ends evenly */
.nda__error:empty { display: none; }
.nda__facts dd { text-wrap: balance; }