.kiss-project-page { background: #080b0a; color: #e8f1f0; }
.kiss-project-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 80% 45%, rgba(255,26,47,.16), transparent 31rem), linear-gradient(115deg, #070a09 0%, #111815 100%); }
.kiss-project-hero::after { content: "KISS"; position: absolute; right: -1vw; bottom: -4vw; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.075); font: 900 clamp(8rem,22vw,22rem)/.7 system-ui,sans-serif; letter-spacing: -.08em; pointer-events: none; }
.kiss-opening, .kiss-process, .kiss-inspiration, .kiss-finished { background: #080b0a; }
.kiss-feature { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(310px,.88fr); gap: clamp(2rem,6vw,6rem); align-items: center; }
.kiss-copy p, .process-grid p, .inspiration-grid p { color: #b9c8c4; line-height: 1.68; }
.kiss-copy h2, .kiss-process h2, .inspiration-grid h2, .kiss-finished h2 { margin-top: .3rem; }
.kiss-photo { appearance: none; display: block; width: 100%; padding: 0; border: 1px solid rgba(93,220,255,.22); border-radius: 1rem; overflow: hidden; background: #111; cursor: zoom-in; box-shadow: 0 22px 55px rgba(0,0,0,.42); transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.kiss-photo:hover, .kiss-photo:focus-visible { border-color: #5ddcff; outline: none; box-shadow: 0 28px 65px rgba(0,0,0,.55), 0 0 24px rgba(93,220,255,.12); }
.kiss-photo img { display: block; width: 100%; height: auto; }
.kiss-process { border-block: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 50% 10%, rgba(40,247,10,.055), transparent 34rem), #0a0f0e; }
.process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; margin-top: 2.2rem; }
.process-grid article { position: relative; padding: 1rem 1rem 1.35rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1.2rem; background: linear-gradient(150deg,rgba(24,32,30,.96),rgba(10,14,13,.98)); }
.process-grid .kiss-photo { aspect-ratio: 1; }
.process-grid .kiss-photo img { height: 100%; object-fit: cover; }
.process-number { display: inline-block; margin-top: 1.1rem; color: #5ddcff; font: 800 .73rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .16em; }
.process-grid h3 { margin: .65rem 0 .4rem; font-size: 1.35rem; }
.process-grid p { margin: 0; }
.kiss-inspiration { background: linear-gradient(120deg,rgba(91,12,22,.2),rgba(8,11,10,.98)); }
.inspiration-grid { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: clamp(2rem,6vw,6rem); align-items: center; }
.film-still { transform: rotate(-1.5deg); }
.finished-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.finished-grid .wide { grid-column: 1 / -1; }
.finished-grid .kiss-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.kiss-lightbox { width: min(1120px,calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 1px solid rgba(93,220,255,.36); border-radius: 1rem; background: #070a09; color: #fff; box-shadow: 0 36px 100px rgba(0,0,0,.85); overflow: hidden; }
.kiss-lightbox::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(10px); }
.kiss-lightbox img { display: block; max-width: 100%; max-height: 80svh; width: auto; height: auto; margin: auto; }
.kiss-lightbox p { margin: 0; padding: .9rem 4rem 1rem; color: #c7d3d0; text-align: center; }
.kiss-lightbox-close { position: absolute; z-index: 2; top: .75rem; right: .75rem; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(5,8,7,.84); color: #fff; font: 400 2rem/1 system-ui; cursor: pointer; }
@media (max-width: 800px) { .kiss-feature, .inspiration-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .finished-grid { grid-template-columns: 1fr; } .finished-grid .wide { grid-column: auto; } }
@media (max-width: 520px) { .kiss-lightbox p { padding-inline: 1rem; } }
@media (prefers-reduced-motion: reduce) { .kiss-photo { transition: none; transform: none !important; } }