.page-header {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.page-header nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); }
.page-header nav a {
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  transition: border-color 180ms ease, opacity 180ms ease;
}
.page-header nav a:hover { border-color: currentColor; }

.cases-page { background: var(--paper); }
.cases-overview { padding: 136px var(--gutter) clamp(100px, 11vw, 170px); }
.cases-overview-inner { width: 100%; max-width: var(--max); margin: 0 auto; }
.cases-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(65px, 8vw, 118px);
}
.page-kicker {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.cases-intro h1,
.profile-hero h1 {
  margin: 0;
  font-size: clamp(88px, 14vw, 210px);
  font-weight: 900;
  line-height: .76;
  text-transform: uppercase;
}
.cases-intro-copy { padding-bottom: 8px; }
.cases-intro-copy p { margin: 0; font-size: clamp(18px, 1.7vw, 24px); }
.cases-intro-copy .text-link { margin-top: 26px; }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 100px) clamp(20px, 4vw, 56px);
}
.case-overview-card { display: block; min-width: 0; }
.case-overview-card:nth-child(even) { margin-top: 92px; }
.case-overview-media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--case-accent);
}
.case-overview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1), filter 250ms ease;
}
.case-overview-card:hover .case-overview-media img { transform: scale(1.035); filter: saturate(1.08); }
.case-overview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0 11px;
  border-bottom: 1px solid var(--line);
}
.case-overview-top span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.case-overview-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-top: 17px; }
.case-overview-title strong { font-size: clamp(24px, 3vw, 44px); line-height: .95; text-transform: uppercase; }
.case-overview-title i {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-style: normal;
  transition: background 180ms ease, transform 180ms ease;
}
.case-overview-card:hover .case-overview-title i { background: var(--lime); transform: rotate(7deg); }

.overview-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: end;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--ink);
  color: var(--white);
}
.overview-cta > div { width: 100%; max-width: var(--max); }
.overview-cta p { margin: 0 0 18px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.overview-cta h2 { max-width: 980px; margin: 0; font-size: clamp(48px, 7vw, 104px); line-height: .92; text-transform: uppercase; }
.overview-cta a { align-self: end; color: var(--lime); }

.profile-page { background: var(--paper); }
.profile-hero {
  position: relative;
  min-height: min(840px, 88svh);
  padding: 136px var(--gutter) 52px;
  background: var(--paper-deep);
  overflow: hidden;
}
.profile-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; }
.profile-hero h1 { position: relative; z-index: 1; font-size: clamp(108px, 18vw, 270px); }
.profile-hero-intro {
  position: relative;
  z-index: 4;
  max-width: 520px;
  margin: clamp(54px, 7vw, 96px) 0 0;
  font-size: clamp(23px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.17;
}
.profile-portrait {
  position: absolute;
  z-index: 3;
  right: clamp(-70px, -2vw, -24px);
  bottom: 0;
  width: min(46vw, 690px);
  pointer-events: none;
}
.profile-portrait img { width: 100%; }
.profile-hero-meta {
  position: absolute;
  z-index: 5;
  right: var(--gutter);
  bottom: 28px;
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 25px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-story {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
  gap: clamp(55px, 11vw, 170px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(95px, 11vw, 170px) var(--gutter);
}
.profile-story-label { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.profile-story-copy { max-width: 950px; }
.profile-story-copy h2,
.profile-principles h2,
.profile-collab h2 {
  margin: 0;
  font-size: clamp(46px, 6vw, 92px);
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}
.profile-story-copy .lead { margin: 40px 0 24px; font-size: clamp(23px, 2.5vw, 37px); font-weight: 700; line-height: 1.2; }
.profile-story-copy > p:not(.lead) { max-width: 700px; font-size: 18px; }

.profile-principles { padding: clamp(90px, 10vw, 150px) var(--gutter); background: var(--coral); }
.profile-principles-inner { max-width: var(--max); margin: 0 auto; }
.profile-principles h2 { max-width: 1000px; margin-bottom: 66px; }
.profile-principles-list { border-top: 1px solid rgba(40,37,32,.55); }
.profile-principles article {
  display: grid;
  grid-template-columns: 70px minmax(220px, .7fr) minmax(280px, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: baseline;
  padding: 32px 0;
  border-bottom: 1px solid rgba(40,37,32,.55);
}
.profile-principles article span { font-size: 11px; font-weight: 800; }
.profile-principles article h3 { margin: 0; font-size: clamp(24px, 2.7vw, 40px); line-height: 1; }
.profile-principles article p { max-width: 600px; margin: 0; font-size: 17px; }

.profile-collab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: end;
  padding: clamp(90px, 11vw, 160px) var(--gutter);
  background: var(--ink);
  color: var(--white);
}
.profile-collab > div { max-width: 1050px; }
.profile-collab p { max-width: 650px; color: #d8d3cc; font-size: 18px; }
.profile-collab .text-link { color: var(--lime); }

.page-footer { display: flex; justify-content: space-between; gap: 30px; padding: 28px var(--gutter); }
.page-footer p { margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; }

@media (max-width: 780px) {
  .page-header { min-height: 72px; padding-top: 14px; padding-bottom: 14px; }
  .page-header .brand span { display: none; }
  .page-header nav { gap: 17px; }
  .page-header nav a { font-size: 10px; }
  .cases-overview { padding-top: 110px; }
  .cases-intro { grid-template-columns: 1fr; align-items: start; }
  .cases-intro h1 { font-size: clamp(72px, 25vw, 112px); }
  .cases-grid { grid-template-columns: 1fr; }
  .case-overview-card:nth-child(even) { margin-top: 0; }
  .overview-cta { grid-template-columns: 1fr; }
  .profile-hero { min-height: 780px; padding-top: 115px; }
  .profile-hero h1 { font-size: clamp(82px, 25vw, 98px); }
  .profile-hero-intro { max-width: 330px; margin-top: 44px; font-size: 22px; }
  .profile-portrait { right: -110px; width: 590px; }
  .profile-hero-meta { display: none; }
  .profile-story { grid-template-columns: 1fr; gap: 35px; }
  .profile-principles article { grid-template-columns: 42px 1fr; gap: 18px; }
  .profile-principles article p { grid-column: 2; font-size: 15px; }
  .profile-collab { grid-template-columns: 1fr; align-items: start; }
  .page-footer { flex-direction: column; }
}