:root{--red:#ef1727;--yellow:#ffd21b;--ink:#111;--paper:#fffdf8;--pink:#f6c8d7;--blue:#a9e0f4;--green:#b8e5a7}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{font-family:Montserrat,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* HOME: the approved artwork is preserved pixel-for-pixel; only the category layout is changed. */
.home-page{width:min(1024px,100%);margin:0 auto;background:#fff;line-height:0;overflow:hidden}
.home-top{position:relative;width:100%}
.home-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;z-index:10;display:block;background:transparent;border:0;padding:0;margin:0;cursor:pointer}
.hotspot:focus-visible{outline:3px solid rgba(239,23,39,.7);outline-offset:2px;border-radius:10px}

/* Navigation hotspots remain aligned to the original approved artwork. */
.nav-home{left:30.5%;top:.8%;width:8.8%;height:7.2%}
.nav-themes{left:39.7%;top:.8%;width:13.5%;height:7.2%}
.nav-collab{left:53.1%;top:.8%;width:18.2%;height:7.2%}
.social-instagram{left:80.5%;top:.45%;width:5.6%;height:8%}
.social-facebook{left:86.3%;top:.45%;width:5.6%;height:8%}
.menu-hit{right:1.9%;top:.4%;width:6.3%;height:8%}

.menu-panel{display:none;position:absolute;z-index:30;right:18px;top:62px;width:250px;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:6px 7px 0 var(--ink);line-height:1;padding:7px}
.menu-panel.open{display:flex;flex-direction:column}
.menu-panel a{font-family:Montserrat,Arial,sans-serif;font-size:18px;font-weight:700;padding:12px 14px;border-bottom:1px solid #ddd}
.menu-panel a:last-child{border-bottom:0}

.home-cards{display:flex;flex-direction:column;gap:18px;padding:18px 4.0% 0}
.home-card{display:block;width:100%;line-height:0}
.home-card img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.home-collab{display:block;margin:20px 2.8% 0;line-height:0}
.home-collab img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.home-footer-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}


.page{min-height:100vh;background:var(--paper)}
.page-top{height:70px;background:#fff;border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;z-index:20}
.page-logo{font-family:Montserrat,Arial,sans-serif;font-size:31px;font-weight:400;line-height:1}
.page-home{font-family:Montserrat,Arial,sans-serif;font-size:25px;font-weight:400}
.page-main{max-width:1040px;margin:0 auto;padding:36px 22px 65px}
.back{display:inline-block;background:var(--ink);color:#fff;border-radius:18px;padding:10px 16px;font-size:13px;font-weight:900}
.page-title{font-family:Montserrat,Arial,sans-serif;font-size:clamp(44px,6.3vw,76px);font-weight:700;line-height:1.02;margin:24px 0 14px;text-transform:uppercase;letter-spacing:.01em}
.page-title .red{color:var(--red)}
.lead{font-size:19px;line-height:1.6;font-weight:700;max-width:880px;margin:0}
.panel{margin-top:24px;border:3px solid var(--ink);border-radius:24px;box-shadow:7px 8px 0 var(--ink);padding:28px;background:#fff}
.panel.pink{background:var(--pink)}
.panel.blue{background:var(--blue)}
.panel.green{background:var(--green)}
.panel.yellow{background:var(--yellow)}
.panel.paper{background:#f5f0e4}
.panel h2{font-family:Montserrat,Arial,sans-serif;font-size:42px;font-weight:700;line-height:1;margin:0 0 14px}
.panel p{font-size:17px;line-height:1.6;font-weight:700;margin:0 0 15px}

/* KANE: use the exact existing five-step artwork. */
.steps-image{display:block;width:min(100%,760px);height:auto;margin:26px auto 0;border:0;box-shadow:none;border-radius:0}

/* PARE */
.social-buttons{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 12px}
.social-button{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--ink);border-radius:16px;padding:12px 20px;font-weight:900;background:#fff}
.social-button.facebook{background:#1976df;color:#fff}
.social-button.instagram{background:#ef4776;color:#fff}

/* COLLABORATION */
.collab-intro{font-size:20px;line-height:1.6;font-weight:700;max-width:900px}
.collab-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.collab-item{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:17px;font-size:16px;line-height:1.45;font-weight:800}
.form-title{margin-top:30px!important}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:900}
.field input,.field textarea{width:100%;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:13px;font:700 15px Montserrat,Arial,sans-serif}
.field textarea{min-height:150px;resize:vertical}
.form-submit{grid-column:1/-1;border:3px solid var(--ink);border-radius:16px;padding:13px 18px;background:var(--red);color:#fff;font:900 16px Montserrat,Arial,sans-serif;cursor:pointer}
.form-note{grid-column:1/-1;font-size:13px;line-height:1.45;font-weight:500;margin:0}

/* ABOUT */
.about-layout{display:grid;grid-template-columns:minmax(280px,410px) 1fr;gap:30px;align-items:start}
.about-photo{display:block;width:100%;height:auto;border:3px solid var(--ink);border-radius:22px;box-shadow:7px 8px 0 var(--ink)}
.about-copy{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:7px 8px 0 var(--ink);padding:28px}
.about-copy h2{margin:0 0 16px}
.about-copy p{font-size:17px;line-height:1.7;font-weight:700;margin:0 0 17px}
.about-highlight{margin-top:25px;background:var(--yellow);border:3px solid var(--ink);border-radius:20px;box-shadow:6px 7px 0 var(--ink);padding:22px;font-family:Montserrat,Arial,sans-serif;font-size:31px;font-weight:700;line-height:1.15}
.footer{text-align:center;padding:0 20px 45px;font-family:Montserrat,Arial,sans-serif;font-size:25px;font-weight:700}
.footer span{color:var(--red)}

@media(max-width:700px){
 .menu-panel{right:8px;top:48px;width:220px}
 .page-top{height:60px;padding:0 14px}
 .page-logo{font-size:27px}.page-home{font-size:21px}
 .page-main{padding:28px 14px 52px}
 .page-title{font-size:50px}
 .lead,.collab-intro{font-size:18px}
 .panel{padding:21px;border-width:2px;box-shadow:5px 6px 0 var(--ink)}
 .panel h2{font-size:36px}
 .collab-grid,.form{grid-template-columns:1fr}
 .field.full,.form-submit,.form-note{grid-column:auto}
 .about-layout{grid-template-columns:1fr;gap:24px}
 .about-photo{max-width:420px;margin:0 auto}
 .about-copy{padding:21px}
 .about-copy p{font-size:15px}
 .about-highlight{font-size:26px}
}