@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --black:#080808;
  --yellow:#f5c400;
  --white:#f5f5f0;
  --muted:#a6a6a0;
  --ease:cubic-bezier(.77,0,.18,1);
  --duration:900ms;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--black);color:var(--white);font-family:Inter,Arial,sans-serif}
body{cursor:default}
a{color:inherit;text-decoration:none}
button{font:inherit}

#kok{position:relative;width:100%;height:100vh;overflow:hidden}
.scene{
  position:absolute;
  inset:0;
  height:100vh;
  min-height:100svh;
  overflow:hidden;
  visibility:hidden;
  opacity:0;
  transform:translate3d(0,100%,0);
  transition:
    transform var(--duration) var(--ease),
    opacity 500ms ease,
    visibility 0s linear var(--duration);
  background:var(--black);
}
.scene.is-active{
  visibility:visible;
  opacity:1;
  transform:translate3d(0,0,0);
  z-index:3;
  transition:
    transform var(--duration) var(--ease),
    opacity 500ms ease,
    visibility 0s;
}
.scene.is-before{
  visibility:visible;
  opacity:.15;
  transform:translate3d(0,-100%,0);
  z-index:2;
}
.scene.is-after{
  visibility:visible;
  opacity:.15;
  transform:translate3d(0,100%,0);
  z-index:2;
}
.scene.is-horizontal{transform:translate3d(100%,0,0)}
.scene.is-horizontal.is-before{transform:translate3d(-100%,0,0)}

.scene-inner{
  position:relative;
  z-index:5;
  width:min(1400px,100%);
  height:100%;
  margin:auto;
  padding:clamp(90px,10vh,140px) clamp(24px,6vw,100px) 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.scene-inner-right{align-items:flex-end;text-align:right}
.eyebrow{
  margin:0 0 2vh;
  color:var(--yellow);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}
h1,h2{
  margin:0;
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:900;
  letter-spacing:-.065em;
  line-height:.82;
  text-transform:uppercase;
}
h1{font-size:clamp(76px,15vw,230px)}
h2{font-size:clamp(64px,12vw,185px)}
h1 span,h2 span{color:var(--yellow)}
.hero-bottom{
  margin-top:5vh;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  max-width:900px;
}
.hero-bottom p{font-size:clamp(12px,1.1vw,17px);font-weight:800;line-height:1.25;letter-spacing:.08em}
.scroll-hint{font-size:10px;letter-spacing:.2em;color:var(--muted);white-space:nowrap}

.youtube-bg{position:absolute;inset:0;z-index:0;background:#000}
.youtube-bg iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;
  min-width:177.78vh;
  min-height:100vh;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}
.video-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.25) 55%,rgba(0,0,0,.6));z-index:2}
.circle-link{
  margin-top:5vh;
  width:76px;height:76px;border:1px solid rgba(255,255,255,.55);
  border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.08em;
  transition:.3s ease;
}
.circle-link:hover{background:var(--yellow);color:#000;border-color:var(--yellow);transform:scale(1.08)}

.service-grid{
  width:min(850px,100%);margin-top:7vh;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:#292929;border:1px solid #292929;
}
.service-grid span{background:#0d0d0d;padding:22px;font-size:clamp(11px,1.2vw,16px);font-weight:900;letter-spacing:.04em}

.timeline{position:relative;width:min(1000px,90vw);margin-top:7vh;border-top:1px solid #333;padding-top:14px}
.timeline-row{height:44px;display:flex;gap:5px;align-items:center;position:relative}
.timeline-row b{width:70px;font-size:9px;color:#888;letter-spacing:.12em}
.timeline-row i{height:25px;display:block;background:#242424;flex:1}
.timeline-row:nth-child(1) i:nth-child(2){background:var(--yellow)}
.timeline-row:nth-child(2) i:nth-child(2){background:#444;flex:2}
.timeline-row:nth-child(3) i:nth-child(2){background:#f5f5f0;flex:3}
.timeline-row:nth-child(4) i:nth-child(2){background:#555;flex:4}
.timeline-row:nth-child(5) i:nth-child(2){background:var(--yellow);flex:3}
.playhead{position:absolute;top:-18px;bottom:0;left:47%;width:1px;background:var(--yellow)}
.playhead:before{content:"";position:absolute;top:0;left:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--yellow)}

.service-list{margin-top:6vh;display:flex;flex-direction:column;gap:8px}
.service-list span{font-size:clamp(14px,1.5vw,22px);font-weight:900;letter-spacing:.04em}

.story-words{display:flex;flex-wrap:wrap;gap:8px 22px;max-width:900px;margin-top:5vh}
.story-words span{font-size:clamp(12px,1.2vw,17px);font-weight:800;color:#bbb}
.story-words span:nth-child(odd){color:var(--yellow)}
.manifesto{margin:5vh 0 0;font-size:clamp(14px,1.4vw,20px);line-height:1.25;letter-spacing:.04em}
.manifesto strong{color:var(--yellow)}

.contact-inner{justify-content:flex-end;padding-top:82px;padding-bottom:38px}
.scene-contact h2{font-size:clamp(48px,8.1vw,135px);max-width:1320px}
.contact-grid{
  width:100%;margin-top:5.5vh;padding-top:24px;border-top:1px solid #333;
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px
}
.contact-grid p{margin:0 0 10px;font-size:11px;line-height:1.5;color:#aaa;letter-spacing:.04em}
.contact-grid .label{color:var(--yellow);font-weight:900;font-size:9px;letter-spacing:.16em}
.contact-grid a{display:block;font-size:12px;font-weight:800;margin:8px 0}
.end-credit{margin-top:26px;font-size:9px;color:#666;letter-spacing:.16em}
.end-credit span{color:var(--yellow);padding:0 8px}

.topbar{
  position:fixed;z-index:100;top:0;left:0;width:100%;padding:24px clamp(24px,4vw,60px);
  display:flex;align-items:center;justify-content:space-between;pointer-events:none
}
.brand{pointer-events:auto;font-family:'Archivo Black',Impact,sans-serif;font-size:28px;letter-spacing:-.07em}
.brand span{color:var(--yellow)}
.topbar-meta,.counter{font-size:9px;font-weight:800;letter-spacing:.16em;color:#999}
.counter{color:#fff}.counter span:first-child{color:var(--yellow)}

.scene-nav{
  position:fixed;z-index:100;right:28px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px
}
.scene-nav button{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:#777;cursor:pointer;transition:.3s ease}
.scene-nav button.is-active{background:var(--yellow);transform:scale(1.8)}

.grain{
  position:fixed;z-index:9999;inset:-50%;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:grain .16s steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}
}
.mobile-scroll-note{display:none}

@media (max-width:700px){
  .topbar-meta{display:none}
  .topbar{padding:18px 20px}
  .brand{font-size:24px}
  .counter{font-size:8px}
  .scene-inner{padding:90px 22px 40px}
  .scene-inner-right{align-items:flex-start;text-align:left}
  h1{font-size:clamp(68px,22vw,125px)}
  h2{font-size:clamp(55px,18vw,105px)}
  .hero-bottom{display:block;margin-top:7vh}
  .scroll-hint{display:block;margin-top:22px}
  .service-grid{grid-template-columns:1fr;margin-top:6vh}
  .timeline{width:100%;margin-top:6vh}
  .timeline-row b{width:52px;font-size:7px}
  .timeline-row i{height:18px}
  .contact-inner{justify-content:center;padding-top:82px;padding-bottom:28px}
  .scene-contact h2{font-size:clamp(43px,13.8vw,82px);line-height:.84}
  .contact-grid{grid-template-columns:1fr;gap:20px;margin-top:5vh}
  .end-credit{margin-top:24px}
  .scene-nav{right:15px}
  .scene-nav button{width:4px;height:4px}
}
@media (prefers-reduced-motion:reduce){
  .scene{transition:none}
  .grain{animation:none}
}

/* KOK logo + contact form */
.brand{display:flex;align-items:center;width:min(190px,24vw);height:52px;overflow:hidden}
.brand-logo{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:left center}

.contact-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.contact-logo{width:min(310px,24vw);height:auto;display:block;flex:none;box-shadow:0 14px 50px rgba(0,0,0,.25)}
.contact-grid{grid-template-columns:260px minmax(0,1fr);align-items:start}
.contact-info{padding-right:15px}
.contact-label-spaced{margin-top:22px !important}

.contact-form{width:100%;display:flex;flex-direction:column;gap:13px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.contact-form label{display:block}
.contact-form label > span{display:block;margin:0 0 6px;color:#8e8e89;font-size:8px;font-weight:900;letter-spacing:.16em}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;border:1px solid #333;background:#101010;color:var(--white);border-radius:0;
  padding:11px 12px;font:600 11px/1.35 Inter,Arial,sans-serif;outline:none;transition:border-color .2s ease,background .2s ease;
}
.contact-form textarea{resize:none;min-height:66px}
.contact-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:30px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--yellow);background:#151515}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#555}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-submit-row{display:flex;align-items:center;gap:18px;min-height:38px}
.submit-button{border:1px solid var(--yellow);background:var(--yellow);color:#080808;padding:12px 18px;cursor:pointer;font-size:9px;font-weight:900;letter-spacing:.14em;transition:.25s ease}
.submit-button span{font-size:13px;margin-left:8px}
.submit-button:hover{background:#fff;border-color:#fff}
.form-status{margin:0;font-size:9px;line-height:1.4;letter-spacing:.04em;max-width:430px}
.form-status.success{color:#b8d89a}.form-status.error{color:#ff8d72}
.contact-footer-row{margin-top:18px;padding-top:14px;border-top:1px solid #222;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.contact-footer-row > div{display:flex;align-items:center;gap:12px}
.contact-footer-row .label{margin:0!important}
.contact-footer-row a{font-size:9px;margin:0}
.contact-footer-row .end-credit{margin:0}

@media (max-height:760px) and (min-width:701px){
  .contact-inner{padding-top:76px;padding-bottom:22px}
  .scene-contact h2{font-size:clamp(44px,6.9vw,108px)}
  .contact-logo{width:230px}
  .contact-grid{margin-top:3vh}
  .contact-form{gap:9px}
  .contact-form input,.contact-form select,.contact-form textarea{padding:8px 10px}
  .contact-form textarea{min-height:52px}
  .contact-label-spaced{margin-top:12px!important}
  .contact-footer-row{margin-top:10px}
}

@media (max-width:700px){
  .brand{width:138px;height:40px}
  .contact-heading-row{display:block}
  .contact-logo{width:185px;margin:16px 0 0;order:2}
  .contact-grid{grid-template-columns:1fr;gap:17px;margin-top:3vh;padding-top:15px}
  .contact-info{padding:0}
  .contact-label-spaced{margin-top:12px!important}
  .contact-form{gap:9px}
  .form-row{gap:9px}
  .contact-form label > span{font-size:7px;margin-bottom:4px}
  .contact-form input,.contact-form select,.contact-form textarea{padding:8px 9px;font-size:10px}
  .contact-form textarea{min-height:54px}
  .form-submit-row{gap:10px;align-items:flex-start}
  .submit-button{padding:10px 13px;font-size:8px}
  .form-status{font-size:8px}
  .contact-footer-row{margin-top:10px;padding-top:10px;display:block}
  .contact-footer-row > div{margin-bottom:10px}
  .contact-footer-row .end-credit{font-size:7px}
}


/* Light / dark skin */
html[data-theme="light"]{
  --black:#f2f1eb;
  --yellow:#e4ad00;
  --white:#101010;
  --muted:#666660;
}
html[data-theme="light"] body,
html[data-theme="light"] .scene{background:var(--black);color:var(--white)}
html[data-theme="light"] .youtube-bg{background:#ddd}
html[data-theme="light"] .video-shade{background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.25) 55%,rgba(255,255,255,.65))}
html[data-theme="light"] .service-grid{background:#cfcfc8;border-color:#cfcfc8}
html[data-theme="light"] .service-grid span{background:#e9e8e2}
html[data-theme="light"] .timeline{border-color:#c9c9c2}
html[data-theme="light"] .timeline-row i{background:#d2d2cb}
html[data-theme="light"] .timeline-row:nth-child(2) i:nth-child(2){background:#aaa}
html[data-theme="light"] .timeline-row:nth-child(4) i:nth-child(2){background:#aaa}
html[data-theme="light"] .contact-grid,
html[data-theme="light"] .contact-footer-row{border-color:#c9c9c2}
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form select,
html[data-theme="light"] .contact-form textarea{background:#e8e7e1;color:var(--white);border-color:#c5c4bd}
html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form select:focus,
html[data-theme="light"] .contact-form textarea:focus{background:#fff}
html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder{color:#888}
html[data-theme="light"] .counter{color:#111}
html[data-theme="light"] .scene-nav button{background:#999}
html[data-theme="light"] .grain{opacity:.035}

.theme-toggle{
  pointer-events:auto;
  position:relative;
  width:58px;
  height:30px;
  padding:3px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:30px;
  background:rgba(20,20,20,.45);
  color:var(--white);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:.3s ease;
  backdrop-filter:blur(8px);
}
.theme-toggle:before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--yellow);
  transition:.3s cubic-bezier(.77,0,.18,1);
}
.theme-toggle .theme-icon{
  position:relative;
  z-index:1;
  width:22px;
  text-align:center;
  font-size:11px;
  line-height:22px;
}
.theme-toggle .moon{opacity:1}
.theme-toggle .sun{opacity:.55}
html[data-theme="light"] .theme-toggle{
  border-color:rgba(0,0,0,.2);
  background:rgba(255,255,255,.5);
}
html[data-theme="light"] .theme-toggle:before{left:31px}
html[data-theme="light"] .theme-toggle .moon{opacity:.45}
html[data-theme="light"] .theme-toggle .sun{opacity:1}

@media (max-width:700px){
  .theme-toggle{width:52px;height:28px}
  .theme-toggle:before{width:20px;height:20px}
  .theme-toggle .theme-icon{width:20px;line-height:20px}
  html[data-theme="light"] .theme-toggle:before{left:28px}
}