.project-page{flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(64px,8vw,120px);width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding:48px clamp(20px,4vw,48px) clamp(64px,8vw,120px);display:flex}@media screen and (max-width:600px){.project-page{padding-top:24px}}.project-page h2{font-size:clamp(1.5rem,1.35rem + .5vw,1.75rem);line-height:1.3}.project-page-label{letter-spacing:.1em;text-transform:uppercase;color:#1f7460;font-size:.75rem;font-weight:700}.project-page-button1,.project-page-button2{text-align:center;cursor:pointer;justify-content:center;align-items:center;gap:8px;display:inline-flex}@media screen and (max-width:600px){.project-page-button1,.project-page-button2{width:100%}}.project-page-button1{color:#fff;background-color:#3d3d3d;border:none;border-radius:25px;padding:12px 24px;font-size:1rem;font-weight:700;transition:background-color .3s,color .3s}.project-page-button1:hover{color:#3d3d3d;background-color:#d6f3e0}.project-page-button2{color:#1f7460;background-color:#fff;border:1px solid #1f7460;border-radius:25px;padding:12px 24px;font-size:1rem;font-weight:700;transition:background-color .3s,color .3s}.project-page-button2:hover{color:#fff;background-color:#1f7460}.project-page-back{color:#757575;align-self:flex-start;align-items:center;gap:8px;margin-bottom:calc(48px - clamp(64px,8vw,120px));font-size:.875rem;font-weight:500;transition:color .2s;display:inline-flex}.project-page-back svg{transition:transform .2s}@media (hover:hover){.project-page-back:hover{color:#1f7460}.project-page-back:hover svg{transform:translate(-4px)}}.project-page-hero{grid-template-columns:1.15fr .85fr;align-items:center;gap:64px;display:grid}@media screen and (max-width:900px){.project-page-hero{grid-template-columns:1fr;gap:48px}}.project-page-hero-text{flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;display:flex}.project-page-hero-text h1{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.75rem)}.project-page-hero-image{justify-self:center;width:100%;max-width:480px;padding:24px}@media screen and (max-width:600px){.project-page-hero-image{max-width:360px;padding:16px}}.project-page-hero-image{background:#d6f3e0;border-radius:12px}.project-page-hero-image img{border-radius:4px;width:100%;height:auto;display:block}.project-page-lead{color:#3d3d3d;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:500}.project-page-description{max-width:620px;font-size:clamp(1rem,.96rem + .18vw,1.125rem)}.project-page-tags{flex-wrap:wrap;gap:8px;display:flex}.project-page-tags span{color:#1f7460;background:#d6f3e0;border-radius:25px;padding:4px 12px;font-size:.875rem;font-weight:500}.project-page-buttons{flex-wrap:wrap;gap:16px;margin-top:8px;display:flex}@media screen and (max-width:600px){.project-page-buttons{flex-direction:column;width:100%}}.project-page-mockups{background:#d6f3e0;border-radius:12px;padding:64px 64px calc(64px + 6%);position:relative}@media screen and (max-width:900px){.project-page-mockups{padding:32px 32px calc(32px + 10%)}}@media screen and (max-width:600px){.project-page-mockups{padding:24px 16px calc(24px + 18%)}}.project-page-mockups-hint{color:#1f7460;font-size:.875rem;position:absolute;bottom:24px;left:64px}@media screen and (max-width:900px){.project-page-mockups-hint{left:32px}}@media (hover:none){.project-page-mockups-hint{display:none}}.project-page-browser{background:#fff;border-radius:10px;width:86%;overflow:hidden;box-shadow:0 24px 60px #1f746040}@media screen and (max-width:600px){.project-page-browser{width:100%}}.project-page-browser-bar{background:#efefef;align-items:center;gap:6px;padding:10px 14px;display:flex}.project-page-browser-bar>span{background:#c2c2c2;border-radius:50%;width:10px;height:10px}.project-page-browser-bar>span:first-child{background:#ff5f57}.project-page-browser-bar>span:nth-child(2){background:#febc2e}.project-page-browser-bar>span:nth-child(3){background:#28c840}.project-page-browser-url{text-align:center;color:#757575;white-space:nowrap;text-overflow:ellipsis;background:#fff;border-radius:6px;flex:1;max-width:360px;margin:0 auto;padding:4px 12px;font-size:.75rem;overflow:hidden}.project-page-browser-screen{aspect-ratio:16/10;position:relative;overflow:hidden}.project-page-browser-screen img{object-fit:cover;object-position:top;transition:object-position 6s ease-in-out}@media (hover:hover){.project-page-browser-screen:hover img{object-position:bottom}}@media (hover:none){.project-page-browser-screen img{animation:12s ease-in-out infinite alternate project-screen-scroll}}.project-page-phone{background:#1b1b28;border-radius:32px;width:22%;max-width:260px;padding:8px;position:absolute;bottom:48px;right:64px;box-shadow:0 24px 50px #0000004d}@media screen and (max-width:900px){.project-page-phone{border-radius:24px;width:26%;bottom:32px;right:32px}}@media screen and (max-width:600px){.project-page-phone{border-radius:18px;width:36%;padding:5px;bottom:24px;right:16px}}.project-page-phone-screen{aspect-ratio:9/19.5;background:#fff;border-radius:25px;position:relative;overflow:hidden}.project-page-phone-screen img{object-fit:cover;object-position:top;transition:object-position 5s ease-in-out}@media (hover:hover){.project-page-phone-screen:hover img{object-position:bottom}}@media (hover:none){.project-page-phone-screen img{animation:10s ease-in-out infinite alternate project-screen-scroll}}@media screen and (max-width:900px){.project-page-phone-screen{border-radius:18px}}@media screen and (max-width:600px){.project-page-phone-screen{border-radius:13px}}.project-page-story{grid-template-columns:repeat(2,1fr);gap:64px;display:grid}@media screen and (max-width:900px){.project-page-story{grid-template-columns:1fr;gap:48px}}.project-page-story-item{border-top:2px solid #1f7460;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding-top:24px;display:flex}.project-page-story-item h2{margin-bottom:0}.project-page-story-item p{font-size:clamp(1rem,.96rem + .18vw,1.125rem)}.project-page-highlights h2{margin-bottom:clamp(24px,3vw,40px)}.project-page-highlights-grid{grid-template-columns:repeat(4,1fr);gap:24px;display:grid}@media screen and (min-width:901px) and (max-width:1160px){.project-page-highlights-grid{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:601px) and (max-width:900px){.project-page-highlights-grid{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:600px){.project-page-highlights-grid{grid-template-columns:1fr;gap:16px}}.project-page-highlights-card{background:#f5f3f1;border-radius:12px;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:8px;padding:clamp(20px,2vw,28px);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),background-color .3s;display:flex}@media (hover:hover){.project-page-highlights-card:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 32px #1f74601f}}.project-page-highlights-card h3{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem)}.project-page-highlights-card p{font-size:.875rem}@media screen and (max-width:600px){.project-page-highlights-card{grid-template-columns:auto 1fr;gap:4px 16px;display:grid}.project-page-highlights-card .project-page-highlights-number{grid-row:span 2;margin-bottom:0;line-height:1}}.project-page-highlights-number{font-family:var(--font-glegoo),"Glegoo",serif;color:#1f7460;margin-bottom:8px;font-size:clamp(1.5rem,1.35rem + .5vw,1.75rem);font-weight:700}.project-page-scope h2{margin-bottom:clamp(24px,3vw,40px)}.project-page-scope ul{flex-wrap:wrap;gap:16px;display:flex}.project-page-scope li{color:#3d3d3d;border:1px solid #c2c2c2;border-radius:25px;align-items:center;gap:8px;padding:10px 18px;font-size:clamp(1rem,.96rem + .18vw,1.125rem);display:flex}.project-page-scope li svg{color:#1f7460;flex-shrink:0}.project-page-cta{background:#1f7460;border-radius:12px;grid-template-columns:1fr auto;align-items:center;gap:48px;padding:64px;display:grid}@media screen and (max-width:900px){.project-page-cta{grid-template-columns:1fr;gap:32px;padding:48px 32px}}@media screen and (max-width:600px){.project-page-cta{padding:32px clamp(20px,2vw,28px)}}.project-page-cta h2{color:#fff;margin-bottom:16px}.project-page-cta p{color:#ffffffd9;max-width:520px;font-size:clamp(1rem,.96rem + .18vw,1.125rem)}.project-page-cta-actions{flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;display:flex}.project-page-cta-actions .project-page-button1{color:#3d3d3d;background:#fff}.project-page-cta-actions .project-page-button1:hover{background:#d6f3e0}.project-page-cta-links{flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;display:flex}.project-page-cta-links a{color:#fff;align-items:center;gap:8px;font-size:clamp(1rem,.96rem + .18vw,1.125rem);display:inline-flex;position:relative}.project-page-cta-links a:after{content:"";transform-origin:0;background-color:#d6f3e0;width:100%;height:2px;transition:transform .3s;position:absolute;bottom:-2px;left:0;transform:scaleX(0)}.project-page-cta-links a:hover:after{transform:scaleX(1)}.project-page-next{background:#f5f3f1;border-radius:12px;align-items:center;gap:24px;margin-top:calc(48px - clamp(64px,8vw,120px));padding:16px 32px 16px 16px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1);display:flex}@media screen and (max-width:600px){.project-page-next{gap:16px;padding-right:16px}}.project-page-next h3{cursor:pointer;font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem)}.project-page-next p{font-size:.875rem}.project-page-next-image{aspect-ratio:4/3;border-radius:4px;flex-shrink:0;width:120px;position:relative;overflow:hidden}@media screen and (max-width:600px){.project-page-next-image{width:84px}}.project-page-next-image img{object-fit:cover;object-position:top}.project-page-next-text{flex-direction:column;flex:1;justify-content:center;align-items:flex-start;gap:4px;min-width:0;display:flex}.project-page-next-arrow{color:#1f7460;flex-shrink:0;transition:transform .3s cubic-bezier(.22,1,.36,1)}@media (hover:hover){.project-page-next:hover{transform:translateY(-4px);box-shadow:0 12px 32px #1f74601f}.project-page-next:hover .project-page-next-arrow{transform:translate(6px)}}@keyframes project-screen-scroll{0%,15%{object-position:top}85%,to{object-position:bottom}}
