.experience-directory {
  --ed-ink: #080a10;
  --ed-paper: #f4f6fa;
  width: min(100% - 48px, 1440px);
  margin: 0 auto;
  padding: 118px 0 126px;
  color: var(--ed-ink);
}

.experience-directory-heading {
  margin-bottom: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .5fr);
  align-items: end;
  gap: 72px;
}

.experience-directory-heading h2 {
  max-width: 940px;
  margin: 0;
  font-size: clamp(3.7rem, 7vw, 8rem);
  line-height: .84;
  letter-spacing: -.078em;
}

.experience-directory-heading h2 em {
  display: block;
  margin-top: .12em;
  color: #3159f4;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.experience-directory-heading p {
  max-width: 470px;
  margin: 0 0 8px;
  color: #596170;
  font-size: 16px;
  line-height: 1.7;
}

.experience-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.experience-entry {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(8,10,16,.14);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(25,34,55,.08);
}

.experience-entry > a { display: block; color: inherit; text-decoration: none; }

.experience-entry-visual {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(8,10,16,.1);
}

.experience-entry-brand,
.experience-entry-action {
  position: absolute;
  z-index: 3;
  top: 26px;
  left: 28px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.experience-entry-action {
  right: 28px;
  left: auto;
  font-size: 9px;
  opacity: .68;
}

.experience-entry-scene {
  position: absolute;
  inset: 80px 10% 35px;
  display: block;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.experience-entry:hover .experience-entry-scene { transform: translateY(-9px) rotateX(1deg); }

.experience-entry-scene i,
.experience-entry-scene b { position: absolute; display: block; }

.experience-entry-scene-label { position: absolute; z-index: 2; }

.experience-entry-copy {
  min-height: 245px;
  padding: 28px 30px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 22px;
}

.experience-entry-copy > div { grid-column: 1 / -1; }
.experience-entry-copy small { color: #6c7482; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.experience-entry-copy h3 { max-width: 560px; margin: 12px 0 0; font-size: clamp(1.8rem, 2.7vw, 3rem); line-height: .98; letter-spacing: -.052em; }
.experience-entry-copy p { margin: 0; color: #727987; font-size: 11px; line-height: 1.5; }
.experience-entry-copy > span { display: inline-flex; align-items: center; justify-self: end; gap: 10px; font-size: 11px; font-weight: 850; }
.experience-entry-copy > span i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b0e16; font-style: normal; }
.experience-entry a:focus-visible { outline: 4px solid #2f5cff; outline-offset: -4px; }

.experience-entry-commerce .experience-entry-visual { color: #17191e; background: #e8e5df; }
.experience-entry-commerce .experience-entry-scene { border: 1px solid rgba(20,22,27,.2); border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 35px 65px rgba(57,48,35,.16); transform: rotate(-2deg); }
.experience-entry-commerce .experience-entry-scene-label { top: 27px; left: 28px; width: 42%; font: 800 clamp(1.3rem,2.1vw,2.4rem)/.95 Arial,sans-serif; letter-spacing: -.055em; }
.experience-entry-commerce .experience-entry-scene i:first-child { right: 13%; top: 24%; width: 26%; aspect-ratio: 1; border-radius: 48% 48% 38% 40%; background: #16181d; box-shadow: -42px 62px 0 -22px #d0a56e; }
.experience-entry-commerce .experience-entry-scene i:nth-child(2) { left: 28px; bottom: 28px; width: 28%; height: 8px; border-radius: 10px; background: #17191e; box-shadow: 0 17px 0 #c4c7cb; }

.experience-entry-gastronomy .experience-entry-visual { color: #ffe7c6; background: #501d18; }
.experience-entry-gastronomy .experience-entry-scene { inset: 80px 12% 0; border-radius: 50% 50% 0 0; background: radial-gradient(circle at 50% 48%, #f4ba63 0 4%, #752a1d 5% 13%, #16110f 14% 29%, transparent 30%), linear-gradient(#bc6237,#4e1917); box-shadow: 0 -18px 0 rgba(255,224,182,.15); }
.experience-entry-gastronomy .experience-entry-scene-label { left: 50%; bottom: 26px; width: max-content; transform: translateX(-50%); font: 800 10px Arial,sans-serif; letter-spacing: .18em; }

.experience-entry-portfolio .experience-entry-visual { color: #111; background: #f1efea; }
.experience-entry-portfolio .experience-entry-scene { inset: 76px 7% 30px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.experience-entry-portfolio .experience-entry-scene::before,
.experience-entry-portfolio .experience-entry-scene::after { content: ""; border: 1px solid #171717; background: linear-gradient(145deg,#c9ff58 0 48%,#151515 49%); }
.experience-entry-portfolio .experience-entry-scene::after { background: radial-gradient(circle at 55% 37%,#f26a4f 0 15%,transparent 16%),#ccd3ef; }
.experience-entry-portfolio .experience-entry-scene b:first-of-type { left: 12px; bottom: 14px; color: #fff; font: 800 clamp(1.1rem,2vw,2rem)/.9 Arial,sans-serif; }

.experience-entry-corporate .experience-entry-visual { color: #ecf4ff; background: #163251; }
.experience-entry-corporate .experience-entry-scene { inset: 88px 8% 32px; border: 1px solid rgba(255,255,255,.28); background-image: linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size: 42px 42px; }
.experience-entry-corporate .experience-entry-scene-label { left: 28px; top: 27px; max-width: 66%; font: 750 clamp(1.4rem,2.2vw,2.5rem)/.94 Arial,sans-serif; letter-spacing: -.045em; }
.experience-entry-corporate .experience-entry-scene i { right: 10%; bottom: 14%; width: 28%; height: 36%; border: 2px solid #e55344; border-left: 0; border-bottom: 0; transform: skewY(-25deg); }

.experience-entry-platform .experience-entry-visual { color: #8ff3df; background: #080b16; }
.experience-entry-platform .experience-entry-scene { inset: 72px 6% 26px; display: grid; grid-template-columns: 25% 1fr; gap: 11px; border: 1px solid #273149; border-radius: 17px; background: #101624; box-shadow: 0 32px 70px rgba(0,0,0,.4); }
.experience-entry-platform .experience-entry-scene::before { content: ""; border-right: 1px solid #273149; background: repeating-linear-gradient(to bottom,transparent 0 31px,#222b40 32px); }
.experience-entry-platform .experience-entry-scene-label { top: 22px; left: 31%; font: 800 10px Consolas,monospace; letter-spacing: .14em; }
.experience-entry-platform .experience-entry-scene i:first-child { left: 31%; top: 56px; width: 29%; height: 32%; border-radius: 10px; background: #3159f4; }
.experience-entry-platform .experience-entry-scene i:nth-child(2) { right: 6%; top: 56px; width: 30%; height: 32%; border-radius: 10px; background: #192237; box-shadow: 0 82px 0 #151d2e; }

.experience-entry-fitness .experience-entry-visual { color: #16131a; background: #f36d47; }
.experience-entry-fitness .experience-entry-scene { inset: 75px 6% 20px; overflow: hidden; border: 2px solid #17131b; background: #d7bfff; }
.experience-entry-fitness .experience-entry-scene-label { left: 22px; top: 18px; white-space: pre-line; font: 950 clamp(2.1rem,4.2vw,5rem)/.73 Arial,sans-serif; letter-spacing: -.09em; }
.experience-entry-fitness .experience-entry-scene::after { content: ""; position: absolute; right: -3%; bottom: -15%; width: 42%; aspect-ratio: 1; border: 16px solid #f4ff57; border-radius: 50%; }

.experience-directory-note {
  margin-top: 22px;
  padding: 29px 31px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  border: 1px solid rgba(8,10,16,.14);
  border-radius: 20px;
  background: #fff;
}

.experience-directory-note p { max-width: 820px; margin: 0; color: #5f6673; font-size: 13px; line-height: 1.65; }
.experience-directory-note a { display: inline-flex; align-items: center; gap: 12px; color: #111522; font-size: 12px; font-weight: 850; }
.experience-directory-note a span { color: #3159f4; }

:root[data-theme="dark"] .experience-directory { color: #f5f7fb; }
:root[data-theme="dark"] .experience-directory-heading p { color: #9aa4b8; }
:root[data-theme="dark"] .experience-entry,
:root[data-theme="dark"] .experience-directory-note { border-color: rgba(255,255,255,.14); background: #0d111c; box-shadow: 0 28px 72px rgba(0,0,0,.22); }
:root[data-theme="dark"] .experience-entry-copy small,
:root[data-theme="dark"] .experience-entry-copy p,
:root[data-theme="dark"] .experience-directory-note p { color: #949fb3; }
:root[data-theme="dark"] .experience-entry-copy > span i { color: #10131b; background: #f3f6fc; }
:root[data-theme="dark"] .experience-directory-note a { color: #f5f7fb; }

@media (max-width: 960px) {
  .experience-directory-heading { grid-template-columns: 1fr; gap: 28px; }
  .experience-directory-heading p { max-width: 720px; }
  .experience-entry-visual { min-height: 330px; }
  .experience-entry-copy { min-height: 230px; }
}

@media (max-width: 700px) {
  .experience-directory { width: min(100% - 28px,1440px); padding: 76px 0 88px; }
  .experience-directory-heading { margin-bottom: 35px; }
  .experience-directory-heading h2 { font-size: clamp(3.2rem,14vw,5.7rem); }
  .experience-directory-heading p { font-size: 14px; }
  .experience-directory-grid { grid-template-columns: 1fr; gap: 14px; }
  .experience-entry { border-radius: 21px; }
  .experience-entry-visual { min-height: 300px; }
  .experience-entry-copy { min-height: 0; padding: 24px; grid-template-columns: 1fr; }
  .experience-entry-copy h3 { font-size: clamp(2rem,9vw,3rem); }
  .experience-entry-copy > span { justify-self: start; }
  .experience-directory-note { padding: 24px; grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 420px) {
  .experience-entry-visual { min-height: 250px; }
  .experience-entry-brand { top: 20px; left: 21px; }
  .experience-entry-action { top: 20px; right: 21px; }
  .experience-entry-scene { inset-inline: 7%; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-entry-scene { transition: none; }
  .experience-entry:hover .experience-entry-scene { transform: none; }
}