.mac-portfolio { color: #0d2037; background: #f8fafb; }
.mac-portfolio__intro { padding: 11rem 6vw 5rem; max-width: 1440px; margin: auto; }
.mac-portfolio__eyebrow { font-size: .7rem; font-weight: 750; letter-spacing: .14em; margin: 0 0 1rem; }
.mac-portfolio__intro h1 { font-size: clamp(2.8rem, 5.5vw, 5.5rem); line-height: 1.02; letter-spacing: -.055em; margin: 0 0 1.5rem; }
.mac-portfolio__intro > p:last-child { color: #486079; font-size: 1.1rem; }
.mac-project { position: relative; height: 150svh; background: var(--mac-tone); }
.mac-project__stage { position: sticky; top: 0; height: 100svh; min-height: 620px; padding: 7.5rem 6vw 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.25rem; overflow: hidden; }
.mac-project__heading { width: min(100%, 1200px); display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.mac-project__heading h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.08; letter-spacing: -.04em; }
.mac-project__heading .mac-portfolio__eyebrow { margin-bottom: .65rem; color: #4c5a6c; }
.mac-project__link { color: #122c49; font-size: .9rem; font-weight: 650; text-decoration: none; border-bottom: 1px solid #65798d; padding: .65rem 0; white-space: nowrap; }
.mac-project__link:hover { color: #0a5cff; border-color: currentColor; }
.mac-project__link:focus-visible { outline: 3px solid #0a5cff; outline-offset: 5px; }
.mac-device { width: min(100%, 1100px, calc((100svh - 285px) * 1.65)); position: relative; flex: 0 0 auto; padding-bottom: 1.2%; }
.mac-device__lid { width: 92%; margin: auto; padding: 1.65% 1.25% .7%; border: 2px solid #727780; border-radius: 2.2% 2.2% .8% .8% / 3.6% 3.6% 1% 1%; background: #141519; box-shadow: inset 0 0 0 2px #25282e, 0 16px 40px #11223820; position: relative; }
.mac-device__camera { position: absolute; top: .9%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #343d49; }
.mac-device__screen { position: relative; aspect-ratio: 16 / 10; background: #050505; overflow: hidden; }
.mac-device__screen video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; display: block; }
.mac-device__brand { display: block; text-align: center; color: #a5a7ae; font-size: clamp(5px, .65vw, 9px); padding-top: .5%; line-height: 1.5; }
.mac-device__base { position: relative; height: clamp(7px, 1.2vw, 16px); border-radius: 1px 1px 45% 45% / 1px 1px 90% 90%; background: linear-gradient(#c9cbd0 0%, #eceef1 22%, #959aa2 70%, #5c626a); box-shadow: 0 2px 2px #0003; }
.mac-device__base i { position: absolute; top: 0; left: 43%; width: 14%; height: 45%; background: #8c919b; border-radius: 0 0 12px 12px; box-shadow: inset 0 1px 3px #4448; }
.mac-device__shadow { position: absolute; bottom: -9%; left: 8%; width: 84%; height: 8%; border-radius: 50%; background: #15223728; filter: blur(12px); pointer-events: none; }
.mac-project__foot { width: min(100%, 1200px); display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: #46566b; gap: 1rem; }
.mac-project__ticks { display: flex; gap: 6px; }
.mac-project__ticks i { display: block; width: 32px; height: 3px; background: #0d203720; }
.mac-project__ticks .is-filled { background: #0d2037; }
@media(max-width: 700px) {
  .mac-portfolio__intro { padding: 8rem 6vw 3rem; }
  .mac-project { height: auto; }
  .mac-project__stage { position: relative; min-height: 0; height: auto; padding: 3rem 5vw; gap: 2.5rem; }
  .mac-project__heading { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .mac-device { width: 100%; }
  .mac-project__foot { font-size: .65rem; }
  .mac-project__ticks i { width: 18px; }
}
@media(prefers-reduced-motion: reduce) {
  .mac-project { height: auto; }
  .mac-project__stage { position: relative; }
}