
:root{--paper:#fff8ed;--ink:#44362f;--accent:#bd472e;--muted:#796657;--line:#ddc4a7;--soft:#f5dfca;--second:#e7eccf;--shadow:#9a6850;--cut:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.concept-b{--paper:#f4efff;--ink:#39304f;--accent:#5942a8;--muted:#6c607f;--line:#cbbde9;--soft:#dfd3f4;--second:#fff0b9;--shadow:#77658f}
.concept-c{--paper:#edf6fa;--ink:#344a60;--accent:#315b85;--muted:#526c7d;--line:#b9d3df;--soft:#d4e8f2;--second:#fff0c9;--shadow:#6b92a4}
body{background:var(--paper);color:var(--ink)}.concept-bar{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;font-size:10px;background:var(--ink);color:var(--paper);position:relative;z-index:10}.concept-bar a{text-decoration:underline;text-underline-offset:3px}header{position:relative;inset:auto;padding:25px 5%;background:var(--paper);mix-blend-mode:normal!important}header .brand{background:var(--paper)}nav{font-weight:600}#motion-toggle{border-radius:0;border:1px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--line);color:var(--ink)}
.nav-button,.button,.pixel-cta,.call-button,.scene-pills button,.film-controls button{border-radius:0;box-shadow:none;border:0;clip-path:var(--cut);color:var(--paper);background:var(--accent);transition:transform .12s steps(2);font-weight:650}.nav-button:hover,.button:hover,.pixel-cta:hover,.call-button:hover,.scene-pills button:hover{transform:translateY(-3px)}.nav-button:active,.button:active,.pixel-cta:active,.call-button:active{transform:translateY(3px)}.hero{position:relative;background:var(--paper);padding-top:35px;overflow:hidden}.hero-copy{mix-blend-mode:normal!important}.hero h1.hero-lettering{background:var(--paper);height:180px;margin-top:12px;margin-bottom:0}.pixel-label{display:inline-flex;align-items:center;gap:10px;font:11px monospace;letter-spacing:.08em;color:var(--muted)}.pixel-label:before{content:'';width:7px;height:7px;background:var(--accent);box-shadow:9px 0 var(--line)}.hero-copy>p:last-of-type{color:var(--ink);font-size:18px;margin:8px 0 20px}.hero-actions{display:flex;align-items:center;justify-content:center;gap:24px;font-size:12px;margin:18px 0}.pixel-cta{display:inline-flex;align-items:center;gap:28px;padding:17px 24px;min-height:48px}.hero-product{max-width:960px;margin:0 auto;background:#f0e8dd;clip-path:var(--cut)}.hero-product>img{mask-image:linear-gradient(to bottom,transparent,black 8%,black 93%,transparent)}.call-button{background:var(--second);color:var(--ink);font-size:12px;padding:13px 18px;min-height:44px;left:17%;top:64%;backdrop-filter:none}.call-icon{color:var(--ink)}.call-button.responding{background:var(--second)}.hero-bottom{color:var(--muted);padding:20px 30px 32px;max-width:1020px}.live-dot{border-radius:0;background:var(--accent);animation:pixelblink 3s steps(2,end) infinite}.pixel-divider{height:16px;background:linear-gradient(90deg,var(--soft) 50%,transparent 50%) 0 0/32px 8px,linear-gradient(var(--soft),var(--soft)) 0 8px/100% 8px no-repeat}.intro{background:var(--soft);padding:65px 20px}.intro h2{font-size:38px;letter-spacing:-.04em}.eyebrow{font:11px monospace;color:var(--muted);letter-spacing:.1em}.intro>p:last-child{color:var(--ink)}.days{background:var(--paper);padding-top:30px}.sticky-product{background:var(--paper)}.chapter-indicator{color:var(--muted);font-family:monospace}.story-product{background:#f0e8dd;clip-path:var(--cut)}.chapters h2,.records h2,.yours h2,.meet h2{color:var(--ink)}.chapters p:not(.eyebrow),.records p,.yours-copy>p:not(.eyebrow),.moments-heading p:last-child{color:var(--muted)}.feature-note{border-top:2px dotted var(--line);color:var(--muted)}.scene-pills{gap:8px}.scene-pills button{background:var(--soft);color:var(--ink);padding:10px 24px}.scene-pills button[aria-pressed=true]{background:var(--accent);color:var(--paper)}.moments{background:var(--soft)}.film-product{background:#f0e8dd;clip-path:var(--cut)}.film-controls{color:var(--ink)}.film-controls button{padding:12px 20px;background:var(--accent)}.fine{color:var(--muted)!important}.yours{background:var(--paper)}.yours figure{background:#f0e8dd;padding:8px;clip-path:var(--cut)}.yours em{color:var(--accent)}.records{background:var(--second)}.record-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.record-links span{padding:25px 14px;background:var(--paper);clip-path:var(--cut);border:0;font-size:13px;color:var(--ink)}.meet{background:var(--soft)}.button{padding:18px 30px}.meet>p{color:var(--muted)}footer{background:var(--paper);mix-blend-mode:normal!important}footer .brand{background:var(--paper)}footer>div{color:var(--muted)}.review-notes{color:var(--muted)}.pixel-cloud{display:none;pointer-events:none;position:absolute;width:100px;height:32px;background:var(--second);clip-path:polygon(0 14px,14px 14px,14px 7px,28px 7px,28px 0,65px 0,65px 7px,82px 7px,82px 14px,100% 14px,100% 100%,0 100%);animation:drift 7s steps(5,end) infinite alternate}.cloud-one{left:10%;top:110px}.cloud-two{right:10%;top:220px;animation-delay:-4s;width:70px}
.concept-b .hero{display:grid;grid-template-columns:.8fr 1.3fr;align-items:center;gap:0 30px;padding:55px 5% 35px}.concept-b .hero-copy{text-align:left}.concept-b .hero h1.hero-lettering{width:300px;height:138px;margin:20px 0 0}.concept-b .hero-lettering img{margin-top:-23px}.concept-b .hero-copy>p{font-size:16px}.concept-b .hero-actions{justify-content:flex-start;gap:14px;flex-wrap:wrap}.concept-b .hero-product{width:100%;margin:0;outline:8px solid var(--second);clip-path:none;box-shadow:8px 8px 0 var(--line);align-self:center}.concept-b .hero-product:before{content:'KKAMANG / LIVE';display:block;height:30px;background:var(--second);font:10px monospace;letter-spacing:.08em;padding:6px 10px}.concept-b .hero-product:before{position:absolute;top:-30px;left:-8px;right:-8px;height:30px}.concept-b .hero-product>img{mask-image:none}.concept-b .hero-bottom{grid-column:1/-1;width:100%;padding:35px 0 0}.concept-b .call-button{font-size:10px;padding:10px;gap:6px}.concept-b .call-icon{width:16px}.concept-b .pixel-divider{height:8px}.concept-b .intro{border-top:2px solid var(--line)}
.concept-c .hero{padding-top:30px}.concept-c .pixel-cloud{display:block}.concept-c .hero-product{max-width:940px;outline:2px solid var(--line);clip-path:none;box-shadow:10px 10px 0 var(--soft);margin-top:30px}.concept-c .hero-bottom{margin-top:12px}.concept-c .hero-product>img{mask-image:none}.concept-c .hero h1.hero-lettering{width:340px;height:157px}.concept-c .hero-lettering img{margin-top:-26px}.concept-c .intro{background:var(--second)}.concept-c .pixel-divider{background:linear-gradient(90deg,var(--second) 50%,transparent 50%) 0 0/32px 8px,linear-gradient(var(--second),var(--second)) 0 8px/100% 8px no-repeat}.concept-c .scene-pills button{clip-path:var(--cut)}
@keyframes drift{to{transform:translateX(24px)}}@keyframes pixelblink{50%{opacity:.4}}
@media(max-width:760px){.concept-bar{font-size:9px;padding:0 4%}.concept-bar span{font-size:9px}header{padding:18px 5%}nav .nav-button{padding:12px;font-size:10px}.hero{padding-top:28px}.hero h1.hero-lettering{width:290px;height:135px}.hero-lettering img{margin-top:-22px}.hero-copy>p:last-of-type{font-size:15px}.hero-actions{gap:18px;font-size:11px;margin-bottom:28px}.pixel-cta{padding:15px 18px;gap:14px}.hero-product{width:100%;max-width:100%;margin:0}.call-button{left:13%;top:66%;font-size:10px;padding:10px;gap:6px}.call-icon{width:16px;height:16px}.hero-bottom{padding:22px 6%}.intro{padding:48px 20px}.intro h2{font-size:29px}.days{padding-top:0}.sticky-product{top:0}.chapters article{min-height:520px}.record-links{grid-template-columns:1fr}.record-links span{padding:18px}.concept-b .hero{display:block;padding:25px 6% 10px}.concept-b .hero-copy{text-align:center}.concept-b .hero h1.hero-lettering{margin:18px auto 0;width:280px;height:132px}.concept-b .hero-actions{justify-content:center}.concept-b .hero-product{margin-top:60px}.concept-b .hero-bottom{padding:24px 0}.concept-c .hero h1.hero-lettering{width:280px;height:130px}.concept-c .hero-lettering img{margin-top:-22px}.concept-c .hero-product{width:90%;margin:30px auto 0;border-width:5px;box-shadow:6px 6px 0 var(--soft)}.cloud-one{left:1%;top:40px;opacity:.5}.cloud-two{right:0;top:240px;opacity:.5}.concept-c .hero-copy{position:relative;z-index:2}footer{gap:20px}footer>div{gap:10px}.hero h1.hero-lettering{max-width:86vw}}
@media(prefers-reduced-motion:reduce){.pixel-cloud,.live-dot{animation:none!important}}
/* Keep photographic content prominent in the first viewport. */
header{padding-top:17px;padding-bottom:17px;background:transparent;mix-blend-mode:multiply!important}header .brand,footer .brand,.hero h1.hero-lettering{background:transparent}.hero-copy{mix-blend-mode:multiply!important}footer{mix-blend-mode:multiply!important}.concept-a .hero{padding-top:12px}.concept-a .hero h1.hero-lettering{width:300px;height:138px;margin-top:8px}.concept-a .hero-lettering img{margin-top:-23px}.concept-a .hero-copy>p:last-of-type{font-size:16px;margin:6px 0 12px}.concept-a .hero-actions{margin:10px 0 20px}.concept-a .pixel-cta{padding:13px 20px;min-height:42px}.concept-c .hero{padding-top:12px}.concept-c .hero h1.hero-lettering{width:300px;height:138px}.concept-c .hero-lettering img{margin-top:-23px}.concept-c .hero-actions{margin:10px 0}.concept-c .hero-product{margin-top:18px}
@media(max-width:760px){.concept-a .hero h1.hero-lettering,.concept-c .hero h1.hero-lettering{width:250px;height:117px}.concept-a .hero-lettering img,.concept-c .hero-lettering img{margin-top:-19px}.concept-a .hero-actions{margin-bottom:18px}.concept-c .hero-product{margin-top:20px}}
