.project-page { background: var(--cream); }
.project-nav { position: absolute; color: white; }
.back-link { padding: 11px 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; font-size: .82rem; }
.project-hero { min-height: 86svh; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.9fr); align-items: end; gap: clamp(35px,7vw,120px); padding: 150px clamp(24px,7vw,130px) 90px; color: white; background: var(--ink); overflow: hidden; }
.project-hero-copy { min-width: 0; }
.project-kicker { color: #c7c1ff; font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; }
.project-hero h1 { margin: 20px 0 32px; font-family: "Playfair Display", serif; font-size: clamp(4rem,8vw,8.5rem); line-height: .9; letter-spacing: -.05em; }
.project-lead { max-width: 650px; color: rgba(255,255,255,.72); font-size: 1.15rem; line-height: 1.7; }
.hero-project-image { width: min(100%,560px); height: min(65vh,650px); object-fit: cover; justify-self: end; transform: rotate(1.25deg); transform-origin: center; border: 14px solid white; border-bottom-width: 58px; box-shadow: 0 25px 70px rgba(0,0,0,.3); }
.hero-project-image.hero-project-contain { object-fit: contain; background: #fff; }
.hero-polaroid { width: min(100%,520px); margin: 0; padding: 14px 14px 0; justify-self: end; color: var(--ink); background: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.3); transform: rotate(1.25deg); transform-origin: center; }
.hero-polaroid-picture { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: #eeece8; }
.hero-polaroid-picture img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.hero-polaroid-picture img.hero-project-contain { object-fit: contain; }
.hero-polaroid figcaption { height: 72px; display: flex; align-items: center; padding: 0 10px; font-family: "Playfair Display",serif; font-size: clamp(1.1rem,1.5vw,1.4rem); font-style: italic; }
.project-hero-mosaic h1 { font-size: clamp(3.7rem,6.8vw,7.4rem); line-height: .84; overflow-wrap: normal; }
.project-hero-mosaic h1 em { display: inline-block; color: #c7c1ff; }
.project-hero-rag { grid-template-columns: minmax(360px,.8fr) minmax(0,1.2fr); }
.project-hero-rag h1 { font-size: clamp(3.4rem,6vw,7rem); }
.project-hero-rag h1 em { color: #6fd7ce; }
.project-hero-rag .hero-project-image { width: 100%; height: auto; max-width: 760px; max-height: 58vh; padding: 10px; border-bottom-width: 36px; }
.project-hero-rag .hero-polaroid, .project-hero-motion .hero-polaroid { width: min(100%,560px); }
.project-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; padding: 55px clamp(24px,9vw,150px); border-bottom: 1px solid var(--line); }
.meta-item small { display: block; margin-bottom: 8px; color: var(--sage-dark); text-transform: uppercase; letter-spacing: .13em; }
.project-story { display: grid; grid-template-columns: .75fr 1.25fr; gap: 10vw; padding: 130px clamp(24px,9vw,150px); }
.project-story h2 { font-size: clamp(2.8rem,5vw,5.5rem); }
.story-copy p { margin-top: 0; font-size: 1.05rem; line-height: 1.85; color: rgba(23,22,43,.7); }
.project-gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; padding: 0 clamp(24px,6vw,95px) 140px; }
.project-gallery figure { margin: 0; min-height: 340px; background: #e9e5ff; overflow: hidden; }
.project-gallery figure:first-child { grid-column: 1 / -1; min-height: 600px; }
.project-gallery img, .project-gallery video { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-carousel { padding: 80px clamp(24px,9vw,150px) 140px; outline: none; background: #f7f4ee; }
.carousel-heading { display: flex; align-items: end; justify-content: space-between; max-width: 1180px; margin: 0 auto 45px; }
.carousel-heading h2 { font-size: clamp(2.8rem,5vw,5.5rem); }
.carousel-heading > p { margin: 0 0 8px; color: var(--sage-dark); font-weight: 600; letter-spacing: .12em; }
.carousel-viewport { position: relative; max-width: 1180px; margin: auto; overflow: hidden; border: 1px solid rgba(23,22,43,.08); border-radius: 18px; background: #fff; box-shadow: 0 24px 65px rgba(23,22,43,.10); }
.carousel-track { display: flex; transition: transform .65s cubic-bezier(.2,.75,.2,1); touch-action: pan-y; }
.carousel-slide { flex: 0 0 100%; height: clamp(460px,75vh,820px); margin: 0; padding: clamp(28px,5vw,72px); display: grid; place-items: center; }
.carousel-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; object-fit: contain; object-position: center; }
.carousel-button { position: absolute; z-index: 2; top: 50%; width: 52px; height: 52px; border: 0; border-radius: 50%; color: white; background: rgba(23,22,43,.86); font-size: 1.25rem; cursor: pointer; transform: translateY(-50%); transition: background .2s, transform .2s; }
.carousel-button:hover { background: var(--coral); transform: translateY(-50%) scale(1.06); }
.carousel-prev { left: 20px; }
.carousel-next { right: 20px; }
.carousel-dots { display: flex; justify-content: center; gap: 10px; max-width: 1180px; margin: 28px auto 0; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(23,22,43,.2); cursor: pointer; transition: width .25s, border-radius .25s, background .25s; }
.carousel-dots button.active { width: 28px; border-radius: 99px; background: var(--coral); }
.project-mosaic { padding: 100px clamp(24px,6vw,95px) 150px; background: #f7f4ee; }
.mosaic-heading { display: flex; align-items: end; justify-content: space-between; max-width: 1280px; margin: 0 auto 60px; padding-bottom: 28px; border-bottom: 1px solid rgba(23,22,43,.14); }
.mosaic-heading h2 { font-size: clamp(2.8rem,5vw,5.5rem); }
.mosaic-heading > p { margin: 0 0 9px; color: rgba(23,22,43,.52); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mosaic-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: 70px; grid-auto-flow: dense; gap: 20px; max-width: 1280px; margin: auto; }
.mosaic-item { position: relative; margin: 0; padding: clamp(18px,2.5vw,36px); display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(23,22,43,.07); border-radius: 16px; background: #fff; box-shadow: 0 14px 38px rgba(23,22,43,.08); transition: transform .3s, box-shadow .3s; }
.mosaic-item:hover { z-index: 2; transform: translateY(-5px); box-shadow: 0 22px 50px rgba(23,22,43,.14); }
.mosaic-item img { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: contain; object-position: center; }
.mosaic-item > span { position: absolute; z-index: 1; top: 14px; left: 16px; color: rgba(23,22,43,.4); font-size: .66rem; font-weight: 600; letter-spacing: .12em; }
.mosaic-item-1 { grid-column: span 7; grid-row: span 7; }
.mosaic-item-2 { grid-column: span 5; grid-row: span 5; }
.mosaic-item-3 { grid-column: span 5; grid-row: span 6; }
.mosaic-item-4 { grid-column: span 6; grid-row: span 7; }
.mosaic-item-5 { grid-column: span 6; grid-row: span 7; }
.project-videos { padding: 0 clamp(24px,6vw,95px) 130px; }
.media-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 55px; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.media-heading .project-kicker { margin: 0 0 7px; }
.media-heading h2 { font-size: clamp(2.8rem,5vw,5.5rem); }
.video-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 24px; }
.video-grid figure { margin: 0; }
.video-grid video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; background: var(--ink); box-shadow: 0 14px 35px rgba(23,22,43,.12); }
.video-grid figcaption { padding-top: 13px; color: var(--sage-dark); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.project-role { display: grid; grid-template-columns: .7fr 1.3fr; gap: 9vw; align-items: start; padding: 130px clamp(24px,9vw,150px); color: white; background: #302d66; }
.project-role h2 { font-size: clamp(2.8rem,5vw,5.3rem); }
.project-role .project-kicker { color: #c7c1ff; }
.project-role-copy > p { margin: 0; color: rgba(255,255,255,.75); font-size: 1.03rem; line-height: 1.82; }
.role-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.role-tags span { padding: 9px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; color: rgba(255,255,255,.82); font-size: .72rem; }
.project-pagination { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); color: white; background: var(--blue); }
.project-page-link { min-height: 190px; display: flex; flex-direction: column; justify-content: center; padding: 42px clamp(24px,6vw,90px); transition: background .25s; }
.project-page-link + .project-page-link { border-left: 1px solid rgba(255,255,255,.3); }
.project-page-link > span { margin-bottom: 13px; color: rgba(255,255,255,.72); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.project-page-link strong { font-family: "Playfair Display",serif; font-size: clamp(1.45rem,2.5vw,2.65rem); line-height: 1.05; }
.project-next { align-items: flex-end; text-align: right; }
.project-page-link:hover { background: rgba(23,22,43,.16); }
.error-project { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 30px; }

.dm-intro { padding: 130px clamp(24px,13vw,220px); text-align: center; background: var(--cream); }
.dm-intro h2 { max-width: 1000px; margin: 0 auto 38px; font-size: clamp(3rem,6vw,6.2rem); }
.dm-intro > p:last-child { max-width: 820px; margin: auto; color: rgba(23,22,43,.7); font-size: 1.08rem; line-height: 1.85; }
.dm-chapter { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: clamp(45px,7vw,120px); align-items: center; padding: 120px clamp(24px,6vw,95px); }
.dm-chapter-dark, .dm-chapter-endings { grid-template-columns: minmax(320px,.75fr) minmax(0,1.25fr); }
.dm-chapter-light { background: #e9e5ff; }
.dm-chapter-dark { color: white; background: var(--ink); }
.dm-chapter-monsters { background: #f8f5ff; }
.dm-chapter-endings { color: white; background: #302d66; }
.dm-copy h2 { margin-bottom: 30px; font-size: clamp(2.8rem,5vw,5.4rem); }
.dm-copy p:not(.project-kicker) { margin: 0; max-width: 660px; color: rgba(23,22,43,.7); font-size: 1.02rem; line-height: 1.82; }
.dm-copy p + p { margin-top: 18px; }
.dm-chapter-dark .dm-copy p:not(.project-kicker), .dm-chapter-endings .dm-copy p:not(.project-kicker) { color: rgba(255,255,255,.72); }
.dm-chapter-dark .project-kicker, .dm-chapter-endings .project-kicker { color: #c7c1ff; }
.dm-media { position: relative; }
.dm-media img { position: relative; z-index: 1; width: 100%; max-height: 680px; display: block; object-fit: contain; }
.dm-media::after { content: ""; position: absolute; inset: 8% -3% -5% 8%; border-radius: 45% 20% 35% 15%; background: rgba(110,141,255,.18); }
.dm-chapter-dark .dm-media::after { background: rgba(214,79,157,.18); }
.dm-number { position: absolute; z-index: 2; top: -30px; left: -18px; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: white; background: var(--coral); font-family: "Playfair Display",serif; font-size: 1.25rem; box-shadow: 0 12px 25px rgba(23,22,43,.22); }
.dm-chapter-monsters .dm-media { padding: 40px 0; border-radius: 28px; background: var(--ink); }
.dm-chapter-endings .dm-media img { transform: rotate(1.5deg); }

.rag-intro { padding: 130px clamp(24px,13vw,220px); text-align: center; background: var(--cream); }
.rag-intro h2 { margin: 0 auto 38px; font-size: clamp(3rem,6vw,6.2rem); }
.rag-intro > p:last-child { max-width: 900px; margin: auto; color: rgba(23,22,43,.7); font-size: 1.08rem; line-height: 1.85; }
.rag-chapter { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); gap: clamp(55px,8vw,130px); align-items: center; padding: 120px clamp(24px,6vw,95px); }
.rag-copy { position: relative; }
.rag-copy h2, .rag-role h2 { margin-bottom: 30px; font-size: clamp(2.8rem,5vw,5.3rem); }
.rag-copy > p:not(.project-kicker), .rag-role > div:last-child > p { max-width: 680px; color: rgba(23,22,43,.7); font-size: 1.02rem; line-height: 1.82; }
.rag-copy > p + p { margin-top: 18px; }
.rag-number { position: absolute; top: -62px; right: 0; color: rgba(23,22,43,.1); font-family: "Playfair Display",serif; font-size: 5rem; }
.rag-concept { background: #edf8f6; }
.rag-concept-visual { position: relative; min-height: 540px; }
.rag-concept-visual img { position: absolute; display: block; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(23,22,43,.11)); }
.rag-roadmap { width: 90%; left: 0; top: 8%; padding: 22px; background: white; transform: rotate(-1.5deg); }
.rag-module { width: 27%; max-height: 430px; right: 0; bottom: 0; padding: 12px; background: white; transform: rotate(2deg); }
.rag-learning { grid-template-columns: minmax(310px,.65fr) minmax(0,1.35fr); color: white; background: var(--ink); }
.rag-learning .rag-copy > p:not(.project-kicker) { color: rgba(255,255,255,.72); }
.rag-learning .project-kicker { color: #6fd7ce; }
.rag-learning .rag-number { color: rgba(255,255,255,.1); }
.rag-task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.rag-task-grid img { width: 100%; height: 290px; display: block; object-fit: contain; padding: 10px; border-radius: 10px; background: white; }
.rag-ui { background: #f7f4ee; }
.rag-ui-visual { position: relative; min-height: 650px; }
.rag-ui-visual img:first-child { width: 87%; position: absolute; left: 0; top: 0; box-shadow: 0 22px 50px rgba(23,22,43,.12); }
.rag-ui-visual img:last-child { width: 27%; position: absolute; right: 0; bottom: 0; padding: 8px; background: white; box-shadow: 0 18px 40px rgba(23,22,43,.15); transform: rotate(1.5deg); }
.rag-role { display: grid; grid-template-columns: .7fr 1.3fr; gap: 9vw; align-items: start; padding: 130px clamp(24px,9vw,150px); color: white; background: #302d66; }
.rag-role .project-kicker { color: #b8fff7; }
.rag-role > div:last-child > p { margin-top: 0; color: rgba(255,255,255,.75); }
.prototype-link { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 45px; padding: 24px 30px; border-radius: 12px; color: var(--ink); background: #6fd7ce; font-weight: 600; transition: transform .25s, background .25s; }
.prototype-link strong { font-size: 1.8rem; }
.prototype-link:hover { background: white; transform: translateY(-4px); }
.ashen-feature { padding: 130px clamp(24px,9vw,150px) 150px; background: #f7f4ee; }
.ashen-copy { display: grid; grid-template-columns: .72fr 1.28fr; column-gap: 9vw; max-width: 1180px; margin: 0 auto 90px; }
.ashen-copy .project-kicker, .ashen-copy h2 { grid-column: 1; }
.ashen-copy h2 { grid-row: 2 / span 3; font-size: clamp(3rem,5.5vw,5.8rem); }
.ashen-copy > p:not(.project-kicker) { grid-column: 2; margin: 0 0 18px; color: rgba(23,22,43,.72); font-size: 1.03rem; line-height: 1.82; }
.ashen-video-wrap { max-width: 1180px; margin: auto; }
.ashen-video-wrap > span { display: block; margin-bottom: 14px; color: var(--sage-dark); font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.ashen-video-wrap video { width: 100%; max-height: 78vh; display: block; background: var(--ink); box-shadow: 0 24px 65px rgba(23,22,43,.18); }
.project-hero-motion { grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); }
.project-hero-motion h1 em { color: #dfb9ff; }
.project-hero-motion .hero-project-image { width: 100%; height: auto; max-width: 780px; max-height: 58vh; padding: 8px; border-bottom-width: 34px; }
.motion-intro { padding: 130px clamp(24px,13vw,220px); text-align: center; background: var(--cream); }
.motion-intro h2 { margin: 0 auto 38px; font-size: clamp(3rem,6vw,6.2rem); }
.motion-intro > p:last-child { max-width: 820px; margin: auto; color: rgba(23,22,43,.7); font-size: 1.08rem; line-height: 1.85; }
.motion-project { display: grid; grid-template-columns: minmax(320px,.75fr) minmax(0,1.25fr); gap: clamp(55px,8vw,130px); align-items: center; padding: 120px clamp(24px,7vw,115px); }
.motion-copy { position: relative; }
.motion-copy h2, .motion-final h2 { margin-bottom: 32px; font-size: clamp(2.8rem,5vw,5.3rem); }
.motion-copy > p:not(.project-kicker) { color: rgba(23,22,43,.7); font-size: 1.02rem; line-height: 1.82; }
.motion-number { position: absolute; top: -65px; right: 0; color: rgba(23,22,43,.09); font-family: "Playfair Display",serif; font-size: 5rem; }
.motion-stop { color: white; background: var(--ink); }
.motion-stop .motion-copy > p:not(.project-kicker) { color: rgba(255,255,255,.72); }
.motion-stop .project-kicker { color: #dfb9ff; }
.motion-stop .motion-number { color: rgba(255,255,255,.1); }
.motion-video video, .motion-final video { width: 100%; max-height: 76vh; display: block; background: #090911; box-shadow: 0 24px 65px rgba(0,0,0,.28); }
.motion-video > span, .motion-board > span { display: block; margin-top: 14px; color: rgba(255,255,255,.55); font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.motion-title { grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); background: #f7f4ee; }
.motion-board img { width: 100%; display: block; box-shadow: 0 22px 55px rgba(23,22,43,.13); }
.motion-board > span { color: rgba(23,22,43,.5); }
.motion-final { display: grid; grid-template-columns: .55fr 1.45fr; gap: 7vw; align-items: center; padding: 120px clamp(24px,7vw,115px) 150px; color: white; background: #302d66; }
.motion-final .project-kicker { color: #dfb9ff; }
.project-hero-3d h1 em { color: #ffcb8b; }
.project-hero-3d .hero-project-image { width: 100%; height: auto; max-height: 59vh; border-bottom-width: 38px; }
.three-intro { padding: 130px clamp(24px,13vw,220px); text-align: center; background: var(--cream); }
.three-intro h2 { margin: 0 auto 38px; font-size: clamp(3rem,6vw,6.2rem); }
.three-intro > p:last-child { max-width: 820px; margin: auto; color: rgba(23,22,43,.7); font-size: 1.08rem; line-height: 1.85; }
.three-project { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: clamp(55px,8vw,130px); align-items: center; padding: 120px clamp(24px,7vw,115px); }
.three-image img { width: 100%; display: block; box-shadow: 0 24px 60px rgba(23,22,43,.15); }
.three-copy { position: relative; }
.three-copy > span, .three-guitar-heading > span { position: absolute; top: -65px; right: 0; color: rgba(23,22,43,.1); font-family: "Playfair Display",serif; font-size: 5rem; }
.three-copy h2, .three-guitar-heading h2 { margin-bottom: 30px; font-size: clamp(2.8rem,5vw,5.3rem); }
.three-copy > p:not(.project-kicker), .three-guitar-heading > p:not(.project-kicker) { color: rgba(23,22,43,.7); font-size: 1.02rem; line-height: 1.82; }
.three-donut { background: #f5ede2; }
.three-intro-video { grid-template-columns: minmax(320px,.75fr) minmax(0,1.25fr); color: white; background: var(--ink); }
.three-intro-video .three-copy > p:not(.project-kicker) { color: rgba(255,255,255,.72); }
.three-intro-video .project-kicker { color: #ffcb8b; }
.three-intro-video .three-copy > span { color: rgba(255,255,255,.1); }
.three-video video { width: 100%; max-height: 74vh; display: block; background: #08080e; box-shadow: 0 24px 65px rgba(0,0,0,.3); }
.three-video a { display: inline-block; margin-top: 14px; color: #ffcb8b; font-size: .78rem; font-weight: 600; letter-spacing: .08em; }
.three-guitar { padding: 130px clamp(24px,7vw,115px) 150px; background: #f7f4ee; }
.three-guitar-heading { position: relative; display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; max-width: 1180px; margin: 0 auto 70px; }
.three-guitar-heading .project-kicker, .three-guitar-heading h2 { grid-column: 1; }
.three-guitar-heading h2 { grid-row: 2; }
.three-guitar-heading > p:not(.project-kicker) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.three-guitar-media { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; max-width: 1180px; margin: auto; }
.three-guitar-media figure { margin: 0; }
.three-guitar-media img, .three-guitar-media video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: contain; background: white; box-shadow: 0 18px 45px rgba(23,22,43,.12); }
.three-guitar-media figcaption { margin-top: 12px; color: rgba(23,22,43,.52); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) {
  .project-hero { grid-template-columns: 1fr; padding-top: 130px; }
  .hero-project-image { width: 86vw; height: 55vh; justify-self: center; }
  .hero-polaroid { width: min(86vw,430px); justify-self: center; transform: rotate(.6deg); }
  .hero-polaroid figcaption { height: 62px; }
  .project-hero-mosaic h1 { font-size: clamp(3.35rem,17vw,5.4rem); }
  .project-meta { grid-template-columns: 1fr; }
  .project-story { grid-template-columns: 1fr; padding-block: 90px; }
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery figure:first-child { grid-column: auto; min-height: 360px; }
  .project-gallery figure { min-height: 300px; }
  .project-carousel { padding-inline: 18px; padding-bottom: 100px; }
  .carousel-heading { align-items: end; }
  .carousel-slide { height: min(68vh,620px); min-height: 420px; padding: 18px; }
  .carousel-button { width: 44px; height: 44px; }
  .carousel-prev { left: 10px; }
  .carousel-next { right: 10px; }
  .project-mosaic { padding: 80px 16px 100px; }
  .mosaic-heading { display: block; margin-inline: 8px; }
  .mosaic-heading > p { margin-top: 14px; }
  .mosaic-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .mosaic-item, .mosaic-item-1, .mosaic-item-2, .mosaic-item-3, .mosaic-item-4, .mosaic-item-5 { grid-column: 1; grid-row: auto; min-height: 360px; padding: 24px; }
  .project-videos { padding-bottom: 90px; }
  .media-heading { display: block; }
  .video-grid { grid-template-columns: 1fr; }
  .project-role { grid-template-columns: 1fr; padding-block: 90px; }
  .dm-intro { padding-block: 90px; }
  .dm-chapter, .dm-chapter-dark, .dm-chapter-endings { grid-template-columns: 1fr; padding-block: 90px; }
  .dm-chapter-dark .dm-copy, .dm-chapter-endings .dm-copy { order: 2; }
  .dm-number { top: -22px; left: -4px; width: 56px; height: 56px; }
  .project-hero-rag { grid-template-columns: 1fr; }
  .project-hero-rag h1 { font-size: clamp(3.1rem,14vw,5rem); }
  .project-hero-rag .hero-project-image { width: 92vw; height: auto; }
  .rag-intro { padding-block: 90px; }
  .rag-chapter, .rag-learning, .rag-role { grid-template-columns: 1fr; padding-block: 90px; }
  .rag-concept-visual { min-height: 390px; }
  .rag-roadmap { width: 94%; }
  .rag-module { width: 30%; max-height: 290px; }
  .rag-learning .rag-copy { order: 1; }
  .rag-task-grid { order: 2; grid-template-columns: 1fr; }
  .rag-task-grid img { height: auto; max-height: 520px; }
  .rag-ui-visual { min-height: 430px; }
  .rag-ui-visual img:first-child { width: 94%; }
  .rag-ui-visual img:last-child { width: 31%; }
  .rag-number { top: -48px; font-size: 4rem; }
  .ashen-feature { padding-block: 90px 100px; }
  .ashen-copy { grid-template-columns: 1fr; margin-bottom: 60px; }
  .ashen-copy .project-kicker, .ashen-copy h2, .ashen-copy > p:not(.project-kicker) { grid-column: 1; grid-row: auto; }
  .ashen-copy h2 { margin-bottom: 36px; }
  .project-hero-motion { grid-template-columns: 1fr; }
  .project-hero-motion .hero-project-image { width: 92vw; height: auto; }
  .motion-intro { padding-block: 90px; }
  .motion-project, .motion-title, .motion-final { grid-template-columns: 1fr; padding-block: 90px; }
  .motion-stop .motion-copy { order: 1; }
  .motion-stop .motion-video { order: 2; }
  .motion-number { top: -48px; font-size: 4rem; }
  .three-intro { padding-block: 90px; }
  .three-project, .three-intro-video { grid-template-columns: 1fr; padding-block: 90px; }
  .three-intro-video .three-copy { order: 1; }
  .three-intro-video .three-video { order: 2; }
  .three-copy > span, .three-guitar-heading > span { top: -48px; font-size: 4rem; }
  .three-guitar { padding-block: 90px 100px; }
  .three-guitar-heading { grid-template-columns: 1fr; }
  .three-guitar-heading .project-kicker, .three-guitar-heading h2, .three-guitar-heading > p:not(.project-kicker) { grid-column: 1; grid-row: auto; }
  .three-guitar-media { grid-template-columns: 1fr; }
  .project-pagination { grid-template-columns: 1fr; }
  .project-page-link { min-height: 145px; padding-block: 30px; }
  .project-page-link + .project-page-link { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .project-hero { grid-template-columns: minmax(0,1fr) minmax(260px,.72fr); gap: 38px; padding-inline: clamp(32px,5vw,70px); }
  .project-hero-mosaic h1 { font-size: clamp(3.6rem,7vw,5.8rem); }
  .hero-project-image { max-width: 440px; }
}