/*
Theme Name: Keep The Peace v4
Author: KTP
Description: One-page landing theme for Keep The Peace (KTP) - black, forest green and white. v4: video hero banner, refined motion, real brand assets.
Version: 5.0
Text Domain: keep-the-peace
*/

:root{--ink:#090D0B;--coal:#131A16;--green:#245B43;--leaf:#3E9B6E;--white:#F5F7F5;--mist:#B8C2BC;--line:rgba(255,255,255,.10);--f-head:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--f-body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--gap:clamp(2rem,5vw,5rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--ink);color:var(--mist);font:400 17.5px/1.75 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--leaf)}
h1,h2,h3{font-family:var(--f-head);color:var(--white);text-transform:uppercase;line-height:1;margin:0 0 .6em;letter-spacing:.015em;font-weight:700}
h1{font-size:clamp(3.8rem,10vw,8rem);font-weight:800}
h2{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:.5em}
h3{font-size:1.65rem;letter-spacing:.03em}
p{margin:0 0 1.2em;max-width:62ch}p:last-child{margin-bottom:0}
.wrap{width:min(1200px,calc(100% - 3rem));margin:0 auto}
section{padding:clamp(4.5rem,9vw,8rem) 0}.alt{background:var(--coal)}
.eyebrow{display:block;font:600 1.05rem var(--f-head);color:var(--leaf);text-transform:uppercase;letter-spacing:.2em;margin-bottom:1rem}
.sec-head{max-width:720px;margin-bottom:3rem}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;background:var(--green);color:#fff;text-decoration:none;font:700 1.05rem var(--f-head);text-transform:uppercase;letter-spacing:.12em;padding:0 2.2rem;border:1px solid var(--leaf);border-radius:2px;cursor:pointer;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.btn:hover{background:var(--leaf);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(62,155,110,.55)}.btn.ghost{background:transparent;border-color:rgba(255,255,255,.5)}.btn.ghost:hover{background:#fff;color:var(--ink)}.btn.sm{min-height:44px;padding:0 1.4rem;font-size:.95rem}
/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(180deg,rgba(9,13,11,.88),transparent);border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
.site-header.scrolled{background:rgba(9,13,11,.94);backdrop-filter:blur(14px);border-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:96px;gap:2rem}
.brand{display:flex;align-items:center;gap:.9rem;color:#fff;text-decoration:none}
.brand img{width:54px;height:54px;flex:none}
.brand-name{font:800 1.55rem/1 var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.nav{display:flex;align-items:center;gap:2.5rem}
.nav ul{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0}
.nav ul a{position:relative;color:#fff;text-decoration:none;font:700 1.05rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.14em;padding:.6rem 0;transition:color .25s}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--leaf);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav ul a:hover{color:var(--leaf)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{box-shadow:0 10px 28px -12px rgba(62,155,110,.6)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;padding:.55rem 1.1rem;font:700 1rem var(--f-head);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
/* hero */
.hero{position:relative;overflow:hidden;padding:0;background:var(--ink)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;filter:saturate(.82) contrast(1.06) brightness(.92)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,13,11,.94) 20%,rgba(9,13,11,.72) 45%,rgba(9,13,11,.38) 70%,rgba(9,13,11,.55) 100%),radial-gradient(ellipse 60% 70% at 80% 45%,rgba(36,91,67,.35) 0,transparent 70%)}
.hero .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:9rem 0 5rem}
.hero-center{text-align:center;max-width:1100px}
.hero-center .tag{font:600 clamp(1rem,2vw,1.4rem)/1.5 var(--f-head);color:var(--leaf);text-transform:uppercase;letter-spacing:.34em;margin-bottom:2rem}
.hero-center h1{font-size:clamp(4.2rem,13vw,11.5rem);font-weight:800;margin-bottom:1.5rem}
.hero-center .hline{width:120px;height:3px;background:var(--leaf);margin:0 auto 2rem}
.hero-center .lead{font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--white);max-width:60ch;margin:0 auto 2.8rem}
.hero-center .cta{justify-content:center}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;width:26px;height:44px;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.scroll-hint span{display:block;width:4px;height:9px;background:var(--leaf);border-radius:2px;margin:8px auto;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
.hero .tag{font:600 1.4rem/1.3 var(--f-head);color:var(--leaf);text-transform:uppercase;letter-spacing:.14em;margin-bottom:1.5rem;max-width:30ch}
.hero .lead{font-size:1.25rem;line-height:1.65;color:var(--white);max-width:36ch;margin:.4rem 0 2.4rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap}
.frame{width:100%;border:1px solid var(--line);outline:1px solid var(--green);outline-offset:14px;box-shadow:0 40px 90px -30px #000;object-fit:cover}
.hero .frame{max-width:460px;margin-left:auto;aspect-ratio:3/4;object-position:50% 30%}
/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000;padding:1.25rem 0}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:mscroll 26s linear infinite;align-items:center}
.marquee-track span{font:800 1.6rem var(--f-head);color:var(--white);text-transform:uppercase;letter-spacing:.24em;white-space:nowrap}
.marquee-track i{color:var(--leaf);font-style:normal;font-size:1rem}
@keyframes mscroll{to{transform:translateX(-50%)}}
/* nocturne replication */
/* top marquee */
.topmarq{overflow:hidden;background:var(--green);padding:.7rem 0;position:relative;z-index:5;margin-top:96px}
.topmarq .marquee-track span{font-size:1rem;letter-spacing:.26em;color:#fff}
.topmarq .marquee-track i{color:#fff;opacity:.7}
.marquee-track.slow{animation-duration:40s}
/* big marquee */
.marquee.big{padding:1.6rem 0;background:#000}
.marquee.big .marquee-track span{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:.1em}
.marquee-track .out{color:transparent!important;-webkit-text-stroke:1.5px var(--leaf)}
/* manifesto stacked */
.manifesto{padding:clamp(5rem,10vw,9rem) 0}
.stacked{margin:0 0 3.5rem;max-width:none}
.stacked .sl{display:block;font:800 clamp(3rem,9.5vw,8rem)/1.02 var(--f-head);color:var(--white);text-transform:uppercase;letter-spacing:.01em;margin-bottom:.35rem}
.stacked .sl em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--leaf)}
.stacked .sl img{display:inline-block;height:.82em;width:1.7em;object-fit:cover;vertical-align:-.06em;border:1px solid var(--line)}
.manifesto .two{max-width:1100px}
/* gallery strip */
.gal{overflow:hidden;padding:0 0 clamp(4rem,8vw,7rem);background:var(--ink)}
.gal-track{display:flex;gap:1.2rem;width:max-content;animation:mscroll 45s linear infinite}
.gal-track img{height:clamp(200px,28vw,320px);width:auto;object-fit:cover;border:1px solid var(--line);filter:saturate(.85) contrast(1.05)}
/* tour gig list */
.giglist{border-top:1px solid var(--line)}
.gig{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 1rem;border-bottom:1px solid var(--line);transition:background .3s,padding .3s}
.gig:hover{background:rgba(36,91,67,.14);padding-left:1.8rem}
.gig-k{display:block;font:700 1rem var(--f-head);color:var(--leaf);text-transform:uppercase;letter-spacing:.22em;margin-bottom:.5rem}
.gig h3{font-size:clamp(1.8rem,3.5vw,2.8rem);margin:0 0 .3rem}
.gig p{margin:0;color:var(--mist)}
@media(max-width:860px){.topmarq{margin-top:76px}
.gig{flex-direction:column;align-items:flex-start}}
/* mission */
.statement{font:800 clamp(2.8rem,7vw,5.6rem)/.98 var(--f-head);color:var(--white);text-transform:uppercase;max-width:14ch;margin:0 0 2rem}
.statement span{color:var(--leaf)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.card{background:var(--coal);border:1px solid var(--line);border-top:4px solid var(--leaf);padding:2.2rem 2rem 2.4rem;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -25px rgba(0,0,0,.7);border-top-color:#fff}
.alt .card{background:var(--ink)}
.card .n{font:800 1rem var(--f-head);color:var(--leaf);letter-spacing:.2em;display:block;margin-bottom:1rem}
.card h3{margin-bottom:.5em}.card p{margin:0;font-size:1rem;line-height:1.7}
.prio{grid-template-columns:repeat(6,minmax(0,1fr))}.prio .card{grid-column:span 2}.prio .card:nth-child(n+4){grid-column:span 3}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.four .card{display:flex;flex-direction:column;align-items:flex-start}.four .card p{margin-bottom:1.6rem;flex:1}
/* video band */
.video-band{position:relative;overflow:hidden;padding:clamp(6rem,12vw,10rem) 0;text-align:center}
.band-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;filter:saturate(.82) contrast(1.06) brightness(.92)}
.band-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,11,.82),rgba(9,13,11,.55) 50%,rgba(9,13,11,.82))}
.video-band .wrap{position:relative;z-index:2;max-width:900px}
.video-band h2.mega{font-size:clamp(3.4rem,9vw,7.6rem);line-height:.95;margin-bottom:1rem}
.video-band h2.mega span{color:transparent;-webkit-text-stroke:2px var(--leaf)}
.video-band p{color:var(--white);font-size:1.2rem;margin:0 auto;max-width:56ch}
/* tracklist (priorities) */
.tracklist{border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:70px 1fr 1.2fr 60px;gap:1.5rem;align-items:center;padding:1.6rem 1rem;border-bottom:1px solid var(--line);text-decoration:none;transition:background .3s,padding .3s}
.trow .tn{font:800 1.1rem var(--f-head);color:var(--leaf);letter-spacing:.15em}
.trow .tt{font:700 clamp(1.6rem,3vw,2.4rem)/1 var(--f-head);color:var(--white);text-transform:uppercase;letter-spacing:.02em;transition:color .3s,transform .3s}
.trow .td{color:var(--mist);font-size:1rem;margin:0}
.trow .ta{font-size:1.8rem;color:var(--leaf);opacity:0;transform:translateX(-12px);transition:.3s;text-align:right}
.trow:hover{background:rgba(36,91,67,.16)}
.trow:hover .tt{color:var(--leaf);transform:translateX(10px)}
.trow:hover .ta{opacity:1;transform:none}
@media(max-width:860px){.topmarq{margin-top:76px}
.trow{grid-template-columns:44px 1fr 40px}.trow .td{display:none}}
/* vision */
.vision{position:relative;overflow:hidden;background:var(--ink);padding:clamp(6rem,12vw,10rem) 0}
.vision .wrap{position:relative;z-index:2}
.vision .wrap{max-width:900px;text-align:center}.vision .eyebrow{color:#fff;opacity:.8}
.vision p{font:600 clamp(1.5rem,3vw,2.2rem)/1.35 var(--f-body);color:#fff;max-width:none;letter-spacing:-.01em}
/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap);align-items:start}
.contact-grid address{font-style:normal;color:var(--white);font-size:1.1rem;line-height:1.9}
.contact-grid address strong{font:700 1.6rem var(--f-head);text-transform:uppercase;letter-spacing:.04em}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}form .full{grid-column:1/-1}
label{display:block;font:600 .85rem var(--f-body);color:var(--white);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.45rem}
input,select,textarea{width:100%;background:var(--coal);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.95rem 1rem;font:inherit;border-radius:2px}
input:focus,select:focus,textarea:focus{border-color:var(--leaf);outline:none}
.notice{background:var(--green);color:#fff;padding:.9rem 1.1rem;margin-bottom:1.2rem}
/* footer */
.site-footer{position:relative;background:#000;border-top:2px solid var(--green);padding:4rem 0 2rem;font-size:.95rem;overflow:hidden}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--leaf) 20%,#fff 50%,var(--leaf) 80%,transparent);background-size:200% 100%;animation:sweep 5s linear infinite}
@keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}
.js .freveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .freveal.in{opacity:1;transform:none}
.foot .freveal:nth-child(2){transition-delay:.12s}.foot .freveal:nth-child(3){transition-delay:.24s}.site-footer .legal.freveal{transition-delay:.36s}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gap)}
.site-footer h4{font:700 1.1rem var(--f-head);color:#fff;text-transform:uppercase;letter-spacing:.15em;margin:0 0 1rem}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin-bottom:.5rem}.site-footer a{text-decoration:none}.site-footer a:hover{text-decoration:underline}
.legal{border-top:1px solid var(--line);margin-top:3rem;padding-top:1.5rem;font-size:.85rem}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.js .reveal.in{opacity:1;transform:none}
@media(max-width:1180px){
 .burger{display:block}.nav{display:none;position:absolute;top:96px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1.2rem;background:var(--ink);border-bottom:2px solid var(--green);padding:1.5rem}
 .nav.open{display:flex}.nav ul{flex-direction:column;gap:.4rem}.nav ul a{font-size:1.15rem;padding:.6rem 0}
 .four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){.topmarq{margin-top:76px}

 .two,.contact-grid,.foot{grid-template-columns:1fr}.hero .wrap{min-height:100svh;padding:8rem 0 5rem}.brand-name{font-size:1.05rem;letter-spacing:.1em}.bar{height:76px}.nav{top:76px}
 .cards,.prio,.four{grid-template-columns:1fr}.prio .card,.prio .card:nth-child(n+4){grid-column:auto}
 form{grid-template-columns:1fr}.btn{width:100%}.vision .wrap{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js .reveal,.js .freveal{opacity:1;transform:none}}

/* cohesion: videos fade in only when ready, graded to brand */
video.vready{opacity:.55}
/* scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;pointer-events:none;background:transparent}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--leaf));transform:scaleX(0);transform-origin:left}

/* background videos (vision, tour) */
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;filter:saturate(.82) contrast(1.06) brightness(.9)}
video.vready{opacity:var(--vop,.55)}
#tour{position:relative;overflow:hidden;--vop:.3}
#tour .wrap{position:relative;z-index:2}
.vision{--vop:.5}