/* =========================
Final Project Homepage ONLY
Loco Pik final project page
========================= */

body.page-final {
background: #fff;
color: #111;
}

body.page-final .content {
width: 100%;
max-width: none;
padding: 0;
}

body.page-final img {
user-select: none;
}

/* =========================
Final Hero
Text first, 8 Loco Pik images below
Natural scroll movement
========================= */

body.page-final .loco-hero.planet-hero {
position: relative;
width: 100%;
min-height: 150vh;
padding: 0;
overflow: hidden;
background: #fff;
background-image: none;
color: #111;
text-align: center;
}

body.page-final .loco-hero.planet-hero::before {
display: none;
}

body.page-final .planet-hero-stage {
position: relative;
width: 100%;
min-height: 150vh;
background: #fff;
overflow: hidden;
}

body.page-final .planet-hero-text {
position: relative;
z-index: 20;
min-height: 76vh;
min-height: 76svh;

display: flex;
align-items: center;
justify-content: center;

padding: calc(var(--nav-h, 72px) + 64px) 28px 40px;
background: transparent;
}

body.page-final .planet-hero-copy {
width: 100%;
max-width: 980px;
margin: 0 auto;
color: #111;
background: transparent;
animation: finalHeroTextEnter 1s cubic-bezier(0.19, 1, 0.22, 1) both;
}

body.page-final .planet-hero-copy .loco-eyebrow {
margin: 0 0 18px;
color: #111;
background: transparent;
opacity: 1;
font-size: 15px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.02em;
}

body.page-final .planet-hero-copy h1 {
margin: 0;
background: transparent;
font-size: clamp(72px, 13vw, 180px);
line-height: 0.88;
letter-spacing: -0.075em;
font-weight: 800;
}

body.page-final .planet-hero-copy h2 {
margin: 26px auto 0;
max-width: 900px;
background: transparent;
font-size: clamp(32px, 5vw, 72px);
line-height: 1.04;
letter-spacing: -0.055em;
font-weight: 800;
}

body.page-final .planet-hero-copy p {
margin: 30px auto 0;
max-width: 720px;
background: transparent;
font-size: clamp(18px, 2vw, 25px);
line-height: 1.45;
font-weight: 400;
color: #222;
}

body.page-final .planet-hero-world {
position: relative;
z-index: 5;
min-height: 72vh;

display: flex;
align-items: flex-start;
justify-content: center;

padding: 0 28px 120px;
margin-top: -8vh;
background: transparent;
overflow: visible;
}

body.page-final .planet-creatures {
position: relative;
width: min(1540px, 96vw);
height: clamp(640px, 74vh, 860px);
margin: 0 auto;
pointer-events: none;
overflow: visible;
transform: translate3d(0, 0, 0);
opacity: 1;
will-change: transform;
}

body.page-final .planet-pik {
position: absolute;
display: block;
height: auto;
object-fit: contain;
transform-origin: center bottom;
filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.08));
}

/* Back row */
body.page-final .hero-pik-04 {
width: clamp(250px, 24vw, 430px);
left: 20%;
bottom: 42%;
z-index: 1;
}

body.page-final .hero-pik-03 {
width: clamp(260px, 25vw, 450px);
left: 41%;
bottom: 34%;
z-index: 2;
}

body.page-final .hero-pik-07 {
width: clamp(250px, 24vw, 430px);
right: 18%;
bottom: 43%;
z-index: 1;
}

body.page-final .hero-pik-08 {
width: clamp(250px, 18vw, 430px);
right: -2%;
bottom: 21%;
z-index: 3;
}

/* Middle / front row */
body.page-final .hero-pik-02 {
width: clamp(270px, 27vw, 480px);
left: 0%;
bottom: 20%;
z-index: 4;
}

body.page-final .hero-pik-05 {
width: clamp(250px, 25vw, 450px);
left: 15%;
bottom: 0%;
z-index: 7;
}

/* Center red Lychee Pik */
body.page-final .hero-pik-01 {
width: clamp(230px, 22vw, 400px);
left: 41%;
bottom: 0%;
z-index: 10;
}

body.page-final .hero-pik-06 {
width: clamp(250px, 24vw, 430px);
right: 9%;
bottom: 0%;
z-index: 8;
}

/* Subtle floating motion */
body.page-final .hero-pik-01,
body.page-final .hero-pik-03,
body.page-final .hero-pik-05,
body.page-final .hero-pik-07 {
animation: heroPikFloatA 5.5s ease-in-out infinite alternate;
}

body.page-final .hero-pik-02,
body.page-final .hero-pik-04,
body.page-final .hero-pik-06,
body.page-final .hero-pik-08 {
animation: heroPikFloatB 6.5s ease-in-out infinite alternate;
}

@keyframes heroPikFloatA {
from {
transform: translate3d(0, 0, 0) rotate(-0.6deg);
}

to {
transform: translate3d(0, -16px, 0) rotate(0.6deg);
}
}

@keyframes heroPikFloatB {
from {
transform: translate3d(0, -8px, 0) rotate(0.5deg);
}

to {
transform: translate3d(0, 10px, 0) rotate(-0.5deg);
}
}

@keyframes finalHeroTextEnter {
from {
opacity: 0;
transform: translate3d(0, 28px, 0);
}

to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

/* =========================
Shared final sections
========================= */

body.page-final .loco-section {
width: 100%;
padding: 120px 28px;
}

body.page-final .loco-section-inner {
max-width: 1120px;
margin: 0 auto;
}

body.page-final .loco-narrow {
max-width: 880px;
margin: 0 auto;
text-align: center;
}

body.page-final .loco-eyebrow {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.02em;
opacity: 0.92;
}

body.page-final .loco-eyebrow.dark {
color: #ff5f95;
opacity: 1;
}

body.page-final .loco-section h2,
body.page-final .making-head h2,
body.page-final .doc-links h2 {
margin: 0;
font-size: clamp(42px, 6vw, 88px);
line-height: 1.04;
letter-spacing: -0.055em;
font-weight: 650;
}

body.page-final .loco-section p,
body.page-final .making-head p,
body.page-final .doc-links p {
margin: 26px auto 0;
max-width: 760px;
font-size: clamp(18px, 2vw, 25px);
line-height: 1.55;
font-weight: 400;
color: #333;
}

/* =========================
Meet section
========================= */

body.page-final .meet-loco {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100svh;

display: flex;
align-items: center;
justify-content: center;

overflow: hidden;
background: #fff;
color: #111;
padding: 0 28px;
}

body.page-final .meet-bg {
position: absolute;
inset: 0;
background-image: url("./images/final_project/final_locopik_world_bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: none;
}

body.page-final .meet-loco::after {
display: none;
}

body.page-final .meet-content {
position: relative;
z-index: 2;
max-width: 620px;
margin: 0 auto;
text-align: center;
color: #111;
}

body.page-final .meet-content h2 {
margin: 0;
color: #111;
font-size: clamp(42px, 6vw, 82px);
line-height: 1.02;
letter-spacing: -0.055em;
font-weight: 800;
}

body.page-final .meet-content p {
margin: 24px auto 0;
max-width: 560px;
color: #333;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.45;
font-weight: 400;
}

/* =========================
Video
========================= */

body.page-final .loco-video-section {
background: #fff;
padding-top: 110px;
}

body.page-final .loco-video-wrap {
max-width: 1080px;
margin: 56px auto 0;
padding: 0 28px;
}

body.page-final .loco-video-wrap video {
width: 100%;
display: block;
border-radius: 28px;
background: #000;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06);
}

/* =========================
Design / Take a closer look
========================= */

body.page-final .closer-look {
background: #fff;
}

body.page-final .closer-inner {
max-width: 1180px;
margin: 0 auto;

display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 64px;
align-items: center;
}

body.page-final .closer-copy p {
max-width: 540px;
margin-left: 0;
margin-right: 0;
}

body.page-final .section-subtitle {
margin: 0;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 650;
}

body.page-final .loco-slogan {
display: inline-block;
margin-top: 30px;
padding: 12px 18px;
border-radius: 999px;
background: #fff0f5;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: #111;
}

/* Loco Pik appearance carousel */
body.page-final .loco-carousel {
position: relative;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}

body.page-final .loco-carousel-media {
margin: 0;
background: transparent;
border-radius: 0;
overflow: visible;
}

body.page-final .loco-carousel-media img {
width: 100%;
height: 620px;
display: block;
object-fit: contain;
border-radius: 0;
transition:
opacity 0.45s ease,
transform 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

body.page-final .loco-carousel-media img.is-changing {
opacity: 0;
transform: scale(0.985);
}

body.page-final .loco-variant-info {
text-align: center;
padding: 22px 10px 8px;
}

body.page-final .loco-variant-info h3 {
margin: 0;
font-size: clamp(24px, 2.8vw, 38px);
line-height: 1.1;
letter-spacing: -0.04em;
font-weight: 650;
}

body.page-final .loco-variant-info p {
margin: 10px auto 0;
max-width: 560px;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
color: #666;
}

body.page-final .loco-variant-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}

body.page-final .variant-dot {
width: 12px;
height: 12px;
border: none;
border-radius: 999px;
background: rgba(0, 0, 0, 0.18);
cursor: pointer;
transition:
width 0.3s ease,
background 0.3s ease,
transform 0.3s ease;
}

body.page-final .variant-dot:hover {
transform: scale(1.15);
}

body.page-final .variant-dot.active {
width: 34px;
background: #ff5f95;
}

/* =========================
Feature summary
========================= */

body.page-final .loco-power {
background: #fff;
padding-top: 120px;
padding-bottom: 140px;
}

body.page-final .power-head {
max-width: 860px;
margin: 0 auto 80px;
text-align: center;
}

body.page-final .power-head h2 {
margin: 0;
font-size: clamp(48px, 6.6vw, 96px);
line-height: 0.98;
letter-spacing: -0.065em;
font-weight: 800;
}

body.page-final .power-head p {
margin: 24px auto 0;
max-width: 720px;
font-size: clamp(18px, 1.8vw, 23px);
line-height: 1.45;
font-weight: 400;
color: #333;
}

body.page-final .power-layout {
max-width: 1180px;
margin: 0 auto;

display: grid;
grid-template-columns: 1fr 0.72fr;
gap: 54px 70px;
align-items: center;
}

body.page-final .power-main-image {
grid-column: 1 / 2;
grid-row: 1 / 4;
margin: 0;
}

body.page-final .power-main-image img {
width: 100%;
display: block;
object-fit: contain;
border-radius: 0;
}

body.page-final .power-side-image {
grid-column: 2 / 3;
margin: 24px 0;
}

body.page-final .power-side-image img {
width: 100%;
max-height: 360px;
display: block;
object-fit: contain;
border-radius: 0;
}

body.page-final .power-note {
max-width: 420px;
}

body.page-final .power-note h3 {
margin: 0;
font-size: clamp(22px, 2vw, 30px);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: 700;
}

body.page-final .power-note p {
margin: 4px 0 0;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.25;
font-weight: 400;
color: #111;
}

body.page-final .note-green h3 {
color: #0a8f22;
}

body.page-final .note-pink h3 {
color: #ff2fb3;
}

body.page-final .note-blue h3 {
color: #007aff;
}

body.page-final .note-orange h3 {
color: #ff7a00;
}

body.page-final .note-purple h3 {
color: #7b35ff;
}

body.page-final .note-teal h3 {
color: #00a99d;
}

/* =========================
Final Project Documentation
Apple-like horizontal cards
========================= */

body.page-final .making-process {
background: #fcf268;
padding: 116px 0 128px;
overflow: hidden;
}

body.page-final .making-layout {
width: 100%;
max-width: none;
margin: 0;
}

body.page-final .making-head {
max-width: 1180px;
margin: 0 auto 48px;
padding: 0 28px;
text-align: left;
}

body.page-final .making-head .loco-eyebrow {
margin: 0 0 18px;
color: #ff5f95;
font-size: 17px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.01em;
}

body.page-final .making-head h2 {
max-width: 850px;
margin: 0;
font-size: clamp(54px, 6.8vw, 94px);
line-height: 0.96;
letter-spacing: -0.075em;
font-weight: 800;
color: #1d1d1f;
}

body.page-final .making-head p {
max-width: 780px;
margin: 28px 0 0;
font-size: clamp(18px, 1.75vw, 23px);
line-height: 1.38;
font-weight: 400;
color: #333336;
}

body.page-final .process-carousel {
position: relative;
width: 100%;
}

body.page-final .process-scroll {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 370px;
gap: 24px;

overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;

padding: 0 max(28px, calc((100vw - 1180px) / 2)) 34px;
scrollbar-width: none;
}

body.page-final .process-scroll::-webkit-scrollbar {
display: none;
}

body.page-final .process-card {
position: relative;
min-height: 430px;
padding: 34px 34px 32px;
border-radius: 30px;
background: #fff;
color: #1d1d1f;
text-decoration: none;
scroll-snap-align: start;

display: flex;
flex-direction: column;
justify-content: space-between;

box-shadow: none;
overflow: hidden;
transition:
transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
box-shadow 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body.page-final .process-card:hover {
transform: scale(1.018);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08);
}

body.page-final .process-card .card-tag {
display: block;
margin: 0 0 18px;
font-size: 19px;
line-height: 1.2;
font-weight: 700;
color: #1d1d1f;
letter-spacing: -0.02em;
}

body.page-final .process-card h3 {
max-width: 300px;
margin: 0;
font-size: 32px;
line-height: 1.08;
letter-spacing: -0.055em;
font-weight: 800;
color: #1d1d1f;
}

body.page-final .process-card p {
max-width: 300px;
margin: 22px 0 0;
font-size: 19px;
line-height: 1.28;
font-weight: 400;
color: #333336;
}

body.page-final .process-card .card-plus {
position: absolute;
right: 24px;
bottom: 22px;

width: 40px;
height: 40px;
border-radius: 999px;

background: #1d1d1f;
color: #fff;

display: flex;
align-items: center;
justify-content: center;

font-size: 29px;
font-weight: 500;
line-height: 1;
}

body.page-final .process-card-function,
body.page-final .process-card-references,
body.page-final .process-card-design,
body.page-final .process-card-bom,
body.page-final .process-card-fabrication,
body.page-final .process-card-electronics,
body.page-final .process-card-programming,
body.page-final .process-card-testing {
background: #fff;
}

/* Apple-like chevron buttons */
body.page-final .process-nav {
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;

display: flex;
justify-content: flex-end;
gap: 18px;
}

body.page-final .process-nav-btn {
position: relative;

width: 48px;
height: 48px;
border: none;
border-radius: 999px;

background: rgba(232, 232, 237, 0.9);
color: transparent;

display: flex;
align-items: center;
justify-content: center;

font-size: 0;
line-height: 1;

cursor: pointer;
appearance: none;
-webkit-appearance: none;

transition:
background 0.22s ease,
opacity 0.22s ease,
transform 0.22s ease;
}

body.page-final .process-nav-btn::before {
content: "";
width: 11px;
height: 11px;

border-style: solid;
border-color: rgba(0, 0, 0, 0.56);
border-width: 0 4px 4px 0;

display: block;
}

body.page-final #processPrev::before {
transform: rotate(135deg);
margin-left: 4px;
}

body.page-final #processNext::before {
transform: rotate(-45deg);
margin-right: 4px;
}

body.page-final .process-nav-btn:hover {
background: rgba(210, 210, 215, 0.96);
transform: scale(1.04);
}

body.page-final .process-nav-btn:disabled {
background: rgba(232, 232, 237, 0.62);
cursor: default;
opacity: 1;
transform: none;
}

body.page-final .process-nav-btn:disabled::before {
border-color: rgba(0, 0, 0, 0.28);
}

body.page-final .process-nav-btn:focus-visible {
outline: 3px solid rgba(0, 122, 255, 0.45);
outline-offset: 3px;
}

/* =========================
Final Documentation links
========================= */

body.page-final .doc-links {
background: #fff;
}

body.page-final .doc-link-list {
max-width: 720px;
margin: 44px auto 0;
display: grid;
gap: 12px;
}

body.page-final .doc-link-list a {
display: flex;
justify-content: space-between;
align-items: center;

padding: 22px 26px;
border-radius: 20px;

background: #f5f5f7;
color: #111;
text-decoration: none;

font-size: 19px;
font-weight: 650;

transition:
background 0.25s ease,
transform 0.25s ease;
}

body.page-final .doc-link-list a:hover {
background: #ffe6ef;
transform: translateX(4px);
}

/* =========================
Optional normal documentation sections
========================= */

body.page-final .final-normal-section {
max-width: 720px;
margin: 0 auto;
padding: 90px 0;
text-align: left;
}

body.page-final .final-normal-section .about-intro,
body.page-final .final-normal-section p,
body.page-final .final-normal-section h2,
body.page-final .final-normal-section h3,
body.page-final .final-normal-section table {
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

body.page-final .final-normal-section > img,
body.page-final .final-normal-section img.quad {
width: 100%;
max-width: 720px;
height: auto;
display: block;
margin: 28px auto;
object-fit: contain;
border-radius: 18px;
}

body.page-final .content figure.article-media {
max-width: 720px;
margin: 28px auto 40px;
}

body.page-final .content figure.article-media img {
width: 100%;
max-width: 720px;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
border-radius: 18px;
}

body.page-final .content figure.article-media figcaption {
max-width: 720px;
margin: 10px auto 0;
font-size: 13px;
line-height: 1.5;
color: #6e6e73;
}

/* =========================
Responsive final page
========================= */

@media (max-width: 900px) {
body.page-final .loco-section {
padding: 88px 22px;
}

body.page-final .loco-hero.planet-hero {
min-height: 145vh;
}

body.page-final .planet-hero-stage {
min-height: 145vh;
}

body.page-final .planet-hero-text {
min-height: 74vh;
min-height: 74svh;
padding: calc(var(--nav-h, 72px) + 52px) 18px 28px;
}

body.page-final .planet-hero-copy h1 {
font-size: clamp(64px, 18vw, 110px);
}

body.page-final .planet-hero-copy h2 {
font-size: clamp(34px, 10vw, 58px);
}

body.page-final .planet-hero-copy p {
max-width: 420px;
font-size: 17px;
line-height: 1.42;
}

body.page-final .planet-hero-world {
min-height: 66vh;
padding: 0 0 90px;
margin-top: -4vh;
}

body.page-final .planet-creatures {
width: 132vw;
height: 56vh;
}

body.page-final .hero-pik-04 {
width: 34vw;
left: 17%;
bottom: 43%;
}

body.page-final .hero-pik-03 {
width: 35vw;
left: 40%;
bottom: 35%;
}

body.page-final .hero-pik-07 {
width: 34vw;
right: 16%;
bottom: 43%;
}

body.page-final .hero-pik-08 {
width: 26vw;
right: -1%;
bottom: 22%;
}

body.page-final .hero-pik-02 {
width: 38vw;
left: -1%;
bottom: 20%;
}

body.page-final .hero-pik-05 {
width: 36vw;
left: 13%;
bottom: 0;
}

body.page-final .hero-pik-01 {
width: 32vw;
left: 41%;
bottom: 0;
}

body.page-final .hero-pik-06 {
width: 36vw;
right: 7%;
bottom: 0;
}

body.page-final .loco-section h2,
body.page-final .making-head h2,
body.page-final .doc-links h2 {
font-size: clamp(38px, 10vw, 58px);
}

body.page-final .loco-section p,
body.page-final .making-head p,
body.page-final .doc-links p {
font-size: 18px;
line-height: 1.55;
}

body.page-final .meet-loco {
min-height: 72vh;
padding: 96px 22px;
}

body.page-final .meet-bg {
background-size: cover;
background-position: center;
}

body.page-final .meet-content h2 {
font-size: clamp(36px, 10vw, 58px);
}

body.page-final .meet-content p {
font-size: 18px;
line-height: 1.5;
}

body.page-final .loco-video-wrap {
padding: 0;
margin-top: 34px;
}

body.page-final .loco-video-wrap video {
border-radius: 18px;
}

body.page-final .closer-inner {
grid-template-columns: 1fr;
gap: 36px;
}

body.page-final .closer-copy p {
margin-left: auto;
margin-right: auto;
}

body.page-final .section-subtitle {
font-size: clamp(24px, 7vw, 38px);
text-align: center;
}

body.page-final .loco-carousel-media img {
height: 380px;
}

body.page-final .loco-power {
padding-top: 88px;
padding-bottom: 96px;
}

body.page-final .power-head {
margin-bottom: 54px;
}

body.page-final .power-head h2 {
font-size: clamp(42px, 11vw, 64px);
}

body.page-final .power-layout {
grid-template-columns: 1fr;
gap: 34px;
}

body.page-final .power-main-image,
body.page-final .power-side-image {
grid-column: auto;
grid-row: auto;
}

body.page-final .power-note {
max-width: none;
}

body.page-final .power-note p {
font-size: 18px;
line-height: 1.35;
}

body.page-final .making-process {
padding: 88px 0 96px;
}

body.page-final .making-head {
margin-bottom: 34px;
padding: 0 22px;
text-align: left;
}

body.page-final .making-head h2 {
font-size: clamp(42px, 11vw, 64px);
}

body.page-final .making-head p {
margin-top: 20px;
font-size: 18px;
line-height: 1.45;
}

body.page-final .process-scroll {
grid-auto-columns: 310px;
gap: 16px;
padding: 0 22px 26px;
}

body.page-final .process-card {
min-height: 390px;
padding: 28px;
border-radius: 28px;
}

body.page-final .process-card .card-tag {
font-size: 17px;
}

body.page-final .process-card h3 {
font-size: 29px;
}

body.page-final .process-card p {
font-size: 17px;
line-height: 1.32;
}

body.page-final .process-nav {
padding: 0 22px;
justify-content: flex-end;
gap: 14px;
}

body.page-final .process-nav-btn {
width: 44px;
height: 44px;
}

body.page-final .process-nav-btn::before {
width: 10px;
height: 10px;
border-width: 0 3.5px 3.5px 0;
}
}


/* =========================
   Process Grid Fallback
   For the older final-project.html structure
   ========================= */

body.page-final .process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

body.page-final .process-grid .process-card {
  position: relative;
  min-height: 320px;
  padding: 30px;
  border: none;
  border-radius: 30px;
  background: #fff;
  color: #111;
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

body.page-final .process-grid .process-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}

body.page-final .process-grid .process-card .card-tag {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: #ff5f95;
  letter-spacing: 0.02em;
}

body.page-final .process-grid .process-card h3 {
  margin: 34px 0 14px;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 650;
}

body.page-final .process-grid .process-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: #555;
}

body.page-final .process-grid .process-card .arrow {
  position: absolute;
  right: 24px;
  bottom: 20px;

  width: 34px;
  height: 34px;
  border-radius: 50%;

  background: #111;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* =========================
   Design Concept Modal
   Apple-like pop-up card
   ========================= */

body.page-final .design-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 36px 20px;
}

body.page-final .design-modal.is-open {
  display: flex;
}

body.page-final .design-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 247, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.page-final .design-modal-panel {
  position: relative;
  z-index: 2;

  width: min(980px, 92vw);
  max-height: 88vh;
  overflow: auto;

  border-radius: 34px;
  background: #fff;
  color: #1d1d1f;

  box-shadow:
    0 42px 120px rgba(0, 0, 0, 0.22),
    0 12px 42px rgba(0, 0, 0, 0.12);
}

body.page-final .design-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;

  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;

  background: rgba(245, 245, 247, 0.95);
  color: #1d1d1f;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

body.page-final .design-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #f5f5f7;
}

body.page-final .design-modal-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f5f7;
}

body.page-final .design-modal-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.page-final .design-modal-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 62px 36px 74px;
}

body.page-final .design-modal-kicker {
  margin: 0 0 18px;
  color: #ff5f95;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}

body.page-final .design-modal-content h2 {
  margin: 0;
  color: #1d1d1f;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.06em;
  font-weight: 800;
}

body.page-final .design-modal-content p {
  margin: 24px 0 0;
  max-width: 620px;
  color: #333336;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
}

@media (max-width: 900px) {
  body.page-final .process-grid {
    grid-template-columns: 1fr;
    padding: 0 22px;
  }

  body.page-final .process-grid .process-card {
    min-height: 280px;
  }

  body.page-final .design-modal {
    padding: 18px 12px;
  }

  body.page-final .design-modal-panel {
    width: 94vw;
    max-height: 90vh;
    border-radius: 28px;
  }

  body.page-final .design-modal-grid {
    grid-template-columns: 1fr;
  }

  body.page-final .design-modal-media {
    aspect-ratio: 16 / 10;
  }

  body.page-final .design-modal-content {
    padding: 44px 24px 56px;
  }

  body.page-final .design-modal-close {
    width: 38px;
    height: 38px;
    font-size: 27px;
  }
}
/* =========================
Process Modal Image Layout Fix
Put images below text, one by one
========================= */

body.page-final .process-modal-panel {
display: flex;
flex-direction: column;
}

/* Text first */
body.page-final .process-modal-content {
order: 1;
padding: 62px 36px 36px;
}

/* Images after text */
body.page-final .process-modal-gallery {
order: 2;
width: min(720px, calc(100% - 72px));
margin: 0 auto 72px;
padding: 0;

display: grid;
grid-template-columns: 1fr;
gap: 34px;

background: transparent;
}

/* Override old 3-column / 4-column layout */
body.page-final .process-modal-gallery.three-images,
body.page-final .process-modal-gallery.four-images {
grid-template-columns: 1fr;
}

body.page-final .process-modal-gallery figure {
position: relative;
margin: 0;
aspect-ratio: auto;
overflow: visible;
background: transparent;
}

body.page-final .process-modal-gallery img {
width: 100%;
height: auto;
display: block;

object-fit: contain;
border-radius: 24px;
background: #f5f5f7;
}

/* Caption becomes normal text under each image */
body.page-final .process-modal-gallery figcaption {
position: static;
display: block;

margin: 12px 0 0;
padding: 0;

background: transparent;
color: #6e6e73;

font-size: 14px;
line-height: 1.35;
font-weight: 600;

border-radius: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

/* Mobile */
@media (max-width: 900px) {
body.page-final .process-modal-content {
padding: 44px 24px 30px;
}

body.page-final .process-modal-gallery {
width: calc(100% - 48px);
margin-bottom: 54px;
gap: 28px;
}

body.page-final .process-modal-gallery img {
border-radius: 18px;
}
}

/* =========================
Final Project Homepage ONLY
Loco Pik final project page
========================= */

body.page-final {
background: #fff;
color: #111;
}

body.page-final .content {
width: 100%;
max-width: none;
padding: 0;
}

body.page-final img {
user-select: none;
}

/* =========================
Final Hero
Text first, 8 Loco Pik images below
Natural scroll movement
========================= */

body.page-final .loco-hero.planet-hero {
position: relative;
width: 100%;
min-height: 150vh;
padding: 0;
overflow: hidden;
background: #fff;
background-image: none;
color: #111;
text-align: center;
}

body.page-final .loco-hero.planet-hero::before {
display: none;
}

body.page-final .planet-hero-stage {
position: relative;
width: 100%;
min-height: 150vh;
background: #fff;
overflow: hidden;
}

body.page-final .planet-hero-text {
position: relative;
z-index: 20;
min-height: 76vh;
min-height: 76svh;

display: flex;
align-items: center;
justify-content: center;

padding: calc(var(--nav-h, 72px) + 64px) 28px 40px;
background: transparent;
}

body.page-final .planet-hero-copy {
width: 100%;
max-width: 980px;
margin: 0 auto;
color: #111;
background: transparent;
animation: finalHeroTextEnter 1s cubic-bezier(0.19, 1, 0.22, 1) both;
}

body.page-final .planet-hero-copy .loco-eyebrow {
margin: 0 0 18px;
color: #111;
background: transparent;
opacity: 1;
font-size: 15px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.02em;
}

body.page-final .planet-hero-copy h1 {
margin: 0;
background: transparent;
font-size: clamp(72px, 13vw, 180px);
line-height: 0.88;
letter-spacing: -0.075em;
font-weight: 800;
}

body.page-final .planet-hero-copy h2 {
margin: 26px auto 0;
max-width: 900px;
background: transparent;
font-size: clamp(32px, 5vw, 72px);
line-height: 1.04;
letter-spacing: -0.055em;
font-weight: 800;
}

body.page-final .planet-hero-copy p {
margin: 30px auto 0;
max-width: 720px;
background: transparent;
font-size: clamp(18px, 2vw, 25px);
line-height: 1.45;
font-weight: 400;
color: #222;
}

body.page-final .planet-hero-world {
position: relative;
z-index: 5;
min-height: 72vh;

display: flex;
align-items: flex-start;
justify-content: center;

padding: 0 28px 120px;
margin-top: -8vh;
background: transparent;
overflow: visible;
}

body.page-final .planet-creatures {
position: relative;
width: min(1540px, 96vw);
height: clamp(640px, 74vh, 860px);
margin: 0 auto;
pointer-events: none;
overflow: visible;
transform: translate3d(0, 0, 0);
opacity: 1;
will-change: transform;
}

body.page-final .planet-pik {
position: absolute;
display: block;
height: auto;
object-fit: contain;
transform-origin: center bottom;
filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.08));
}

/* Back row */
body.page-final .hero-pik-04 {
width: clamp(250px, 24vw, 430px);
left: 20%;
bottom: 42%;
z-index: 1;
}

body.page-final .hero-pik-03 {
width: clamp(260px, 25vw, 450px);
left: 41%;
bottom: 34%;
z-index: 2;
}

body.page-final .hero-pik-07 {
width: clamp(250px, 24vw, 430px);
right: 18%;
bottom: 43%;
z-index: 1;
}

body.page-final .hero-pik-08 {
width: clamp(250px, 18vw, 430px);
right: -2%;
bottom: 21%;
z-index: 3;
}

/* Middle / front row */
body.page-final .hero-pik-02 {
width: clamp(270px, 27vw, 480px);
left: 0%;
bottom: 20%;
z-index: 4;
}

body.page-final .hero-pik-05 {
width: clamp(250px, 25vw, 450px);
left: 15%;
bottom: 0%;
z-index: 7;
}

/* Center red Lychee Pik */
body.page-final .hero-pik-01 {
width: clamp(230px, 22vw, 400px);
left: 41%;
bottom: 0%;
z-index: 10;
}

body.page-final .hero-pik-06 {
width: clamp(250px, 24vw, 430px);
right: 9%;
bottom: 0%;
z-index: 8;
}

/* Subtle floating motion */
body.page-final .hero-pik-01,
body.page-final .hero-pik-03,
body.page-final .hero-pik-05,
body.page-final .hero-pik-07 {
animation: heroPikFloatA 5.5s ease-in-out infinite alternate;
}

body.page-final .hero-pik-02,
body.page-final .hero-pik-04,
body.page-final .hero-pik-06,
body.page-final .hero-pik-08 {
animation: heroPikFloatB 6.5s ease-in-out infinite alternate;
}

@keyframes heroPikFloatA {
from {
transform: translate3d(0, 0, 0) rotate(-0.6deg);
}

to {
transform: translate3d(0, -16px, 0) rotate(0.6deg);
}
}

@keyframes heroPikFloatB {
from {
transform: translate3d(0, -8px, 0) rotate(0.5deg);
}

to {
transform: translate3d(0, 10px, 0) rotate(-0.5deg);
}
}

@keyframes finalHeroTextEnter {
from {
opacity: 0;
transform: translate3d(0, 28px, 0);
}

to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

/* =========================
Shared final sections
========================= */

body.page-final .loco-section {
width: 100%;
padding: 120px 28px;
}

body.page-final .loco-section-inner {
max-width: 1120px;
margin: 0 auto;
}

body.page-final .loco-narrow {
max-width: 880px;
margin: 0 auto;
text-align: center;
}

body.page-final .loco-eyebrow {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.02em;
opacity: 0.92;
}

body.page-final .loco-eyebrow.dark {
color: #ff5f95;
opacity: 1;
}

body.page-final .loco-section h2,
body.page-final .making-head h2,
body.page-final .doc-links h2 {
margin: 0;
font-size: clamp(42px, 6vw, 88px);
line-height: 1.04;
letter-spacing: -0.055em;
font-weight: 650;
}

body.page-final .loco-section p,
body.page-final .making-head p,
body.page-final .doc-links p {
margin: 26px auto 0;
max-width: 760px;
font-size: clamp(18px, 2vw, 25px);
line-height: 1.55;
font-weight: 400;
color: #333;
}

/* =========================
Meet section
========================= */

body.page-final .meet-loco {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100svh;

display: flex;
align-items: center;
justify-content: center;

overflow: hidden;
background: #fff;
color: #111;
padding: 0 28px;
}

body.page-final .meet-bg {
position: absolute;
inset: 0;
background-image: url("./images/final_project/final_locopik_world_bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: none;
}

body.page-final .meet-loco::after {
display: none;
}

body.page-final .meet-content {
position: relative;
z-index: 2;
max-width: 620px;
margin: 0 auto;
text-align: center;
color: #111;
}

body.page-final .meet-content h2 {
margin: 0;
color: #111;
font-size: clamp(42px, 6vw, 82px);
line-height: 1.02;
letter-spacing: -0.055em;
font-weight: 800;
}

body.page-final .meet-content p {
margin: 24px auto 0;
max-width: 560px;
color: #333;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.45;
font-weight: 400;
}

/* =========================
Video
========================= */

body.page-final .loco-video-section {
background: #fff;
padding-top: 110px;
}

body.page-final .loco-video-wrap {
max-width: 1080px;
margin: 56px auto 0;
padding: 0 28px;
}

body.page-final .loco-video-wrap video {
width: 100%;
display: block;
border-radius: 28px;
background: #000;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06);
}

/* =========================
Design / Take a closer look
========================= */

body.page-final .closer-look {
background: #fff;
}

body.page-final .closer-inner {
max-width: 1180px;
margin: 0 auto;

display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 64px;
align-items: center;
}

body.page-final .closer-copy p {
max-width: 540px;
margin-left: 0;
margin-right: 0;
}

body.page-final .section-subtitle {
margin: 0;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 650;
}

body.page-final .loco-slogan {
display: inline-block;
margin-top: 30px;
padding: 12px 18px;
border-radius: 999px;
background: #fff0f5;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: #111;
}

/* Loco Pik appearance carousel */
body.page-final .loco-carousel {
position: relative;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}

body.page-final .loco-carousel-media {
margin: 0;
background: transparent;
border-radius: 0;
overflow: visible;
}

body.page-final .loco-carousel-media img {
width: 100%;
height: 620px;
display: block;
object-fit: contain;
border-radius: 0;
transition:
opacity 0.45s ease,
transform 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

body.page-final .loco-carousel-media img.is-changing {
opacity: 0;
transform: scale(0.985);
}

body.page-final .loco-variant-info {
text-align: center;
padding: 22px 10px 8px;
}

body.page-final .loco-variant-info h3 {
margin: 0;
font-size: clamp(24px, 2.8vw, 38px);
line-height: 1.1;
letter-spacing: -0.04em;
font-weight: 650;
}

body.page-final .loco-variant-info p {
margin: 10px auto 0;
max-width: 560px;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
color: #666;
}

body.page-final .loco-variant-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}

body.page-final .variant-dot {
width: 12px;
height: 12px;
border: none;
border-radius: 999px;
background: rgba(0, 0, 0, 0.18);
cursor: pointer;
transition:
width 0.3s ease,
background 0.3s ease,
transform 0.3s ease;
}

body.page-final .variant-dot:hover {
transform: scale(1.15);
}

body.page-final .variant-dot.active {
width: 34px;
background: #ff5f95;
}

/* =========================
Feature summary
========================= */

body.page-final .loco-power {
background: #fff;
padding-top: 120px;
padding-bottom: 140px;
}

body.page-final .power-head {
max-width: 860px;
margin: 0 auto 80px;
text-align: center;
}

body.page-final .power-head h2 {
margin: 0;
font-size: clamp(48px, 6.6vw, 96px);
line-height: 0.98;
letter-spacing: -0.065em;
font-weight: 800;
}

body.page-final .power-head p {
margin: 24px auto 0;
max-width: 720px;
font-size: clamp(18px, 1.8vw, 23px);
line-height: 1.45;
font-weight: 400;
color: #333;
}

body.page-final .power-layout {
max-width: 1180px;
margin: 0 auto;

display: grid;
grid-template-columns: 1fr 0.72fr;
gap: 54px 70px;
align-items: center;
}

body.page-final .power-main-image {
grid-column: 1 / 2;
grid-row: 1 / 4;
margin: 0;
}

body.page-final .power-main-image img {
width: 100%;
display: block;
object-fit: contain;
border-radius: 0;
}

body.page-final .power-side-image {
grid-column: 2 / 3;
margin: 24px 0;
}

body.page-final .power-side-image img {
width: 100%;
max-height: 360px;
display: block;
object-fit: contain;
border-radius: 0;
}

body.page-final .power-note {
max-width: 420px;
}

body.page-final .power-note h3 {
margin: 0;
font-size: clamp(22px, 2vw, 30px);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: 700;
}

body.page-final .power-note p {
margin: 4px 0 0;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.25;
font-weight: 400;
color: #111;
}

body.page-final .note-green h3 {
color: #0a8f22;
}

body.page-final .note-pink h3 {
color: #ff2fb3;
}

body.page-final .note-blue h3 {
color: #007aff;
}

body.page-final .note-orange h3 {
color: #ff7a00;
}

body.page-final .note-purple h3 {
color: #7b35ff;
}

body.page-final .note-teal h3 {
color: #00a99d;
}

/* =========================
Final Project Documentation
Apple-like horizontal cards
========================= */

body.page-final .making-process {
background: #fcf268;
padding: 116px 0 128px;
overflow: hidden;
}

body.page-final .making-layout {
width: 100%;
max-width: none;
margin: 0;
}

body.page-final .making-head {
max-width: 1180px;
margin: 0 auto 48px;
padding: 0 28px;
text-align: left;
}

body.page-final .making-head .loco-eyebrow {
margin: 0 0 18px;
color: #ff5f95;
font-size: 17px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.01em;
}

body.page-final .making-head h2 {
max-width: 850px;
margin: 0;
font-size: clamp(54px, 6.8vw, 94px);
line-height: 0.96;
letter-spacing: -0.075em;
font-weight: 800;
color: #1d1d1f;
}

body.page-final .making-head p {
max-width: 780px;
margin: 28px 0 0;
font-size: clamp(18px, 1.75vw, 23px);
line-height: 1.38;
font-weight: 400;
color: #333336;
}

body.page-final .process-carousel {
position: relative;
width: 100%;
}

body.page-final .process-scroll {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 370px;
gap: 24px;

overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;

padding: 0 max(28px, calc((100vw - 1180px) / 2)) 34px;
scrollbar-width: none;
}

body.page-final .process-scroll::-webkit-scrollbar {
display: none;
}

body.page-final .process-card {
position: relative;
min-height: 430px;
padding: 34px 34px 32px;
border-radius: 30px;
background: #fff;
color: #1d1d1f;
text-decoration: none;
scroll-snap-align: start;

display: flex;
flex-direction: column;
justify-content: space-between;

box-shadow: none;
overflow: hidden;
transition:
transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
box-shadow 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

body.page-final .process-card:hover {
transform: scale(1.018);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08);
}

body.page-final .process-card .card-tag {
display: block;
margin: 0 0 18px;
font-size: 19px;
line-height: 1.2;
font-weight: 700;
color: #1d1d1f;
letter-spacing: -0.02em;
}

body.page-final .process-card h3 {
max-width: 300px;
margin: 0;
font-size: 32px;
line-height: 1.08;
letter-spacing: -0.055em;
font-weight: 800;
color: #1d1d1f;
}

body.page-final .process-card p {
max-width: 300px;
margin: 22px 0 0;
font-size: 19px;
line-height: 1.28;
font-weight: 400;
color: #333336;
}

body.page-final .process-card .card-plus {
position: absolute;
right: 24px;
bottom: 22px;

width: 40px;
height: 40px;
border-radius: 999px;

background: #1d1d1f;
color: #fff;

display: flex;
align-items: center;
justify-content: center;

font-size: 29px;
font-weight: 500;
line-height: 1;
}

body.page-final .process-card-function,
body.page-final .process-card-references,
body.page-final .process-card-design,
body.page-final .process-card-bom,
body.page-final .process-card-fabrication,
body.page-final .process-card-electronics,
body.page-final .process-card-programming,
body.page-final .process-card-testing {
background: #fff;
}

/* Apple-like chevron buttons */
body.page-final .process-nav {
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;

display: flex;
justify-content: flex-end;
gap: 18px;
}

body.page-final .process-nav-btn {
position: relative;

width: 48px;
height: 48px;
border: none;
border-radius: 999px;

background: rgba(232, 232, 237, 0.9);
color: transparent;

display: flex;
align-items: center;
justify-content: center;

font-size: 0;
line-height: 1;

cursor: pointer;
appearance: none;
-webkit-appearance: none;

transition:
background 0.22s ease,
opacity 0.22s ease,
transform 0.22s ease;
}

body.page-final .process-nav-btn::before {
content: "";
width: 11px;
height: 11px;

border-style: solid;
border-color: rgba(0, 0, 0, 0.56);
border-width: 0 4px 4px 0;

display: block;
}

body.page-final #processPrev::before {
transform: rotate(135deg);
margin-left: 4px;
}

body.page-final #processNext::before {
transform: rotate(-45deg);
margin-right: 4px;
}

body.page-final .process-nav-btn:hover {
background: rgba(210, 210, 215, 0.96);
transform: scale(1.04);
}

body.page-final .process-nav-btn:disabled {
background: rgba(232, 232, 237, 0.62);
cursor: default;
opacity: 1;
transform: none;
}

body.page-final .process-nav-btn:disabled::before {
border-color: rgba(0, 0, 0, 0.28);
}

body.page-final .process-nav-btn:focus-visible {
outline: 3px solid rgba(0, 122, 255, 0.45);
outline-offset: 3px;
}

/* =========================
Final Documentation links
========================= */

body.page-final .doc-links {
background: #fff;
}

body.page-final .doc-link-list {
max-width: 720px;
margin: 44px auto 0;
display: grid;
gap: 12px;
}

body.page-final .doc-link-list a {
display: flex;
justify-content: space-between;
align-items: center;

padding: 22px 26px;
border-radius: 20px;

background: #f5f5f7;
color: #111;
text-decoration: none;

font-size: 19px;
font-weight: 650;

transition:
background 0.25s ease,
transform 0.25s ease;
}

body.page-final .doc-link-list a:hover {
background: #ffe6ef;
transform: translateX(4px);
}

/* =========================
Optional normal documentation sections
========================= */

body.page-final .final-normal-section {
max-width: 720px;
margin: 0 auto;
padding: 90px 0;
text-align: left;
}

body.page-final .final-normal-section .about-intro,
body.page-final .final-normal-section p,
body.page-final .final-normal-section h2,
body.page-final .final-normal-section h3,
body.page-final .final-normal-section table {
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

body.page-final .final-normal-section > img,
body.page-final .final-normal-section img.quad {
width: 100%;
max-width: 720px;
height: auto;
display: block;
margin: 28px auto;
object-fit: contain;
border-radius: 18px;
}

body.page-final .content figure.article-media {
max-width: 720px;
margin: 28px auto 40px;
}

body.page-final .content figure.article-media img {
width: 100%;
max-width: 720px;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
border-radius: 18px;
}

body.page-final .content figure.article-media figcaption {
max-width: 720px;
margin: 10px auto 0;
font-size: 13px;
line-height: 1.5;
color: #6e6e73;
}

/* =========================
Responsive final page
========================= */

@media (max-width: 900px) {
body.page-final .loco-section {
padding: 88px 22px;
}

body.page-final .loco-hero.planet-hero {
min-height: 145vh;
}

body.page-final .planet-hero-stage {
min-height: 145vh;
}

body.page-final .planet-hero-text {
min-height: 74vh;
min-height: 74svh;
padding: calc(var(--nav-h, 72px) + 52px) 18px 28px;
}

body.page-final .planet-hero-copy h1 {
font-size: clamp(64px, 18vw, 110px);
}

body.page-final .planet-hero-copy h2 {
font-size: clamp(34px, 10vw, 58px);
}

body.page-final .planet-hero-copy p {
max-width: 420px;
font-size: 17px;
line-height: 1.42;
}

body.page-final .planet-hero-world {
min-height: 66vh;
padding: 0 0 90px;
margin-top: -4vh;
}

body.page-final .planet-creatures {
width: 132vw;
height: 56vh;
}

body.page-final .hero-pik-04 {
width: 34vw;
left: 17%;
bottom: 43%;
}

body.page-final .hero-pik-03 {
width: 35vw;
left: 40%;
bottom: 35%;
}

body.page-final .hero-pik-07 {
width: 34vw;
right: 16%;
bottom: 43%;
}

body.page-final .hero-pik-08 {
width: 26vw;
right: -1%;
bottom: 22%;
}

body.page-final .hero-pik-02 {
width: 38vw;
left: -1%;
bottom: 20%;
}

body.page-final .hero-pik-05 {
width: 36vw;
left: 13%;
bottom: 0;
}

body.page-final .hero-pik-01 {
width: 32vw;
left: 41%;
bottom: 0;
}

body.page-final .hero-pik-06 {
width: 36vw;
right: 7%;
bottom: 0;
}

body.page-final .loco-section h2,
body.page-final .making-head h2,
body.page-final .doc-links h2 {
font-size: clamp(38px, 10vw, 58px);
}

body.page-final .loco-section p,
body.page-final .making-head p,
body.page-final .doc-links p {
font-size: 18px;
line-height: 1.55;
}

body.page-final .meet-loco {
min-height: 72vh;
padding: 96px 22px;
}

body.page-final .meet-bg {
background-size: cover;
background-position: center;
}

body.page-final .meet-content h2 {
font-size: clamp(36px, 10vw, 58px);
}

body.page-final .meet-content p {
font-size: 18px;
line-height: 1.5;
}

body.page-final .loco-video-wrap {
padding: 0;
margin-top: 34px;
}

body.page-final .loco-video-wrap video {
border-radius: 18px;
}

body.page-final .closer-inner {
grid-template-columns: 1fr;
gap: 36px;
}

body.page-final .closer-copy p {
margin-left: auto;
margin-right: auto;
}

body.page-final .section-subtitle {
font-size: clamp(24px, 7vw, 38px);
text-align: center;
}

body.page-final .loco-carousel-media img {
height: 380px;
}

body.page-final .loco-power {
padding-top: 88px;
padding-bottom: 96px;
}

body.page-final .power-head {
margin-bottom: 54px;
}

body.page-final .power-head h2 {
font-size: clamp(42px, 11vw, 64px);
}

body.page-final .power-layout {
grid-template-columns: 1fr;
gap: 34px;
}

body.page-final .power-main-image,
body.page-final .power-side-image {
grid-column: auto;
grid-row: auto;
}

body.page-final .power-note {
max-width: none;
}

body.page-final .power-note p {
font-size: 18px;
line-height: 1.35;
}

body.page-final .making-process {
padding: 88px 0 96px;
}

body.page-final .making-head {
margin-bottom: 34px;
padding: 0 22px;
text-align: left;
}

body.page-final .making-head h2 {
font-size: clamp(42px, 11vw, 64px);
}

body.page-final .making-head p {
margin-top: 20px;
font-size: 18px;
line-height: 1.45;
}

body.page-final .process-scroll {
grid-auto-columns: 310px;
gap: 16px;
padding: 0 22px 26px;
}

body.page-final .process-card {
min-height: 390px;
padding: 28px;
border-radius: 28px;
}

body.page-final .process-card .card-tag {
font-size: 17px;
}

body.page-final .process-card h3 {
font-size: 29px;
}

body.page-final .process-card p {
font-size: 17px;
line-height: 1.32;
}

body.page-final .process-nav {
padding: 0 22px;
justify-content: flex-end;
gap: 14px;
}

body.page-final .process-nav-btn {
width: 44px;
height: 44px;
}

body.page-final .process-nav-btn::before {
width: 10px;
height: 10px;
border-width: 0 3.5px 3.5px 0;
}
}


/* =========================
   Process Grid Fallback
   For the older final-project.html structure
   ========================= */

body.page-final .process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

body.page-final .process-grid .process-card {
  position: relative;
  min-height: 320px;
  padding: 30px;
  border: none;
  border-radius: 30px;
  background: #fff;
  color: #111;
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

body.page-final .process-grid .process-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}

body.page-final .process-grid .process-card .card-tag {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: #ff5f95;
  letter-spacing: 0.02em;
}

body.page-final .process-grid .process-card h3 {
  margin: 34px 0 14px;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 650;
}

body.page-final .process-grid .process-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: #555;
}

body.page-final .process-grid .process-card .arrow {
  position: absolute;
  right: 24px;
  bottom: 20px;

  width: 34px;
  height: 34px;
  border-radius: 50%;

  background: #111;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* =========================
   Design Concept Modal
   Apple-like pop-up card
   ========================= */

body.page-final .design-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 36px 20px;
}

body.page-final .design-modal.is-open {
  display: flex;
}

body.page-final .design-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 247, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.page-final .design-modal-panel {
  position: relative;
  z-index: 2;

  width: min(980px, 92vw);
  max-height: 88vh;
  overflow: auto;

  border-radius: 34px;
  background: #fff;
  color: #1d1d1f;

  box-shadow:
    0 42px 120px rgba(0, 0, 0, 0.22),
    0 12px 42px rgba(0, 0, 0, 0.12);
}

body.page-final .design-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;

  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;

  background: rgba(245, 245, 247, 0.95);
  color: #1d1d1f;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

body.page-final .design-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #f5f5f7;
}

body.page-final .design-modal-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f5f7;
}

body.page-final .design-modal-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.page-final .design-modal-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 62px 36px 74px;
}

body.page-final .design-modal-kicker {
  margin: 0 0 18px;
  color: #ff5f95;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}

body.page-final .design-modal-content h2 {
  margin: 0;
  color: #1d1d1f;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.06em;
  font-weight: 800;
}

body.page-final .design-modal-content p {
  margin: 24px 0 0;
  max-width: 620px;
  color: #333336;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
}

@media (max-width: 900px) {
  body.page-final .process-grid {
    grid-template-columns: 1fr;
    padding: 0 22px;
  }

  body.page-final .process-grid .process-card {
    min-height: 280px;
  }

  body.page-final .design-modal {
    padding: 18px 12px;
  }

  body.page-final .design-modal-panel {
    width: 94vw;
    max-height: 90vh;
    border-radius: 28px;
  }

  body.page-final .design-modal-grid {
    grid-template-columns: 1fr;
  }

  body.page-final .design-modal-media {
    aspect-ratio: 16 / 10;
  }

  body.page-final .design-modal-content {
    padding: 44px 24px 56px;
  }

  body.page-final .design-modal-close {
    width: 38px;
    height: 38px;
    font-size: 27px;
  }
}
/* =========================
Process Modal Image Layout Fix
Put images below text, one by one
========================= */

body.page-final .process-modal-panel {
display: flex;
flex-direction: column;
}

/* Text first */
body.page-final .process-modal-content {
order: 1;
padding: 62px 36px 36px;
}

/* Images after text */
body.page-final .process-modal-gallery {
order: 2;
width: min(720px, calc(100% - 72px));
margin: 0 auto 72px;
padding: 0;

display: grid;
grid-template-columns: 1fr;
gap: 34px;

background: transparent;
}

/* Override old 3-column / 4-column layout */
body.page-final .process-modal-gallery.three-images,
body.page-final .process-modal-gallery.four-images {
grid-template-columns: 1fr;
}

body.page-final .process-modal-gallery figure {
position: relative;
margin: 0;
aspect-ratio: auto;
overflow: visible;
background: transparent;
}

body.page-final .process-modal-gallery img {
width: 100%;
height: auto;
display: block;

object-fit: contain;
border-radius: 24px;
background: #f5f5f7;
}

/* Caption becomes normal text under each image */
body.page-final .process-modal-gallery figcaption {
position: static;
display: block;

margin: 12px 0 0;
padding: 0;

background: transparent;
color: #6e6e73;

font-size: 14px;
line-height: 1.35;
font-weight: 600;

border-radius: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

/* Mobile */
@media (max-width: 900px) {
body.page-final .process-modal-content {
padding: 44px 24px 30px;
}

body.page-final .process-modal-gallery {
width: calc(100% - 48px);
margin-bottom: 54px;
gap: 28px;
}

body.page-final .process-modal-gallery img {
border-radius: 18px;
}
}

/* =========================
   Final Summary Image Section
   ========================= */

body.page-final .final-summary-image-section {
  background: #ffffff;
  padding: 140px 0 150px;
}

body.page-final .final-summary-image-head {
  margin-bottom: 70px;
  text-align: center;
}

body.page-final .final-summary-image-head h2 {
  margin: 0;
  color: #1d1d1f;
  font-size: clamp(44px, 5.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 800;
}

body.page-final .final-summary-image-head p {
  max-width: 720px;
  margin: 18px auto 0;
  color: #333336;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.38;
  letter-spacing: -0.025em;
  font-weight: 500;
}

body.page-final .final-summary-image-wrap {
  width: min(1180px, calc(100vw - 56px));
  margin: 0 auto;
  padding: 0;
}

body.page-final .final-summary-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 34px;
  background: #e2e2e5;
}


/* =========================
   Image Source Warning Strip
   Animated caution line
   ========================= */

body.page-final .image-source-warning {
  padding: 0;
  background: #1d1d1f;
}

body.page-final .image-source-warning-strip {
  position: relative;
  overflow: hidden;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background:
    repeating-linear-gradient(
      -45deg,
      #ffd60a 0 18px,
      #1d1d1f 18px 36px
    );
  background-size: 52px 52px;
  animation: warningStripeMove 0.85s linear infinite;
}

@keyframes warningStripeMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 52px 0;
  }
}

body.page-final .image-source-warning-text {
  position: relative;
  z-index: 2;
  width: min(1040px, calc(100% - 24px));
  margin: 0 auto;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1d1d1f;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
  font-size: clamp(14px, 1.45vw, 18px);
  line-height: 1.35;
  letter-spacing: -0.018em;
  font-weight: 750;
  text-align: center;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.page-final .image-source-warning-text strong {
  color: #000;
  font-weight: 850;
}

@media (max-width: 700px) {
  body.page-final .image-source-warning-strip {
    min-height: 86px;
    padding: 16px 14px;
  }

  body.page-final .image-source-warning-text {
    width: 100%;
    border-radius: 22px;
    padding: 13px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-final .image-source-warning-strip {
    animation: none;
  }
}

/* =========================
   Acknowledgement pink background
   ========================= */

body.page-final .doc-links {
  background: #e95f91;
  padding: 130px 0 150px;
}

body.page-final .doc-links h2 {
  color: #ffffff;
}

body.page-final .doc-links p {
  color: rgba(255, 255, 255, 0.92);
}