:root {
  --ink: #392a42;
  --paper: #eadfd2;
  --white: #f2e8dc;
  --purple: #5c3586;
  --lilac: #b28ec5;
  --coral: #ef684f;
  --acid: #d9e000;
  --line: 2px solid var(--ink);
  --pad: clamp(1.1rem, 3vw, 3.5rem);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  overflow-x: clip;
}

h1, h2, h3, p { min-width: 0; }

.hero h1,
.page-hero h1,
.giant-line,
.statement h2,
.founder-name,
.route-list strong,
.contact-details h2,
.portrait-hero-copy h1,
.story-heading > h2,
.method-statement h2,
.work-together-heading h2,
.personal-invite h2,
.hybrid-copy h1,
.making-intro h2,
.making-proof p {
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

body.menu-open { overflow: hidden; }

img { display: block; width: 100%; }

a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .5rem;
  padding: .8rem 1rem;
  background: var(--acid);
  transform: translateY(-150%);
}

.skip-link:focus { transform: none; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: 7.2rem 1fr auto;
  align-items: center;
  min-height: 5.2rem;
  padding: .7rem var(--pad);
  border-bottom: var(--line);
  background: rgba(234, 223, 210, .95);
  backdrop-filter: blur(10px);
}

.brand { width: 5.7rem; }
.brand img { max-height: 3.8rem; object-fit: contain; }

.site-nav {
  justify-self: center;
  display: flex;
  gap: clamp(1rem, 2.3vw, 2.4rem);
  align-items: center;
}

.site-nav a,
.header-cta,
.eyebrow,
.button,
.mini-label,
.tag-list,
.footer-nav,
.step-no {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-nav a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .75rem 1rem;
  border: var(--line);
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.header-cta { background: var(--acid); }
.button { background: var(--ink); color: var(--white); }
.button.light { background: var(--white); color: var(--ink); }
.button.acid { background: var(--acid); color: var(--ink); }
.button:hover, .header-cta:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }

.menu-button { display: none; border: 0; background: none; font: inherit; font-weight: 800; }

.hero {
  min-height: calc(100vh - 5.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
  border-bottom: var(--line);
}

.hero-copy {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(3rem, 7vw, 8rem) var(--pad) 2rem;
  background: var(--purple);
  color: var(--white);
}

.hero-copy::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -8rem;
  width: clamp(15rem, 30vw, 28rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--coral);
  mix-blend-mode: screen;
  opacity: .95;
}

.hero h1,
.page-hero h1,
.giant-line {
  position: relative;
  z-index: 1;
  max-width: 10ch;
  margin: 0;
  font-size: clamp(4.2rem, 9.5vw, 10.5rem);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .8;
  text-transform: uppercase;
}

.hero h1 span { display: block; color: var(--acid); }

.hero-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(13rem, 32rem) auto;
  align-items: end;
  gap: 2rem;
  margin-top: 5rem;
}

.hero-bottom p {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
}

.hero-visual {
  position: relative;
  min-height: 34rem;
  background: var(--lilac);
  overflow: hidden;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-new {
  grid-template-columns: minmax(0, 1.03fr) minmax(28rem, .97fr);
}

.hero-new .hero-copy {
  min-height: calc(100vh - 5.2rem);
  padding-top: clamp(2.5rem, 5vw, 5.5rem);
}

.hero-new h1 {
  max-width: 8.5ch;
  font-size: clamp(3.8rem, 7.7vw, 8.8rem);
}

.hero-bottom-new {
  grid-template-columns: 1fr;
  max-width: 42rem;
}

.hero-actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

.text-link {
  padding: .7rem .1rem;
  border-bottom: 2px solid currentColor;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-world {
  position: relative;
  min-height: calc(100vh - 5.2rem);
  overflow: hidden;
  background: var(--acid);
}

.hero-tile {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: var(--line);
  box-shadow: 8px 8px 0 var(--ink);
}

.hero-tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-lab { z-index: 2; top: 4%; left: 5%; width: 57%; height: 48%; transform: rotate(-3deg); }
.tile-space { z-index: 1; top: 8%; right: -4%; width: 48%; height: 59%; transform: rotate(3deg); }
.tile-people { z-index: 3; left: 8%; bottom: 3%; width: 52%; height: 39%; transform: rotate(2deg); }

.book-ticket {
  position: absolute;
  z-index: 5;
  right: 5%;
  bottom: 6%;
  width: min(15rem, 44%);
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  border: var(--line);
  background: var(--coral);
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--ink);
  text-decoration: none;
  transform: rotate(-2deg);
  transition: transform .18s ease;
}

.book-ticket:hover { transform: translate(-3px, -4px) rotate(0); }
.book-ticket strong { margin: 1.2rem 0 .25rem; font-size: clamp(1.45rem, 2.5vw, 2.3rem); line-height: .9; text-transform: uppercase; }
.book-ticket small { font-size: 1rem; font-weight: 700; }
.book-ticket b { margin-top: 1.2rem; font-size: 2.1rem; line-height: 1; }
.book-ticket em { margin-top: .25rem; font-size: .75rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.desire-ticket small { margin-top: 1rem; }
.desire-ticket em { margin-top: 1.25rem; padding-top: .75rem; border-top: 2px solid currentColor; }

.hero-stamp {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 8rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: var(--line);
  border-radius: 50%;
  background: var(--acid);
  text-align: center;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  transform: rotate(7deg);
}

.ticker {
  overflow: hidden;
  padding: .8rem 0;
  border-bottom: var(--line);
  background: var(--acid);
  white-space: nowrap;
}

.ticker-track {
  display: inline-block;
  min-width: 200%;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: ticker 22s linear infinite;
}

@keyframes ticker { to { transform: translateX(-50%); } }

.trust-band {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem var(--pad);
  border-bottom: var(--line);
  background: var(--white);
}

.trust-band p { margin: 0; }
.trust-groups { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.trust-groups span { padding: .55rem .75rem; border: var(--line); background: var(--paper); font-size: .75rem; font-weight: 900; text-transform: uppercase; }

.section { padding: clamp(4rem, 8vw, 9rem) var(--pad); border-bottom: var(--line); }
.section.no-bottom { border-bottom: 0; }

.route-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 11% 18%, rgba(239, 104, 79, .18) 0 8rem, transparent 8.2rem),
    radial-gradient(circle at 86% 78%, rgba(178, 142, 197, .28) 0 11rem, transparent 11.2rem),
    var(--paper);
}

.route-section::after {
  content: "VAN IDEE NAAR VORM";
  position: absolute;
  right: -1rem;
  bottom: -1.1rem;
  color: rgba(57, 42, 66, .065);
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .8;
  white-space: nowrap;
  pointer-events: none;
}

.idea-route {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr .55fr 1.15fr .55fr 1.15fr;
  gap: clamp(.8rem, 2vw, 2rem);
  align-items: center;
  min-height: 27rem;
}

.route-node {
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.35rem;
  border: var(--line);
  box-shadow: 10px 10px 0 var(--ink);
}

.route-node strong { font-size: clamp(1.7rem, 3vw, 3rem); line-height: .95; text-transform: uppercase; }
.route-source { background: var(--white); transform: rotate(-2deg); }
.route-core { position: relative; overflow: hidden; background: var(--purple); color: var(--white); transform: rotate(1.5deg); }
.route-core i { position: absolute; right: -2rem; bottom: -3rem; width: 9rem; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }

.route-arrow { text-align: center; }
.route-arrow span { display: block; height: 2px; background: var(--ink); position: relative; }
.route-arrow span::after { content: ""; position: absolute; right: 0; top: 50%; width: .75rem; height: .75rem; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
.route-arrow b { display: block; margin-top: 1rem; font-size: .72rem; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }

.route-outputs { display: grid; gap: .75rem; }
.route-output { padding: 1.2rem 1rem; border: var(--line); box-shadow: 5px 5px 0 var(--ink); font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 900; line-height: 1; text-transform: uppercase; }
.route-output:nth-child(1) { transform: translateX(-.6rem) rotate(-1deg); }
.route-output:nth-child(2) { transform: translateX(.8rem) rotate(1deg); }
.route-output:nth-child(3) { transform: translateX(-.1rem) rotate(-.5deg); }
.purple-output { background: var(--lilac); }
.coral-output { background: var(--coral); }
.acid-output { background: var(--acid); }

.fields-section {
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(57, 42, 66, .08) 50%, transparent 50.2%),
    var(--white);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(20rem, 2fr);
  gap: 2rem;
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-head h2,
.statement h2,
.project-copy h2,
.contact-panel h2,
.offer-head h2,
.founder-intro h2 {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 6.7rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
  text-transform: uppercase;
}

.offers { background: var(--white); }

.offer-head > div h2 {
  max-width: 10ch;
  margin-top: 1rem;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.85rem, 1.7vw, 1.5rem);
}

.offer-card {
  min-height: 32rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.4rem;
  border: var(--line);
  box-shadow: 8px 8px 0 var(--ink);
}

.offer-one { background: var(--acid); transform: rotate(-.7deg) translateY(1rem); }
.offer-two { background: var(--lilac); transform: rotate(.6deg) translateY(-.6rem); }
.offer-three { background: var(--coral); transform: rotate(-.4deg) translateY(1.4rem); }
.offer-four { background: var(--purple); color: var(--white); transform: rotate(.7deg); }
.offer-number { display: block; margin-bottom: 3.5rem; font-size: 2.4rem; font-weight: 900; }
.offer-card h3 { max-width: 9ch; margin: .7rem 0 1rem; font-size: clamp(2rem, 3vw, 3.4rem); letter-spacing: -.055em; line-height: .87; text-transform: uppercase; }
.offer-card p { font-weight: 600; }
.offer-bottom { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: end; margin-top: 2rem; padding-top: 1rem; border-top: 2px solid currentColor; }
.offer-bottom strong { font-size: 1.45rem; }
.offer-bottom span { font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.offer-bottom a { grid-column: 1 / -1; margin-top: .8rem; font-weight: 900; text-transform: uppercase; }
.price-note { margin: 3rem 0 0; font-size: .88rem; font-weight: 700; }

.capability-section { background: var(--paper); }

.capability-mosaic {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1fr;
  grid-template-areas:
    "vision image digital"
    "vision product digital"
    "space product together";
  gap: 1rem;
}

.cap {
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border: var(--line);
}

.cap span { font-size: .78rem; font-weight: 900; }
.cap h3 { max-width: 11ch; margin: auto 0 .8rem; font-size: clamp(1.7rem, 3vw, 3.2rem); letter-spacing: -.045em; line-height: .9; text-transform: uppercase; }
.cap p { max-width: 30rem; margin: 0; font-weight: 600; }
.cap-vision { grid-area: vision; min-height: 31rem; background: var(--purple); color: var(--white); }
.cap-image { grid-area: image; background: var(--coral); }
.cap-digital { grid-area: digital; min-height: 31rem; background: var(--acid); }
.cap-product { grid-area: product; min-height: 31rem; background: var(--lilac); }
.cap-space { grid-area: space; background: var(--white); }
.cap-together { grid-area: together; background: var(--coral); }

.lead {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
}

.fields-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 1.8vw, 1.6rem);
}

.field-card {
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.4rem;
  border: var(--line);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}

.field-card:nth-child(1) { transform: translateY(1.2rem) rotate(-1.2deg); }
.field-card:nth-child(2) { transform: translateY(-.8rem) rotate(.8deg); }
.field-card:nth-child(3) { transform: translateY(1.8rem) rotate(-.5deg); }
.field-card:nth-child(4) { transform: translateY(-.2rem) rotate(1deg); }
.field-card:hover { transform: translate(-3px, -5px) rotate(0); box-shadow: 12px 14px 0 var(--ink); }

.field-card:nth-child(1) { background: var(--coral); }
.field-card:nth-child(2) { background: var(--lilac); }
.field-card:nth-child(3) { background: var(--purple); color: var(--white); }
.field-card:nth-child(4) { background: var(--acid); }

.field-card h3,
.step h3,
.proof h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  line-height: .96;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.field-card p { margin: 2rem 0 0; font-weight: 600; }
.field-graphic { position: relative; width: 100%; height: 9rem; }
.field-graphic i { position: absolute; display: block; border: 2px solid currentColor; }
.graphic-print i:nth-child(1) { width: 4.4rem; height: 4.4rem; border-radius: 50%; left: 8%; top: 15%; background: var(--acid); }
.graphic-print i:nth-child(2) { width: 5.4rem; height: 2.7rem; right: 8%; top: 8%; background: var(--purple); }
.graphic-print i:nth-child(3) { width: 6rem; height: 3.2rem; left: 34%; bottom: 5%; background: var(--lilac); transform: rotate(-9deg); }
.graphic-space i:nth-child(1) { width: 75%; height: 68%; left: 12%; bottom: 6%; border-bottom: 0; }
.graphic-space i:nth-child(2) { width: 3rem; height: 6rem; left: 26%; bottom: 6%; background: var(--acid); }
.graphic-space i:nth-child(3) { width: 4rem; height: 4rem; right: 18%; bottom: 6%; border-radius: 50% 50% 0 0; background: var(--coral); }
.graphic-product i:nth-child(1) { width: 5.5rem; height: 5.5rem; left: 8%; bottom: 8%; background: var(--lilac); transform: rotate(14deg); }
.graphic-product i:nth-child(2) { width: 5rem; height: 5rem; right: 9%; top: 5%; border-radius: 50%; background: var(--coral); }
.graphic-product i:nth-child(3) { width: 7rem; height: 2rem; left: 32%; bottom: 12%; background: var(--acid); transform: rotate(-8deg); }
.graphic-people i { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--white); }
.graphic-people i:nth-child(1) { left: 5%; top: 14%; }
.graphic-people i:nth-child(2) { left: 35%; bottom: 4%; background: var(--coral); }
.graphic-people i:nth-child(3) { right: 7%; top: 2%; background: var(--lilac); }
.graphic-people i:nth-child(4) { right: 28%; bottom: 3%; background: var(--purple); }

.projects { background: var(--ink); color: var(--white); }

.project-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr);
  min-height: 44rem;
  border: 2px solid var(--white);
  box-shadow: 12px 12px 0 var(--acid);
}

.project-feature + .project-feature { margin-top: 3.5rem; box-shadow: 12px 12px 0 var(--coral); }

.project-feature-compact {
  grid-template-columns: minmax(17rem, .7fr) minmax(0, 1.3fr);
  min-height: 30rem;
  box-shadow: 12px 12px 0 var(--lilac) !important;
}

.project-feature-compact .project-image { min-height: 30rem; }
.project-feature-compact .project-copy { background: var(--purple); }

.range-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  border-top: 2px solid var(--white);
  border-left: 2px solid var(--white);
}

.range-strip article { min-height: 15rem; padding: 1.4rem; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); }
.range-strip span { font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.range-strip h3 { margin: 3rem 0 .8rem; font-size: clamp(1.7rem, 3vw, 3.2rem); letter-spacing: -.04em; line-height: .9; text-transform: uppercase; }
.range-strip p { max-width: 24rem; margin-bottom: 0; }

.project-image { min-height: 32rem; overflow: hidden; }
.project-image img { height: 100%; object-fit: cover; transition: transform .7s ease; }
.project-feature:hover .project-image img { transform: scale(1.025); }

.project-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 3rem);
  border-left: 2px solid var(--white);
}

.project-copy p { max-width: 31rem; font-size: 1.1rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.tag-list span { padding: .4rem .55rem; border: 1px solid currentColor; }

.statement {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 3rem;
  align-items: end;
  background: var(--coral);
  background-image: radial-gradient(rgba(57, 42, 66, .2) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}

.statement h2 { max-width: 13ch; }
.statement p { max-width: 31rem; margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 700; }

.lab-split {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  border-bottom: var(--line);
}

.lab-copy { padding: clamp(3rem, 6vw, 7rem) var(--pad); background: var(--lilac); }
.lab-copy h2 { margin: 1rem 0 2rem; font-size: clamp(3rem, 6vw, 6rem); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; }
.lab-copy p { max-width: 31rem; font-size: 1.15rem; }
.lab-photo { min-height: 40rem; }
.lab-photo img { height: 100%; object-fit: cover; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--line);
  border-left: var(--line);
}

.process-route { position: relative; gap: 1rem; border: 0; }
.process-route::before { content: ""; position: absolute; z-index: 0; top: 4rem; left: 7%; right: 7%; height: 5px; background: var(--ink); }
.process-route .step { position: relative; z-index: 1; border: var(--line); box-shadow: 7px 7px 0 var(--ink); }
.process-route .step:nth-child(1) { background: var(--white); transform: translateY(1rem); }
.process-route .step:nth-child(2) { background: var(--lilac); transform: translateY(-.5rem); }
.process-route .step:nth-child(3) { background: var(--coral); transform: translateY(1.4rem); }
.process-route .step:nth-child(4) { background: var(--acid); transform: translateY(-.2rem); }
.process-route .step-no { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; margin-bottom: 4.5rem; border: var(--line); border-radius: 50%; background: var(--paper); }

.step {
  min-height: 20rem;
  padding: 1.4rem;
  border-right: var(--line);
  border-bottom: var(--line);
}

.step-no { display: block; margin-bottom: 5rem; }
.step p { margin: 1.2rem 0 0; }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.proof { padding: 1.5rem; border: var(--line); background: var(--white); }
.proof { box-shadow: 6px 6px 0 var(--ink); }
.proof:nth-child(1) { transform: rotate(-1deg) translateY(.5rem); }
.proof:nth-child(2) { background: var(--acid); transform: rotate(.8deg) translateY(-.6rem); }
.proof:nth-child(3) { background: var(--lilac); transform: rotate(-.6deg) translateY(.9rem); }
.proof:nth-child(4) { background: var(--coral); transform: rotate(.7deg) translateY(-.3rem); }
.proof strong { display: block; margin-bottom: .5rem; font-size: 2rem; }
.proof p { margin-bottom: 0; }

.contact-panel {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  padding: clamp(4rem, 8vw, 9rem) var(--pad);
  background: var(--purple);
  color: var(--white);
}

.contact-panel h2 { max-width: 11ch; color: var(--acid); }
.contact-actions { align-self: end; }
.contact-actions p { max-width: 28rem; font-size: 1.2rem; font-weight: 700; }
.contact-actions .button { margin-top: 1rem; }

.statement-new { background-color: var(--coral); }

.founder-section {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(3rem, 8vw, 9rem);
  background: var(--acid);
}

.founder-intro h2 { max-width: 12ch; margin-top: 1rem; }
.founder-intro { position: relative; overflow: hidden; }
.founder-name { margin-top: 3rem; color: var(--purple); font-size: clamp(5rem, 12vw, 12rem); font-weight: 900; letter-spacing: -.09em; line-height: .72; opacity: .2; transform: rotate(-3deg) translateX(-.5rem); }
.founder-copy { align-self: end; }
.founder-copy > p:not(.lead) { max-width: 40rem; font-size: 1.1rem; }
.founder-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 2rem; }
.founder-facts span { min-height: 4rem; display: flex; align-items: center; padding: .7rem; border: var(--line); background: var(--white); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.founder-signature { margin-top: 2rem; font-size: .78rem !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.founder-photo { position: relative; margin: 3rem .7rem .7rem 0; aspect-ratio: 4 / 5; overflow: hidden; border: var(--line); box-shadow: 10px 10px 0 var(--ink); transform: rotate(-1.2deg); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo figcaption { position: absolute; right: .7rem; bottom: .7rem; padding: .35rem .5rem; background: var(--paper); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.founder-process-images { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1rem; align-items: end; margin: 2.4rem 0; }
.founder-process-images img { width: 100%; object-fit: cover; border: var(--line); box-shadow: 6px 6px 0 var(--ink); }
.founder-process-images img:first-child { aspect-ratio: 1 / 1; transform: rotate(1.5deg); }
.founder-process-images img:last-child { aspect-ratio: 4 / 5; transform: rotate(-1deg); }
.process-section { background: var(--white); }
.contact-panel-new { border-top: var(--line); }

.start-routes { background: var(--white); }
.route-list { border-top: var(--line); }
.route-list a {
  display: grid;
  grid-template-columns: .9fr 1.2fr .7fr;
  gap: 1.4rem;
  align-items: center;
  min-height: 7rem;
  padding: 1rem 0;
  border-bottom: var(--line);
  text-decoration: none;
  transition: padding .18s ease, background .18s ease;
}
.route-list a:hover { padding-right: 1rem; padding-left: 1rem; background: var(--acid); }
.route-list span { font-size: .9rem; font-weight: 700; }
.route-list strong { font-size: clamp(1.7rem, 3vw, 3.4rem); letter-spacing: -.045em; line-height: .9; text-transform: uppercase; }
.route-list em { font-size: .78rem; font-style: normal; font-weight: 900; text-transform: uppercase; }

.project-book-case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  background: var(--lilac);
}

.case-gallery {
  position: relative;
  min-height: 46rem;
}

.case-gallery img {
  position: absolute;
  width: 66%;
  height: 78%;
  object-fit: cover;
  border: var(--line);
  box-shadow: 10px 10px 0 var(--ink);
}

.case-gallery img:first-child { left: 0; top: 0; transform: rotate(-2deg); z-index: 2; }
.case-gallery img:last-child { right: 0; bottom: 0; transform: rotate(3deg); }
.case-story h2 { margin: 1rem 0 2rem; }
.case-story > p:not(.eyebrow) { max-width: 36rem; }
.case-principle { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin-top: 2rem; padding-top: 1.4rem; border-top: var(--line); }
.case-principle span { font-size: .75rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.case-principle strong { font-size: 1.1rem; }

.site-footer {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 2rem;
  padding: 2rem var(--pad);
  border-top: var(--line);
  background: var(--paper);
}

.footer-brand { max-width: 7rem; }
.footer-meta { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.footer-meta p { margin: 0; }
.footer-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(3rem, 7vw, 8rem) var(--pad) 2rem;
  border-bottom: var(--line);
  background: var(--lilac);
}

.page-hero::after {
  content: "";
  position: absolute;
  right: clamp(1rem, 7vw, 7rem);
  top: clamp(6rem, 14vw, 11rem);
  width: clamp(6rem, 15vw, 13rem);
  aspect-ratio: 1;
  border: var(--line);
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 10px 10px 0 var(--ink);
  opacity: .92;
  mix-blend-mode: multiply;
}
.page-hero h1, .page-hero p, .page-hero > .eyebrow { position: relative; z-index: 1; }

.page-hero.purple { background: var(--purple); color: var(--white); }
.page-hero.coral { background: var(--coral); }
.page-hero.acid { background: var(--acid); }
.page-hero h1 { max-width: 9ch; }
.page-hero p { max-width: 38rem; margin: 4rem 0 0 auto; font-size: clamp(1.25rem, 2.5vw, 2.1rem); font-weight: 700; line-height: 1.2; }

.text-grid {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(2rem, 6vw, 7rem);
}

.rich-text { max-width: 52rem; }
.rich-text p { font-size: 1.15rem; }
.rich-text .lead { margin-bottom: 2rem; }

.full-image { max-height: 82vh; object-fit: cover; border-bottom: var(--line); }
.full-image.tall-focus { object-position: center 45%; }

.project-list { border-top: var(--line); }
.project-row {
  display: grid;
  grid-template-columns: 5rem minmax(16rem, .8fr) minmax(18rem, 1.2fr);
  gap: 2rem;
  align-items: baseline;
  padding: 2rem 0;
  border-bottom: var(--line);
}
.project-row h2 { margin: 0; font-size: clamp(2rem, 5vw, 5rem); line-height: .9; text-transform: uppercase; }
.project-row p { max-width: 38rem; }

.participation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.participation-card { padding: 2rem; border: var(--line); }
.participation-card h2 { margin-top: 0; font-size: 2rem; text-transform: uppercase; }

.participation-flow-section { background: var(--lilac); }
.participation-flow {
  display: grid;
  grid-template-columns: 1fr .7fr .25fr .7fr .25fr .7fr 1fr .7fr;
  gap: 1rem;
  align-items: center;
}
.voice-cloud, .flow-result { position: relative; height: 11rem; border: var(--line); background: var(--white); box-shadow: 8px 8px 0 var(--ink); }
.voice-cloud i { position: absolute; width: 2.6rem; height: 2.6rem; border: var(--line); border-radius: 50%; }
.voice-cloud i:nth-child(1) { left: 10%; top: 14%; background: var(--coral); }
.voice-cloud i:nth-child(2) { left: 42%; top: 8%; background: var(--acid); }
.voice-cloud i:nth-child(3) { right: 8%; top: 28%; background: var(--purple); }
.voice-cloud i:nth-child(4) { left: 20%; bottom: 12%; background: var(--lilac); }
.voice-cloud i:nth-child(5) { left: 52%; bottom: 17%; background: var(--coral); }
.voice-cloud i:nth-child(6) { right: 8%; bottom: 6%; background: var(--acid); }
.flow-label strong { display: block; margin-top: .45rem; font-size: 1.1rem; line-height: 1.05; text-transform: uppercase; }
.flow-filter { font-size: 2.8rem; font-weight: 900; text-align: center; }
.flow-result { overflow: hidden; background: var(--purple); }
.flow-result i:nth-child(1) { position: absolute; inset: 1.2rem 45% 1.2rem 1.2rem; background: var(--lilac); transform: skew(-8deg); }
.flow-result i:nth-child(2) { position: absolute; right: 1rem; top: .8rem; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--coral); }
.flow-result i:nth-child(3) { position: absolute; right: 1rem; bottom: .8rem; width: 5rem; height: 2.4rem; background: var(--acid); }

.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(3rem, 7vw, 8rem);
}

.contact-details a { font-size: clamp(1.7rem, 4vw, 4rem); font-weight: 900; letter-spacing: -.045em; }
.contact-details h2 { max-width: 10ch; margin: .8rem 0 1.5rem; font-size: clamp(2.6rem, 5vw, 5.8rem); letter-spacing: -.055em; line-height: .88; text-transform: uppercase; }
.contact-details > p:not(.eyebrow) { max-width: 34rem; }
.contact-offers { border-bottom: var(--line); }
.compact-offers .offer-card { min-height: 23rem; }
.compact-offers .offer-card h3 { font-size: clamp(1.7rem, 2.4vw, 2.8rem); }
.compact-offers .offer-bottom { grid-template-columns: 1fr; }
.compact-offers .offer-bottom a { grid-column: auto; }

.contact-form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 800; }
.field input, .field textarea, .field select {
  width: 100%;
  border: var(--line);
  border-radius: 0;
  background: var(--white);
  padding: .95rem;
  color: var(--ink);
  font: inherit;
}
.field textarea { min-height: 10rem; resize: vertical; }
.form-note { margin: 0; font-size: .9rem; }

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 4.8rem;
    background: rgba(234, 223, 210, .98);
    backdrop-filter: none;
  }
  .header-cta { display: none; }
  .menu-button {
    position: relative;
    z-index: 52;
    display: grid;
    min-width: 4.5rem;
    min-height: 2.75rem;
    place-items: center;
    padding: .55rem .75rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
  }
  .site-nav {
    position: fixed;
    z-index: 49;
    inset: 4.8rem 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    height: calc(100dvh - 4.8rem);
    padding: clamp(2rem, 8vh, 5rem) var(--pad) max(2rem, env(safe-area-inset-bottom));
    background: var(--acid);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.65rem);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .menu-open .site-header { background: var(--acid); }
  .menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav a {
    width: 100%;
    padding: .9rem 0;
    border-bottom: 1.5px solid currentColor;
    font-size: clamp(1.85rem, 8vw, 3.6rem);
    letter-spacing: -.04em;
    line-height: 1;
  }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 68vh; }
  .hero-visual { min-height: 62vh; }
  .hero-world { min-height: 70vh; }
  .fields-grid, .process-grid, .proof-grid, .offer-grid { grid-template-columns: 1fr 1fr; }
  .offer-card { min-height: 28rem; }
  .capability-mosaic { grid-template-columns: 1fr 1fr; grid-template-areas: "vision image" "vision digital" "product digital" "product space" "together together"; }
  .idea-route { grid-template-columns: 1fr .35fr 1fr; }
  .idea-route .split-arrow { display: none; }
  .route-outputs { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
  .participation-flow { grid-template-columns: 1fr 1fr; }
  .trust-band { grid-template-columns: 1fr; }
  .trust-groups { justify-content: flex-start; }
  .route-list a { grid-template-columns: .8fr 1.2fr .8fr; }
  .flow-filter { display: none; }
  .project-feature { grid-template-columns: 1fr; }
  .project-copy { border-left: 0; border-top: 2px solid var(--white); min-height: 25rem; }
  .statement, .lab-split, .contact-panel, .founder-section, .project-book-case { grid-template-columns: 1fr; }
  .case-gallery { min-height: 40rem; }
  .lab-photo { min-height: 55vh; }
}

@media (max-width: 680px) {
  .hero h1, .page-hero h1, .giant-line {
    font-size: clamp(2.85rem, 13.5vw, 4.6rem);
    line-height: .86;
  }
  .page-hero {
    min-height: min(42rem, calc(100svh - 4.8rem));
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }
  .page-hero h1 { max-width: 8.5ch; }
  .page-hero p {
    max-width: 30rem;
    margin: 2.5rem 0 0;
    font-size: clamp(1.15rem, 5.4vw, 1.55rem);
  }
  .hero-bottom, .section-head, .text-grid, .contact-grid, .site-footer, .footer-meta { grid-template-columns: 1fr; }
  .hero-bottom { align-items: start; }
  .fields-grid, .process-grid, .proof-grid, .participation-grid, .offer-grid, .range-strip { grid-template-columns: 1fr; }
  .hero-new .hero-copy {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 2.25rem;
    padding-bottom: 2.75rem;
  }
  .hero-new h1 {
    max-width: none;
    font-size: clamp(2.85rem, 13vw, 4.35rem);
    line-height: .84;
  }
  .hero-bottom-new { margin-top: clamp(3.5rem, 15vw, 5rem); }
  .hero-world { min-height: 33rem; }
  .tile-lab { width: 70%; height: 42%; }
  .tile-space { width: 53%; height: 50%; }
  .tile-people { width: 64%; height: 36%; }
  .book-ticket { width: 52%; right: 4%; bottom: 4%; }
  .offer-card { min-height: 24rem; transform: none; }
  .capability-mosaic { grid-template-columns: 1fr; grid-template-areas: "vision" "image" "digital" "product" "space" "together"; }
  .cap, .cap-vision, .cap-digital, .cap-product { min-height: 17rem; }
  .founder-facts { grid-template-columns: 1fr; }
  .route-list a { grid-template-columns: 1fr; gap: .45rem; padding: 1.2rem 0; }
  .route-list a strong { grid-column: 1 / -1; grid-row: 1; }
  .route-list a span { grid-column: 1 / -1; grid-row: 2; }
  .route-list a em { grid-column: 1; grid-row: 3; }
  .idea-route { grid-template-columns: 1fr; }
  .route-arrow { min-height: 4rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; transform: rotate(90deg); }
  .route-arrow b { transform: rotate(-90deg); margin: 0; }
  .route-outputs { grid-column: auto; grid-template-columns: 1fr; }
  .route-node, .route-output, .field-card, .process-route .step, .proof { transform: none !important; }
  .fields-section { background: var(--white); }
  .process-route::before { display: none; }
  .participation-flow { grid-template-columns: 1fr; }
  .page-hero::after { right: -2rem; top: 7rem; }
  .field-card { min-height: 18rem; }
  .project-feature { min-height: auto; }
  .project-feature-compact { grid-template-columns: 1fr; }
  .project-image { min-height: 28rem; }
  .case-gallery { min-height: 31rem; }
  .project-row { grid-template-columns: 2.8rem 1fr; gap: 1rem; }
  .project-row p { grid-column: 2; }
  .contact-panel { gap: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .project-image img, .button, .header-cta { transition: none; }
}

/* Homepage editorial redesign */
.home { background: #f7f3ee; color: var(--ink); }

.home .site-header {
  position: absolute;
  width: 100%;
  border-bottom: 0;
  background: linear-gradient(to bottom, rgba(34, 20, 43, .48), transparent);
  color: var(--white);
  backdrop-filter: none;
}

.home .site-nav a:hover { border-bottom-color: var(--white); }
.home .menu-button { color: var(--white); }

.portrait-hero {
  position: relative;
  min-height: min(58rem, 92svh);
  overflow: hidden;
  border-radius: 0 0 clamp(1.8rem, 4vw, 4.5rem) clamp(1.8rem, 4vw, 4.5rem);
  background: var(--purple);
  color: var(--white);
}

.portrait-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
}

.portrait-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(38, 18, 50, .38), rgba(38, 18, 50, .08) 58%, rgba(38, 18, 50, .28));
}

.portrait-hero-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(3rem, 8vw, 7rem);
  width: min(72rem, calc(100% - 2 * var(--pad)));
  text-align: center;
  transform: translateX(-50%);
}

.portrait-hero-copy p {
  margin: 0 0 1.2rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.portrait-hero-copy h1 {
  margin: 0;
  font-size: clamp(4.2rem, 10.5vw, 9.5rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .88;
  text-wrap: balance;
}

.portrait-hero-copy a {
  display: inline-block;
  margin-top: 2rem;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  background: var(--acid);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.photo-credit {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: 1.1rem;
  font-size: .72rem;
}

.editorial-intro,
.story-heading,
.work-together,
.personal-invite {
  display: grid;
  grid-template-columns: minmax(17rem, .9fr) minmax(20rem, 1.1fr);
  gap: clamp(3rem, 8vw, 10rem);
  padding: clamp(5rem, 10vw, 10rem) var(--pad);
}

.editorial-title h2,
.editorial-title p,
.editorial-copy h2,
.editorial-copy p { margin-top: 0; }

.editorial-title h2 {
  margin-bottom: .1rem;
  font-size: clamp(2.3rem, 4.5vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .95;
}

.editorial-title p {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.editorial-copy h2 {
  max-width: 19ch;
  margin-bottom: 1.7rem;
  font-size: clamp(1.8rem, 3.2vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.editorial-copy p {
  max-width: 42rem;
  margin-bottom: 1rem;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.35;
}

.story-heading {
  padding-top: clamp(3rem, 7vw, 7rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  border-top: var(--line);
}

.story-heading > h2 {
  max-width: 8ch;
  margin: 0;
  font-size: clamp(4rem, 8vw, 8.5rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .84;
}

.story-heading > div { align-self: end; }
.story-heading > div p:last-child { max-width: 27rem; margin-bottom: 0; font-size: 1.2rem; }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0 var(--pad) clamp(5rem, 10vw, 10rem);
}

.story-card {
  overflow: hidden;
  border-radius: clamp(1.4rem, 3vw, 3rem);
  background: var(--purple);
  color: var(--white);
}

.story-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
}

.story-card > a { display: block; min-height: 28rem; overflow: hidden; }
.story-card-wide > a { min-height: 40rem; }

.story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.story-card:hover img { transform: scale(1.025); }

.story-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 25rem;
  padding: clamp(1.6rem, 3vw, 3.5rem);
}

.story-card-copy > p:first-child {
  margin: 0 0 auto;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.story-card-copy h3 {
  max-width: 14ch;
  margin: 4rem 0 1rem;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .93;
}

.story-card-copy > p:not(:first-child) { max-width: 32rem; margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.35; }
.story-card-copy > a { padding-bottom: .2rem; border-bottom: 2px solid currentColor; font-weight: 800; text-decoration: none; }
.story-card-acid { background: var(--acid); color: var(--ink); }

.nicoline-method {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  min-height: 50rem;
  background: var(--purple);
  color: var(--white);
}

.method-statement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 7vw, 8rem) var(--pad);
}

.method-statement h2 {
  max-width: 11ch;
  margin: 1rem 0 2rem;
  font-size: clamp(3.2rem, 6vw, 7rem);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .88;
}

.method-statement > p:not(.eyebrow) { max-width: 31rem; margin: 0 0 2rem; font-size: 1.15rem; }

.method-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  padding: .8rem .8rem .8rem 0;
}

.method-images img {
  width: 100%;
  height: 100%;
  min-height: 38rem;
  object-fit: cover;
  border-radius: 0 0 2.5rem 0;
}

.method-images img:first-child { border-radius: 2.5rem 0 0 2.5rem; }

.work-together { background: #f7f3ee; }
.work-together-heading h2 {
  max-width: 11ch;
  margin: 1rem 0 0;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .9;
}

.work-options { border-top: var(--line); }
.work-options a {
  display: grid;
  grid-template-columns: .75fr 1.2fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: var(--line);
  text-decoration: none;
}

.work-options a:hover strong { color: var(--purple); }
.work-options span { font-size: .82rem; font-weight: 800; text-transform: uppercase; }
.work-options strong { font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 500; letter-spacing: -.035em; }
.work-options em { font-style: normal; }

.personal-invite {
  margin: 0;
  border-radius: clamp(2rem, 4vw, 4.5rem) clamp(2rem, 4vw, 4.5rem) 0 0;
  background: var(--acid);
}

.personal-invite h2 {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(4rem, 8vw, 8.5rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .84;
}

.personal-invite > div { align-self: end; }
.personal-invite p { max-width: 35rem; margin: 0 0 2rem; font-size: 1.2rem; }
.personal-invite a {
  display: inline-block;
  padding: .9rem 1.3rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 980px) {
  .home .site-nav { background: var(--acid); color: var(--ink); }
  .story-card-wide { grid-template-columns: 1fr; }
  .story-card-wide > a { min-height: 34rem; }
  .nicoline-method { grid-template-columns: 1fr; }
  .method-images { padding: 0 .8rem .8rem; }
  .method-images img { min-height: 32rem; }
}

@media (max-width: 680px) {
  .home .site-header { min-height: 4.8rem; }
  .portrait-hero { min-height: 78svh; }
  .portrait-hero > img { object-position: 42% center; }
  .portrait-hero-copy { bottom: 3.2rem; }
  .portrait-hero-copy p { margin-bottom: .8rem; }
  .portrait-hero-copy h1 { font-size: clamp(3.35rem, 16vw, 5.5rem); }
  .portrait-hero-copy a { margin-top: 1.35rem; }
  .photo-credit { display: none; }
  .editorial-intro,
  .story-heading,
  .work-together,
  .personal-invite { grid-template-columns: 1fr; gap: 3rem; }
  .editorial-intro { padding-top: 5rem; padding-bottom: 6rem; }
  .editorial-title h2 { font-size: 3rem; }
  .editorial-title p { font-size: 1.65rem; }
  .editorial-copy h2 { font-size: 2.25rem; }
  .story-heading > h2,
  .personal-invite h2 { font-size: clamp(3.5rem, 16vw, 5.5rem); }
  .story-grid { grid-template-columns: 1fr; }
  .story-card-wide { grid-column: auto; }
  .story-card > a,
  .story-card-wide > a { min-height: 24rem; }
  .story-card-copy { min-height: 23rem; }
  .story-card-copy h3 { font-size: 2.55rem; }
  .method-statement h2,
  .work-together-heading h2 { font-size: clamp(3.3rem, 14vw, 5rem); }
  .method-images { grid-template-columns: 1fr; }
  .method-images img,
  .method-images img:first-child { min-height: 29rem; border-radius: 2rem; }
  .work-options a { grid-template-columns: 1fr; gap: .4rem; }
  .work-options em { margin-top: .25rem; }
}

/* Calmer homepage balance */
.home { background: #f4efe9; }

.portrait-hero {
  min-height: min(54rem, 86svh);
  border-radius: 0 0 clamp(1.4rem, 2.5vw, 2.8rem) clamp(1.4rem, 2.5vw, 2.8rem);
}

.portrait-hero-shade {
  background: linear-gradient(90deg, rgba(38, 18, 50, .3), rgba(38, 18, 50, .04) 58%, rgba(38, 18, 50, .2));
}

.portrait-hero-copy h1 {
  max-width: 11ch;
  margin-inline: auto;
  font-size: clamp(3.8rem, 8vw, 7.4rem);
  letter-spacing: -.065em;
  line-height: .92;
}

.portrait-hero-copy a,
.method-statement .button,
.personal-invite a { box-shadow: none; }

.editorial-intro,
.story-heading,
.work-together,
.personal-invite { padding-block: clamp(4.5rem, 8vw, 8rem); }

.story-heading { border-top: 1px solid rgba(57, 42, 66, .3); }

.story-heading > h2,
.personal-invite h2 {
  font-size: clamp(3.5rem, 6.5vw, 6.8rem);
  line-height: .9;
}

.story-card,
.story-card-acid {
  border: 1px solid rgba(57, 42, 66, .22);
  border-radius: clamp(1.2rem, 2vw, 2rem);
  background: #eee6de;
  color: var(--ink);
}

.story-card-copy h3 {
  font-size: clamp(1.9rem, 2.8vw, 3.2rem);
  line-height: .98;
}

.nicoline-method { background: #553379; }

.method-statement h2 {
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: .92;
}

.method-images img,
.method-images img:first-child { border-radius: 1.5rem; }

.work-together { background: #f4efe9; }

.work-together-heading h2 {
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: .94;
}

.personal-invite {
  border-top: 1px solid rgba(57, 42, 66, .3);
  border-radius: 0;
  background: #e7ddd3;
}

.personal-invite a { background: var(--purple); }

@media (max-width: 680px) {
  .portrait-hero { min-height: 72svh; }
  .portrait-hero-copy h1 { font-size: clamp(3.1rem, 13.5vw, 4.5rem); }
  .story-heading > h2,
  .personal-invite h2 { font-size: clamp(3.1rem, 13vw, 4.6rem); }
  .story-card-copy h3 { font-size: 2.25rem; }
  .method-statement h2,
  .work-together-heading h2 { font-size: clamp(3rem, 12vw, 4.3rem); }
}

/* LILALAB middle direction */
.home .site-header {
  position: sticky;
  width: auto;
  border-bottom: 1px solid rgba(57, 42, 66, .28);
  background: rgba(244, 239, 233, .94);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

.home .site-nav a:hover { border-bottom-color: var(--ink); }
.home .menu-button { color: var(--ink); }

.hybrid-hero {
  display: grid;
  grid-template-columns: minmax(25rem, .92fr) minmax(30rem, 1.08fr);
  min-height: calc(100svh - 5.2rem);
  border-bottom: 1px solid rgba(57, 42, 66, .28);
  background: #f4efe9;
}

.hybrid-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 7vw, 8rem) var(--pad) clamp(2.5rem, 5vw, 5rem);
}

.hybrid-copy h1 {
  max-width: 8ch;
  margin: 1.2rem 0 2rem;
  color: var(--purple);
  font-size: clamp(4rem, 6.5vw, 7.4rem);
  font-weight: 600;
  letter-spacing: -.075em;
  line-height: .86;
}

.hybrid-lead {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-weight: 600;
  line-height: 1.2;
}

.hybrid-actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.hybrid-actions > a:not(.button) {
  padding-bottom: .25rem;
  border-bottom: 2px solid currentColor;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.hybrid-fields {
  max-width: 37rem;
  margin: auto 0 0;
  padding-top: 3rem;
  color: rgba(57, 42, 66, .72);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.hybrid-visual {
  position: relative;
  min-height: 42rem;
  overflow: hidden;
  background: var(--lilac);
}

.hybrid-portrait,
.hybrid-project { position: absolute; overflow: hidden; margin: 0; }

.hybrid-portrait {
  top: 5%;
  left: 5%;
  width: 67%;
  height: 88%;
  border-radius: 1.6rem;
}

.hybrid-project {
  right: 4%;
  bottom: 5%;
  width: 43%;
  height: 38%;
  border: .55rem solid #f4efe9;
  border-radius: 1.3rem;
  box-shadow: 0 1.2rem 2.5rem rgba(57, 42, 66, .18);
}

.hybrid-portrait img,
.hybrid-project img { width: 100%; height: 100%; object-fit: cover; }
.hybrid-portrait img { object-position: center; }

.hybrid-portrait figcaption,
.hybrid-project figcaption {
  position: absolute;
  right: .7rem;
  bottom: .55rem;
  left: .7rem;
  color: var(--white);
  font-size: .72rem;
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.hybrid-portrait figcaption { left: 1rem; }

.hybrid-note {
  position: absolute;
  z-index: 3;
  top: 8%;
  right: 4%;
  width: min(13rem, 34%);
  margin: 0;
  padding: 1.25rem;
  border-radius: 1rem;
  background: var(--acid);
  color: var(--ink);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.story-card-copy > p:first-child { color: var(--purple); }
.story-card-acid { background: #e7e7a1; }

@media (max-width: 980px) {
  .hybrid-hero { grid-template-columns: 1fr; }
  .hybrid-copy { min-height: 38rem; }
  .hybrid-visual { min-height: 44rem; }
}

@media (max-width: 680px) {
  .hybrid-copy {
    min-height: 34rem;
    padding-top: 3.5rem;
  }
  .hybrid-copy h1 {
    max-width: 9ch;
    margin-block: 1rem 1.5rem;
    font-size: clamp(3.4rem, 15vw, 5rem);
    line-height: .88;
  }
  .hybrid-lead { font-size: 1.2rem; }
  .hybrid-fields { margin-top: 2.5rem; padding-top: 0; font-size: .72rem; }
  .hybrid-visual { min-height: 35rem; }
  .hybrid-portrait { top: 4%; left: 4%; width: 74%; height: 79%; }
  .hybrid-project { right: 3%; bottom: 3%; width: 48%; height: 34%; border-width: .38rem; }
  .hybrid-note { top: 6%; right: 3%; width: 36%; padding: .85rem; font-size: 1.05rem; }
}

/* Subtle base with one bold typographic moment */
.home,
.hybrid-hero,
.hybrid-copy,
.story-heading,
.story-grid { background: #fbf8f4; }

.home .site-header { background: rgba(251, 248, 244, .95); }

.editorial-intro { background: #e6dce9; }

.editorial-title h2 { color: var(--purple); }

.story-heading > h2 {
  max-width: 7.5ch;
  color: var(--coral);
  font-size: clamp(4rem, 7.4vw, 7.8rem);
}

.story-card,
.story-card-wide { background: #f5f0eb; }

.story-card-acid { background: #e5e896; }

.work-together { background: #eee7f1; }

.making-spectrum {
  padding: clamp(4.5rem, 8vw, 8rem) var(--pad);
  background: #fbf8f4;
  color: var(--ink);
}

.making-intro {
  display: grid;
  grid-template-columns: .55fr 1.25fr 1fr;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
}

.making-intro h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--purple);
  font-size: clamp(3rem, 5.5vw, 6rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .92;
}

.making-intro > p:last-child {
  max-width: 34rem;
  margin: .35rem 0 0;
  font-size: 1.15rem;
  line-height: 1.48;
}

.making-capabilities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(4rem, 7vw, 7rem);
  border-top: 1px solid rgba(57, 42, 66, .3);
}

.making-capabilities article {
  min-height: 23rem;
  padding: 1.5rem clamp(1rem, 2vw, 2rem) 2rem;
  border-right: 1px solid rgba(57, 42, 66, .3);
}

.making-capabilities article:first-child { padding-left: 0; }
.making-capabilities article:last-child { padding-right: 0; border-right: 0; }
.making-capabilities article:nth-child(3) { background: var(--acid); padding-left: clamp(1rem, 2vw, 2rem); }

.making-capabilities span {
  display: block;
  margin-bottom: clamp(4rem, 8vw, 8rem);
  font-size: .78rem;
  font-weight: 800;
}

.making-capabilities h3 {
  max-width: 9ch;
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 2.7vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .96;
}

.making-capabilities p { max-width: 25rem; margin: 0; line-height: 1.45; }

.making-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: end;
  padding-top: clamp(2rem, 4vw, 4rem);
}

.making-proof figure { height: clamp(18rem, 34vw, 37rem); margin: 0; overflow: hidden; border-radius: 1.5rem; }
.making-proof img { width: 100%; height: 100%; object-fit: cover; }
.making-proof p {
  max-width: 13ch;
  margin: 0;
  color: var(--coral);
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .92;
}

.personal-invite { background: #f3c9bd; }

@media (max-width: 680px) {
  .story-heading > h2 { font-size: clamp(3.35rem, 14vw, 4.8rem); }
  .making-intro { grid-template-columns: 1fr; }
  .making-intro h2 { font-size: clamp(3rem, 12vw, 4.3rem); }
  .making-capabilities { grid-template-columns: 1fr; }
  .making-capabilities article,
  .making-capabilities article:first-child,
  .making-capabilities article:last-child {
    min-height: auto;
    padding: 1.5rem 0 2rem;
    border-right: 0;
    border-bottom: 1px solid rgba(57, 42, 66, .3);
  }
  .making-capabilities article:nth-child(3) { padding-inline: 1rem; }
  .making-capabilities span { margin-bottom: 3rem; }
  .making-proof { grid-template-columns: 1fr; }
  .making-proof p { font-size: clamp(2.8rem, 11vw, 4rem); }
}