/* ==========================================================================
   Per-slide layout and choreography (1920×1080 stage units)
   ========================================================================== */

/* ---------- Hero slides (01, 12): the room with the window ---------- */

@property --iris {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.room { position: absolute; inset: 0; z-index: 0; }

.room-img {
  position: absolute;
  inset: 0;
  background: url(../img/window-room.jpg) center / cover no-repeat;
  transform-origin: 77.5% 46%;
}

.beam {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 19% 44% at 77.5% 46%, rgba(255, 214, 150, .26), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
}

.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0;
}

.room-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 24, 18, .62) 0%, rgba(6, 24, 18, .2) 46%, transparent 62%);
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 120px;
  top: 236px;
  width: 1100px;
}
.hero-title {
  font: 400 150px/.98 var(--serif);
  letter-spacing: -.018em;
  color: var(--cream);
}
.hero-title em { color: var(--gold); }
.hero-rule {
  display: block;
  width: 120px;
  height: 1.5px;
  margin: 58px 0 40px;
  background: var(--gold);
}
.hero-sub {
  font: 300 34px/1.45 var(--sans);
  letter-spacing: .01em;
  color: rgba(246, 242, 234, .8);
}

/* 01 — the window lights first, then the room opens around it */
.slide.s1 { background: #030b08; }
.s1 .room-img {
  -webkit-mask-image: radial-gradient(ellipse calc(var(--iris) * 14%) calc(var(--iris) * 50%) at 77.5% 46%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse calc(var(--iris) * 14%) calc(var(--iris) * 50%) at 77.5% 46%, #000 55%, transparent 100%);
  --iris: .001;
}
.s1.in .room-img {
  animation:
    a-iris 4.6s cubic-bezier(.5, 0, .2, 1) var(--base) both,
    a-push 10s var(--ease-out) var(--base) both;
}
.s1.in .beam {
  animation:
    a-fade 2.4s ease calc(var(--base) + .4s) both,
    a-breathe 7s ease-in-out calc(var(--base) + 2.8s) infinite alternate;
}
.s1.in .dust { animation: a-fade 3s ease calc(var(--base) + 1.4s) both; }

@keyframes a-iris {
  0%   { --iris: .001; }
  30%  { --iris: 1.15; }
  52%  { --iris: 1.3; }
  100% { --iris: 11; }
}
@keyframes a-push    { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes a-breathe { from { opacity: 1; } to { opacity: .55; } }

/* 12 — the window frame draws itself, then opens to frame the whole room */
.s12-copy { top: 196px; }
.s12-copy .eyebrow { margin-bottom: 30px; }
.s12-title { font-size: 124px; }
.s12-sub {
  margin-top: 46px;
  font-size: 32px;
  color: var(--gold);
}
.s12-thanks {
  margin-top: 56px;
  font: 600 34px/1 var(--sans);
  letter-spacing: .01em;
  color: var(--cream);
}
.s12-q {
  margin-top: 16px;
  font: 300 24px/1.4 var(--sans);
  color: rgba(246, 242, 234, .72);
}

.s12.in .room-img { animation: a-s12-room 7.5s ease-in-out var(--base) both; }
.s12.in .beam {
  animation:
    a-fade 2s ease calc(var(--base) + .3s) both,
    a-breathe 7s ease-in-out calc(var(--base) + 5s) infinite alternate;
}
.s12.in .dust { animation: a-fade 3s ease calc(var(--base) + .8s) both; }

@keyframes a-s12-room {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.win-frame {
  position: absolute;
  z-index: 2;
  left: 1296px;
  top: 82px;
  width: 422px;
  height: 842px;
  pointer-events: none;
}
.win-frame i { position: absolute; background: var(--gold); --w: 2px; }
.win-frame .t { left: 0; top: 0; width: 100%; height: var(--w); transform-origin: 0 50%; transform: scaleX(0); }
.win-frame .r { right: 0; top: 0; width: var(--w); height: 100%; transform-origin: 50% 0; transform: scaleY(0); }
.win-frame .b { right: 0; bottom: 0; width: 100%; height: var(--w); transform-origin: 100% 50%; transform: scaleX(0); }
.win-frame .l { left: 0; bottom: 0; width: var(--w); height: 100%; transform-origin: 50% 100%; transform: scaleY(0); }

.s12.in .win-frame .t { animation: a-draw-x .45s linear calc(var(--base) + .9s) both; }
.s12.in .win-frame .r { animation: a-draw-y .6s linear calc(var(--base) + 1.35s) both; }
.s12.in .win-frame .b { animation: a-draw-x .45s linear calc(var(--base) + 1.95s) both; }
.s12.in .win-frame .l { animation: a-draw-y .6s linear calc(var(--base) + 2.4s) both; }
.s12.in .win-frame    { animation: a-frame-open 2.4s var(--ease-io) calc(var(--base) + 3.1s) both; }

@keyframes a-frame-open {
  from { left: 1296px; top: 82px; width: 422px; height: 842px; opacity: 1; }
  to   { left: 36px; top: 36px; width: 1848px; height: 1008px; opacity: .5; }
}

/* ---------- 02 · Small windows ---------- */

.s2-left {
  position: absolute;
  z-index: 2;
  left: 120px;
  top: 326px;
  width: 860px;
}
.s2-lead { font: 400 68px/1.05 var(--serif); }
.s2-card {
  position: relative;
  margin-top: 62px;
  width: 800px;
  padding: 46px 54px 50px;
}
.s2-card-head {
  font: 500 34px/1.25 var(--sans);
  letter-spacing: -.005em;
  margin-bottom: 26px;
}
.s2-list li {
  position: relative;
  padding-left: 30px;
  font: 300 28px/1.55 var(--sans);
  color: rgba(246, 242, 234, .86);
}
.s2-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 13px;
  height: 1.5px;
  background: var(--gold);
}
.s2-ph { left: 1060px; top: 296px; width: 740px; height: 590px; }

/* ---------- 03 · Einstein and the missing detail ---------- */

.s3-ph { left: 120px; top: 286px; width: 520px; height: 690px; }
.s3-ph img { filter: grayscale(1) contrast(1.06); object-position: 50% 30%; }

.s3-tl {
  position: absolute;
  z-index: 2;
  left: 770px;
  top: 312px;
  width: 1030px;
  padding-left: 64px;
}
.tl-line {
  position: absolute;
  left: 12px;
  top: 34px;
  width: 1.5px;
  height: 262px;
  background: linear-gradient(var(--gold), rgba(214, 185, 140, .35));
}
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  column-gap: 30px;
  margin-bottom: 50px;
}
.tl-dot {
  position: absolute;
  left: -58px;
  top: 26px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--forest-800);
  border: 1.5px solid var(--gold);
}
.tl-dot.is-key {
  background: var(--gold);
  box-shadow: 0 0 0 8px rgba(214, 185, 140, .12), 0 0 34px rgba(214, 185, 140, .6);
}
.tl-year { font: 400 74px/1 var(--serif); color: var(--gold); }
.tl-head { font: 500 34px/1.3 var(--sans); color: var(--cream); padding-top: 12px; }
.tl-note {
  margin-top: 8px;
  font: 400 20px/1.4 var(--sans);
  letter-spacing: .05em;
  color: var(--sage);
}
.tl-detail { margin-top: 20px; }
.tl-detail li {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 300 27px/1.6 var(--sans);
  color: rgba(246, 242, 234, .88);
}
.tl-detail li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.tl-detail .is-up::before { background: var(--gold); }
.tl-detail .is-down { color: rgba(246, 242, 234, .58); }
.tl-detail .is-down::before { border: 1.5px solid rgba(246, 242, 234, .45); }

.s3-take {
  position: absolute;
  z-index: 2;
  left: 834px;
  top: 790px;
  font: italic 400 52px/1.14 var(--serif);
  color: var(--gold);
}

/* ---------- 04 · When an impression becomes a label ---------- */

.s4-card { left: 120px; top: 400px; width: 820px; padding: 52px 60px 56px; }
.s4-swap { position: relative; height: 150px; margin: 22px 0 16px; }

.tag {
  position: absolute;
  left: -6px;
  top: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 38px 22px 34px;
  background: var(--cream);
  color: var(--forest-800);
  font: 600 36px/1 var(--sans);
  letter-spacing: .005em;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%);
  border-radius: 0 10px 10px 0;
  opacity: 0;
  transform: rotate(-3deg);
}
.tag-hole {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #15352c;
  box-shadow: inset 0 0 0 2px rgba(18, 48, 42, .25);
}
.tag-strike {
  position: absolute;
  left: 70px;
  right: 30px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: #b5543c;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.s4.in .tag {
  animation:
    a-stamp .7s var(--ease-out) calc(var(--base) + 1.1s) both,
    a-fall 1s var(--ease-io) calc(var(--base) + 3.9s) forwards;
}
.s4.in .tag-strike { animation: a-draw-x .6s var(--ease-io) calc(var(--base) + 3.2s) both; }

@keyframes a-stamp {
  from { opacity: 0; transform: rotate(-3deg) scale(1.35); }
  to   { opacity: 1; transform: rotate(-3deg) scale(1); }
}
@keyframes a-fall {
  from { opacity: 1; transform: rotate(-3deg); }
  to   { opacity: 0; transform: translate(40px, 90px) rotate(9deg); }
}

.s4-gap {
  position: absolute;
  left: 0;
  top: 28px;
  font: 400 78px/1.05 var(--serif);
  color: var(--cream);
}
.s4-forward { font: 300 28px/1.55 var(--sans); color: rgba(246, 242, 234, .82); }

.s4-right { position: absolute; z-index: 2; left: 1060px; top: 412px; width: 740px; }
.s4-whole { font: 400 72px/1 var(--serif); }
.s4-life { margin-top: 30px; font: 300 31px/1.5 var(--sans); color: var(--forest-700); }
.s4-hair { width: 120px; margin: 44px 0 36px; color: var(--bronze); }
.s4-power { font: italic 400 54px/1.1 var(--serif); color: var(--bronze); }

/* ---------- 05 · A life outside the frame ---------- */

.s5-ph { left: 120px; top: 286px; width: 660px; height: 660px; }
.s5-ph img { transform: none; }
.s5.in .s5-ph::before { animation-delay: calc(var(--base) + 3.9s); }
.s5.in .s5-ph img { animation: none; }
.s5.in .s5-ph .clip { animation: a-vf 3.8s var(--ease-io) calc(var(--base) + .3s) both; }

@keyframes a-vf {
  0%   { clip-path: inset(50% 50% 50% 50% round 6px); }
  26%  { clip-path: inset(var(--crop) round 6px); }
  58%  { clip-path: inset(var(--crop) round 6px); }
  100% { clip-path: inset(0 0 0 0 round 6px); }
}

.vf {
  position: absolute;
  z-index: 3;
  inset: var(--crop);
  opacity: 0;
  pointer-events: none;
}
.s5.in .vf { animation: a-vf-box 3.8s var(--ease-io) calc(var(--base) + .3s) both; }
@keyframes a-vf-box {
  0%   { inset: var(--crop); opacity: 0; }
  22%  { opacity: 0; }
  30%  { inset: var(--crop); opacity: 1; }
  58%  { inset: var(--crop); opacity: 1; }
  100% { inset: -24px; opacity: 0; }
}
.vf i {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 0 solid var(--forest-800);
}
.vf i:nth-child(1) { left: -12px; top: -12px; border-width: 2px 0 0 2px; }
.vf i:nth-child(2) { right: -12px; top: -12px; border-width: 2px 2px 0 0; }
.vf i:nth-child(3) { right: -12px; bottom: -12px; border-width: 0 2px 2px 0; }
.vf i:nth-child(4) { left: -12px; bottom: -12px; border-width: 0 0 2px 2px; }
.vf-rec {
  position: absolute;
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 15px/1 var(--sans);
  letter-spacing: .1em;
  color: var(--forest-800);
}
.vf-rec b {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9443f;
  animation: rec 1.1s steps(2, jump-none) infinite;
}
@keyframes rec { from { opacity: 1; } to { opacity: .15; } }

.s5-copy { position: absolute; z-index: 2; left: 880px; top: 312px; width: 920px; }
.s5-lead { margin-top: 20px; font: 400 66px/1.06 var(--serif); }
.fork { position: relative; height: 180px; margin-top: 46px; }
.fork-svg { position: absolute; left: 0; top: 0; width: 170px; height: 180px; overflow: visible; }
.fk {
  fill: none;
  stroke: var(--forest-500);
  stroke-width: 2;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.s5.in .fk { animation: a-stroke 1.1s var(--ease-io) calc(var(--base) + var(--d)) both; }
@keyframes a-stroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.fk-dot { fill: var(--bronze); transform-box: fill-box; transform-origin: center; }
.fork-a, .fork-b {
  position: absolute;
  left: 198px;
  font: 400 34px/40px var(--sans);
  color: var(--forest-700);
}
.fork-a { top: 6px; }
.fork-b { top: 134px; }
.s5-end { margin-top: 42px; font: 600 32px/1.3 var(--sans); }

/* ---------- 06 · The evidence and the story ---------- */

.s6-a { left: 120px; top: 330px; width: 760px; height: 390px; }
.s6-plus {
  position: absolute;
  z-index: 2;
  left: 920px;
  top: 485px;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  font: 200 72px/1 var(--sans);
  color: var(--bronze);
}
.s6-b { position: absolute; z-index: 2; left: 1040px; top: 330px; width: 760px; height: 390px; }
.s6-b-dash {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(18, 48, 42, .42);
  border-radius: 22px;
}
.s6-b-fill { inset: 0; z-index: 0; opacity: 0; }
.s6.in .s6-b-fill { animation: a-fill 1.1s var(--ease-out) calc(var(--base) + 2.6s) both; }
@keyframes a-fill { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.s6-b-content { position: absolute; inset: 0; z-index: 1; padding: 48px 56px; color: var(--cream); }
.s6-b-content .kicker { color: var(--gold); }
.s6-big { margin-top: 30px; font: 400 58px/1.1 var(--serif); }
.s6-small { margin-top: 44px; font: 400 25px/1 var(--sans); color: var(--bronze); }

.s6-foot { position: absolute; z-index: 2; left: 120px; right: 120px; top: 790px; }
.s6-limit { margin-top: 34px; font: 400 52px/1.08 var(--serif); }
.s6-fair { margin-top: 12px; font: 300 28px/1.4 var(--sans); color: var(--forest-500); }

/* ---------- 07 · The art of listening ---------- */

.s7-card { left: 120px; top: 300px; width: 1010px; padding: 50px 60px 54px; }
.s7-meta { display: flex; justify-content: space-between; align-items: baseline; }
.s7-stat { display: flex; align-items: baseline; gap: 14px; }
.s7-stat b {
  font: 400 56px/1 var(--serif);
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.s7-stat span {
  font: 500 16px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage);
}
.s7-quote {
  margin-top: 54px;
  font: 400 132px/1 var(--serif);
  letter-spacing: -.015em;
}
.wave { height: 64px; margin-top: 30px; }
.wave .amp {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  transition: transform 2.8s var(--ease-soft);
}
.wave.calm .amp { transform: scaleY(.12); }
.wave i {
  display: block;
  flex: none;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--gold);
  opacity: .8;
  transform: scaleY(var(--h));
  animation: wv var(--sp, 1s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes wv {
  from { transform: scaleY(calc(var(--h) * .14)); }
  to   { transform: scaleY(var(--h)); }
}
.s7-detail { margin-top: 30px; font: 300 28px/1.45 var(--sans); color: rgba(246, 242, 234, .82); }
.s7-ph { left: 1270px; top: 262px; width: 530px; height: 706px; }
.s7-ph img { filter: saturate(.8) contrast(1.03); object-position: 50% 20%; }
.s7-meaning {
  position: absolute;
  z-index: 2;
  left: 120px;
  top: 890px;
  font: italic 400 46px/1.1 var(--serif);
  color: var(--gold);
}

/* ---------- 08 · Making room for a voice ---------- */

.s8-ph { left: 120px; top: 330px; width: 680px; height: 512px; }
.s8-card { left: 900px; top: 300px; width: 900px; padding: 54px 64px 56px; }
.s8-item { position: relative; padding-left: 72px; margin-bottom: 34px; }
.s8-num {
  position: absolute;
  left: 0;
  top: 18px;
  font: 500 16px/1 var(--sans);
  letter-spacing: .22em;
  color: var(--bronze);
}
.s8-item h3 { font: 400 52px/1.1 var(--serif); }
.s8-item p { margin-top: 12px; font: 300 28px/1.45 var(--sans); color: var(--forest-600); }
.s8-pause { display: flex; gap: 14px; padding-left: 72px; margin: 4px 0 30px; }
.s8-pause i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bronze);
  animation: breath 2.4s ease-in-out infinite;
}
.s8-pause i:nth-child(2) { animation-delay: .4s; }
.s8-pause i:nth-child(3) { animation-delay: .8s; }
@keyframes breath {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50%      { opacity: .85; transform: scale(1.15); }
}
.s8-last { padding-left: 72px; font: italic 400 44px/1.15 var(--serif); color: var(--bronze); }

/* ---------- 09 · Embracing your true self ---------- */

.s9-ph { left: 120px; top: 286px; width: 700px; height: 686px; }
.s9-quote { position: absolute; z-index: 2; left: 944px; top: 300px; width: 860px; }
.s9-mark {
  position: absolute;
  left: -30px;
  top: -112px;
  font: 400 420px/1 var(--serif);
  color: rgba(214, 185, 140, .32);
}
.s9-q { position: relative; padding-top: 64px; font: 400 90px/1.03 var(--serif); }
.s9-credit { margin-top: 42px; font: 400 24px/1.5 var(--sans); letter-spacing: .02em; color: var(--gold); }
.s9-credit b { font-weight: 600; color: var(--cream); }
.s9-stay {
  position: absolute;
  z-index: 2;
  left: 944px;
  top: 870px;
  font: italic 400 42px/1.15 var(--serif);
  color: rgba(246, 242, 234, .86);
}

/* ---------- 10 · Curiosity and the work behind it ---------- */

.s10-card { left: 120px; top: 300px; width: 1040px; padding: 40px 56px 52px; }
.aa { display: block; width: 100%; height: auto; overflow: visible; }
.aa-guides line {
  stroke: rgba(18, 48, 42, .16);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.aa-guides .is-base { stroke: rgba(138, 95, 52, .55); }
.s10.in .aa-guides line { animation: a-draw-x 1.3s var(--ease-io) calc(var(--base) + var(--d)) both; }

.aa-serif {
  font: 400 250px/1 var(--serif);
  fill: var(--forest-800);
  fill-opacity: 0;
  stroke: var(--forest-800);
  stroke-width: 1.4;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}
.s10.in .aa-serif {
  animation:
    a-letter-draw 2.4s var(--ease-soft) calc(var(--base) + 1s) both,
    a-letter-fill 1.2s ease calc(var(--base) + 2.7s) both;
}
@keyframes a-letter-draw { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } }
@keyframes a-letter-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }

.aa-sans { font: 300 214px/1 var(--sans); fill: var(--forest-500); opacity: 0; }
.s10.in .aa-sans { animation: a-fade 1.4s ease calc(var(--base) + 2.4s) both; }

.s10-craft { margin-top: 24px; font: 600 32px/1.3 var(--sans); }
.kern { display: inline-block; }
.s10.in .kern { animation: a-kern 1.9s var(--ease-out) calc(var(--base) + 2.9s) both; }
@keyframes a-kern { from { letter-spacing: .42em; } to { letter-spacing: 0; } }
.s10-mac { margin-top: 16px; font: 300 28px/1.45 var(--sans); color: var(--forest-600); }

.s10-right { position: absolute; z-index: 2; left: 1262px; top: 330px; width: 560px; }
.s10-learn { font: 400 66px/1 var(--serif); }
.s10-body { margin-top: 30px; font: 300 30px/1.5 var(--sans); color: var(--forest-600); }
.s10-point { margin-top: 40px; font: italic 400 38px/1.18 var(--serif); color: var(--bronze); }

/* ---------- 11 · Yourself, with room to grow ---------- */

.s11-card { left: 120px; top: 330px; width: 1040px; padding: 58px 66px 62px; }
.s11-item h3 {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 400 58px/1.1 var(--serif);
  color: var(--gold);
}
.s11-item p { margin-top: 14px; font: 300 30px/1.45 var(--sans); color: rgba(246, 242, 234, .85); }
.s11-card .hair { margin: 42px 0; }
.s11-check {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
}
.s11-check::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 8px;
  height: 14px;
  border: solid var(--gold);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.s11-strike { position: relative; display: inline-block; }
.s11-strike::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 54%;
  height: 3px;
  background: #c9705a;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.s11.in .s11-strike::after { animation: a-draw-x .7s var(--ease-io) calc(var(--base) + 3s) both; }
.s11.in .is-label { animation: a-dim 1s ease calc(var(--base) + 3.4s) both; }
@keyframes a-dim { from { opacity: 1; } to { opacity: .4; } }

.s11-worth {
  position: absolute;
  z-index: 2;
  left: 1262px;
  top: 350px;
  width: 560px;
  font: 400 80px/1.02 var(--serif);
}
.s11-worth em { color: var(--bronze); --u-color: var(--bronze); }

/* ---------- 13 · Our team ---------- */

.team {
  position: absolute;
  z-index: 2;
  left: 120px;
  right: 120px;
  top: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 54px;
}
.team li {
  width: 336px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team img {
  width: 148px;
  height: 148px;
  margin-bottom: 26px;
  border-radius: 50%;
  object-fit: cover;
  outline: 1.5px solid rgba(214, 185, 140, .45);
  outline-offset: 7px;
}
.team b { font: 600 28px/1.2 var(--sans); color: var(--cream); }
.team span { margin-top: 10px; font: 400 20px/1.45 var(--sans); color: var(--gold); }