:root {
  --material-ink: #101018;
  --material-paper: #f7f5ef;
  --material-line: rgba(16, 16, 24, .15);
  --material-lime: #c7f11a;
  --material-pink: #ff3c7d;
  --material-cyan: #00bed7;
  --material-yellow: #ffd51c;
  --material-purple: #7948d6;
  --material-blue: #3157ff;
  --material-red: #ff493c;
}

.expertise-page .page-hero-copy h1 {
  max-width: 15ch;
  font-size: clamp(48px, 5.3vw, 82px);
  line-height: .91;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.expertise-page .ex-hub-head h2 {
  max-width: 13ch;
  font-size: clamp(46px, 5.1vw, 78px);
  line-height: .9;
}

.expertise-page .ex-hub-card h3 { font-size: clamp(34px, 3.5vw, 58px); }

.expertise-materials {
  width: 100%;
  padding: clamp(88px, 10vw, 160px) 4vw;
  overflow: hidden;
  color: var(--material-ink);
  background:
    linear-gradient(var(--material-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--material-line) 1px, transparent 1px),
    var(--material-paper);
  background-size: 42px 42px;
  border-block: 1px solid var(--material-ink);
  scroll-margin-top: 88px;
}

.materials-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .54fr);
  gap: 6vw;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 82px);
}

.materials-heading h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(46px, 5.1vw, 78px);
  line-height: .9;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.materials-heading > p {
  max-width: 48ch;
  margin: 0;
  color: rgba(16, 16, 24, .65);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.55;
}

.materials-entry-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 34px;
  border: 1px solid var(--material-ink);
  background: rgba(255, 255, 255, .88);
}
.materials-entry-points a {
  min-height: 154px;
  padding: 22px;
  color: var(--material-ink);
  border-right: 1px solid var(--material-ink);
  transition: color .25s ease, background .25s ease, transform .25s var(--ease);
}
.materials-entry-points a:last-child { border-right: 0; }
.materials-entry-points a:hover { color: var(--material-ink); background: var(--material-lime); transform: translateY(-4px); }
.materials-entry-points span,
.materials-entry-points small { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.materials-entry-points span { color: #9c164d; }
.materials-entry-points strong { display: block; margin: 31px 0 8px; font-size: clamp(20px, 1.65vw, 28px); line-height: 1; letter-spacing: -.04em; }
.materials-entry-points small { color: rgba(16, 16, 24, .54); line-height: 1.4; }

.materials-clusters { margin:clamp(54px,7vw,108px) 0; border:1px solid var(--material-ink); background:#fff; box-shadow:12px 12px 0 #3154ff; }
.materials-clusters > header { display:grid; grid-template-columns:.35fr 1fr; gap:4vw; align-items:end; padding:clamp(28px,4vw,56px); color:#fff; background:var(--material-ink); }
.materials-clusters > header h3 { max-width:16ch; margin:0; font-size:clamp(38px,5vw,72px); line-height:.94; letter-spacing:-.055em; }
.materials-clusters > div { display:grid; grid-template-columns:repeat(5,1fr); }
.materials-clusters a { display:flex; flex-direction:column; min-height:320px; padding:26px; color:var(--material-ink); border-right:1px solid var(--material-ink); text-decoration:none; transition:transform .25s ease,background .25s ease; }
.materials-clusters a:last-child { border-right:0; }
.materials-clusters a:nth-child(1){background:#dfff8d}.materials-clusters a:nth-child(2){background:#fff}.materials-clusters a:nth-child(3){background:#dbe5ff}.materials-clusters a:nth-child(4){background:#ffd9e7}.materials-clusters a:nth-child(5){background:#ffe886}
.materials-clusters a:hover { position:relative; z-index:2; transform:translateY(-8px); background:#b9ff19; box-shadow:0 18px 38px rgba(16,16,24,.16); }
.materials-clusters a > span { font:800 10px/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.materials-clusters a strong { margin:auto 0 16px; font-size:clamp(22px,1.7vw,30px); line-height:1.02; letter-spacing:-.045em; }
.materials-clusters a p { margin:0; color:rgba(16,16,24,.64); font-size:14px; line-height:1.5; }
.expertise-hero-thesis { max-width:18ch; margin:20px 0 0; font-size:clamp(25px,2.4vw,40px); line-height:1.05; letter-spacing:-.04em; color:#3154ff; }
@media(max-width:1100px){.materials-clusters>div{grid-template-columns:repeat(2,1fr)}.materials-clusters a{border-bottom:1px solid var(--material-ink)}.materials-clusters a:nth-child(even){border-right:0}.materials-clusters a:last-child{grid-column:1/-1}}
@media(max-width:620px){.materials-clusters>header,.materials-clusters>div{grid-template-columns:1fr}.materials-clusters a,.materials-clusters a:nth-child(even){min-height:230px;border-right:0}.materials-clusters a:last-child{grid-column:auto}}

.materials-topic-bar {
  display: grid;
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1.62fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid var(--material-ink);
  background: var(--material-yellow);
}
.materials-topic-bar > div:first-child span { display: block; color: #9c164d; font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.materials-topic-bar > div:first-child strong { display: block; margin-top: 8px; font-size: 20px; letter-spacing: -.03em; }
.materials-topic-bar > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.materials-topic-bar button {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  color: var(--material-ink);
  border: 1px solid rgba(16, 16, 24, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.materials-topic-bar button span { display: grid; place-items: center; min-width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-mono); font-size: 8px; }
.materials-topic-bar button:hover,
.materials-topic-bar button.is-active { color: #fff; background: var(--material-ink); }

.materials-rubricator {
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr) auto;
  gap: clamp(24px, 4vw, 62px);
  align-items: center;
  margin-bottom: 34px;
  padding: clamp(25px, 3vw, 44px);
  color: #fff;
  background: var(--material-ink);
  border: 1px solid var(--material-ink);
  box-shadow: 10px 10px 0 var(--material-purple);
}

.materials-rubricator > div:first-child span,
.materials-result {
  color: var(--material-lime);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.materials-rubricator > div:first-child strong {
  display: block;
  margin-top: 12px;
  font-size: clamp(24px, 2.1vw, 36px);
  letter-spacing: -.04em;
}

.materials-rubricator > div:first-child p {
  max-width: 32ch;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, .56);
  font-size: 13px;
  line-height: 1.45;
}

.materials-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.materials-filters button {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 10px 15px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.materials-filters button:hover { transform: translateY(-2px); border-color: var(--material-lime); }
.materials-filters button.is-active { color: var(--material-ink); background: var(--material-lime); border-color: var(--material-lime); }
.materials-filters button span { display: grid; place-items: center; min-width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-mono); font-size: 9px; }
.materials-result { min-width: 112px; color: rgba(255, 255, 255, .58); text-align: right; }

.materials-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 18px;
}

.material-card {
  --card-bg: #fff;
  --card-ink: var(--material-ink);
  --card-muted: rgba(16, 16, 24, .62);
  --card-accent: var(--material-lime);
  --visual-color: var(--card-accent);
  position: relative;
  grid-column: span 6;
  min-height: 440px;
  padding: clamp(28px, 2.8vw, 44px);
  overflow: hidden;
  color: var(--card-ink);
  background: var(--card-bg);
  border: 1px solid var(--material-ink);
  transition: opacity .25s ease, transform .32s var(--ease), box-shadow .32s var(--ease);
  isolation: isolate;
}

.material-card[hidden] { display: none; }
.material-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; background: var(--card-accent); }
.material-card::after { content: "↗"; position: absolute; top: 28px; right: 28px; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; color: var(--card-ink); border: 1px solid currentColor; border-radius: 50%; font-size: 18px; transition: transform .3s var(--ease), background .3s ease; }
.material-card:hover { color: var(--card-ink); transform: translate(-4px, -4px); box-shadow: 11px 11px 0 var(--card-accent); }
.material-card:hover::after { transform: rotate(45deg); background: var(--card-accent); }
.material-card > span,
.material-card > b { position: relative; z-index: 3; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.material-card > span { color: var(--card-accent); }
.material-card > em {
  position: absolute;
  z-index: 4;
  top: 82px;
  left: clamp(28px, 2.8vw, 44px);
  padding: 6px 9px;
  color: var(--card-ink);
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--card-bg);
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.material-card h3 {
  position: relative;
  z-index: 3;
  max-width: 15ch;
  margin: clamp(68px, 7vw, 108px) 0 20px;
  font-size: clamp(32px, 2.7vw, 46px);
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.material-card p { position: relative; z-index: 3; max-width: 43ch; margin: 0 0 64px; color: var(--card-muted); font-size: 15px; line-height: 1.5; }
.material-card > b { position: absolute; left: clamp(28px, 2.8vw, 44px); bottom: 29px; }
.material-card.is-span-7 { grid-column: span 7; }
.material-card.is-span-5 { grid-column: span 5; }
.material-card.is-span-7 h3 { max-width: 17ch; }
.material-card.is-span-5 h3 { max-width: 12ch; }

.material-visual {
  position: absolute;
  z-index: 1;
  top: 58px;
  right: 26px;
  width: 38%;
  height: 42%;
  color: var(--card-accent);
  opacity: .48;
  transform: rotate(-2deg);
  transition: opacity .3s ease, transform .5s var(--ease);
}
.material-card:hover .material-visual { opacity: .8; transform: rotate(0) scale(1.04); }

.material-card--lime { --card-accent: #82b900; --card-bg: #f6ffd5; }
.material-card--pink { --card-accent: #e91e63; --card-bg: #fff0f6; }
.material-card--cyan { --card-accent: #008ca4; --card-bg: #ecfbff; }
.material-card--yellow { --card-accent: #9b7000; --card-bg: #ffe246; }
.material-card--purple { --card-accent: #7948d6; --card-bg: #f4efff; }
.material-card--blue { --card-accent: #3157ff; --card-bg: #edf1ff; }
.material-card--orange { --card-accent: #ff5a1f; --card-bg: #fff0e8; }
.material-card--green { --card-accent: #007f5f; --card-bg: #e8fff6; }
.material-card--red { --card-accent: #d92d20; --card-bg: #fff0ec; }
.material-card--dark { --card-accent: var(--material-lime); --card-bg: #111118; --card-ink: #fff; --card-muted: rgba(255, 255, 255, .62); border-color: #111118; }

.materials-library {
  margin-top: clamp(96px, 12vw, 180px);
  padding-top: clamp(66px, 8vw, 110px);
  border-top: 1px solid var(--material-ink);
}
.materials-library > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr); gap: 5vw; align-items: end; }
.materials-library h3 { max-width: 14ch; margin: 0; font-size: clamp(44px, 5.4vw, 82px); line-height: .9; letter-spacing: -.06em; text-wrap: balance; }
.materials-library label { display: block; }
.materials-library label span { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.materials-library input { width: 100%; min-height: 58px; padding: 15px 18px; color: var(--material-ink); border: 1px solid var(--material-ink); border-radius: 0; background: rgba(255, 255, 255, .86); font: inherit; }
.materials-library input:focus { outline: 3px solid var(--material-lime); outline-offset: 2px; }
.materials-library-meta { display: flex; justify-content: space-between; gap: 24px; margin: 46px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--material-ink); }
.materials-library-meta p { margin: 0; color: rgba(16, 16, 24, .58); }
.materials-library-meta output { font-family: var(--font-mono); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.materials-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.materials-library-grid a { position: relative; min-height: 172px; padding: 23px 58px 23px 23px; overflow: hidden; color: var(--material-ink); background: rgba(255, 255, 255, .82); border: 1px solid var(--material-line); transition: transform .25s var(--ease), background .25s ease, border-color .25s ease; }
.materials-library-grid a[hidden] { display: none; }
.materials-library-grid a:hover { color: inherit; background: #fff; border-color: var(--material-ink); transform: translateY(-3px); }
.materials-library-grid a > span { color: #9c164d; font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.materials-library-grid a > em { display: inline-block; margin-left: 8px; padding: 4px 7px; color: var(--material-ink); border: 1px solid rgba(16, 16, 24, .42); border-radius: 999px; font-family: var(--font-mono); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.materials-library-grid a > strong { position: relative; z-index: 2; display: block; max-width: 24ch; margin-top: 24px; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.08; letter-spacing: -.035em; }
.materials-library-grid a > b { position: absolute; top: 20px; right: 20px; font-size: 14px; }
.materials-library-grid a > i { position: absolute; right: -18px; bottom: -28px; width: 92px; height: 92px; border: 1px solid rgba(16, 16, 24, .16); border-radius: 50%; box-shadow: 0 0 0 18px rgba(16, 16, 24, .04); }
.materials-library-grid a:nth-child(3n + 1) > i { border-radius: 8px; transform: rotate(25deg); }
.materials-library-grid a:nth-child(3n + 2) > i { width: 120px; border-radius: 50% 10% 50% 10%; }

.journal-forward { display: grid; place-content: center; min-height: 100svh; padding: 7vw; color: var(--material-ink); background: var(--material-paper); text-align: center; }
.journal-forward p { color: #980b47; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.journal-forward h1 { max-width: 12ch; margin: 20px auto 36px; font-size: clamp(44px, 6.2vw, 88px); line-height: .93; letter-spacing: -.055em; }
.journal-forward .button { justify-self: center; }

@media (max-width: 1100px) {
  .materials-heading,
  .materials-library > header { grid-template-columns: 1fr; align-items: start; }
  .materials-rubricator { grid-template-columns: 1fr; }
  .materials-entry-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-entry-points a:nth-child(2) { border-right: 0; }
  .materials-entry-points a:nth-child(-n + 2) { border-bottom: 1px solid var(--material-ink); }
  .materials-topic-bar { grid-template-columns: 1fr; }
  .materials-result { text-align: left; }
  .material-card.is-span-7,
  .material-card.is-span-5 { grid-column: span 6; }
  .materials-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .expertise-page .page-hero-copy h1,
  .expertise-page .ex-hub-head h2,
  .materials-heading h2,
  .materials-library h3 { font-size: clamp(38px, 11vw, 58px); line-height: .95; }
  .expertise-materials { padding-inline: 20px; }
  .materials-rubricator { box-shadow: 7px 7px 0 var(--material-purple); }
  .materials-entry-points { grid-template-columns: 1fr; }
  .materials-entry-points a,
  .materials-entry-points a:nth-child(2) { min-height: 132px; border-right: 0; border-bottom: 1px solid var(--material-ink); }
  .materials-entry-points a:last-child { border-bottom: 0; }
  .materials-topic-bar { padding: 20px; }
  .materials-topic-bar > div:last-child { display: grid; grid-template-columns: 1fr; }
  .materials-topic-bar button { justify-content: space-between; }
  .materials-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-filters button { justify-content: space-between; }
  .materials-grid { grid-template-columns: 1fr; }
  .material-card.is-span-7,
  .material-card.is-span-5 { grid-column: 1; min-height: 430px; }
  .material-card h3,
  .material-card.is-span-5 h3,
  .material-card.is-span-7 h3 { max-width: 15ch; font-size: clamp(31px, 9vw, 43px); }
  .material-visual { width: 46%; opacity: .34; }
  .materials-library-meta { align-items: flex-start; flex-direction: column; }
  .materials-library-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .material-card,
  .materials-entry-points a,
  .materials-filters button,
  .materials-library-grid a { transition: none; }
}