html{scroll-behavior:smooth;scroll-padding-top:0}body{overflow-x:hidden}.portfolio{margin:0}.portfolio>.page{height:100svh;min-height:540px;scroll-snap-align:start}
.project-jump{position:absolute;z-index:5;right:3.5%;bottom:29px;display:flex;align-items:center;gap:10px;color:#244f3b;background:#fbfff0e8;border:1px solid #ffffff9c;padding:11px 16px;border-radius:30px;font-size:12px;min-height:42px}.project-jump svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.fitness-section{background:#642b46;color:#ffebcd;isolation:isolate;position:relative;overflow:hidden}
.fitness-section:before{background:linear-gradient(180deg,#35122565,transparent 24%,transparent 82%,#28172125);z-index:1}
.fitness-world{position:absolute;inset:0}.fitness-world canvas{display:block;width:100%;height:100%}
.fitness-heading{position:absolute;z-index:3;right:7%;top:34px;width:min(350px,41%)}
.fitness-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,4vw,59px);line-height:1;letter-spacing:-2.5px;margin:0 0 13px;font-weight:750;color:#ffe8bb;text-shadow:0 3px 24px #39102530}
.fitness-heading p{font-size:13px;line-height:1.5;max-width:300px;color:#f0c5b5;margin:0;letter-spacing:.1px}
.fitness-section .app-preview{left:8%;right:auto;top:50%;transform:translateY(-46%)}
.fitness-section .app-preview:before{background:radial-gradient(ellipse,#ffb88120,transparent 69%)}
.fitness-section .cta{background:#f17d67;color:#371b31;border-color:#ffd9bc66;box-shadow:0 8px 24px #32132740;font-weight:600}
.fitness-section .cta:hover{background:#ff997c}
.fitness-footer{position:absolute;z-index:4;left:5%;right:7%;bottom:28px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.fitness-footer>*{pointer-events:auto}.fitness-section .motion-button{background:#3b2038cf;border:1px solid #f4c7ae38;color:#ffe2c1;box-shadow:0 4px 20px #32172b25}
.exercise-status{position:relative;overflow:hidden;min-width:190px;text-align:center;padding:12px 22px 15px;border:1px solid #ffe4be55;border-radius:25px;background:#4b2b42cc;font-size:12px;color:#ffe2bf;backdrop-filter:blur(8px)}
.exercise-track{position:absolute;left:22px;right:22px;bottom:7px;height:2px;background:#f9d5b124;border-radius:2px;overflow:hidden}
.exercise-track i{display:block;height:100%;background:#fba477;transform:scaleX(0);transform-origin:left}
.fitness-loading{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:18px;background:#642b46;color:#ffe5bd;font-size:13px}
.fitness-loader-ring{height:43px;width:43px;border:2px solid #fbc18d25;border-top-color:#fbc18d;border-radius:50%;animation:loader-orbit 1.2s linear infinite}
.fitness-back{position:absolute;z-index:4;top:30px;left:5%;display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.3px;color:#f0c5b5}.fitness-back svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;fill:none}
@media(max-width:900px){.fitness-heading{right:6%;width:40%;top:30px}.fitness-heading h2{font-size:43px}.fitness-section .app-preview{left:7%;right:auto}.project-jump{right:5%;bottom:22px}.fitness-footer{bottom:22px}}
@media(max-width:700px){.fitness-heading{top:29px;right:5%;width:55%}.fitness-heading h2{font-size:39px;letter-spacing:-1.7px;margin-bottom:10px}.fitness-heading p{font-size:11px;line-height:1.5;max-width:210px}.fitness-section .app-preview{left:5%;right:auto;top:53%;transform:translateY(-35%);width:178px}.fitness-back{left:5%;top:33px;font-size:10px}.fitness-footer{left:4%;right:4%;bottom:20px}.fitness-section .motion-button{font-size:10px;padding:10px;gap:6px}.exercise-status{font-size:10px;min-width:153px;padding:12px 15px 16px}.project-jump{right:4%;font-size:10px;padding:10px 12px;bottom:20px}}
@media(max-height:650px) and (max-width:700px){.fitness-heading{top:22px}.fitness-heading h2{font-size:32px}.fitness-section .app-preview{top:45%;width:153px;transform:translateY(-22%)}.fitness-back{top:25px}.exercise-status{min-width:133px;font-size:9px}.fitness-section .motion-button{font-size:9px}.fitness-footer{bottom:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Give mobile copy a stable, high-contrast area above the room scene. */
@media(max-width:700px), (max-width:900px) and (max-height:540px){
 .portfolio>.fitness-section:before{background:linear-gradient(180deg,#2e1826 0,#2e1826 216px,#2e182600 340px,transparent 82%,#28172125)}
 .fitness-section .fitness-heading{left:5%;right:5%;width:auto;max-width:none;text-align:left}
 .fitness-section .fitness-heading h2{font-size:clamp(32px,9vw,40px);line-height:1.08;letter-spacing:-1px;margin-bottom:12px;color:#fff0d5;text-shadow:none;text-wrap:balance}
 .fitness-section .fitness-heading p{max-width:32ch;font-size:16px;line-height:1.5;letter-spacing:0;color:#fff1e5;text-wrap:pretty}
}
@media(max-width:700px) and (max-height:650px){
 .fitness-section .app-preview{top:220px;left:5%;width:177px;transform:none}
 .fitness-section .phone-wrap{animation:none;transform:none}
 .fitness-section .phone{transform:none}
 .fitness-section .fitness-footer{left:5%;right:5%;top:220px;bottom:auto}
 .fitness-section .fitness-footer .exercise-status{position:absolute;left:auto;right:0;top:0;bottom:auto;margin:0;min-width:0;width:124px;font-size:12px}
}
@media(max-width:900px) and (max-height:540px) and (min-aspect-ratio:6/5){
 .portfolio>.fitness-section{min-height:100svh}
 .fitness-section .fitness-heading{right:auto;width:44%}
 .fitness-section .app-preview{left:auto;right:148px;top:80px;width:177px;transform:none}
 .fitness-section .phone-wrap,.fitness-section .phone{width:110px;transform:none}
 .fitness-section .phone-wrap{animation:none;margin-bottom:16px}
 .fitness-section .phone{height:214px;border-radius:25px}
 .fitness-section .fitness-footer{left:5%;right:auto;top:240px;bottom:auto}
 .fitness-section .fitness-footer .exercise-status{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0;min-width:144px;font-size:12px}
}