/* 01 — Globals, font loading and reset */
@import url('./tokens.css');
@font-face {
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/open-sans-400.ttf') format('truetype')
}

@font-face {
  font-family:'Open Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/open-sans-600.ttf') format('truetype')
}

@font-face {
  font-family:'Open Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/open-sans-700.ttf') format('truetype')
}

@font-face {
  font-family:'Open Sans';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/open-sans-800.ttf') format('truetype')
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}

body {
  margin:0;
  font-family:var(--font);
  font-size:var(--body);
  line-height:1.65;
  color:var(--ink);
  background:var(--white)
}

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

a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:.25em
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

a,button {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:3px solid currentColor;
  outline-offset:6px
}

a:active {
  opacity:.8
}

button:disabled {
  opacity:.35;
  cursor:default
}

[hidden] {
  display:none!important
}

/* 02 — Typography and shared layout */
h1,h2,h3,p,figure {
  margin:0
}

h1,h2 {
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.045em;
  text-transform:uppercase;
  text-wrap:balance
}

h1 {
  font-size:var(--h1)
}

h2 {
  font-size:var(--h2)
}

h3 {
  font-size:var(--h3);
  font-weight:700;
  line-height:1.35
}

p+p {
  margin-top:var(--space-2)
}

.container {
  width:min(100% - var(--gutter)*2,var(--content));
  margin-inline:auto
}

.lead {
  font-size:var(--lead);
  line-height:1.65;
  max-width:var(--reading)
}

.eyebrow {
  font-size:var(--meta);
  font-weight:600;
  letter-spacing:.06em
}

.muted {
  color:var(--muted)
}

.skip {
  position:absolute;
  left:1rem;
  top:-5rem;
  z-index:20;
  background:white;
  padding:.7rem
}

.skip:focus {
  top:1rem
}

/* 03 — Navigation and shared links */
.site-header {
  border-bottom:1px solid var(--line);
  background:white
}

.header-inner {
  min-height:6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}

.wordmark {
  font-weight:700;
  font-size:1.1rem;
  text-decoration:none;
  letter-spacing:-.035em
}

.header-nav {
  display:flex;
  align-items:center;
  gap:2rem;
  margin-left:auto
}

.header-nav>a {
  text-decoration:none;
  font-size:.875rem;
  padding:.5rem 0
}

.header-nav>a[aria-current],.header-nav>a:hover {
  text-decoration:underline;
  text-decoration-thickness:2px
}

.languages {
  display:flex;
  gap:.25rem;
  align-items:center;
  border-left:1px solid var(--line);
  padding-left:1.5rem
}

.languages a {
  font-size:.875rem;
  text-decoration:none;
  min-width:2.4rem;
  min-height:2.75rem;
  display:grid;
  place-items:center
}

.languages a[aria-current] {
  font-weight:700;
  text-decoration:underline
}

.languages a:hover {
  text-decoration:underline
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  padding:.5rem
}

.chevron {
  width:1rem;
  height:1.5rem;
  fill:currentColor;
  flex-shrink:0
}

.cta {
  display:inline-flex;
  gap:1rem;
  align-items:center;
  font-size:.875rem;
  font-weight:600
}

.cta .chevron {
  width:.65rem;
  height:1rem;
  transition:transform var(--motion)
}

a:hover .cta .chevron,a.cta:hover .chevron {
  transform:translateX(.25rem)
}

/* 04 — Homepage hero and introduction */
/* Four equally large lines and an uncropped transparent portrait, composed together. */
.hero {
  padding-top:var(--space-6);
  padding-bottom:var(--space-5)
}

.hero-composition {
  display:grid;
  grid-template-columns:56% 44%;
  align-items:end;
  isolation:isolate
}

.hero-type {
  padding-block:2rem 3rem;
  position:relative;
  z-index:1;
  transform:translateY(calc(clamp(-4rem,-3.3vw,-2rem) - .5rem))
}

.hero h1 {
  font-size:clamp(4rem,8.7vw,9.3rem);
  font-weight:800;
  line-height:.89;
  letter-spacing:-.065em;
  text-wrap:nowrap
}

.hero h1>span {
  display:block
}

.hero .design-line {
  white-space:nowrap
}

.hero .ampersand {
  color:var(--ink)
}

.hero .color {
  color:var(--hero-a);
  animation:hero-color var(--hero-duration) ease-in-out infinite
}

.hero-portrait {
  display:block;
  width:100%;
  align-self:end
}

.hero-portrait img {
  width:100%;
  height:auto;
  object-fit:contain
}

.home-intro-grid {
  display:grid;
  grid-template-columns:minmax(0,68%) minmax(0,24%);
  gap:8%;
  border-top:1px solid var(--line);
  padding-block:var(--space-4) calc(1.5rem + var(--wedge))
}

.hero-intro h2 {
  font-size:clamp(1.45rem,2.4vw,2.5rem);
  max-width:30ch;
  margin-bottom:var(--space-4)
}

.hero-intro .lead {
  max-width:48rem
}

.contact-block {
  align-self:end
}

.contact-title {
  font-size:clamp(1.35rem,2vw,2rem);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.03em
}

.contact-link {
  display:inline-flex;
  align-items:center;
  margin-top:1.5rem;
  min-height:3rem;
  text-decoration:none
}

.experience-close {
  position:relative;
  background:var(--paper);
  padding-block:3.5rem 4rem;
  border-top:0
}

.closing-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  text-decoration:none
}

.experience-close h2 {
  font-size:clamp(2rem,4.6vw,4.5rem);
  max-width:20ch;
  line-height:1.08
}

/* 05 — Career teaser stream */
/* The entire painted polygon belongs to the anchor; adjacent wedges never create dead link areas. */
.chapter {
  position:relative;
  margin-top:calc(-1 * var(--wedge));
  color:var(--text)
}

.chapter-link {
  display:block;
  position:relative;
  background:var(--bg);
  text-decoration:none;
  padding:calc(var(--wedge) + 4rem) 0 calc(var(--wedge) + 4rem);
  clip-path:polygon(100% 0,100% 100%,0 100%,0 var(--wedge));
  transition:filter var(--motion)
}

.chapter.from-left .chapter-link {
  clip-path:polygon(0 0,100% var(--wedge),100% 100%,0 100%)
}

.chapter-link:focus-visible {
  outline:0
}

.chapter-link:focus-visible:after {
  content:'';
  position:absolute;
  inset:calc(var(--wedge) + 1rem) 1rem 1rem;
  border:3px solid currentColor;
  pointer-events:none
}

.chapter-link:hover {
  filter:brightness(.94)
}

.chapter-link:active {
  filter:brightness(.85);
  opacity:1
}

.chapter-grid {
  display:grid;
  grid-template-columns:12% minmax(0,64%) minmax(0,24%);
  align-items:start;
  gap:0
}

.chapter-year {
  font-size:var(--teaser-year-size);
  line-height:var(--teaser-year-line);
  letter-spacing:.04em;
  font-weight:var(--teaser-year-weight);
  padding-top:.7rem;
  padding-right:1rem
}

.chapter-main {
  padding-right:2rem
}

.chapter h2 {
  font-size:clamp(3rem,7.2vw,7.6rem);
  line-height:.91;
  letter-spacing:-.06em;
  font-weight:700;
  text-wrap:nowrap
}

.chapter-claim {
  font-size:var(--teaser-claim-size);
  line-height:var(--teaser-claim-line);
  font-weight:var(--teaser-claim-weight);
  margin-top:var(--teaser-claim-gap);
  max-width:33ch;
  text-transform:uppercase
}

.chapter-role-block {
  padding-top:.35rem
}

.chapter-role {
  font-size:var(--teaser-role-size);
  font-weight:var(--teaser-role-weight);
  line-height:var(--teaser-role-line);
  letter-spacing:-.035em;
  text-transform:uppercase
}

.chapter-location {
  font-size:var(--teaser-location-size);
  font-weight:var(--teaser-location-weight);
  text-transform:uppercase;
  line-height:var(--teaser-location-line);
  margin-top:var(--teaser-location-gap)
}

.chapter-role-block .cta {
  font-size:var(--teaser-cta-size);
  font-weight:var(--teaser-cta-weight);
  line-height:var(--teaser-cta-line);
  margin-top:var(--teaser-cta-gap)
}

.chapter-role-block .chevron {
  width:var(--teaser-chevron-width);
  height:var(--teaser-chevron-height)
}

.chapter.theme-sinner {
  --bg:var(--sinner-home-gradient);
  --text:white
}

/* Shared bold secondary tokens also meet the 3:1 large-text threshold on the brighter Sinner stops. */
.chapter.theme-elephant {
  --text:var(--pink)
}

.chapter.theme-elephant .chapter-role-block,.chapter.theme-elephant .chapter-year {
  color:var(--ink)
}

.chapter.theme-elephant .chapter-link {
  padding-bottom:var(--space-6)
}

/* 06 — Page introductions, roles and cases */
.page-hero {
  padding-block:5rem 4rem
}

.page-hero .eyebrow {
  margin-bottom:2rem
}

.page-hero h1 {
  max-width:16ch
}

.page-hero .lead {
  margin-top:2rem
}

.role-section {
  background:var(--bg);
  color:var(--text);
  padding-block:3.5rem 5rem
}

.role-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem
}

.role-grid h3 {
  margin-bottom:1rem
}

.role-grid .lead {
  max-width:42rem
}

.role-label {
  font-size:var(--meta);
  letter-spacing:.06em;
  line-height:1.5;
  font-weight:700
}

.case {
  background:var(--bg);
  color:var(--text);
  padding-block:5rem 6rem;
  scroll-margin-top:1rem
}

.case:not(.accent-inherit) .case-header:before {
  content:'';
  display:block;
  width:3rem;
  height:3px;
  background:var(--accent);
  margin:0 auto 1.5rem
}

.case-header {
  text-align:center;
  max-width:60rem;
  margin:auto
}

.case-header h2 {
  margin-top:1.5rem;
  max-width:16ch;
  margin-inline:auto
}

.case-header .lead {
  margin:2rem auto 3rem
}

/* 07 — Shared media and spatial carousel */
.media {
  margin-top:var(--space-5)
}

.media-frame {
  background:var(--info);
  position:relative;
  margin:0
}

.media-image {
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#ededed;
  user-select:none
}

.media-caption {
  background:var(--info);
  color:white;
  padding:1.3rem 1.5rem;
  min-height:7.5rem;
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:1rem
}

.media-caption h3 {
  font-size:1rem
}

.media-caption p {
  font-size:.875rem;
  color:#e0e0e0;
  margin-top:.4rem
}

.reference-label {
  font-size:.75rem;
  letter-spacing:.02em;
  border:1px solid #8a8b8d;
  padding:.1rem .5rem
}

.media-note {
  font-size:.8rem;
  margin-top:.75rem;
  opacity:.85;
  text-align:center
}

/* Without JS, figures remain an accessible native scroll list. No misleading static counter. */
.media-viewport {
  display:flex;
  gap:var(--space-3);
  overflow:auto;
  scroll-snap-type:x mandatory
}

.slide {
  flex:0 0 85%;
  scroll-snap-align:center;
  min-width:0
}

.carousel-stage {
  position:relative;
  --slide-width:74%;
  container-type:inline-size
}

.carousel-status {
  font-size:.875rem;
  text-align:center;
  margin-top:1rem;
  font-variant-numeric:tabular-nums
}

/* Spatial layout: one grid cell determines stable height from all figures, transforms move cards in 3D. */
.is-enhanced .media-viewport {
  display:grid;
  grid-template-columns:1fr;
  perspective:1500px;
  overflow:hidden;
  clip-path:inset(0 3.5rem);
  scroll-snap-type:none;
  padding-block:1.5rem;
  touch-action:pan-y;
  user-select:none;
  cursor:grab
}

.is-enhanced .media-viewport:active {
  cursor:grabbing
}

.is-enhanced .media-viewport:focus-visible {
  outline-offset:0
}

.is-enhanced .slide {
  grid-area:1/1;
  width:var(--slide-width);
  justify-self:center;
  align-self:start;
  transform-origin:center;
  transition:transform 520ms cubic-bezier(.2,.65,.25,1),opacity 350ms ease;
  backface-visibility:hidden
}

.is-enhanced .slide .media-frame {
  transition:filter 350ms ease, opacity 350ms ease
}

.is-enhanced .slide[data-position=previous] .media-frame,
.is-enhanced .slide[data-position=next] .media-frame {
  filter:grayscale(.7) saturate(.45) brightness(.82);
  opacity:.72
}

.is-enhanced .slide[data-position=active] .media-frame {
  filter:none;
  opacity:1
}

.is-enhanced .slide[data-position=active] {
  transform:translateX(0) translateZ(0) rotateY(0);
  opacity:1;
  z-index:3
}

.is-enhanced .slide[data-position=previous] {
  transform:translateX(-57%) translateZ(-210px) rotateY(23deg) scale(.86);
  opacity:1;
  z-index:2
}

.is-enhanced .slide[data-position=next] {
  transform:translateX(57%) translateZ(-210px) rotateY(-23deg) scale(.86);
  opacity:1;
  z-index:2
}

.is-enhanced .slide[data-position=before] {
  transform:translateX(-86%) translateZ(-360px) rotateY(30deg) scale(.72);
  opacity:0;
  pointer-events:none;
  z-index:1
}

.is-enhanced .slide[data-position=after] {
  transform:translateX(86%) translateZ(-360px) rotateY(-30deg) scale(.72);
  opacity:0;
  pointer-events:none;
  z-index:1
}

.is-enhanced .slide:not([data-position=active]) .media-caption {
  visibility:visible
}

.carousel-control {
  position:absolute;
  top:calc(1.5rem + 100cqw * .74 * 9 / 32);
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:var(--text);
  width:3.5rem;
  height:4.5rem;
  display:grid;
  place-items:center;
  z-index:5;
  padding:.6rem;
  transition:opacity var(--motion)
}

.carousel-control .chevron {
  width:1.3rem;
  height:2.3rem;
  transition:transform var(--motion)
}

.carousel-control.prev {
  left:0
}

.carousel-control.next {
  right:0
}

.carousel-control.prev .chevron {
  transform:rotate(180deg)
}

.carousel-control:hover:not(:disabled) .chevron {
  transform:scale(1.15)
}

.carousel-control.prev:hover:not(:disabled) .chevron {
  transform:rotate(180deg) scale(1.15)
}

.carousel-control:active:not(:disabled) {
  opacity:.65
}

.is-enhanced .media-viewport:focus {
  outline:none
}

.carousel:has(.media-viewport:focus-visible) .carousel-status {
  outline:2px solid currentColor;
  outline-offset:5px;
  width:max-content;
  margin-inline:auto
}

.carousel-control:focus-visible {
  outline:2px solid currentColor;
  outline-offset:2px
}

/* 08 — Project contribution and awards */
.contribution {
  max-width:var(--reading);
  margin:3rem auto 0;
  background:var(--white);
  color:var(--ink);
  padding:clamp(1.5rem,4vw,3rem)
}

.contribution h3 {
  margin-bottom:1.25rem
}

.contribution p {
  line-height:1.8
}

.awards {
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  list-style:none;
  padding-left:0;
  font-size:.875rem
}

.back-section {
  padding-block:3rem;
  border-top:1px solid var(--line)
}

.back-section a {
  text-decoration:none
}

.back-section .chevron {
  transform:rotate(180deg)
}

/* 09 — Experience career and education */
.career-list {
  border-top:1px solid var(--ink)
}

.career-row {
  display:grid;
  grid-template-columns:1fr 1.25fr 1.75fr;
  gap:2rem;
  border-bottom:1px solid var(--line);
  padding-block:2.75rem;
  scroll-margin-top:2rem
}

.career-date {
  font-size:.875rem;
  font-variant-numeric:tabular-nums
}

.career-row h2 {
  font-size:clamp(1.3rem,2.3vw,2rem);
  letter-spacing:-.035em;
  line-height:1.2;
  text-align:left
}

.career-role {
  font-size:.875rem;
  margin-top:.8rem
}

.career-description p {
  max-width:38rem
}

.career-description h3 {
  font-size:1rem;
  margin:1.5rem 0 .5rem
}

.career-description h3:first-child {
  margin-top:0
}

.education {
  padding-block:3rem 5rem
}

.education h2 {
  font-size:1.5rem;
  letter-spacing:-.025em;
  margin-bottom:2rem
}

.education .career-row {
  border-top:1px solid var(--line)
}

/* 10 — Footer */
.site-footer {
  background:var(--white);
  padding-block:3rem;
  color:var(--ink)
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem
}

.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  font-size:.875rem
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:2rem;
  font-size:.75rem;
  color:var(--muted);
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line)
}

.preview-note {
  font-size:.75rem;
  color:var(--muted)
}

/* 11 — Homepage colour animation (60 seconds) */
@keyframes hero-color {
  0%,100% { color:var(--hero-a); }
  14.2857142857% { color:var(--hero-b); }
  28.5714285714% { color:var(--hero-c); }
  42.8571428571% { color:var(--hero-d); }
  57.1428571429% { color:var(--hero-e); }
  71.4285714286% { color:var(--hero-f); }
  85.7142857143% { color:var(--hero-g); }
}

/* 12 — Global responsive rules */
@media(min-width:1600px) {
  .hero,.chapter-grid {
    width:min(100% - var(--gutter)*2,100rem)
  }

  .hero h1 {
    font-size:clamp(9rem,8.7vw,10.8rem)
  }

}

@media(min-width:768px) and (max-width:1023px) {
  .chapter-grid {
    grid-template-columns:12% 60% 28%
  }

  .chapter h2 {
    font-size:6.6vw
  }

  .hero h1 {
    font-size:8.1vw
  }

}

@media(max-width:767px) {
  .header-inner {
    min-height:5rem;
    flex-wrap:wrap;
    gap:.5rem
  }

  .menu-toggle {
    display:block;
    min-height:2.75rem;
    margin-left:auto
  }

  .header-nav {
    order:4;
    width:100%;
    padding-bottom:1rem;
    justify-content:space-between;
    gap:.75rem;
    flex-wrap:wrap
  }

  .js .header-nav:not(.is-open) {
    display:none
  }

  .header-inner>.languages {
    border-left:0;
    padding-left:0
  }

  .hero {
    padding-top:2rem
  }

  .hero-composition {
    grid-template-columns:1fr;
    position:relative
  }

  .hero-type {
    padding:0;
    z-index:2;
    transform:none
  }

  .hero h1 {
    font-size:clamp(3.3rem,12vw,6.5rem);
    line-height:.94
  }

  .hero-portrait {
    width:82%;
    justify-self:end;
    margin-top:-1.75rem;
    position:relative;
    z-index:1
  }

  .home-intro-grid {
    grid-template-columns:1fr;
    gap:2rem;
    padding-block:2rem calc(1.5rem + var(--wedge))
  }

  .hero-intro h2 {
    font-size:1.4rem
  }

  .hero-intro .lead {
    font-size:1.125rem
  }

  .contact-block {
    border-top:1px solid var(--line);
    padding-top:2rem
  }

  .closing-inner {
    align-items:start;
    flex-direction:column;
    gap:1.5rem
  }

  .chapter-link {
    padding-top:calc(var(--wedge) + 2rem);
    padding-bottom:calc(var(--wedge) + 3rem)
  }

  .chapter-grid {
    grid-template-columns:1fr
  }

  .chapter-year {
    padding:0;
    margin-bottom:1.25rem
  }

  .chapter-main {
    padding-right:0
  }

  .chapter h2 {
    font-size:clamp(2.7rem,10.5vw,5rem);
    line-height:.94
  }

  .chapter-claim {
    max-width:28ch
  }

  .chapter-role-block {
    margin-top:2rem;
    padding-top:0
  }

  .chapter-role {
    max-width:20ch
  }

  .page-hero {
    padding-top:3rem
  }

  .page-hero h1 {
    font-size:clamp(2.7rem,10vw,5rem)
  }

  .role-grid {
    grid-template-columns:1fr;
    gap:1.5rem
  }

  .role-section {
    padding-block:2.5rem 3rem
  }

  .case {
    padding-block:3rem 4rem
  }

  .case-header h2 {
    font-size:clamp(2rem,8vw,3.5rem)
  }

  .case-header .lead {
    margin-top:1.5rem
  }

  .media-caption {
    padding:1rem;
    flex-wrap:wrap;
    min-height:9rem;
    gap:.5rem
  }

  .reference-label {
    font-size:.75rem
  }

  .carousel-stage {
    --slide-width:82%
  }

  .is-enhanced .media-viewport {
    perspective:850px;
    clip-path:inset(0 1.75rem)
  }

  .is-enhanced .slide[data-position=previous] {
    transform:translateX(-57%) translateZ(-150px) rotateY(23deg) scale(.86)
  }

  .is-enhanced .slide[data-position=next] {
    transform:translateX(57%) translateZ(-150px) rotateY(-23deg) scale(.86)
  }

  .carousel-control {
    top:calc(1.5rem + 100cqw * .82 * 9 / 32);
    width:2.75rem;
    height:3.5rem;
    padding:.7rem
  }

  .carousel-control .chevron {
    width:1rem;
    height:1.8rem
  }

  .carousel-control.prev {
    left:-.5rem
  }

  .carousel-control.next {
    right:-.5rem
  }

  .contribution {
    margin-top:2rem
  }

  .career-row {
    grid-template-columns:1fr;
    gap:1rem;
    padding-block:2rem
  }

  .career-row h2 {
    font-size:1.6rem
  }

  .career-description {
    margin-top:.5rem
  }

  .footer-top,.footer-bottom {
    align-items:start;
    flex-direction:column;
    gap:1.5rem
  }

  .footer-nav {
    gap:1rem
  }

  .education {
    padding-bottom:2rem
  }

}

/* 13 — Reduced motion and print */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

}

@media print {
  .site-header,.site-footer,.carousel-control {
    display:none
  }

  .is-enhanced .media-viewport {
    display:block;
    overflow:visible
  }

  .is-enhanced .slide {
    transform:none!important;
    opacity:1!important;
    width:100%;
    break-inside:avoid
  }

  .is-enhanced .slide .media-caption {
    visibility:visible
  }

  .hero .color {
    color:#111;
    animation:none
  }

}

/* 14 — Detail-page heroes */
/* Shared employer entrance and restrained chapter continuation. */
/* Chapter-specific tokens alter composition, not the common template. */
.employer-hero {
  --hero-bg:var(--bg);
  --hero-text:var(--text);
  --hero-angle:12%;
  --hero-image-position:50% 50%;
  background:var(--hero-bg);
  color:var(--hero-text);
  overflow:hidden
}

.employer-hero.theme-sinner {
  background-size:60% 100%;
  background-repeat:no-repeat;
  --hero-bg:var(--sinner-hero-gradient);
  --hero-text:var(--white);
  --hero-angle:18%;
  --hero-image-position:65% 50%
}

.employer-hero.theme-nintendo {
  --hero-angle:8%;
  --hero-image-position:60% 50%
}

.employer-hero.theme-elephant {
  --hero-bg:var(--white);
  --hero-text:var(--ink);
  --hero-angle:20%
}

.employer-intro {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  position:relative;
  min-height:35rem
}

.employer-intro.has-visual {
  grid-template-columns:54% 46%
}

.employer-copy {
  position:relative;
  z-index:1;
  padding:var(--space-6) 2.5rem var(--space-6) max(var(--gutter),calc((100vw - var(--content))/2));
  align-self:center
}

.employer-copy h1 {
  font-size:clamp(3rem,6.5vw,7rem);
  margin-top:var(--space-3);
  line-height:.98;
  max-width:17ch;
  color:inherit
}

.employer-copy .lead {
  margin-top:var(--space-4);
  max-width:36ch;
  font-size:clamp(1.125rem,1.4vw,1.3rem);
  line-height:1.65
}

.employer-hero.theme-elephant h1 {
  color:var(--pink)
}

.employer-visual {
  position:relative;
  margin-left:-12%;
  clip-path:polygon(var(--hero-angle) 0,100% 0,100% 100%,0 100%);
  min-width:0
}

.employer-visual .media-frame {
  height:100%;
  background:var(--info)
}

.employer-visual .media-image {
  height:100%;
  object-fit:cover;
  object-position:var(--hero-image-position);
  aspect-ratio:auto
}

.employer-visual .media-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  min-height:0;
  padding:1rem 1.5rem 1rem 12%;
  flex-wrap:wrap;
  gap:.4rem;
  background:var(--info)
}

.employer-visual .media-caption p {
  font-size:.875rem;
  max-width:44ch
}

.employer-visual .media-caption h3 {
  font-size:.875rem
}

.employer-letterform {
  background:var(--paper);
  display:grid;
  place-items:center;
  min-height:35rem;
  color:var(--pink)
}

.employer-letterform>span {
  font-size:clamp(12rem,26vw,30rem);
  font-weight:700;
  line-height:.75;
  letter-spacing:-.12em;
  transform:rotate(-9deg);
  padding-right:.12em
}

.employer-letterform>span>span {
  color:var(--ink);
  margin-left:-.14em
}

.role-grid h3 {
  font-size:clamp(1.5rem,3vw,2.6rem);
  max-width:28ch
}

/* 15 — Team context and compact chapter navigation */
.project-context {
  padding-block:var(--space-5);
  border-top:1px solid var(--line);
  font-size:.875rem;
  color:var(--muted);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 3rem
}

.project-context .context-label {
  grid-column:1/-1;
  font-weight:700;
  color:var(--ink)
}

.project-context p+p {
  margin-top:0
}

.chapter-navigation {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  border-top:1px solid var(--line);
  padding-block:2rem
}

.chapter-destination {
  display:block;
  padding:.5rem 0;
  text-decoration:none;
  max-width:100%
}

.chapter-destination.is-previous {
  grid-column:1
}

.chapter-destination.is-next {
  grid-column:2;
  text-align:right
}

.chapter-destination .eyebrow {
  font-size:.8rem;
  color:var(--muted);
  letter-spacing:0;
  font-weight:400
}

.destination-name {
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:clamp(1.1rem,2vw,1.65rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.03em;
  margin-top:.5rem
}

.is-next .destination-name {
  justify-content:flex-end
}

.destination-name .chevron {
  width:.6rem;
  height:1rem
}

.is-previous .destination-name .chevron {
  order:-1;
  transform:rotate(180deg)
}

.chapter-destination:hover .destination-name {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.15em
}

/* 16 — Legal draft typography */
.legal-hero h1 {
  font-size:clamp(2.5rem,6vw,6rem)
}

.legal-content {
  padding-bottom:var(--space-6)
}

.legal-content>section {
  max-width:var(--reading);
  padding-block:var(--space-4);
  border-top:1px solid var(--line)
}

.legal-content h2 {
  font-size:clamp(1.25rem,2.2vw,1.8rem);
  margin-bottom:1.5rem;
  line-height:1.25;
  letter-spacing:-.025em
}

.legal-content p+p {
  margin-top:.75rem
}

/* 17 — Detail-page responsive rules */
@media(min-width:768px) and (max-width:1023px) {
  .employer-hero[class*=theme-] {
    --hero-angle:6%
  }

  .employer-intro.has-visual {
    grid-template-columns:56% 44%
  }

  .employer-copy {
    padding-block:3rem;
    padding-right:1.5rem
  }

  .employer-copy h1 {
    font-size:6vw
  }

  .employer-visual {
    margin-left:-6%
  }

  .employer-visual .media-caption {
    padding-left:10%
  }

  .employer-copy .lead {
    font-size:1.125rem
  }

}

@media(max-width:767px) {
  .employer-intro,.employer-intro.has-visual {
    grid-template-columns:1fr;
    min-height:0
  }

  .employer-copy {
    padding:3rem var(--gutter)
  }

  .employer-copy h1 {
    font-size:clamp(2.7rem,11.5vw,5rem)
  }

  .employer-hero.theme-sinner {
    background-size:100% 100%
  }

  .employer-visual {
    margin:0;
    clip-path:none
  }

  .employer-visual .media-image {
    aspect-ratio:16/9;
    height:auto;
    object-fit:contain
  }

  .employer-visual .media-caption {
    position:static;
    padding:1rem var(--gutter)
  }

  .employer-letterform {
    min-height:0;
    aspect-ratio:16/9
  }

  .employer-letterform>span {
    font-size:48vw
  }

  .project-context {
    grid-template-columns:1fr;
    gap:1rem
  }

  .chapter-navigation {
    grid-template-columns:1fr;
    gap:1.5rem;
    padding-block:1.5rem
  }

  .chapter-destination.is-previous,.chapter-destination.is-next {
    grid-column:1;
    text-align:left
  }

  .is-next .destination-name {
    justify-content:space-between
  }

  .chapter-destination {
    padding-block:.5rem
  }

  .destination-name {
    font-size:1.3rem
  }

}

/* 18 — Nintendo timeline */
.milestone-section {
  background:var(--white);
  padding-block:3rem;
  color:var(--muted)
}

.milestone-intro {
  max-width:52rem;
  margin-bottom:2rem
}

.milestone-intro .eyebrow {
  font-size:.75rem
}

.milestone-intro h2 {
  font-size:clamp(1.3rem,2vw,1.8rem);
  margin-top:.5rem;
  color:var(--ink)
}

.milestone-intro .lead {
  font-size:.875rem;
  line-height:1.65;
  margin-top:.75rem;
  max-width:52rem
}

.timeline-viewport {
  overflow-x:auto;
  scrollbar-width:thin;
  padding:1rem 0 .5rem
}

.timeline-viewport:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px
}

.milestone-list {
  display:flex;
  list-style:none;
  padding:0;
  margin:0;
  min-width:66rem
}

.milestone-list li {
  flex:1 0 0;
  min-width:0;
  position:relative;
  padding:1.3rem 1.5rem 0 0;
  border-top:1px solid var(--line)
}

.milestone-list li:before {
  content:'';
  position:absolute;
  left:0;
  top:-4px;
  width:7px;
  height:7px;
  background:var(--nintendo);
  border-radius:50%
}

.milestone-year {
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:.75rem
}

.milestone-list h3 {
  font-size:.875rem;
  color:var(--ink);
  line-height:1.4;
  margin-bottom:.5rem
}

.milestone-list li>div>p {
  font-size:.8125rem;
  line-height:1.6
}

.source-links {
  display:flex;
  gap:1rem;
  margin-top:.5rem;
  font-size:.75rem
}

.source-links a {
  padding:.6rem 0;
  min-height:2.75rem
}

.context-disclaimer {
  font-size:.75rem;
  line-height:1.6;
  max-width:64rem;
  margin-top:1.25rem;
  color:var(--muted)
}

/* 19 — Six-area expertise profile and awards */
.experience-profile {
  padding-block:2rem 4rem;
  border-top:1px solid var(--line)
}

.experience-profile>h2 {
  font-size:clamp(1.8rem,3.3vw,3rem);
  margin-bottom:2rem
}

.profile-areas {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem clamp(1rem,2vw,2rem)
}

.profile-area h3 {
  font-size:clamp(.875rem,1.12vw,1.05rem);
  margin-bottom:.75rem;
  max-width:none;
  letter-spacing:-.02em
}

.profile-area p {
  font-size:1rem;
  line-height:1.7
}

.profile-awards>h3 {
  font-size:1rem;
  margin-bottom:1rem
}

.profile-awards {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:2rem;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line)
}

.profile-awards ul {
  list-style:none;
  padding:0;
  margin:0
}

.profile-awards li {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:1.5rem;
  font-size:.875rem;
  padding-block:.6rem
}

.profile-awards strong {
  font-weight:700
}

@media(max-width:1023px) {
  .profile-areas {
    grid-template-columns:1fr 1fr
  }

  .profile-awards {
    grid-template-columns:1fr
  }

  .profile-awards li {
    grid-template-columns:1fr 2fr
  }

}

@media(max-width:767px) {
  .profile-areas {
    grid-template-columns:1fr;
    gap:1.5rem
  }

  .experience-profile {
    padding-block:2rem 3rem
  }

  .profile-area h3 {
    max-width:none
  }

  .profile-awards {
    gap:.5rem
  }

  .profile-awards li {
    grid-template-columns:1fr;
    gap:.3rem;
    padding-block:.75rem
  }

  .milestone-section {
    padding-block:2rem
  }

  .timeline-viewport {
    overflow:visible;
    padding:0
  }

  .milestone-list {
    display:block;
    min-width:0;
    padding-left:.25rem
  }

  .milestone-list li {
    border-top:0;
    border-left:1px solid var(--line);
    padding:0 0 1.5rem 1.25rem;
    display:grid;
    grid-template-columns:3rem 1fr;
    gap:.75rem
  }

  .milestone-list li:before {
    left:-4px;
    top:.4rem
  }

  .milestone-year {
    font-size:.875rem
  }

  .milestone-list h3 {
    font-size:.875rem
  }

  .context-disclaimer {
    font-size:.75rem
  }

  .milestone-intro {
    margin-bottom:1.5rem
  }

}



/* One shared heading scale across the six desktop competence fields. */
@media (min-width:1024px) {
  .profile-area h3 { white-space:nowrap; }
}
@media (max-width:1023px) {
  .profile-area h3 { font-size:1.05rem; white-space:normal; }
}

/* WORKING_09 — Mobile carousel: full-width gesture area and controls below. */
@media (max-width:767px) {
  .carousel.is-enhanced {
    display:grid;
    grid-template-columns:3.5rem minmax(0,1fr) 3.5rem;
    width:calc(100% + var(--gutter));
    margin-inline:calc(var(--gutter) * -.5);
    align-items:center;
  }
  .carousel.is-enhanced .carousel-stage { display:contents; --slide-width:96%; }
  .carousel.is-enhanced .media-viewport {
    grid-column:1 / -1;
    grid-row:1;
    width:100%;
    clip-path:inset(0);
    padding-block:1rem;
  }
  .carousel.is-enhanced .carousel-control {
    position:static;
    transform:none;
    grid-row:2;
    width:3.5rem;
    height:3.5rem;
    justify-self:center;
  }
  .carousel.is-enhanced .carousel-control.prev { grid-column:1; }
  .carousel.is-enhanced .carousel-control.next { grid-column:3; }
  .carousel.is-enhanced .carousel-status {
    grid-column:2;
    grid-row:2;
    margin:0;
    justify-self:center;
  }
  .carousel.is-enhanced .media-note { grid-column:1 / -1; grid-row:3; }
}

/* WORKING_10 — restrained, image-specific provenance and light caption panels. */
.media-caption {
  background:#f5f5f5;
  color:var(--ink);
  flex-direction:column;
  gap:.5rem;
}
.media-caption h3,.media-caption p {color:var(--ink)}
.reference-label {
  display:block;
  border:0;
  padding:0;
  font-size:.6875rem;
  line-height:1.5;
  letter-spacing:0;
  color:var(--muted);
}
.hero-source-note {
  position:absolute;
  right:.75rem;
  bottom:.5rem;
  max-width:calc(100% - 1.5rem);
  font-size:.6875rem;
  line-height:1.4;
  color:white;
  text-shadow:none;
  pointer-events:none;
}
@media(max-width:767px) {
  .hero-source-note {font-size:.625rem;right:.5rem;bottom:.375rem}
}

/* WORKING_11 — source notes align to the right edge of the caption. */
.reference-label {align-self:stretch;text-align:right}

/* WORKING_12 — caption contrast and refined home teaser hierarchy. */
.media-caption {background:var(--info);color:var(--white)}
.media-caption h3 {color:var(--white)}
.media-caption p {color:#e0e0e0}
.reference-label {color:#999a9c}
#deutsche-bank .contribution {color:var(--ink)}
.chapter-claim {font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.4;text-transform:none}
.chapter-location {font-size:.875rem;text-transform:none}
.cta {text-transform:uppercase;font-weight:700}

/* WORKING_13 — shared CTA scale and aligned closing row. */
.cta {font-size:var(--teaser-cta-size);line-height:var(--teaser-cta-line)}
.cta .chevron {width:var(--teaser-chevron-width);height:var(--teaser-chevron-height)}
.chapter-claim {max-width:none}
.experience-close h2 {font-size:clamp(1.5rem,2.5vw,2.5rem);max-width:none}
@media(min-width:768px) {
  .closing-inner {display:grid;grid-template-columns:12% minmax(0,64%) minmax(0,24%);gap:0}
  .closing-inner h2 {grid-column:2;padding-right:2rem}
  .closing-inner .cta {grid-column:3;justify-self:start}
}
@media(min-width:768px) and (max-width:1023px) {
  .closing-inner {grid-template-columns:12% 60% 28%}
}
@media(min-width:1600px) {
  .experience-close>.container {width:min(100% - var(--gutter)*2,100rem)}
}

/* WORKING_14 — stronger teaser copy and two-line closing statement. */
.chapter-claim {font-size:clamp(1.2375rem,1.76vw,1.65rem);max-width:44ch;text-wrap:balance}
.experience-close h2 {font-size:clamp(3rem,5vw,5rem)}
#touch-tarifberater .case-header h2 {color:var(--telekom)}
@media(min-width:768px) {
  .closing-inner h2 {grid-column:1 / 3}
}
@media(max-width:767px) {
  .experience-close h2 {font-size:clamp(1.35rem,6vw,2.875rem)}
}

/* WORKING_15 — quieter closing headline on anthracite. */
.experience-close {background:var(--info);color:var(--white)}
.experience-close h2 {font-size:clamp(2.55rem,4.25vw,4.25rem)}
.experience-close .closing-inner,.experience-close .cta {color:var(--white)}
@media(max-width:767px) {
  .experience-close h2 {font-size:clamp(1.25rem,5.4vw,2.6rem)}
}

/* WORKING_16 — desktop depth; mobile geometry and interaction stay unchanged. */
@media screen and (min-width:768px) {
  .carousel.is-enhanced {display:grid;grid-template-columns:1fr 3rem auto 3rem 1fr;align-items:center;column-gap:.5rem}
  .carousel.is-enhanced .carousel-stage {display:contents;--slide-width:64%}
  .carousel.is-enhanced .media-viewport {grid-column:1 / -1;grid-row:1;width:100%;clip-path:inset(0);perspective:1800px;padding-block:2.5rem}
  .carousel.is-enhanced .carousel-control {position:static;transform:none;grid-row:2;width:3rem;height:3rem;justify-self:center}
  .carousel.is-enhanced .carousel-control.prev {grid-column:2}
  .carousel.is-enhanced .carousel-control.next {grid-column:4}
  .carousel.is-enhanced .carousel-control .chevron {width:.8rem;height:1.4rem}
  .carousel.is-enhanced .carousel-status {grid-column:3;grid-row:2;margin:0;justify-self:center}
  .carousel.is-enhanced .slide {transition:transform 600ms cubic-bezier(.22,.61,.36,1),opacity 450ms ease}
  .carousel.is-enhanced .slide .media-frame {transition:filter 600ms ease,box-shadow 600ms ease;opacity:1}
  .carousel.is-enhanced .slide[data-position=active] {z-index:5;transform:translateX(0) translateZ(0) rotateY(0) scale(1)}
  .carousel.is-enhanced .slide[data-position=active] .media-frame {filter:none;box-shadow:0 16px 30px -14px #0006}
  .carousel.is-enhanced .slide[data-position=previous] {z-index:3;transform:translateX(-30%) translateZ(-70px) rotateY(5deg) scale(.85)}
  .carousel.is-enhanced .slide[data-position=next] {z-index:3;transform:translateX(30%) translateZ(-70px) rotateY(-5deg) scale(.85)}
  .carousel.is-enhanced .slide[data-position=previous] .media-frame,
  .carousel.is-enhanced .slide[data-position=next] .media-frame {filter:brightness(.78) blur(.5px);box-shadow:0 10px 22px -14px #0005}
  .carousel.is-enhanced .slide[data-distance="-2"] {opacity:1;z-index:2;transform:translateX(-52%) translateZ(-140px) rotateY(9deg) scale(.73)}
  .carousel.is-enhanced .slide[data-distance="2"] {opacity:1;z-index:2;transform:translateX(52%) translateZ(-140px) rotateY(-9deg) scale(.73)}
  .carousel.is-enhanced .slide[data-position=before] .media-frame,
  .carousel.is-enhanced .slide[data-position=after] .media-frame {filter:brightness(.58) blur(1px);box-shadow:0 6px 14px -10px #0004}
}

/* WORKING_17 — blue only on the Deutsche Bank case title. */
#deutsche-bank .case-header h2 {color:#1e2a78}

/* WORKING_21 — live link below the case intro, wider desktop introductions. */
.case-header .live-project-button {display:inline-flex;justify-content:center;min-width:20rem;max-width:100%;min-height:3.75rem;padding:1.1rem 2.5rem;background:var(--white);color:var(--ink);border-radius:3px;text-decoration:none;transition:background var(--motion)}
.case-header .live-project-button:hover {background:#ededed}
.case-header .live-project-button:focus-visible {outline:3px solid var(--ink);outline-offset:4px}
@media(min-width:768px) {.case-header {max-width:72rem}}
@media(max-width:767px) {.case-header .live-project-button {min-width:0;width:100%;padding-inline:1rem}}

/* WORKING_23 — desktop text measures only; mobile unchanged. */
@media(min-width:768px) {
  .case-header {max-width:none}
  .case-header .lead {max-width:72rem}
  .carousel .caption-copy, #agency-website .single-media .caption-copy {width:100%;min-width:0}
  .carousel .caption-copy h3,
  .carousel .caption-copy p,
  #agency-website .single-media .caption-copy h3,
  #agency-website .single-media .caption-copy p {max-width:50%;margin-left:1rem;text-align:left}
}

/* WORKING_26 — quieter image provenance. */
.carousel .reference-label, #agency-website .single-media .reference-label {color:#7f8184}

/* WORKING_27 — subtly larger carousel headings. */
.carousel .media-caption h3, #agency-website .single-media .media-caption h3 {font-size:1.125rem}

/* Legal reference URLs must wrap on narrow screens. */
.legal-content p {overflow-wrap:anywhere}