.projects-page{background:#a8b8bf;color:var(--ink);min-height:100vh;position:relative;isolation:isolate}
.projects-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#687b87 0%,#a8b8bf 62%,#d9d9d0 100%)}
.project-cloud{position:absolute;max-width:none;width:105%;height:75%;object-fit:contain;bottom:-17%}.project-cloud-left{left:-34%}.project-cloud-right{right:-34%;transform:scaleX(-1);bottom:-10%}
.projects-page main{position:relative;z-index:1;width:100%;max-width:1600px;margin:0 auto;padding:150px 5vw 110px}
.projects-page h1{font:400 clamp(58px,7.8vw,110px)/1 var(--display);letter-spacing:-.025em;margin:0 0 18px;text-shadow:none}.projects-page h1 span{display:inline;font:inherit;letter-spacing:inherit;margin:0;color:var(--red)}
.projects-intro{font-size:clamp(16px,1.6vw,21px);margin:0 0 42px}.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.project-cover{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;padding:28px}.project-cover svg{display:block;width:100%;height:auto;overflow:hidden}.cover-dae{background:#e1e2d6}.cover-esme{background:#eee6d9}.cover-humo{background:#c6bacf}.cover-humo strong{font:700 clamp(50px,7vw,110px)/1 Georgia,serif;letter-spacing:-.065em}
.project-card h2{font:400 clamp(28px,3vw,42px)/1 var(--display);margin:18px 0 8px}.project-card p{font-size:13px;line-height:1.5;margin:0}.project-status{display:inline-block;margin-top:13px;font-size:9px;text-transform:uppercase;letter-spacing:1.4px;color:#383638}
.projects-page .projects-footer{display:block;position:relative;z-index:1;background:#17151d;color:var(--bone);margin:0;padding:48px 5vw 25px}.projects-closing{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:35px;border-bottom:1px solid #eee6d936}.closing-eyebrow{font-size:9px;letter-spacing:2px;margin:0 0 14px}.projects-cta{font:400 clamp(34px,4vw,62px)/1.1 var(--display)}.projects-cta span{color:var(--red)}.projects-cta:hover,.projects-footer a:hover{color:#ed3952}.projects-contact{display:inline-block;border:1px solid #eee6d97a;border-radius:40px;padding:15px 22px;font-size:12px;white-space:nowrap}.projects-footer-bottom{max-width:1440px;margin:24px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}.projects-footer-bottom img{width:140px;height:auto;display:block}.projects-footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px;font-size:10px}.projects-footer-bottom small{font-size:10px;opacity:.75}
@media(max-width:700px){.projects-page main{padding:125px 6vw 70px}.projects-page h1{font-size:clamp(48px,12vw,76px)}.projects-intro{margin-bottom:28px}.projects-grid{grid-template-columns:minmax(0,1fr);gap:36px}.project-cover{aspect-ratio:1.12}.cover-humo strong{font-size:88px}.project-card h2{font-size:34px}.project-card p{font-size:14px}.project-cloud{position:fixed;width:180%;height:65%;bottom:-10%}.project-cloud-left{left:-105%}.project-cloud-right{right:-100%;bottom:-5%}.projects-page .projects-footer{padding:36px 6vw 25px}.projects-closing,.projects-footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:24px}.projects-footer-bottom nav{justify-content:center;gap:12px 20px}.projects-footer-bottom small{width:100%}}

.projects-footer-bottom img{filter:invert(1)}

/* Keep the closing content on the same uninterrupted sky. */
.projects-page main{padding-bottom:65px}.projects-page .projects-footer{background:transparent;color:var(--ink);padding:35px 5vw 28px}.projects-closing{justify-content:center;text-align:center;flex-direction:column;gap:24px;border:0;padding-bottom:24px}.projects-contact{border-color:#1d1b1c80;background:#eee6d980;color:var(--ink)}.projects-footer-bottom{justify-content:center;margin:8px auto 0;text-align:center}.projects-footer-bottom small{opacity:.85}.projects-page .projects-footer a:hover{color:var(--red)}
@media(max-width:700px){.projects-page main{padding-top:108px;padding-bottom:45px}.projects-page .projects-footer{padding:30px 6vw 28px}.projects-cta{font-size:clamp(32px,8.5vw,48px)}}

/* Desktop overview: show the work and its complete invitation together. */
@media(min-width:701px){
 .projects-page main{max-width:calc(3 * clamp(200px,calc(100vh - 610px),430px) + 48px + 10vw);max-width:calc(3 * clamp(200px,calc(100svh - 610px),430px) + 48px + 10vw);padding-top:110px;padding-bottom:24px}
 .projects-page h1{font-size:clamp(64px,6.3vw,88px);margin-bottom:12px}
 .projects-intro{margin-bottom:24px}
 .project-card h2{font-size:34px;margin:12px 0 6px}
 .project-status{margin-top:8px}
 .projects-page .projects-footer{padding-top:16px;padding-bottom:16px}
 .closing-eyebrow{font-size:14px;line-height:1.4;letter-spacing:1.5px;margin-bottom:12px}
 .projects-closing{gap:14px;padding-bottom:12px}
}

/* Approved minimal index: logos directly on the continuous sky. */
.projects-index main{max-width:1400px;padding-top:110px;padding-bottom:50px}
.projects-index .projects-grid{margin-top:50px;gap:50px}
.projects-index .project-card{text-align:center;min-width:0}
.projects-index .project-cover{background:transparent;aspect-ratio:auto;height:240px;padding:15px 12px;overflow:visible}
.projects-index .project-cover svg{width:100%;height:auto;max-height:190px;filter:grayscale(1) brightness(.2)}
.projects-index .project-cover .project-humo-logo{width:100%;height:auto;max-height:190px;filter:grayscale(1) brightness(.2)}
.projects-index .project-card p{font-size:14px;line-height:1.5;margin:20px 0 0}
.projects-index .project-status{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);margin-top:12px;padding-bottom:4px;border-bottom:1px solid #1d1b1c80}
.projects-index .project-card>a:hover .project-status{color:var(--red);border-color:var(--red)}
@media(max-width:700px){.projects-index main{padding-top:108px;padding-bottom:40px}.projects-index .projects-grid{margin-top:25px;gap:38px}.projects-index .project-card{width:100%;max-width:330px;margin:auto}.projects-index .project-cover{height:175px;padding:12px 20px}.projects-index .project-cover svg,.projects-index .project-cover .project-humo-logo{max-height:150px}.projects-index .project-card p{margin-top:10px;font-size:14px}}



/* Clear project entry controls, including touch and keyboard feedback. */
.projects-index .project-status{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:132px;margin-top:14px;padding:9px 22px;border:1px solid #1d1b1c99;border-radius:999px;background:transparent;font-weight:500;line-height:1.25;transition:background-color .18s,color .18s,border-color .18s}
.projects-index .project-card>a:focus-visible .project-status,.projects-index .project-card>a:active .project-status{background:var(--red);border-color:var(--red);color:#fff}
@media(hover:hover){.projects-index .project-card>a:hover .project-status{background:var(--red);border-color:var(--red);color:#fff}}
@media(prefers-reduced-motion:reduce){.projects-index .project-status{transition:none}}

/* v81: optical logo balance and consistent project-card rhythm. */
.projects-index .project-cover{display:flex;align-items:flex-end;justify-content:center}
.projects-index .cover-dae svg{width:88%;max-height:167px}
.projects-index .cover-esme svg{width:100%;max-height:190px}
.projects-index .project-cover .project-humo-logo{width:115%;max-width:none;max-height:218px;flex-shrink:0}
.projects-index .project-card p{display:flex;align-items:center;justify-content:center;min-height:42px;margin:20px 0 0;font-size:14px;line-height:1.5}
.projects-index .project-status{margin-top:14px}
@media(max-width:700px){.projects-index .project-cover{height:175px}.projects-index .cover-dae svg{max-height:132px}.projects-index .cover-esme svg{max-height:150px}.projects-index .project-cover .project-humo-logo{max-height:172px}.projects-index .project-card p{margin-top:20px}}

/* v82: clearer invitation and breathing room before the closing headline. */
.projects-index .closing-eyebrow{font-size:clamp(18px,1.45vw,24px);font-weight:600;line-height:1.35;letter-spacing:1.1px;margin:0 0 22px}
@media(min-width:701px){.projects-index main{padding-bottom:38px}.projects-index .projects-footer{padding-top:16px}.projects-index .projects-closing{gap:14px;padding-bottom:8px}.projects-index .projects-footer-bottom{margin-top:4px}}
@media(max-width:700px){.projects-index .closing-eyebrow{font-size:17px;letter-spacing:.7px;margin-bottom:20px}}

/* Desktop overview uses the viewport instead of leaving an empty lower half. */
@media(min-width:701px) and (min-height:720px){
body.projects-index{min-height:100svh;display:flex;flex-direction:column}
.projects-index main{flex:1;display:flex;flex-direction:column;width:90%;max-width:1680px;padding:clamp(96px,11.7svh,130px) 0 20px}
.projects-index h1{font-size:clamp(60px,8svh,92px);margin-bottom:12px}
.projects-index .projects-intro{font-size:clamp(18px,2.1svh,23px);line-height:1.4;margin:0}
.projects-index .projects-grid{flex:1;align-content:center;margin-top:clamp(18px,3svh,36px);gap:clamp(35px,4vw,80px)}
.projects-index .project-cover{height:clamp(125px,calc(100svh - 730px),270px);padding:0 12px}
.projects-index .cover-dae svg{max-height:220px}
.projects-index .cover-esme svg{max-height:250px}
.projects-index .project-cover .project-humo-logo{max-height:285px}
.projects-index .project-card p{font-size:clamp(14px,1.65svh,18px);min-height:44px;margin-top:20px}
.projects-index .project-status{font-size:15px;min-width:144px;min-height:44px}
.projects-index .projects-footer{flex:0 0 auto;width:100%;padding:0 5vw clamp(25px,3.3svh,40px)}
.projects-index .projects-closing{gap:14px;padding-bottom:8px}
.projects-index .closing-eyebrow{font-size:clamp(18px,2.3svh,26px);margin-bottom:18px}
.projects-index .projects-cta{font-size:clamp(40px,6svh,66px)}
.projects-index .projects-footer-bottom{margin-top:4px}
}